Overriding Sitewide Theme Styling

What is sitewide styling?

Every Drupal site receives sitewide styling instructions from its theme's CSS files. Sitewide styling may include rules to set:

  • Layout (positioning and sizes for headers, columns, footers, and blocks)
  • Text formatting (fonts, colors, sizes, line-height, margins)
  • Backgrounds (colors, images, gradients)

Sitewide styling vs. one-time overrides

  Sitewide Styling One-Time Overrides
Purpose Added to style new features/blocks Added to style an element appearing on one page only
Where Stored in theme CSS files (external stylesheets) Stored in a single page's HTML code within any field that uses a text format of Full HTML with CKEditor or Full HTML (inline styling)
Scope Rules will apply to any part of the site that matches the rule's selection criteria Rule will apply only to the element where the rule is defined
Who does it Changes are made by an administrator Changes are made by anyone with access to the page's HTML Source code
Helpful to know HTML, CSS, Drupal theme basics Basic HTML tags and CSS declarations

I want a sitewide style change (in an external stylesheet)

If someone at your library serves as a local administrator for your library's website, contact him/her about the change.

If SCLS staff manage your site's theme, contact the SCLS Help Desk.

I want to make a style change for just one page (using inline styling)

Inline style changes may be made in HTML source code of any field that uses a text format of Full HTML with CKEditor or Full HTML (inline styling).

  1. View the field's HTML source code.
  2. Locate the HTML tag you want to modify with CSS styling.
    Example: <p>
  3. Add a style attribute to the HTML tag.
    Example: <p style="">
  4. Add CSS declarations within the style attribute.
    Example: <p style="color: red;">

Learning More about HTML and CSS

There are many sources for HTML and CSS training. Some tutorial sites: