CSS Editor

What is the CSS Editor?

The CSS Editor is a single Cascade Stylesheet (.css file) that has been added via an interface in your site's Appearance section. This is the middle-ground between using the SiteFarm's default looking and sub-theming, which is more involved and requires knowledge of development.

The CSS Editor will allow for simple modifications to the look and layout of your site. It will allow you to target styles globally or by page.

Users must be a Site Manager in order to use this feature.

Where to find the CSS Editor

  1. Navigate to Manage » Appearance.
  2. Locate the SiteFarm One (default theme), and click its Settings link. Note: the CSS Editor feature will be unavailable if you have implemented a custom sub-theme.
  3. Scroll to the bottom of the page and look for the CSS EDITOR label. You will see this on your screen:
    Screenshot of the css editor settings.
  4. Use the following settings:
    • Enable or disable custom CSS - turn the feature on or off
    • Use plain text editor - remove any formatting from the CSS window. The default look provides formatting for improved readability
    • Enable auto preview - this will open up a window to your homepage along with a Preview path field in case you would like to review the potential effect on a specific page. 
  5. Type or paste in your CSS and review the effect.
  6. Click Save configuration to finish.

Example

Example of css styles being applied to a page

 

Can I create custom classes?

No. The CSS Editor will allow you to overwrite and/or target existing IDs and classes. This is offered as an intermediate step between the default offering and full sub-theming, the latter of which will allow you to introduce custom classes.

Selecting your CSS target
  1. Specific pages
    • Use your browser's interface or mouse right-click option to view your target page's source code.
    • Do a search of the page, using Cmd+F or Ctrl+F, for 'shortlink'. You're looking for an entry that looks like <link rel="shortlink" href="/node/2631" />
    • Take the information from the href section to build your class information. In this example, your class would be: .node-2631
  2. Blocks
    • When targeting an individual block, look for something like this in the code:
      <div data-quickedit-entity-id="block_content/21" id="block-mh5thannualhumangenomicssymposium" class="category-brand--cork-oak l-sibling-grid--half contextual... You will want the ID information bolded in the above example.
  3. Homepage
    • .path-frontpage
  4. Content types
    • Use your browser's interface or mouse right-click option to view your target page's source code.
    • Do a search of the page, using Cmd+F or Ctrl+F, for 'body'. Look for a class name resembling one of the following:
      • page-node-type-sf-event
      • page-node-type-sf-article
      • page-node-type-sf-page
      • Your custom content type name
    • The class will, in this case, might look like: .page-node-type-sf-page
  5. Regions
    • Use your browser's interface or mouse right-click option to view your target page's source code.
    • Do a search of the page, using Cmd+F or Ctrl+F, for 'region-<name>'. Examples include:
      • region-content
      • region-footer-credits
      • region-sidebar-second
  6. Views
    • The class pattern is .path-{view-name}
    • Can be located in the body tag
Terms of Use
Undertaking the use of this feature presumes you are already proficient at writing syntactically correct CSS files; the SiteFarm team does NOT offer training, troubleshooting, or support in the event your custom CSS breaks something on your site or you have questions for how to accomplish a design goal. Your use of the CSS Editor signifies your understanding and acceptance of this requirement, and your agreement to abide by the standards set for branding, accessibility, and web best practices. Failure to comply will result in this feature's disablement on your site.

Tags