While not complete, here is my first attempt to put all the styles together from within the new WordPress.com Sandbox Theme stylesheet. You can copy the styles from this CSS file.
This style sheet does not include the core layout architecture. You choose that from the “skins” after selecting the Sandbox Theme, setting the columns to 1, 2, or 3, along with placement of the sidebar. These styles represent the HTML and design elements for the Sandbox Theme in addition to core layout tags and styles.
Copy the styles from this file and paste it into your own stylesheet for your “sandbox” version as you work on the design of your WordPress.com blog Theme. I’ll be talking more about how to do that tomorrow. The styles are blank, just waiting for you to add the elements you want to make the Theme look however you want, within the limits of the Sandbox Theme’s architecture.
/* Header */
h1 { }
h1 a { }
h1 a:link { }
h1 a:visited { }
h1 a:hover { }
#blog-title { }
#blog-description { }
While the things you may want to do with your WordPress.com blog Theme may be as simple as colors, fonts, and header art, this is a very complex Theme when it comes to styling every little detail. You don’t have to style them all, but you can if you want to. Kudos to Andy and Scott for coming up with such a powerful and versatile WordPress Theme.
Remember, this is a very rough draft. If you find some styles are missing, wrong, or want to add some you’ve come up with, please post the information in the comments below and I’ll start adding them. The Sandbox Theme and the sidebar widgets are all new, and all are subject to change.
Hopefully, together we can keep up and create a valuable resource to help everyone trying to style their new Sandbox Theme in WordPress.com.
Related Articles
- CSS and Web Page Design List of Resources
- CSS: Studying Your CSS Styles
- Secrets of WordPress Theming
- Finding Your CSS Styles in WordPress
- WordPress Codex – WordPress Lessons
- WordPress Codex – Design and Layout
- WordPress Codex – WordPress and CSS
- Designing a WordPress Theme From Scratch
- Designing a WordPress Theme – Building a Sandbox
Site Search Tags: wordpress, wordpress+themes, wordpress+theme, wordpressdotcom, wordpress.com, wordpresscom, custom, customizing, custom+blog, look, css, html, blog+look, blog+theme, css, stylesheet, sandbox+theme+stylesheet, sandbox+theme+css, custom+css, css+editor, edit+css, web, design, web+design, webdesign, webdev, blogdev, blog+design, layout
Copyright Lorelle VanFossen, member of the 9Rules Network
Lorelle on WordPress 
27 Comments
Hey Lorelle: Wow! You’ve really dug into the Sandbox. Great. You just have to glance at the CSS list and see how much potential is there for CSS styling (and for those hosting their own WordPress blogs, scripting). There are a lot there, so I’ll have a look tomorrow and let you know if I see any gaps. Looks pretty thorough, though. 😀
So much to learn and not enough hours in a day. In time. In time. So long as I can come here and learn. Thank you.
Awesome. Thanks for taking the time to extract this CSS skeleton for Sandbox, Lorelle!
Hey your site here is looking pretty slick.
Things could be easier if I found this entry earlier. Thanks 🙂
I have been playing with building a blog at wordpress for a while now. I have also been looking at blogger and others. The fact taht you can’t create any theme on the fly, or at least be able to add in your own CSS, is the biggest detractor on why I am finding it hard to get on board here. Oh, and domain support. I can map my domain here, but then I will be splitting my link references between the domain and the wordpress URLs.
Mr. Henning, you are clearly asking a lot from a free blogging service. I highly recommend you buy cheap web hosting and use the full version of WordPress and skip WordPress.com. What you need is very specific and technical. WordPress is still free, it’s just easier to do it on your own site. WordPress.com isn’t for everyone.
Hi Lorelle!
Thank you so much for sharing this! I have been playing around with Sandbox, and your template has made it so much easier.
I just wanted to share something I discovered while I was using the template. I was trying to duplicate the sidebar links format that Scott uses in his Simplr theme (shaded boxes that change color when you hover) and when I used the code from that theme, it only worked in IE (actually, it sorta worked in FF – only a few of the items in the list were shaded, but others were not). I figured out that when I changed “a:link” to just “a” the formatting showed up in FF as well.
I don’t know if this is standard code or what (it’s all trial and error for me) but this is what happened when I tried it out. I hope it’s helpful information!
Dana
The a:link should have worked in both. There might have been a parent/child relationship problem, but that format has been around for a very long time, so it should have worked. IE does some weird stuff, so who knows. 😉
And I’m glad it helped.
I’m still finding new combinations and I’m adding them all the time. So if you have downloaded this previously, please download it again for updates.
And we need help to fill in the missing blanks!!!!!
Please post styles when you find them that we’ve missed. There are so many!
Lorelle, I’ve combined your Sandbox CSS with mine.
But I haven’t compress it and remove repeating selectors :). Still lot’s of experiment to do since I’m syncing my CSS with K2.
And for the link, it’s best to do like this:
a {}
a:link {}
a:visited {}
a:hover {}
a:focus, a:active {}
a img, :link img, :visited img {}
The general and common typography/elements should be on top before Sandbox.
By all means if something doesn’t work right or doesn’t follow your rules add !important
My rules? Gees, I’m just adding them as I find them. Remember, this is a rough draft. It’s not mean to be pretty yet. It’s filling up all the blanks and then cleaning. With over 400 core styles, and beyond imagination combination styles, CSS layout and hierarchy rules haven’t come into play yet.
Also, as a “rule” and a stupid one, who the hell ever thought it was a good idea to alphabetize a stylesheet. YUK. I want to find all related styles together. If I were in charge of the world…oh, boy! 😉
Thanks for your list. Hopefully others will submit theirs soon. I’m going to tackle a lot of this over the weekend and I’ll combine and look for repeats (and a little cleaning) then.
CSS rule not ‘your’ rule. LOL.
Anyway good luck 😀
I’ve also been working on a k2 skin for Sandbox, and this is pretty helpful, actually. I’m juuust about done, but you can check out the progress and grab the CSS here: http://www.almosteffortless.com/sandbox/wordpress/
OK. All done with the k2 port I made. Thanks for your CSS here, it helped me uncover a couple of gremlins that I’d missed. http://www.almosteffortless.com/2006/08/12/k2-lite-for-sandbox/
Lorelle – I understand what you say to be correct, but would still like to voice my list of things I would like to have. I prefer wordpress to movable type, but it would make me happy if the wordpress people would offer a premium service akin to typepad. I know other hosters can provide this; but for something that you want to be around for a very long time, I prefer to get service from the source, not an also ran.
WordPress.com is an evolving, cutting edge technology, FREE blogging service. They have just offered their very first paid premium feature. I expect more great things coming their way. Stay tuned.
And if you want your voice to be heard on what features you really want to see, and pay for, use the Feedback link to let them know, or join the many volunteers who help direct the path of WordPress. It’s a very exciting field.
As for copying what the others are doing, I think that the developers of WordPress and WordPress.com want to go further than copycat. They want to break the mold. It just takes time to do the mold breaking. 😉
Like I said, stay tuned for more excitement and you may get your wish!
Hmm..I may not have this CSS figured out yet. I tried copying and pasting the CSS from yours into the test part of the blog (WordPress’s new feature) but clicking preview only resulted in a blank page. Why is this? Am I missing some other code?
Eliza: You have to be more specific. Where and what CSS styles did you copy? From the rough draft CSS file? There are NO STYLES in it, just the selectors for the various styles. The style references (declarations) themselves are blank. Waiting for you to fill in the details.
You still have to choose which layout base (wrongly called “skins”) to get started and then fill in how you what which style to look like.
Again, I warn that this is not for the new or even beginner CSS enthusiast. It is a very complex process to style the new Sandbox Theme.
here’s a blank to fill in:
body.search #post-0 h2.entry-title {}
body.search #post-0 .entry-content {}
body.search #post-0 .entry-content p.search-error {}
occurs on empty search result pages only. (#post-0 doesn’t exist otherwise, AFAIK)
Thanks for sharing this blank canvas, it was exactly what I needed.
Hi,
I have no idea where else to go for an answer to this. I am using Scott’s simplr, and would like to change the background to a repeating square jpg about 50×40 px. No matter what I do, it doesn’t appear. What should I be using? When I try to change the body { nothing happens…
Thank you so much.
@ Evi:
It’s not an easy question to answer. If any part of a container that covers the “background” is set to a color or image, which could be the HTML, body, wrap, wrapper, or whatever name they give the HTML container, anything behind it will not appear. Go through the Theme and look for background colors on the opening DIVs and TAGS and set them to transparent one by one and see if the background image appears.
Also, check that the jpg is in the Theme folder and the link to it from the style.css file is correct and you’ve written the CSS property. I’ve had problems with a missing semi-colon or a colon in its place my accident – it takes so little to screw things up. Look at every detail.
If you are still having problems, contact the Theme designer for help as they are more familiar with the inner workings of that Theme than I am.
Thank you for this. I’m new to css and am struggling a little. But I don’t really know what all the things are, and can’t find any place with definitions like h1 a controls ‘x’. Any advice? Thank you.
@ rebeccastable:
I”m not sure what you are asking. In the Sandbox WordPress Theme, as with most WordPress Themes, the “controls” – the instructions for the design of the H1 HTML tag and other HTML tags – are found in the styles.css file in the Theme directory.
If you are having trouble finding your styles see Finding Your CSS Styles in WordPress.
Is their any tool which does online template generation from web template
@ Nitin Gupta:
There probably is, however, taking a template and making it into a template is rather redundant, so I’m not sure what you are talking about. If you are talking about converting an HTML/CSS template into a WordPress Theme, that’s a different issue. I’m not familiar with any of them, but maybe someone will jump in and answer.
Ingenious work, really, and I say that as a complete fool in such matters. 😉
I was wondering if you might allow me to bother you with a minor question: Now that wordpress has introduced threaded comments, I’d like to influence the appearance of the follow-up comments by variating their background color. Since it’s a new feature, I’m not familiar with the proper selector. Here’s a rough idea of what I have in mind (found here, lines 35-36):
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
Can you unlock the secret? 😉
Best from me & thx in advance _ willyam
37 Trackbacks/Pingbacks
[…] I’m taking advantage of the new CSS Editor access for WordPress.com blogs, and working overtime to keep updating the Sandbox Theme CSS stylesheet list as I go. […]
Finished creating CSS for Sandbox Theme
I just finished creating a CSS / Stylesheet for Sandbox Theme based on Kubrick Theme (although not completely finished) and i think the results is not bad for a beginner in css thing like me (actua…
…
[…] A theme for themers is how Scott is calling it, Sandbox is a cutting edge approach to WP themes. With built in style switcher, Sandbox allows for users to customize several different layouts, single column, left or right side bar, 3 column, you get the picture. What’s more interesting are the comments from Matt, in which he believes Sandbox can be used as the basis of a new default theme for WordPress in a future release. Personally, I have an issue with a theme that extensively uses a functions page to create it’s own template tags and functions, but I can see the benefit of offering it in the download. (Sandbox is also the basis of the wordpress.com’s new paid feature, which allows users to finally customize their CSS). Lorelle has created a blank CSS style sheet to facillitate customizing the theme, which will help immensely in customizing. Regardless of it’s role in future releasess of WP, the dynamic classes and forward thinking approaches to the code will further theme development for WP. […]
[…] August 10th, 2006 5:20 pm Thanks to Lorelle’s comprehensive list of almost all available Sandbox CSS selectors, my Sandbox K2 skin now is officially my Sandbox’s lab rat. The style sheet itself turn to 18kb in size and half of it are selectors with empty properties. […]
[…] Also surfacing around WordPress.com is information about CSS and the Sandbox theme. Lorelle provides a comprehensive starter stylesheet for Sandbox. Sunburntkamel tells us how to set up a clickable custom header image. I started a forum thread on CSS Asides for Sandbox. Keep your eye on the CSS Customization Forum for more tips and snippets. […]
[…] Recently, the Sandbox Theme was released and added to your choices with WordPress.com Themes, and the developers worked overtime to make sure that EVERY element was over-designed so designers could customize almost every feature within the WordPress Theme. In many ways, this was the first WordPress Theme to take into consideration the highly customizable dynamic content and potential of WordPress Themes. To help you use the Sandbox Theme to develop your own Theme, I put together a rough draft list of all the styles for the Sandbox Theme. […]
[…] bisa di baca di sini https://lorelle.wordpress.com/2006/08/06/wordpresscom-custom-css-all-the-styles-for-the-sandbox-theme/ […]
[…] you are using the Sandbox and paid for the CSS Extra option, you can “turn off” your stylesheet by temporarily removing all the styles […]
[…] are all the styles for the Sandbox theme, for those who want customized […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] All the Styles for the Sandbox Theme: Lorelle shows us how to sandbox the Sandbox theme. Also, check out her bare-bones CSS. […]
[…] excellent CSS structuring. I use it on on my WordPress.com blog and put together a first draft of all the styles for the Sandbox Theme in a CSS stylesheet. There is a competition participants page and some wonderful prizes for the winners. Like many such […]
[…] excellent CSS structuring. I use it on on my WordPress.com blog and put together a first draft of all the styles for the Sandbox Theme in a CSS stylesheet and Engtech of Internet Duct Tape offers some tips on designing with the Sandbox WordPress Theme. […]
[…] excellent CSS structuring. I use it on on my WordPress.com blog and put together a first draft of all the styles for the Sandbox Theme in a CSS stylesheet and Engtech of Internet Duct Tape offers some tips on designing with the Sandbox WordPress Theme, […]
[…] accessible part was easy. The Sandbox WordPress Theme, which allows WordPress.com users to customize their blog Theme, puts the blog title into an H1 heading tag and link by […]
[…] fonts. Just concentrate on the layout. If nothing pleases you, then I recommend you try the new Sandbox Theme, another great way to start your WordPress Theme from […]
[…] very, very customizable — so says uberblogger Lorelle Van Fossen. She even took the time to find all the styles for the theme, as well as uses her customized version of the theme on her blog as […]
[…] on WordPress.com, you can also participate if you are using the Sandbox WordPress Theme with the WordPress.com CSS Extra […]
[…] framework, so it’ll be easy to find and see what others have done with it. To help you, Lorelle has a great list of all the available styles in the Sandbox […]
[…] framework, so it’ll be easy to find and see what others have done with it. To help you, Lorelle has a great list of all the available styles in the Sandbox […]
[…] https://lorelle.wordpress.com/2006/08/06/wordpresscom-custom-css-all-the-styles-for-the-sandbox-theme… […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Style […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] All The Styles For The Sandbox Theme in a CSS Stylesheet […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] and fonts. Just concentrate on the layout. If nothing pleases you, then I recommend you try the new Sandbox Theme, another great way to start your WordPress Theme from […]
[…] All The Styles For The Sandbox Theme in a CSS Stylesheet […]
[…] WordPress.com Custom CSS – All The Styles for the Sandbox Theme […]
[…] All The Styles For The Sandbox Theme in a CSS Stylesheet […]