3 Powerful Yet Simple Ways to Customise Frugal

Out of the box Frugal is a very stylish design and for many that’s enough. For those of you so inclined however it is also incredibly easy to modify. The following are 3 simple ways you can customise your Frugal based blog to make it stand out from the rest.

So how is this all possible? Stylesheets and CSS.

Basic CSS Primer

For the uninitiated CSS is a form of code that tells a web browser (Internet Explorer, Firefox, Safari etc) how to style the various elements of your web page, from the size of the fonts to the colour of the background even to where the images should be placed.

CSS is more often than not stored in a separate file called a stylesheet (usually style.css)

Don’t worry if you’ve never done any CSS coding before it’s easy to grasp. Here let me show you; the basic structure of a CSS rule is like so:

selector { property : value; }

A selector refers to the bit of the HTML that the style should be applied to e.g. ‘p’ for paragraph, h1 for header level 1, ‘a’ for anchor (more commonly called a (hyper)link) and so forth. The list is practically endless as you can even define your own selectors, but you get the gist I hope.

The stuff inside the curly brackets ( { and } ) is called a declaration block. Each block can consist of many individual declarations each of which must be separated by a semi-colon.

An individual declaration is in turn made up of a property such as color, or font or margin and so on followed by a colon and then a value that is usually dependant on the property; i.e. you can specify a colour value for font or margin but you can only specify a font name for font.

Don’t worry it gets a whole lot clearer with examples.

Putting it Into Action

Always backup your current style sheet before making any changes.

The first thing to do is to get to your Frugal stylesheet. Log in to your WordPress dashboard and click on “Appearance” then on “Editor”. Your Frugal stylesheet will load up automatically into the main window.

Take a moment to see how Eric has formatted his code into sections. Beautiful isn’t it? Stick with that style of formatting it makes things a lot easier six months down the line. Trust me, I’ve seen stylesheets that would make your eyes bleed

One of the first things you’ll come across is the background colour, lets go ahead and change it.

Change Background Colour

Note that while I – being British – spell colour with a ‘u’ CSS uses the American spelling color. The other thing to note is how colours are actually specified in CSS.

It’s perfectly acceptable to use words like “red”, “green”, “yellow” and so on, your CSS code will be valid and you’ll get the colour you specify. There’s even a few exotic ones in there like “goldenrod” (I always remember that one as I’m a Star Wars geek!)

Very rarely however will you find a stylesheet that uses words to set the colours. More likely you will find 6 digit hexadecimal numbers (numbers 0 to 6 and letters a to f) that correspond to a specific colour. If you’re using the gray background version of Frugal the colour is actually defined as the code #444444

The details of hexadecimal colours are beyond the scope of this blog post, for the time being use this HTML colour chart to pick your colour.

Back to Frugal. Look for the bit of code that reads:

background : #444444; (the actual hex code may be different)

Change the #444444 to whatever colour you’d like. Yes it really is that simple.

Click “Update File”  and go check out your changes by clicking on the link at the top that reads visit site.

Change Link Colour

Scroll on down to the next section in the Frugal stylesheet “Hyperlinks”. One of the first thing’s you’ll note is the slight difference in the syntax of the selector, a:hover and a:visited. These are called “:pseudo-elements” and just as the name implies they are fake elements, i.e. they don’t exist in HTML

Web browsers however are able to identify them by the element they are attached to (the anchor or “a” tag in this case) and can therefore apply the proper style at the proper time and place. “Hover” refers to the act of moving the mouse cursor over a link while “visited” refers to links the user has already clicked on.

The other thing you may note is the use of more than one selector in the same CSS rule separated by a comma (a, a:visited {…})

This is one of the great things about CSS and it’s a short way of applying the exact same style to multiple selectors rather than having to write a separate rule for each one.

Go ahead, try out a few different colours. If you’re really feeling confident try writing a separate rule to change the colour of visited links.

Change Header Logo

You’ll need the custom-logo version of Frugal for this one as the style sheet has been written to take the header logo dimensions into account.

The good news is that you don’t need to mess with the CSS file. That’s right, no need to change anything in the stylesheet for this one. Just keep the filename the same (‘logo.png’) as well as the dimensions and you’re good to go.

The bad news is that you need to be artistically inclined or pay a designer for a logo (I recommend Dave over on Collective Inkwell).

Once your header image is complete just upload and overwrite the existing ‘logo.png’ file.

You’ve now learned quite a bit about CSS, more than you may think. You’ve seen how powerful it is in its simplicity and of course you’ve learned a skill that’s transferable to other web pages not just blogs and Frugal.

If your appetite has been whetted I recommend you try the CSS tutorial at w3schools or Sitepoint’s own CSS Reference

Feel free to link your own customised Frugal blogs in the comments below. Time to show off those mad design skills! Please also post with any questions you may have about CSS, I or someone else will be sure to answer them.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.