Author-based post styling described in this help article is broken.
This post will describe a method that works on layout templates and at the end I'll add my little variation. The goal is to be able to add individual styles for multiple authors that includes the complete post, from title to footer. This is one of the differences from the help article, which tries to offer styling for the post-body only.
Three things to note. In this post, I am using character entity references for certain key characters. For example, where you see <, it is coded <. That means that what you need in the template is what you see here, not necessarily what you copy from the post.
The second is, not all templates have the same classes for the post element. I will demonstrate Minima. Others may have more or less classes.
The third is, I include code to add the post ID number as a class. That allows styling by posta: for example a different post background for each post. I will explain at the end how I use that.
Editing a template
Before editing you should backup the template. Dashboard > Layout > Edit Html > Download Full Template and you will have a backup on your computer. Changes are made right on that page, in the template editor.
The method I use, which requires a text editor (not Word or OpenOffice), is to download the template, do the change, save with a revision name. That leaves me with the downloaded template as a backup and the modified template. I browse for and upload the modified template (same page as download.)
One advantage is is's usually easier to search for the code area. Another is the editing window ids as large as my monitor.
Work area - Minima template
Search for:
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
Only one line will be changed:
<div class='post hentry uncustomized-post-template'>
The change makes the class an expression and adds the data tag data:post.author
Here's the new line, which replaces the second line above:
<div expr:class='"post " + "hentry " + "uncustomized-post-template " + data:post.author'>
Here's a couple of things to note. The entire class statement, which includes four separate classes, is wrapped in single-quote (apostrophe). The class names are wrapped in quotes, and the entity " is used. A space is required between class names and that is inside the ". It's "post " and, not "post" with the space outside ".
Now, here's what the four line grouping will look like:
<b:includable id='post' var='post'>
<div expr:class='"post " + "hentry " + "uncustomized-post-template " + data:post.author'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
That line will produce this in the blog.:
<div class='post hentry uncustomized-post-template author_name'>
Save the template and you are ready to add post styles. The styles are added to the bottom of the stylesheet, between the last style's closing } and ]]></b:skin>.
.post.author_name {background-color:#f0ffff;}
.post.author_name h3.post-title,
.post.author_name h3.post-title a {color:navy}
Those will give author_name her own background for the full post, plus a title color. Unique fonts and footer styles can be added.
If you look at my test blog:
ted-another-test
then one of the posts:
tomed-has-arrived.html
you will see one author has a navy title and a post background color and image.
The variation
I do one additional thing that allows me to custi=omize post. It may be in the form of a background image, or maybe just a background color that picks up a color from an image. Each post has an ID and I include that. In this blog, I add an id, which get's styled with #, in others I include it with the class, and that gets a . in the styles.
ID first.
No comments:
Post a Comment