Web Hosting

Thesis Tips: Design Options – Colours and Fonts

Thesis ThemeUpdate – 17 July, 2012

In Thesis 1.8.4 the concept of ‘Design Mode’ was introduced.

If you make design or layout changes but they don’t show up when you check the front of your site, you’re probably not using Design Mode.

See how to fix it here.

Original article starts here:

Although I’m focusing primarily on the Design Options screen in this article I do have to refer to the Site Options screen occasionally.

Please read carefully in those parts as the names of different sections are quite similar and can be confusing 🙂

The Design Options screen gives you point and click control over a wide range of visual and style features on your site.

For further control, and to really put your personal stamp onto a site, you also have a custom CSS stylesheet, which is covered in a separate article.

Here we’ll look at the fonts, colours and other style controls in the Design Options screen.

In the interests of efficient coding you should achieve as much of your styling as you can through this screen. Only use the custom CSS stylesheet for those extra tweeks that you can’t achieve here.

So, you access your Design Options screen through the Thesis sub-menu:

Design Options Link

Clicking that link brings up a screen on which the first section is ‘Fonts, Colours and More’.

Each sub-section has a ‘ + ‘ to the right, and clicking this will expand the menu of options.

Body and Content

Body Content

The first option sets the default font for the site and the top 8 fonts in the list (marked with ‘ * ‘) are web-friendly, meaning that they’ll display consistently in the widest range of browsers.

Below that are the basic, site-wide colour settings for the site background, page background, text and links.

When you click on one of the small panels a colour palette opens up (see above), so you can select your colour visually.

Alternatively (and this is my preferred method) you can use a colour schemer (there are lots of free ones available online) to choose a primary site colour and let the colour schemer come up with complementary colours.

From the colour schemer you can capture the colour hex codes, and type them into the small panels above (without the preceding ‘ # ‘) to define the colours for the site.

The last two check boxes in this section enable you to insert dividing lines between the different sections on the page and add a shadow effect to each side of the main content area.

Content Area

Content area fonts

This section enables you to select the primary font size for your site. This is the font size that will be used for the content of your posts and pages.

One of the really neat things about Thesis’ coding is that once you’ve selected the primary font size all other font size variations are defined in relation to this through the ’em’ unit.

The starting point is 1.0em and a smaller font size is defined as, for example, 0.9em.

Because font sizes are defined in relation to the primary font size, this ensures that they remain in the correct proportions across the widest range of browsers.

‘Hard coding’ font sizes (e.g. 16px) can lead to distortions in the relative size of fonts in different browsers.

Navigation menu

Navigation Menu

Here you can select the font and colours for the various attributes in your navigation menu.

Most of the options are self-explanatory, but a couple may need clarifying: the options called ‘parent’ refer to the parent page (link) in cases where you’ve used a drop-down menu.

Similarly, the item called sub-menu width refers to the width of the tabs that drop down.

Just a note here: although the font size is defined as a fixed size (12pt on this screen) it’s converted to the ’em’ unit I referred to above when you select a size and save.

Header area

I have to refer to the Site Options screen in this section – read carefully!

Header Area

You only need to define settings in this section if you’re not using a header image or graphic.

If you’re using one of those then you need to go to the Display Options section on the Site Options page and uncheck both check boxes in the Header sub-section.

If you’re not using a header graphic then you can set the font type, colour and size for your site title and tagline here.

Headlines and sub-headers

Headlines and Sub Headlines

The headline is the title of your post or page (usually H1) and the sub-headlines are the H2 and H3 titles.

Here you can select the fonts and colours of each, and the primary size for your main title.

Bylines and Post Meta data

Again, I have to refer the the Site Options screen in this section.

Bylines and Post Meta data

The post meta data includes the author name, date of the article, the category it’s in and other information that’s displaid under the title of each article.

You can select all, some or none of this data to be displaid in the Bylines section under Display Options on the Site Options screen.

Many people prefer not to display the date on which an article was published. If this is you, then you can turn off the display of the published date in the Bylines section on the Site Options screen.

If you choose to display any of the Byline data then you can select the font, font size and font colour in the Bylines and Post Meta Data section on this screen (Design Options).

The last 4 items under the Fonts, Colours and More section (Code, Multi Media Box, Sidebars and Footer) all offer the same 3 controls: the font type, colour and size to be used in each area.

OK, that covers the settings under this section.

Again, in order to achieve the most efficient site coding possible you should do as much of the colouring and sizing as you can in this section.

There are, however, some occasions where you’ll need to use the custom CSS stylesheet – for example if you want to make your post titles bold.

But be sure to only define attributes in the custom stylesheet that you can’t define here.

Also note that if you do define something in the custom CSS file that can be defined on the Design Options screen (for example font size), then the setting in the custom CSS file will take precedence.

This means that if you subsequently attempt to make a change in the Design Options screen (change the font size) it won’t have any effect unless you first delete the font size entry in the custom CSS file.

If you’re not already using Thesis you can find it here.


Martin Malden

Web Hosting