Customizing each post pages based on label in Blogger

Question

I came across a post Label-based Post Customization which showed how to design each blog post based on the label it was posted. That is every post with the same label will automatically have the same design.

But the problem is with that I am unable to customize outside the post content(main wrapper) because the 'label' is defined only as the post content area. I like to have different color of the header and other outer wrapper for my labels.

I will give the code I used

replace the second occurrence of <data:post.body/> (between span attribute) with this

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<!-- Only using the last label -->
<div expr:class='"label" + data:label.name'>
<p> <data:post.body/> </p>
</div>
</b:if> 
</b:loop>
<b:else/>
<div class='labelNone'> <p><data:post.body/></p> </div>
</b:if>

Then In the style portion of your template, apply a style by specifying the div class. Here's an example that will put a background image for all posts with label "tech":

<style type='text/css'>
div.labeltech {
background-image: url(&quot;http://yoursite.com/Wallpaper-Widescreen.jpg&quot;);
background-repeat: no-repeat;
background-position: bottom right;
display: block; 
}
</style>

It would be very nice if the knowledgeable members at stack overflow would help me since I am only a student.

You could clone a class of one div and then add it to another div using jQuery. This will then enable you to apply the class out of scope. — Kevin Lynch
@vector ,If I use the following for it, $(function(){ var $sharetitle = $('.sharetitle').clone(); $('.labeldummy').html($sharetitle); sharetitle is the div i want inside the label "dummy". But I need to give a different color(with respect to my main page) to the sharetitle on the label named dummy, so if I clone the div id=sharetitle, I will get the same sharetitle as my main page-Which I need to be different. — Amal
Remove all CSS in b:skin and put all css in label conditional tags...perhaps it would work — Rahul Shah

Filip Jesiolowski Filip Jesiolowski · Accepted Answer · 2014-10-16T12:42:34

I'm afraid you will have to stick to javascript (for example jquery) implementation of 'parent' ie. http://api.jquery.com/parent/

When it comes to CSS specification there is no parent element selector neither in CSS2 nor CSS3 specification. You might play around with 'select X element whose parent is Y' (Y > X), but that's all there is for now.

Please, take a look at the available selectors list http://www.w3.org/TR/css3-selectors/#selectors and maybe you will find something useful

On the bright side, there are plans to create something like that

!div p{}

but so far, it is still a draft and no browser supports it http://www.w3.org/TR/selectors4/#subject

Customizing each post pages based on label in Blogger

1 Answers