Sun 5th Mar 2006
Styling Asides Differently
Posted early in the morning, filed under Blogsome , Smarty Templates , Web Design.I thought I’d already written up a post on this, since I discovered it about a month ago, but apparently not.
Blogsome has a nice little function called {is_asides}. It allows for easy alternate formatting of posts within a category called Asides. So, to have these fancy little numbers, the first thing you’ll need is an Asides category, with a post in it.
Then, in your Post Template, try the following code:
<div class="post {is_aside}{if $is_aside=='true'}Asides{/if}" id="post-{the_ID}">
This sets up the class of the post to also be Asides if it is in that category. I’ll make a note here that this could be done with any category, and just use {the_category seperator=" "}. This would allow alternate styling for any given category, but I wanted to use the {is_asides} Smarty function.
That’s all of the code you need, the rest is just pure CSS.
In my stylesheet, I have the following code, that looks after all of the Aside related stuff:
.Asides
{
border:#E1D6c6 1px dashed;
padding:6px;
}
.Asides .post-info
{
display:none;
}
.Asides .post-footer
{
background:none;
padding-top:0px;
}
.Asides .post-content
{
border-top:none;
padding:2px;
background: url(/images/blockquote.gif) no-repeat left top;
}
The first stanza sets up the border and layout for the actual post. The second hides all of the post-info, such as Date, Title, etc. I later decided to move the Comments Link, else there is no way to view/add comments. The third removes the fancy symbol that appears between posts, and the last one removes the line at the top, and puts some lovely quotes into the background.
I’m still going to tweak this a little: on an individual post page, the next/previous post links overlap with the bottom of the border.
Hey Schickel,
duringe the Fifa World Cup this year, I’d like to style a special category differently, but don’t want to use the Asides function. Since I’m not much into smarty stuff - could you explain to me, how I could do this using the “the_category”-tag as you mentioned it?
Thanks in advance,
diaet/Jan
1 month after the fact.
Use the code:
<div class="post {the_category seperator=' '}">And then to style the category Foo differently, use an entry in your style sheet like:
.Foo {// style information here
}
Note that there may be some issues trying to style a category with spaces in the name, and that if you have any category names that clash with other class names in your template, you may get unexpected results.
1 month after the fact.
Thanks for responding, Matthew!
I must admit, that I tried that first - but it gives something like
post <a href="http://diaet.blogsome.com/category/kuriosa/" title="View all posts in Kuriosa" rel="category tag">Kuriosa</a>as output for the class, which obviously won’t work. I thought I could workaround with get_the_category - but I’m not (yet) smarty enough
1 month, 1 week after the fact.
Ahh, my mistake.
{the_category}creates a link, doesn’t it? What you can try is:{capture name=cats}{the_category seperator=" "}{/capture}{assign var=cats value=$smarty.capture.cats|strip_tags|strip}
<div class="post {$cats}">
1 month, 1 week after the fact.
Hey, cool - exactly what I wanted to reach! Thanks a lot, Matt!
1 month, 1 week after the fact.