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.

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!

Comments

Popular posts from this blog

Make my background image responsive

Filter out certain labels from my Blog Homepage

Change the landing page of my blog