Customizing each post page based on a tag in Blogger

I came across a Post post setup that showed how to create each blog post based on a shortcut that was posted. That is, every post with the same tag will automatically have the same design.

But the problem is that I cannot customize the external content (main wrapper) because the "label" is only defined as the content area of ​​the message. I like the different colors of the header and other outer skin for my labels.

I will give the code that I used

replace the second occurrence <data:post.body/>

(between the 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 styling part of your template, apply the style by specifying the div class. Here's an example that will place a background image for all posts tagged "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 on stack overflow could help me, since I'm just a student.

+3


source to share


1 answer


I'm afraid you will have to stick with the javascript (like jquery) implementation of 'parent', i.e. http://api.jquery.com/parent/

When it comes to the CSS spec, the parent selector does not exist in either CSS2 or the CSS3 spec. You can play around with the "select X element parent of Y" (Y> X), but that's it for now.

Please see the list of available selectors http://www.w3.org/TR/css3-selectors/#selectors and you may find something useful



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

!div p{}

      

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

0


source







All Articles