Style pagelist menu, add custom css-designer templates Blogger

This tutorial is about styling the Pagelist menu on new, designer templates.
Styling the Pagelist navigation on layout templates is described in this previous tutorial.
If you are not sure what template type your blog is using check your template type first.

All new designer templates, the ones you can style in the Template Designer, have the Pagelist styling included in the template, while older templates don't.
You can customize the existing styles by changing tabs' background, tabs' text color, border and even more.

Note: I applied these changes in Awesome Inc. template. You could have differently named classes in your template in which case this code will not help.

1. Custom style for Pagelist with the Template Designer:

The easiest and safest method for adding new styles to your Pagelist is through the Template Designer.
Here are a few ways to accomplish this:

Step 1. Go to Dashboard|Design| Template Designer, click the Advanced tab in the left menu, scroll down to Tabs text and Tabs background;
Step 2. choose your desired colors in the right panel, than hit enter to see the preview;
Step 3. click the orange button at top-right "Apply to blog" when you are satisfied with the preview. That's all.

If, for some reason you don't see these two options (Tabs text and tabs background) in the left menu, than:
Step 1. scroll down to the last option, Add Css;
Step 2. Choose from the following codes the ones you want to change, copy/paste the code in the box:

2.1. Change the tabs background:

.tabs-outer {background: #FF0000;)

2.2. Change tabs text color:

.tabs-inner .widget li a {color: #FF0000;)

2.3. Change selected link and hover, background and text color:

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {background: #FF0000; color: #ffffff;)

These screenshots show the above styles on Awesome Inc template.All these styles in one place:

.tabs-outer {background: #FF0000;)
.tabs-inner .widget li a {color: #FF0000;)
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {background: #FF0000; color: #ffffff;)

Step 3. Replace the code in red with your preferred color code;
Step 4. Now, hit enter to see the changes in live preview;
Step 5. When satisfied, click Apply to blog tab at the right,
Step 6. Go back to your blog and see the final result.

Still not working?

In some cases with certain templates, you may see this message in the template designer: "not applicable for this template" or when the template designer is not working for you, you can change the styles of your pagelist in the template.

2. Style the pagelist by changing the Css in the template:

There are two sections where you can customize the styles of the pagelist: background, tabs, borders and more. The result is the same, whether you apply the changes described at a). or b). bellow.
a). by changing the value of the variables in the very first part of the template

1. Back up your template!!!
2. Go to the Layout | Edit HTML tab for your blog
3. Don't check the box to Expand Widget Templates
4. Look for this code:

<Group description="Tabs Text" selector=".tabs-outer .PageList">
<Variable name="tabs.font" description="Font" type="font"
default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="$(body.text.color)"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(tabs.text.color)" value="$(tabs.text.color)"/>
</Group>

<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#141414" value="#333333"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#444444" value="#444444"/>
<Variable name="tabs.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="$(widget.border.color)"/>
</Group>

5. Replace the value of the variables (in red), in the code above with the hex value (eg. #ffffff ) of your chosen color.

b). Change the color codes in the CSS of the template is another option:
- back up your template!!!! (Settings|Export blog)
- find this piece of code:

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

- Replace the code in red in the above code with the hex value (eg. #ffffff ) of your chosen color.
- Adjust borders, padding, margins in this code, if you wish, the description of each value is obvious in the code.
- Preview first and save your edits when you are satisfied. Remember, you can always clear your edits, if you don't like the new look.

The downside of the default pagelist is that it only shows links to your static pages.
Update: Many things have change since I first wrote this tutorial. Now we can add external links to the pagelist menu as well or we can replace it with a custom menu.