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

Post a Comment

Popular posts from this blog

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Add snippets to the Emporio theme

Image
A lot of people love the image-focused look of the newer Emporio template. This article explains how to tweak your template's XML to add a short snippet to the Emporio posts - unfortunately, there's no easy way to add in snippets for Emporio, without customizing the markup. But, if you're feeling brave, head to: Theme -> Edit HTML -> Jump to Widget -> Blog 1 If you search for 'snippet-container', you'll come across: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> </div> <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div> Notice that it's just got the title. You could change it to add something like: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.
Read more