Skip to main content
Drupal Documentation for SCLS

Main navigation

  • Home
  • How-To Info for Library Staff
  • Drupal 10
  • Help

Breadcrumb

  1. Home
  2. How-To Info for Library Staff
  3. Creating and Editing Website Content

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:

  • HTML Dog Tutorials
  • W3C CSS Tutorial Starting with HTML + CSS
  • About.com HTML Tutorial and CSS Tutorial

Book traversal links for Overriding Sitewide Theme Styling

  • Forcing Links to Open in a New Window or Tab
  • Up
  • Accordions (show/hide sections)
  • Managing Accounts for Your Drupal Site
  • Images
  • Creating and Editing Website Content
    • Anchor Links ("Bookmarks")
    • Disable/Enable Rich-Text
    • Display Differences Between the Editing Form and Published Content
    • Eliminate problem link and image references
    • Embed Codes
    • Forcing Links to Open in a New Window or Tab
    • Overriding Sitewide Theme Styling
    • Accordions (show/hide sections)
    • Adding menu links
    • Glorious Guide to Keyboard Shortcuts
  • Uploading Files to Media
  • Changing Menu Links
  • Creating Photo Albums & Galleries
  • Folders, Directories, and File Structure
  • Blocks
  • Paths and URL Aliases
  • Configuring Site Information
  • Developer Permissions
  • Homepage Variations
  • Events/Programs with repeating dates
  • Registration for Events/Programs
  • What is Cron?
  • Avoid mixed content warnings (HTTPS/HTTP)
  • LINKcat Title List (Experimental)
  • Performance settings: Cache pages for anonymous users
  • Slick Carousel
  • Uploading Files with IMCE

Tags

accordion (1)
account (2)
anchors (1)
blocks (0)
cache (1)
carousel (2)
CKEditor (5)
configuration (1)
content types (1)
CSS (1)
disable rich-text (1)
Drupal 10 (15)
Drupal 9 (16)
email (2)
embed code (1)
Entity Registration (5)
events (6)
file browser (1)
files (4)
files media (1)
folders (1)
formatting (2)
front page (3)
Google Analytics (1)
headings (2)
HTML (1)
iframe (2)
images (4)
imce (1)
Layout Builder (3)
link a pdf (1)
links (5)
login (1)
media (2)
menus (3)
nodes (1)
openid (1)
paste as plain text (1)
paths (4)
performance (1)
photo albums (1)
photo galleries (1)
redirects (3)
registration (5)
remove format (1)
repeat dates (2)
reports (1)
revisions (1)
sidebars (0)
site name (1)
slogan (1)
source (1)
sticky (2)
text formats (1)
themes (1)
toolbar (2)
URL aliases (4)
Webform (2)
widget (1)