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
- I’m not the first to do this with Sandbox, I now realise. Here’s another very similar achievement.
22 Comments
you were wondering... I believe in rewarding commenters!
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?
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.
@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:nonestyling 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..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.
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.
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.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?
I’m thinkin of using SANDBOX for my next theme. And I wanna use my asides again. I’m totally gonna use this trick.
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.
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
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.
@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.
@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.
@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.
@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.
You are a good man, Alister
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.
may i know the uses of asides..I planned to use SANDBOX for my next theme.
@Jack - I thought I explained their purpose well enough above. Please advise specific questions so I am not just repeating myself here
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.
I’m thinkin of using the Theme. And I wanna use asides again. I’m totally gonna use this trick.
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.
10 Trackbacks/Pingbacks
Posted -1933 years, 4 months ago
Posted -1933 years, 4 months ago
Posted -1933 years, 4 months ago
Posted -1933 years, 4 months ago
Posted -1933 years, 4 months ago
Posted -1933 years, 4 months ago
Posted -1933 years, 4 months ago
Posted -1933 years, 4 months ago
Posted 10 months, 2 weeks ago
Posted -1933 years, 4 months ago
Post a Comment