This is the second post in my series titled Styling on Sites. Last time, we looked at all the theme settings we have available in Stanford Basic theme. This next post introduces the powerful module, CSS Injector, which lets us override the default styles of our site.
CSS Injector is how we take the look and feel of our Sites site to eleven. The CSS Injector module allows you to add CSS code to your site through the admin UI. It lets us create multiple "rules" that can apply to our whole site, or specific pages or sections of the site (based on path). The fundamental way CSS Injector works is by override. This important concept is key in understanding how to theme your Drupal site (either through CSS Injector or through subtheme). Through a process of targetting specific elements on the page, and adding specificity in our CSS code, we can override the base theme's styles and replace them with our own.
For the purposes of this tutorial, we will focus on changing the container colors on the page.
When last we left my Sites website, it looked like this:
My goal in this tutorial is to create some basic styles that override the way the containers are showing up on the page.
First, we want to create a CSS Injector rule. Log in as an admin to your site, and you will find CSS Injector under Configuration > Development > CSS Injector (see below). If you don't see this module here, then you might need to enable CSS Injector from your Modules page first.
Now we are going to create a new CSS Injector rule. I'm going to call it "Container Styles." Here is where the fun part begins. Using a browser such as Firefox or Chrome, we are going to use the developer tools (or Firebug) to "inspect" our page to figure out what the name of the container elements are that we want to override.
In Firefox, click the Firebug icon in the top right (or in Chrome, right click on an element and choose "Inspect element"). Use the inspector and hover over an element, like the main header box, and you will see the code pop up that is relevant to that element. See my example below:
From here, I can see that my header container has an ID of "header" that I can target in my CSS. If you look closely in the Style pane in the inspector, you can see that the #header element is already being overridden by body.color4 #header, so this more specific element is what I need to override. (Styles listed in the Style pane are shown top to bottom, where those on top are more specific and override ones below. In this example, I see #header below body.color4 #header, thus I know that the longer name is overriding the shorter one.)
Now, CSS Injector loads its stylesheets first before the Drupal base theme stylesheets get loaded. This make overriding an element somewhat tricky, but I have one trick that works in most cases.
Instead of using this to specify your header ID:
body.color4 #header { background-color: transparent; }
I use this:
html body.color4 #header { background-color: transparent; }
In this way, I am using the html tag to quickly add a little bit of specificity to the element I am targeting.
So, if I wanted to turn all the container elements on my page a different color (in this case some will be transparent and others teal), here is the code I would place in my CSS Injector rule:
/* Header container */
html body.color4 #header { background-color: transparent; }
/* Navigation container */
html body.color4 #nav { background-color: #4A9AB5; }
/* Main body container */
html #main { background-color: transparent; }
/* Sidebar blocks containers */
html body.color4 .sidebar .block { background-color: transparent; }
/* Footer container */
html body.color4 #footer { background-color: #4A9AB5; }
And here's how it turned out:
In the next article in this series, we will continue to use CSS Injector to spiffy up our site, starting with link styles. Actually, I have something a lot cooler to show you. Open Framework!
Understanding our content hierarchy is extremely important when considering how our website will translate to mobile devices. When using responsive themes (the Stanford theme stack is responsive), we must pay attention to how the "desktop" layout of content will translate to mobile. In the list we created above, we want to make sure this content appears in the order we specified when viewed on a mobile device. To better understand how your responsive theme handles your content, you can use a tool like 
