// Internet Duct Tape

WordPress CSS Tip: Design for Sandbox Theme in a sandbox

Posted in CSS and Web Design, Technology, WordPress by engtech on June 22, 2007

In case you missed the last post, there is a CSS design contest using the Sandbox theme for WordPress. That post will explain what the heck it is all about.

I’ll be the first to admit that I only know the tip of the iceberg when it comes to CSS design, but one ‘workhack’ that easily applies to any kind of programming activity is rapid development. The concept is simple: reduce the time between action and result to the shortest amount of time possible so you can get more done. My number one tip for doing a fast CSS design is to do it all on your own machine instead of doing it live on the Internet (or wordpress.com). It will save you lots of time and headaches.

I’ve taken the sample blog and example CSS template provided by Scott Wallick and made a very easy to use downloadable archive. It contains nothing but the HTML files, image files and CSS from the sample blog. It can get you redesigning Sandbox in less than a minute.

Getting Started

  1. Download the Sandboxed zip file
  2. Unzip it
  3. Open index.html in your web browser
  4. Edit style.css
  5. Refresh your web browser
  6. Repeat #4 to #5

I find it easier to work on HTML files saved on my computer than creating a dummy blog on a fresh WordPress installation. If you feel the same way then downloading this archive is right for you.

Pick The Right Tools

There are several requirements for any tool that makes designing CSS easier:

  1. editing with syntax highlighting plus auto-completion
  2. showing you what CSS selectors are available on the page you are editing
  3. inspecting why a design looks the way it does

I heartily recommend the combination of the Firefox web browser with the Firebug extension. The learning curve for Firebug is a bit steep, but it will save you a lot of time in the long run because it is chock full of goodies as can be seen on this page.

Testing in Multiple Browsers

One of the hardest things I find in web design is getting something to look the same in multiple browsers. Having multiple browsers on hand to check out your changes locally is a must if cross-browser compatibility is important to you. Here are the top browsers to consider. Market share numbers are from w3counter (thanks Daniel).

  1. Internet Explorer 6 – 50% market share
    • Click on that link to get the completely standalone version of IE6 that you can run side by side with IE7
  2. Internet Explorer 7 – 17% market share
  3. Firefox 2 – 15% market share (and 9% market share for FF 1.5)
  4. Safari 2 – 2% market share
    • Finally available for Windows users
  5. Opera 9 – less than 1% market share

The market share should give you an idea of which browsers to spend the most time designing in. I find Firefox the easiest to work with. Jalaj gives a few other suggestions.

One highly recommended technique is “reseting” CSS properties at the beginning of the file to remove slight differences between browsers.

Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]

More explanation of Christian Montoya’s initial CSS

Know What Size to Design For

It is important to test your design in different screen resolutions. Market share numbers are from w3counter. Something else to keep in mind is that those big old CRT monitors and those funky new LCD monitors display colours differently.

  1. 1024×768 50.43%
  2. 1280×1024 17.03%
  3. 800×600 8.89%
  4. 1280×800 8.38%

I recommend the Window Resizer extension for Firefox for rapidly switching resolutions. Firebug may be able to do it as well, I am by no means an expert.

Advanced Design Considerations

There’s a lot out there to learn about CSS design, here are some highly recommended links with more information. If you have any other suggestions, drop them in the comments.

21 Responses

Subscribe to comments with RSS.

  1. Scott said, on June 23, 2007 at 5:31 am

    Excellent write-up. Be careful not to give away all your secrets. ;)

  2. [...] also like to specifically point out a few of engtech’s posts: Design Sandbox in a sandbox and CSS Design. Engtech has been a big supporter of the Sandbox since it was first [...]

  3. Arpit Jacob said, on June 23, 2007 at 8:45 am

    why change css and refresh every time. Just use Firebug and see the changes in real time

  4. engtech said, on June 23, 2007 at 7:11 pm

    @Arpit: as I said, I am by no means a Firebug expert :)

    I wasn’t sure if Firebug let you save the CSS changes to disk easily. I’ll have to give it a try.

  5. [...] Skip navigation DisclosureSubscription OptionsMost Popular PostsToolsWordpress.com Resources – Tips, Tricks and ToolsWordpress.com Theme ReviewsWordpress.com Theme Review HelpGreasemonkey script: WordPress.com Category ResizerWordpress.com 7 Day Referrer ParserPerl Script – WordPress.com 7 Day Referrer ParserGreasemonkey Script: Akismet Auntie Spam for WordpressGreasemonkey Script: Find images that are too wideTag Cloud Generator for Wordpress.comTag Cloud Generator AdvancedTag Cloud Generator – Release NotesTechnorati Favorite Your FansTechnorati Favorite Your Fans – Release NotesComic BloggerGreasemonkey script: Flickr always search for Creative Commons licensed photosTag CloudAll Posts by Category and TitleSeriesGift Guide for Geekseaster eggsReader Appreciation for RSS subscribersa nerd and his blogAbout Me « WordPress CSS Tip: Design for Sandbox Theme in a sandbox [...]

  6. Kristin said, on June 23, 2007 at 9:24 pm

    I can’t thank you enough for the html files, – I think it’s more easy to style than using a dummy blog as well.

    You forgot one thing: Validate your CSS file.

  7. [...] WordPress CSS Tip: Design for Sandbox Theme in a sandbox « //engtech – internet duct tape (tags: web2.0 css) [...]

  8. [...] An often requested tip is how to do 3d buttons for the menu bar at the top of the page. It’s done using the common “sliding door” technique where one image is the front plus middle, and another image forms the end. I’ll be using the images and technique from the Dark Liquidcard 2.0 theme by Jori Avlis in this example, along with the Sandboxed example blog. [...]

  9. [...] 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. There is a competition participants page and some [...]

  10. [...] 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, and adds tips on creating 3D buttons for the Sandbox [...]

  11. engtech said, on July 08, 2007 at 11:59 am

    I’ve created a new version of the standalone zip file for the Sandbox dummy blog. The previous one had screwy index pages because I tried to flatten the directories.

    http://internet-duct-tape.googlecode.com/files/sandboxed-070708.zip

  12. [...] Competition is also continuing with some great Themes based upon the Sandbox WordPress Theme. Engtech of Internet Duct Tape offers some tips on designing with the Sandbox WordPress Theme, and adds tips on creating 3D buttons for the Sandbox [...]

  13. engtech said, on July 15, 2007 at 2:18 pm

    If you’re working on a design for the WordPress.com Sandbox theme (still at 0.6.5 — no idea when update will happen) then you can grab this zip:

    http://internet-duct-tape.googlecode.com/files/wptheme-20070715.zip

    It’s a copy of my http://wptheme.wordpress.com test blog. Has some more acid tests than the Sandbox live preview example blog.

  14. engtech said, on July 16, 2007 at 12:36 am

    I just did an update to the Sandboxed zip file. It wasn’t showing the post a comment boxes before (because I wasn’t logged in).

    I’ve also included all of the layouts, and the Kubrick and Spartan example skins.

    http://internet-duct-tape.googlecode.com/files/sandbox-20070716.zip

  15. Michael Sync said, on July 22, 2007 at 12:00 pm

    Hi engTech,

    Doesn’t “Internet Explorer 6 standalone version” work on Windows Vista Home Premium?

    I wanna run IE6 and IE7 side-by-side on my machine but that standalone version doesn’t work.

  16. SandBox Its not to late said, on July 25, 2007 at 6:12 pm

    [...] Internet Duct Tape [...]

  17. [...] WordPress CSS Tip: Design for Sandbox Theme in a sandbox [...]

  18. Matax87@mac.com said, on September 05, 2007 at 8:59 am

    great tutorial, but I can’t find the static html files of the sample blog can you give me a link?
    thanks

  19. engtech said, on September 05, 2007 at 11:03 am

    @Matax87@mac.com:

    It looks like Google Code is timing out for some reason. If you try again in a few hours then it will probably work.

  20. engtech said, on September 05, 2007 at 11:12 am

    @Michael Sync:

    Sorry for the (extremely) late reply, I must have missed this comment before.

    You’ll probably have to go with the more complicated route of using virtualization to get IE6 to work with Vista. See:

    http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-single-machine.aspx

  21. Design manager said, on November 09, 2007 at 11:25 am

    For me, it’s much easier to work with CSS design live in the Internet. But tastes differ, you know…


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 288 other followers

%d bloggers like this: