Alister Cameron // Blogologist

Changing the world. One blog(ger) at a time.

Sandbox Theming Tricks: Pure CSS Asides

As you probably know, I’m a fan of Sandbox, the semantically rich WordPress theme for hard-core theme designers. Honestly, I don’t know why theme designers would want to work off anything else… it just rocks.

So for my latest example of the cool “Pure CSS” funkiness you can accomplish with Sandbox, I draw your attention to these asides I’ve just introduced.

Now, I’m not the first to implement asides. As I mentioned in my first aside, Matt Mullenweg has had asides on his blog for quite a while, and specifically the “inline” type of asides that I think work the best. (The other kind of asides tend to be listed in a separate and thinner column alongside the main content column, but in my opinion these are often lost in the clutter of what, for most blogs — mine included, is a very “busy” second/third column.)

If you look under the hood of Matt’s HTML code, you’ll see that his asides are rendered in completely different HTML from his normal posts. And that’s fine… but it means you’re either dependent on some third-party plugin or the kind of PHP programming skills which most of us can only dream of.

In my case, I decided that thanks to Sandbox’s richly marked-up HTML, I should be able to achieve the same thing without any PHP or HTML hacking whatsoever. In other words… CSS or bust!

And, dear fellow blog theming afiscionado, that’s the point. If you’re working off semantically rich HTML markup, you should not need to touch the HTML (or worse, PHP)… you should be able to make your dreams come true with CSS alone.

Pure CSS Asides Using The Sandbox Theme

What makes “Pure CSS” asides possible in Sandbox is the fact that each post’s wrapping DIV tag includes a whole stack of identifying classes, inluding a class for each category to which it has been assigned. Here’s the opening DIV tag of my previous post (an aside), so you can see what I’m talking about:

<div id="post-300" class="hentry p1 post publish author-admin category-asides category-gadgetstools y2007 m07 d10 h09">

See that category-asides bit? That’s Sandbox telling the CSS designer that this post has been assigned to the “asides” category. Wow… now you have a way to isolate all asides in CSS and change their styling.

And… well.. I don’t know what to say. See, that’s about it. Everything else I could tell you is technical CSS stuff related to the specifics of my own theme’s CSS and what I had to do to get the asides to look right (mostly turn stuff off… display:none… d’uh!).

Ok so there was just one tiny thing I had to add to the HTML to get it to match Matt’s “look”: I had to wrap a tiny but of text in a SPAN with it’s own class, so I could turn that little bit of text off, otherwise, the number of comments shown at the end of each aside would have had the word “Comments:” in front of it… which I didn’t want. But otherwise, I was true to my word: Pure CSS!

Now… try doing this with any other WordPress theme!

Updates

sandbox, wordpress, themes, theming, blog themes, blog styling, css, html, markup

39 Comments

Note: Commenter website links are not no-followed, in case
you were wondering... I believe in rewarding commenters!

  1. Posted 11 years, 10 months ago // Permalink

    You’ve said that you use CSS to make it look the way it does, but how does the text get there in the first place? Is each aside a WordPress post? Does the CSS then make the title, and all the other template items invisible?

  2. Posted 11 years, 10 months ago // Permalink

    The only concern I have with making lots of information hidden with display:none is that SEs might see it as keyword stuffing/spamming. Tread lightly.

  3. Posted 11 years, 10 months ago // Permalink

    @Joe – Yes. They’re absolutely 100% standard WordPress posts. Nothing to change about them at all, except to add them to a specific category, against which you apply the different styling. In my case a category called “asides”, which is fairly logical 🙂

    And yes, the CSS makes a bunch of what would normally appear in the blog posts invisible… it also pulls the paragraph spacing out, it changes the colours of links, adds the left-hand border, etc.

    @Aaron – I am banking on the fact that the SEs have seen enough display:none styling tricks that are not about cloaking, to realise that a blanket ban is impossible to apply. I know for a fact they don’t do that..

  4. Posted 11 years, 10 months ago // Permalink

    I’ve only just begun to explore Sandbox and the power within. Your post here demonstrates just how much more exploring I need to do. 🙂

  5. Posted 11 years, 10 months ago // Permalink

    Now… try doing this with any other WordPress theme!

    I did it with the dropshadow theme with CSS. Of course I added in the PHP to accomplish the same pull that Sandbox does so I wasn’t able to do it “out of the box” but it’s possible. 😉

  6. Posted 11 years, 10 months ago // Permalink

    This is great! I’ve customized Sandbox for my blog’s theme, so I could really use this. Sandbox is wonderful stuff.

    I’m not worried about display:none. AJAX uses that all the time in a huge number of websites and nobody has been penalized for it.

  7. Posted 11 years, 10 months ago // Permalink

    No offense, but you should first take rid of your 27 css warnings and then teach how to use css in our themes, my friend.
    Your web site crashed my FireFox, but I think that it is your CO comment form plugin. (Don’t use it. It is BAD)

    I’m not expert but SandBox is good in ideas, not in use.
    It is a bit heavy and you can see it by the speed of their web site.
    Yours is slow too.

    So, use the ideas, not the theme.

    BTHW, what is so difficult to achieve anything with simple CSS and clever PHP?

  8. Posted 11 years, 10 months ago // Permalink

    I’m thinkin of using SANDBOX for my next theme. And I wanna use my asides again. I’m totally gonna use this trick.

  9. Posted 11 years, 10 months ago // Permalink

    This is why I don’t get the Sandbox theme. People go to all these tremendous levels of effort to add special styling to make “Asides” or something like that, when it’s ridiculously easy to just add “if (in_category(‘asides’)) { … }” to your Loop in the theme’s index.php file.

    PHP is *easier to learn* than CSS. And it’s a heck of a lot more powerful and simpler to do this sort of thing. The amount of effort involved in changing the style around, only to have it actually not work properly on non-CSS capable browsers… Well, it seems more than a little crazy. There’s nothing wrong with defining semantic code and using CSS to draw it. But Sandbox seems like it’s trying to go too far in the other direction. It’s incredibly difficult to style the thing.. I’d say it’s simpler to make a theme from scratch.

    Anyway, that’s just my opinion, of course. I’m not a fan of the Sandbox theme and I’m disappointed that they’re including it by default in the next revision of WordPress. On the other hand, I can see a lot more money doing custom theme work in the future, since Sandbox makes it impossible for normal people to learn how to make themes. 🙂

  10. Posted 11 years, 10 months ago // Permalink

    I’ve read about Asides before and I feel really dumb, because I still can’t see what they’d be useful for. 🙁 For what purpose are asides used?

    :: efrain

  11. Posted 11 years, 10 months ago // Permalink

    The technique also works on another of Scott’s themes, plaintxtBlog. It’s possible that it works on all of his themes, but I’ve only tested the one.

  12. Posted 11 years, 10 months ago // Permalink

    @Otto. I don’t disagree with you that using PHP would be easy. Certainly, I could have achieved the same sort of “cleaned-up” HTML that Matt uses on his blog, saving me the need to turn off (display:none) a lot of stuff in my CSS. No arguments there, except that’s not what I was out to demonstrate.

    Secondly PHP is NOT easier than CSS to everyone. Many designers can handle CSS but don’t want to go near the back-end. On that point, I don’t understand why you think Sandbox is so hard to style. Is it that you don’t know which class attribute to hook your styling onto? I am not sure I understand your issue there, since to me, CSS styling is MUCH easier with Sandbox than with other themes.

    You say it is simpler to design a theme from scratch… well, that’s what I did! For this theme I started with my own CSS, taking none of the default Sandbox CSS with me; and in my case I used the Yahoo (YUI) CSS as a foundation.

    Finally, I can’t agree with you that Sandbox makes it impossible for normal people to learn how to make themes. I’d hope, with the help of people like me doing (sort-of) tutorials and such, Sandbox would be a great theme on which people can discover the power of strong semantic HTML coupled with skilled CSS.

  13. Posted 11 years, 10 months ago // Permalink

    @Truden – Let’s clear up some things here… the vast majority of those CSS warnings are “inherited” from the YUI CSS stuff that I use, and related to a simple “hack” to get IE to agree with FF/Safari/etc about what an “em” is.

    Yes, the cocomment plugin is bad and can crash things, and I think I will get rid of it. Thanks for hastening that decision 🙂

    I do not see that Sandbox is an issue with speed. In the case of my site I am waiting for WordPress 2.3 so I can get rid of UTW, which is known to have major issues/clashes with the WordPress core. Lorelle told me to get rid of it for this reason, but I can’t. As soon as the new tagging stuff is native to WP you’ll see a big speed improvement with my site.

    Finally, as I’ve said to Otto, it can be done with some PHP too, but that’s not what I was trying to demonstrate here.

  14. Posted 11 years, 10 months ago // Permalink

    @efrain – in my case they are to allow me to write a very different kind of post from the sort of post I normally write. Usually I write fairly long and detailed posts about this or that, however an aside is the opposite: a short, perhaps one-liner post about something, maybe with a link or two. Since these “genres” of post are so different I have styled them completely differently, so people “see” the difference visually.

  15. Posted 11 years, 10 months ago // Permalink

    @Otto:
    Can you go into more detail or point one in the right direction in regards to the technique you mentioned?

    What more does one need besides “if (in_category(’asides’)) { … }”? What goes in the “{…}”

    I’ve implemented a slightly modified version of Matt’s Asides on my site but your PHP technique looks different.

  16. Posted 11 years, 10 months ago // Permalink

    You are a good man, Alister 🙂

  17. Posted 11 years, 10 months ago // Permalink

    I consider the Sandbox being a well written theme. It offers many possibilities to customize a WordPress site. I think it depends whether your knowledge focuses on CSS or PHP. If you learned more PHP you will find it easier to develop a theme from scratch, but for a CSS designer the Sandbox theme offers a great playground to apply his/her skills. The difficulty depends on how high you set your goals.

  18. Posted 11 years, 5 months ago // Permalink

    may i know the uses of asides..I planned to use SANDBOX for my next theme.

  19. Posted 11 years, 5 months ago // Permalink

    @Jack – I thought I explained their purpose well enough above. Please advise specific questions so I am not just repeating myself here 🙂

  20. Posted 11 years, 3 months ago // Permalink

    I’m not expert but SandBox is good in ideas, not in use.
    It is a bit heavy and you can see it by the speed of their web site.
    Yours is slow too.

  21. Posted 11 years, 1 month ago // Permalink

    I’m thinkin of using the Theme. And I wanna use asides again. I’m totally gonna use this trick.

  22. Posted 10 years, 12 months ago // Permalink

    I’m not expert but SandBox is good in ideas, not in use.
    It is a bit heavy and you can see it by the speed of their web site.

  23. Posted 10 years, 7 months ago // Permalink

    I also like this template but think, that it’s not very fast in loading… But thanks for your excellent information.

  24. Posted 10 years, 6 months ago // Permalink

    Thanks for sharing this tricks with us… I'm gonna try this at one of my sites next.

  25. Posted 10 years, 6 months ago // Permalink

    Your Pure CSS Asides Guide is great. Thanks for sharing this information with us.

  26. Posted 10 years, 5 months ago // Permalink

    This technique also works with the plaintxtBlog theme… I'm gonna try if it works with all themes from Scott… Great guide!

  27. Posted 10 years, 5 months ago // Permalink

    I'm planing to use this theme again with asides. Hope it works with your description…

  28. Posted 10 years, 1 month ago // Permalink

    Thank you for sharing these tricks with us… We gonna try various things to measure our working process. As a kind of QM.

  29. Posted 10 years ago // Permalink

    I’m thinkin of using SANDBOX for my next theme. Thanks for your excellent information.

  30. Posted 10 years ago // Permalink

    intresting articel. Great. Thanks4post

  31. Posted 10 years ago // Permalink

    i am using sandbox too, but tuned it a bit. these tricks are new for me thanks!

  32. Posted 9 years, 9 months ago // Permalink

    Well Ajax was a proble for us. Google sent one of the sites in the sandbox.

  33. Posted 9 years, 7 months ago // Permalink

    i am using sandbox too, interesting article.

  34. Posted 9 years, 5 months ago // Permalink

    Geiler Theme danke für die veröffentlichung!!!

  35. Posted 9 years, 5 months ago // Permalink

    We had Ajax on a joomla project and the rankings were very bad.

  36. Posted 9 years, 5 months ago // Permalink

    Since the theme is free I´ll give it a try. I´m not much of a developer I´m afraid, but who knows what I can learn of it.

  37. Posted 9 years, 3 months ago // Permalink

    Hi Alister,
    Thanks for your tricks. We found them extremely useful. Keep the good work up!

  38. Posted 9 years, 2 months ago // Permalink

    Wuha… This is perfect! I have customized Sandbox for my blog’s theme, so I could really use this. Sandbox is wonderful stuff.

  39. Posted 9 years, 2 months ago // Permalink

    Proper theme – I like it

11 Trackbacks/Pingbacks

  1. [IMG External link]

  2. Pure CSS Asides for WP

  3. I now have asides enabled, yet again. This time they’re done entirely through CSS.

  4. has written a post on how to setup pure CSS asides (or Linkyloo in my case, such as this post) on a WordPress blog. The technique is quite interesting and can only be achieved in themes that use the Sandbox as the core. Andy also came up with a […] Pure CSS Asides for…

  5. Sandbox Theming Tricks: Pure CSS Asides

  6. reconocer estos posts fácilmente en la página principal del blog por carecer de título y tener un borde azul a su izquierda. El concepto de apartado no es original. Es prestado y traducido de los “asides” que han implementado por separado Alister Cameron (en CSS) y Matt Mullenweg (en PHP). Cada uno publica sus asides identificados con un borde verde y rojo, respectivamente. Alister fue mi inspiración, y me gustó muchísimo cómo utilizó el tema Sandbox

  7. Recent Bookmarks Sandbox Theming Tricks: Pure CSS Asides del.icio.us direc.tor What should be America’s national broadband strategy? Professional Thinking BD4D View more bookmarks on Ma.gnolia

  8. [IMG Visit Sandbox Theming Tricks: Pure CSS Asides] Sandbox Theming Tricks: Pure CSS Asides http://www.alistercameron.com/2007/07/09/sandbox-theming-trcks-pure-css-asides/

  9. view blog

  10. […] strategy, a novel phrase that’s crept into our vocabulary and is shaping our future."Sandbox Theming Tricks: Pure CSS Asides    Nov, 17As you probably know, I’m a fan of Sandbox, the semantically rich […]

  11. […] Real Mountain Values Member Posted 6 months ago # Never mind I figured it out. Thanks to http://www.alistercameron.com/2007/07/09/sandbox-theming-trcks-pure-css-asides/ […]

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*

  • My Posts in Your In-box!

    Enter your email address here for instant updates in your inbox, whenever I post something new.
    Your email address is in safe hands. Relax!
© Copyright 2007 Alister Cameron. All Rights Reserved Theme // Sitemap // RSS