CSS Asides
-
body.home div.category-asides * {
display:inline;
}body.home div.category-asides h2.entry-title,body.home div.category-asides div.entry-date,body.home div.category-asides span.entry-author,body.home div.category-asides span.entry-category,body.home div.category-asides span.metasep {
display:none;
} -
Add that to your stylesheet and any post in the Asides category will have a more compact look when viewed on the home page.
-
Nice, Andy! Thanks for sharing the code. And remember, you could do this with any category. Just replace “asides” with your category of choice.
-
-
-
@nosy –
the second part of what he posted breaks down like this:
body.home– we only want to hide titles on the front page. the single page will ignore this stuff, because it will have a different body class (the stuff after the period)div.category-asides– this part singles out the category named asides. you could change this to ‘dailies’, or anything you want. just name your category appropriately.h2.entry-title,– this is the element we want to hide. this one is the title of the entry. the comma means that we’re going to do the same thing to the next element in our list.{ display:none; }– this ‘turns off’ everything in our comma seperated list.as far as the first part of what he posted….
yeah, andy, what does that do? ;)
that asterisk scares me. is that a wildcard? -
I’m learning by immersion so thanks for the explanation kamel. I figure if I keep dog-paddling near the shore and observing the swimmers and coaches I may eventually be able to swim in the open cyber sea and even custom build myself an island. ;) lol
-
The first part prevents the browser from displaying paragraphs as stacked blocks. That rule ensures the “Comments (5)” text follows the paragraph without a line break.
Please note that your post should only contain one paragraph. Multiple paragraphs will be made to run together.
Line breaks
<br />will are not affected. You can still use them to break lines in these asides. -
How would you space break up asides or add a graphic like the >> or something?
Any ideas?
-
body.home div.category-asides .entry-content {
border-top: #ccc 1px dashed;
}
would give you a dashed line above each aside.
not sure how to get the » as text. since i’m a photoshp geek, i’d just make a cool symbol and add it as a background image. andy probably has some amazing trick for adding it that doesn’t involve::before -
Yeah, I had already figured out how to put lines in. Can’t figure how to seperate the asides before witha symbol or something.
Plus to put some spacing between asides. They run together :(
-
sunburntkamel, I’d avoid :before and :after but I wouldn’t have a better way to do it than you said: padding and background image.
-
-
-
I’m not andy, but as I understand things, I think the “danger” (if you can call it that), is that:
“Conforming HTML user agents may ignore all rules with :first-line or :first-letter in the selector, or, alternatively, may only support a subset of the properties on these pseudo-elements.” (per: http://www.w3.org/TR/REC-CSS2/selector.html#before-and-after )
It’s OK for browsers to ignor of somewhat ignore pseudo elements. Often times with them it doesn’t much matter… things just look not quite as fancy. But if it really matters to you, you should try to find another way.
-
Cool!
I’m going to have to try this.
I’ve been posting a linkblog type entry once a week… I may make it more frequent with asides.
-
if you use daily delicious postings, you can just use
div.category-deliciousinstead of asides. :D -
Related question: anyone know how to exclude a tag from showing up in a feed? IE: if I tag these things with “aside” how do I prevent them from showing up in my feed? I don’t want to spam my feed readers.
I thought Feedburner supported excluding posts that matched certain strings but I couldn’t find anything exact about it on their site.
-
-
i’ll probably just go with tagging everything that ISN’T an aside with something else and then using that category feed for my feedburner.
—
That was painless. Because of how my blog is organized I already had a suitable category that every non-aside post was part of.
When I switch FeedBurner it didn’t even mark all the old posts as unread or anything. Sweet.
- The topic ‘CSS Asides’ is closed to new replies.
WordPress.com Forums 