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

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

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

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more