CSS Asides

  • Author
    Posts
  • #24686

    andy
    Member

    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;
    }

    #25084

    andy
    Member

    Add that to your stylesheet and any post in the Asides category will have a more compact look when viewed on the home page.

    #25085

    swallick
    Member

    Nice, Andy! Thanks for sharing the code. And remember, you could do this with any category. Just replace “asides” with your category of choice.

    #25090

    nosysnoop
    Member

    Only smart people will understand. *sigh*

    #25094

    andy
    Member

    The process of understanding is what makes you smart, not the other way around. *grin*

    #25107

    @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?

    #25114

    timethief
    Member

    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

    #25130

    andy
    Member

    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.

    #25206

    darryl
    Member

    How would you space break up asides or add a graphic like the >> or something?

    Any ideas?

    #25208

    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

    #25210

    darryl
    Member

    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 :(

    #25211

    andy
    Member

    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.

    #25213

    trevorturk
    Member

    cool idea!

    #25268

    gmaletic
    Member

    “andy”…why should “:before” and “:after” be avoided?

    #25305

    diggy
    Member

    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.

    #25306

    engtech
    Member

    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.

    #25307

    if you use daily delicious postings, you can just use div.category-delicious instead of asides. :D

    #25308

    engtech
    Member

    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.

    #25309

    i’m not aware of any way to do it, through feedburner or otherwise (on wp.com).

    #25310

    engtech
    Member

    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.