• Share this article:

CSS modifications

The web browser (and search engines) need to know what primary language your webpage is presented in. This information can be used to adjust search engine results (to prioritise the order of pages for particular languages) or to help translation tools quickly identify what language a page is written in. It could also be used to help assistive devices (like screen readers) correctly pronounce words, when reading a page aloud.

Identifying elements to target with CSS

In order to write new CSS, we have to select the elements we want to apply the styling to. Just about every element you see in a previewed theme within RapidWeaver has a name applied to it. These are more widely known as selector names. ThemeFlood themes use three types of common selector names to identify individual elements:

ID names are unique elements which only appear once on the page. You will typically see something like id="name" in the HTML code Class names are elements which may appear multiple times on the same page. These are often denoted by class="name" in the HTML code HTML tags like headings, list items, links and other formatting can also be selected and have CSS applied to them By far the easiest way to get these selector names is to use the built-in developer tools in a web browser. This is commonly referred to as the 'web inspector' or 'web console'. Most modern web browsers support these tools in one form or another. The two most popular developer tools available right now are the Webkit Inspector in Google Chrome and the Firebug plugin, available for Firefox and Safari.

Using one of these tools to get selector names is pretty easy. In RapidWeaver, choose to preview the current webpage in one of your web browsers with developer tools enabled. In the new browser window that opens, right-click the desired element in the page you want to change. From the popup window, select Inspect Element or Inspect with Firebug. At this point, you should see a window or panel open (like the one pictured below), showing the page source code. This is your route towards seeing the structure of the page and getting reliable selector names, which you can later use for writing your own CSS code.

The web inspector

If you are using Google Chrome, do read this brilliant guide on using the Webkit Inspector in Google Chrome. This is great for beginners and equally goes into plenty of detail, covering many aspects of the Webkit Inspector.

Straight-away when you start seeing page source code in a developer tool, you can start to see patterns and selector names in the code. Hovering your mouse over a page element will often tell you’re the name of an element. Likewise the WebKit Inspector makes things slightly easier again still, by displaying a breadcrumb at the bottom of the window. This breadcrumb gives an alternative visual representation of an element within the rest of the page. This is super-useful, in that it also tells you the names of the elements you select - especially useful for the next section. You can copy element names from this breadcrumb bar, by right-clicking on them and clicking Copy from the menu.

Writing custom CSS Code

This is what most CSS code looks like, universally in any publishing platform:

#elementName {
    color: #FF0000;
    text-decoration: underline;
    font-size: 18px;
}

If you are applying CSS code to an ID element, you start the selector name with a hash (#) character. If you are applying CSS code to a class element, you start the selector with a period (.) full stop character. If you are identifying HTML elements like heading tags, then no characters are required on the selector name. One of the nice things about CSS is that it is possible to apply the same code to multiple selectors (multiple page elements), simply by adding them in the form of a comma-separated list like this:

#elementName1,
#elementName2,
#elementName3,
#elementName4,
#elementName5 {
    color: #FF0000;
    text-decoration: underline;
    font-size: 18px;
}

The actual style properties you want to apply go inside a pair of curly brackets, as shown above. There are hundreds of possible style properties you can use, and a website like W3Schools provides an excellent insight into most of them.

Now let's assume that you wanted to apply some extra padding to the left of the site title and make the text bold. The first step is to get the selector name, which the WebKit Inspector breadcrumb suggests would be this:

h1#siteTitle a {

}

We read the WebKit breadcrumb bar from right to left, and commonly you only need to use the first two or three selector names shown. In this instance, the selector name is formed of an HTML element (H1) an ID (#siteTitle) and a further selector, this time an anchor tag (a). Into the curly quotes goes the CSS properties to make the required style change:

h1#siteTitle a {
    padding-left: 20px;
    font-weight: bold;
}

Custom CSS code can either go in the RapidWeaver Page Inspector (within the custom CSS box, pictured below) or you can open the theme contents and place it in the custom.css file (which will apply the code automatically to all pages using the theme). At this point (depending on the theme being used and the element you are restyling) you should start to see changes take effect.

Custom CSS code in the RapidWeaver Page Inspector

In RapidWeaver 6 and later, you can also apply CSS code in the global CSS box. This code will take effect on all pages of the project:

RapidWeaver global CSS

In another example, lets try styling all H3 HTML tags within the theme content container and apply a border line above them. This would typically be the sort of code to use:

#content h3 {
    border-top: 1px solid #FF0000;
}

This CSS code above tells a web browser to apply the border style on all H3 tags, specifically within the theme content container. This means that a web browser won't go mad and apply the same styling to all H3 headings in the entire page! Or as one final example, code similar to this could be used to make links in the footer red:

#footerContent a {
    color: #FF0000;
}

This section on CSS customisation really is the tip of the iceberg. There are many thousands of possible options; not only in selecting elements, but also the range of styles that can be applied to those elements. It is best not to start too ambitious and just begin with the absolute basics of CSS. One of the best places to get started is W3Schools, a free learning website which covers everything from basic syntax right up to advanced code editing. Getting the selector names is often the trickiest part (even the experts can run into great difficult sometimes in complex setups). The rest of the code like properties and values are typically copy-and-paste.

Forcing CSS code to take effect

If you find that CSS code applied to a RapidWeaver theme takes effect in the Custom CSS box, but not the custom.css file (or vice-versa) this might be because the code you are trying to use is in the wrong part of the cascade, and is being overridden by some other CSS code further down the cascade. There are a couple of basic things you can do, to ensure your custom CSS code takes priority.

The first thing to try is to prepend div selector names onto the existing names of divisional containers like this:

div#myBox {
    color: #00FF00;
}

div.pageHeading {
    border-bottom: 1px solid #666666;
}

The addition of 'div' at the front of the ID or class selector names will help override CSS code. Basically because you are targeting a more specific element, so a web browser increases the priority factor of the code. If the above does not work or you are trying to override the styling applied to HTML elements (like heading tags or links) you may need to use !important declarations instead:

#myBox {
    color: #00FF00 !important;
}

.pageHeading {
    border-bottom: 1px solid #666666 !important;
}

These !important declarations are supported in all web browsers with CSS level 2 support. They tell a web browser that the particular property and value marked as important absolutely must take priority over and above any other conflicting CSS code lower down in the cascade.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.