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 look and full-on 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:
   
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

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
   • While logged in, hover your mouse over the page's Edit tab
   • Check the lower left corner of your browser window to see the URL pathway provided. It should look something like: https://{sitename}.ucdavis.edu/node/2631/edit
   • Take the node/number information to build your class. 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, 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