Make post title hyperlinks colour the same as the title colour
In the template designer, some templates have a different colour for hyperlinks than for the title. We can re-use the same variable value in order to override the hyperlink colours with the post title colour.
Note: This example is done for the Simple template. CSS variables and definitions may be quite different in other templates, but the same concepts apply.
Note: Variables with type 'color' will have a color editor surface in the Template Designer, making it easy to select a colour and see what it looks like. You will find your variable under Template => Customize => Advanced.
Note: This example is done for the Simple template. CSS variables and definitions may be quite different in other templates, but the same concepts apply.
Change the Skin CSS
Skin CSS can be found when editing your template's HTML, under Template => Edit HTML.
The skin for a template is near the top, in the <head> element.
Add a variable for post.title.color
Find the variable group relating to the class of the post titles - for example, in 'Simple' templates, the variable group has description="Post Title".
Add the new variable.
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="post.title.color" description="Color" type="color" default="#2288bb" value="#2288bb"/>
</Group>
Add a new variable of type color for the post.title.color
Note: Variables with type 'color' will have a color editor surface in the Template Designer, making it easy to select a colour and see what it looks like. You will find your variable under Template => Customize => Advanced.
Add CSS to apply the variable to the post titles
The selector attribute of the group variable is used to highlight the area in the preview relating to the variables in the group. It also provides a hint as to what the CSS class we want to modify is.
Find 'h3.post-title' in the CSS, and add a color attribute with the variable's value. Also add the selectors for the nested anchor tags to the selector list.
h3.post-title,
.comments h4,
h3.post-title a,
h3.post-title a:hover,
h3.post-title a:visited
{
font: $(post.title.font);
color: $(post.title.color);
margin: .75em 0 0;
}
Add CSS for anchor tags inside the post titles, so that the variable values are applied.
Select your colour in the Template Designer
Template => Customize => Advanced
A Color selector for the post.title.color field
You should now see a 'Color' selector for your new variable in the Template Designer. Select your value to see what it looks like.
Happy Blogging!
Happy Blogging!
Comments
Post a Comment