Toolbox vs. Sandbox: questions from a n00b about Custom CSS
-
I’ve just joined WordPress.com as a LiveJournal escapee, and boy am I happier here! If any of you have previously used LiveJournal, you know what a crazy mess “s2” can be when it comes to trying to make look-and-feel customizations to a blog/journal. One my favorite things about WordPress is not only that it uses real web standards like CSS (as opposed to a made up system which invents a new tag language and redefines words like “layer” and “style”) but that any user of WordPress.com is free to also grab code from WordPress.org and set up a local development environment to experiment with.
While setting up such a development environment, and starting to experiment with customizing my new WordPress.com blog (right now it just looks exactly like my old LJ did, for starters) I have come across a couple theme-related questions that I imagine many of you have good answers for. I’ve done some searching and found related threads, but not much on these specific topics…
1) For those of you who prefer to start with as little implied design as possible (entirely relying on Custom CSS to shape your blog’s appearance) which WordPress.com theme do you prefer and why? Toolbox and Sandbox both look great to me, but I’m not really sure what the key differentiators are (so far I’ve been experimenting with Toolbox just because it happened to be newer, but that’s a pretty lame criteria).
2) I’m aware that for each theme on WordPress.com, even basic ones like Toolbox and Sandbox, certain modifications have to be made from the “raw” versions available for WordPress.org installs, to optimize them for use in a shared blogging environment. I’m curious, is there any way to download the WordPress.com “versions” (for lack of a better term) of themes for use on a local install, for development purposes? If so, how would one do that? If not, is there a practical reason why this couldn’t be implemented? Obviously I’m only talking about free themes here, not Premium ones.
3) For those of you who use Toolbox, Sandbox, or a similar theme to create entirely CSS-based “subthemes” of your own, what are some of your favorite online resources? I’ve found a small handful of posts, blogs, and sites that have some helpful information but I’d love to make a canonical bookmark list for myself as I dive deeper into learning how these things work. I’d especially like to know if there are other forums on which folks using these themes in this way hang out, where more specific questions and answers might reside for me to read up on.
4) I’ve seen occasional mention in a couple places, during my searches, of “contests” for CSS creations utilizing Toolbox or Sandbox. Does anyone have some links to prior competitions or experiments using these themes? I’d ove to check out others’ work to see what people have done with them (especially if their designs include elements I’m interested in trying to implement myself).
5) Finally, for those more intimately familiar with the nitty gritty differences between WordPress.com themes and themes available for local WordPress installs, what would you say are some of the most common pitfalls, misconceptions, or “gotchas” that newbies might come across when experimenting with theme CSS on one with the intention of actually using it on the other? Are there any online resources on this topic that you recommend checking out?
THANKS in advance to folks willing to read through all this, and who might take the time to reply. I really appreciate your feedback, and I hope this thread might grow and become useful to others in the future (especially those who might just have joined WordPress.com with some CSS background and a lot of enthusiasm). -
Welcome!
1) Your choice is just about right. Toolbox comes, in a way, as a newer and modernized Sandbox, coded in HTML5 with latest web practices in mind. Toolbox would be a more solid and forward looking choice for you to start with.
2) Most of our themes should be basically the same for .org as they are for .com. Toolbox is paradigmatic on this in that you can grab the .org version and it will be virtually the same version you have here. (There might be small differences at any given point in time because the updating processes are different, but those shouldn’t last for too long.)
3) This is the best place for you to start: https://en.forums.wordpress.com/forum/css-customization – You will find help links, and specific CSS support if you post your questions.
4) There was a post on a similar subject:
http://en.blog.wordpress.com/2011/08/25/see-how-you-can-personalize-your-blog-with-custom-fonts-and-css/ – Those blogs use Twenty Eleven, which was based on Duster, in turn based on Toolbox, so the CSS shouldn’t be that much different if you want to dive in and try things.Another one is http://en.blog.wordpress.com/2010/11/17/custom-css-styles/
-
Thanks, matiasventura! That all helps a ton, I’ve been having so much fun with this whole “yes, you can build a functional dev environment” thing. I can’t wait to start hacking around with a new “subtheme” of my very own.
-
@trackofalljades
May I make a suggestion? Before you begin any CSS editing you may wish to read this > When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/ -
I appreciate the thought, timethief…but I’m not sure I understand completely (please bear with me if I’m missing something). I read that blog post and I think I get where it’s coming from, but I’m not 100% sure whether it’s still relevant…
I’ve only been using WordPress.com for the past few months (and only have had Custom CSS for the past few days) but it seems to me there’s a radio button that explicitly lets you choose whether to add CSS definitions to the existing stylesheet for the theme or to replace the stylesheet completely with one of your own.
I chose the latter without hesitation, because as an experienced web developer with the desire to see all my code at once and easily flip-flop it in and out of a local instance as well, that just made a lot more sense for me. However I made the presumption that since the label on the radio button was so specific (and because a link to the default stylesheet for the theme was provided right next to it) that choosing that option would avoid the situation described in that forum post (from 2009) in which duplicate CSS might be served (wasting bytes and confusing troubleshooting).
Did I miss something, or perhaps make an unfounded presumption?
-
Hi trackofalljades,
Just to clarify, when you choose to replace the theme’s stylesheet with your own CSS, only your custom stylesheet loads — the theme’s original stylesheet does not load. This appears to be your case.
If you’re not intending to start from scratch and just want to build on the existing stylesheet (e.g., you choose to add your custom CSS to the theme’s stylesheet), then theme’s stylesheet will load along with your custom CSS. In that case, you would not need to paste the entire stylesheet into the CSS Editor — only the parts you want to override. This seems to be the scenario that timethief was referring to.
Hope this clarifies things for you. :)
-
Thanks michiecat, that clears things up. From reading other posts, it sounds to me like there might have been a time long ago when the “oh just replace the whole thing” option functioned a little differently, and may have been a bad idea.
Now it looks like basically, it’s a sound option for those who have a web design background and want total control. The default option, which augments but doesn’t replace the existing stylesheet, is probably the best choice for most other folks. Another advantage of that approach is that, when you’re done, if you want to share just your changes with someone else that’s easier to do.
-
- The topic ‘Toolbox vs. Sandbox: questions from a n00b about Custom CSS’ is closed to new replies.
WordPress.com Forums 