How To Customise Simple Blogger Page Tabs

Learning HTML and CSS can be quite the headache. I know it, I've done it. Alas, it doesn't have to be so, learning how to code can actually be a walk in the park when you know what the heck it is you're actually reading and writing. Through the Basic Blogspot CSS series, I'll be taking you through the code behind your blog, from top to bottom, and how to customise the heck out of some of the most important aspects of your design. Today, I'll be teaching you the code behind your page tabs and the different ways you can style them.

Getting To Grips With Blogspot Page Tabs

Blogspot already has some customising options when it comes to your tabs. You can easily change the tabs text style and colour, and the background and separator colours, but aside from that, the options are limited, and limitations are not good. You need to kick those limitations out the door and get to grips with some actual code if you're going to create something awesome. So, what code is worth knowing concerning your tabs?

div.tabs-outer	This code controls the outer area your tabs lie in within your design.
div.tabs-inner	This code controls the inner area your tabs lie in within your design
.tabs-inner .PageList ul li	This code controls the tabs themselves.

These three codes are the bare basics when it comes to coding your tabs area. Once you know what these codes are and what part of your tabs they control, the sooner you can start to understand what you want to achieve, and what code you need to use to create your perfect look. Now, let's move onto the fun part.

Make Sure You Back-Up Your Template Before Doing Anything!

Make your way through to your Template tab in the sidebar, moving along to Customise just below your blogs preview. Before we start playing with CSS, make sure in your tab options, you have your text options set to black, and your background options set to transparent. Move onto the Advanced area, and then scroll your way to Add CSS. This my friends, is where the magic happens.

First, lets take a look at the 3 different styles of tab you can have. Click to view larger size.


In the first example, you can see how the div.tabs-outer code controls the entire tab area, stretching from left to right, covering the entire width of the screen. This style is pretty common among a lot of Wordpress blogs and is usually found above the header (something else I'll show you a little later on). In the second example, you can see how the div.tabs-inner code controls a smaller area surrounding the tabs, shortening the area to the same width as your blog and it's entire content, sidebar included. In the third example, you can see how the .tabs-inner .PageList ul li code controls the individual tabs, separating them from one another, a style similar to my own.

Now we've got the look, it's time to start playing with some code, but first, what does specific code do?

background	This changes the background colour of an element.
padding	This clears the area around an element within the elements margins.
margin	This clears the area around the outside of an element.
font-size	This changes the font size of an element.
font-weight	This changes the weight of the font in an element.
text-transform	This changes the style of the font in an element.
border-radius	This changes the edges of an element making them rounded.
transition	This controls the speed :hover effects come into play.

Now you know what different types of code change and control in terms of design, it's time to play around.

Creating Page Tab Styles With CSS

To achieve the first example, start with the following CSS:

div.tabs-outer {
background: #HEX-CODE;
}

From this starting point, you can incorporate different design elements that take your fancy.

You could, for example, decide to change the background colour, the padding around the tabs, the space between each tab and centre the tabs themselves. Your CSS would look something like this:

.PageList {text-align:center !important;}
.PageList li {float:none !important; display:inline !important;}

div.tabs-outer {
background: #ff10ff;
padding: 10px;
}

.tabs-inner .PageList ul li {
margin-right: 40px;
}

The above code would result in this look.


Let's explain a few of the details..

The first block of code controls the aligning of your tabs to the centre.
The second block of code controls tabs outer design; the background colour and space around tabs.
The third block of code controls the tabs inner design; the space between each individual tab.

To achieve the second example, start with the following code.

div.tabs-inner {
background: #e6e6e6;
}

If you were to use the same example CSS code used in the previous example, the only change you'd make in the code would be switching out outer for inner, resulting in this look.



The third example is a little more difficult to achieve, but is oh so worth it. Start with the following CSS:

.tabs-inner .PageList ul li {
background: #e6e6e6;
padding: 0px 10px;
margin: 5px;
}

Now, because this style allows you to view each tab individually, you can add more design elements in the code, resulting in a better look. Using most of the CSS code used in previous examples, you could use CSS like this:

.PageList {text-align:center !important;}
.PageList li {float:none !important; display:inline !important;}

.tabs-inner .PageList ul li {
background: #ff10ff;
padding: 10px 40px;
margin: 5px;
border-radius: 10px;
}

You could remove the border-radius: 10px; for more square tabs, but the above code would result in this:

How To Utilise :Hover Effects For Page Tabs

Alas, there's still more ways you can customise your tabs, with :hover effects.

I mentioned briefly earlier about :hover effects and how they relate to transitions.
This is where we learn more about that.

When you hover over something, 9 times out of 10, there's an effect in place that changes the look or style of the something your hovering your cursor over. Nellie and Co. has effects that change the width and shape of an object, that change the transparency of an object, or the colour of an object, and all these are achieved by creating a :hover effect for your element.

Let's go back to style example one.

For this style, you would need to add CSS coding below the previous code like this:

.tabs-inner .PageList ul li:hover {
background: #6e6e6e;
padding: 10px;
margin-right: 20px;
transition: all 0.5s;
}

The hover effect would look like this:



The CSS code you'd need to add to create a ;hover effect for style two would be like this:

.tabs-inner .PageList ul li:hover {
background: #6e6e6e;
padding: 10px;
margin-right: 20px;
transition: all 0.5s;
}

The hover effect for this style would look like this:



The CSS :hover code you'd need to add for style three is much more simple, like this:

.tabs-inner .PageList ul li:hover {
background: #6e6e6e;
transition: all 0.5s;
}

The hover effect for that style would look like this:



:hover effects don't just have to be a change in background colour.

By changing the padding values to: padding: 10px 20px; - you could alter the size of the tab box, or by changing the :hover value to a:hover, you can change the text colour by using a hex colour.

One more piece of coding that you may like to know..

You can move your blog header to below your page tabs.

Once you've saved all your CSS, come out of the customising area by clicking < back to Blogger and then go to your HTML next to Customise. You'll be met will a wall of code. Wowzer indeed!

Do not panic, the next step is easy as pie and will allow you the flexibility to either have your tabs above your blog header, or below, as you can see on Nellie's design.

Once in, press Ctrl and F on your keyboard, and a little search box will appear on the right hand side at the top of all the code. In that search box, copy and paste in the following:

<div class='region-inner header-inner'>

Directly underneath that code, you'll see the following:

<b:section class="header" id="header" maxwidgets="1" name="Header" showaddelement="no">
<b:widget id="Header1" locked="true" title="Nellie and Co. (Header)" type="Header">

Swap out 'no' for 'yes' and 'true' for 'false', then save your template.

Now that you're able to move your header below your tabs, your blog could now look like this:

Phew, That Was a Lot To Take In, Right?

Hopefully, you're now not only a little more up on what different coding values mean and do, but you should also now know how to customise your Blogspot Page Tabs simply and effectively. There are many other ways you can customise your tabs, and you'll learn these with time and confidence, and the longer you learn CSS for, the more you'll come to understand. For colour hex codes, check out either colour-hex.com or colorhexa.com, and for more CSS coding options, check out w3schools.com.

Did You Know How To Customise Page Tabs on Blogspot?