
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:
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.
a). by changing the value of the variables in the very first part of the template
- back up your template!!!! (Settings|Export blog)
- find this piece of code:
- 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.
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:
These screenshots show the above styles on Awesome Inc template.
All these styles in one place:
Step 3. Replace the code in red with your preferred color code;
.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.

.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;)
.tabs-inner .widget li a {color: #FF0000;)
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {background: #FF0000; color: #ffffff;)
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:
b). Change the color codes in the CSS of the template is another option: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.<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>
- 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.----------------------------------------------- */
.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);
}
- 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.
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.
0 comments:
Post a Comment
Thanks for taking the time to comment.
Please don't leave link in your comment. Thank you.