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 StylingOne-Time Overrides
PurposeAdded to style new features/blocksAdded to style an element appearing on one page only
WhereStored 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)
ScopeRules will apply to any part of the site that matches the rule's selection criteriaRule will apply only to the element where the rule is defined
Who does itChanges are made by an administratorChanges are made by anyone with access to the page's HTML Source code
Helpful to knowHTML, CSS, Drupal theme basicsBasic 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 2

  • Forcing Links to Open in a New Window or Tab
  • Up
  • Accordions (show/hide sections)

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)