Comments on: Using The WordPress Sandbox and The Blueprint CSS Framework Together http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/ J. Michael Wender - Graphic Artist, Web Developer, Coder Fri, 04 Jul 2008 13:30:09 +0000 http://wordpress.org/?v=2.5.1 By: Michael http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-1213 Michael Tue, 01 Jul 2008 13:18:42 +0000 http://michaelwender.com/?p=681#comment-1213 @James Gross - Glad you found this tutorial useful. Regarding your question about using a custom CSS file that can override the 4 base css files: As an advanced step: I generally follow this process: <ol> <li>The file <em>2c-l.css</em> controls the layout for your Sandbox theme. By default, style.css in Sandbox calls this file via <em>@import</em>. I generally start with one of the Sandbox layouts by opening it, copying the CSS and creating a layout section in style.css. Then I can delete the <em>@import</em> for the layout and remove the /sandbox-layouts/ folder from my theme.</li> <li>Since this tutorial has you importing <em>screen.css</em> at the top of <em>style.css</em>, you can override any declaration in <em>screen.css</em> by simply redeclaring the CSS you want to override (keep in mind you can use <em>!important</em> at the end of specific attributes in your CSS declarations to force an override).</li> </ol> Finally, if you want to get rid of <em>screen.css</em> all together, you can just copy and paste the CSS from that file directly into <em>style.css</em> (i.e. the default stylesheet used by all WP themes). However, I wouldn't recommend doing that as the reason why I have written the tutorial this way is to allow you the option of upgrading Blueprint should a new version be released in the future. @James Gross - Glad you found this tutorial useful. Regarding your question about using a custom CSS file that can override the 4 base css files:

As an advanced step: I generally follow this process:

  1. The file 2c-l.css controls the layout for your Sandbox theme. By default, style.css in Sandbox calls this file via @import. I generally start with one of the Sandbox layouts by opening it, copying the CSS and creating a layout section in style.css. Then I can delete the @import for the layout and remove the /sandbox-layouts/ folder from my theme.
  2. Since this tutorial has you importing screen.css at the top of style.css, you can override any declaration in screen.css by simply redeclaring the CSS you want to override (keep in mind you can use !important at the end of specific attributes in your CSS declarations to force an override).

Finally, if you want to get rid of screen.css all together, you can just copy and paste the CSS from that file directly into style.css (i.e. the default stylesheet used by all WP themes). However, I wouldn’t recommend doing that as the reason why I have written the tutorial this way is to allow you the option of upgrading Blueprint should a new version be released in the future.

]]> By: James Gross http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-1207 James Gross Mon, 30 Jun 2008 05:11:47 +0000 http://michaelwender.com/?p=681#comment-1207 Thank you for the sensible combination of these two great frameworks. I followed your directions and yes it seems to have worked. Just a note to add to the information here, my css editor, Skybound Stylizer, picked up 4 css sheets for editing. They are print.css, style.css, screen.css, and 2c-l.css. Question: Is there any mechanism to just work on a custom.css file that can overide these 4 base css files? (I guess I could always upload and original, if my css changes get to far off track.) Thanks, James Thank you for the sensible combination of these two great frameworks. I followed your directions and yes it seems to have worked.

Just a note to add to the information here, my css editor, Skybound Stylizer, picked up 4 css sheets for editing. They are print.css, style.css, screen.css, and 2c-l.css.

Question: Is there any mechanism to just work on a custom.css file that can overide these 4 base css files? (I guess I could always upload and original, if my css changes get to far off track.)

Thanks, James

]]> By: james http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-809 james Sat, 03 May 2008 18:09:16 +0000 http://michaelwender.com/?p=681#comment-809 cool, the site looks good, i will post here when i get my new project up. cool, the site looks good, i will post here when i get my new project up.

]]> By: Michael http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-807 Michael Sat, 03 May 2008 12:24:36 +0000 http://michaelwender.com/?p=681#comment-807 @james - BTW: The template I'm running right now is an example of the very technique that I describe in this tutorial. ;) @james - BTW: The template I’m running right now is an example of the very technique that I describe in this tutorial. ;)

]]> By: Michael http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-806 Michael Sat, 03 May 2008 12:22:32 +0000 http://michaelwender.com/?p=681#comment-806 @ james - For the second snippet in the post, there should be two dashes to indicate the closing of the html conditional statement. I have corrected that error. Also, regarding the single quotes in the second snippet: In every instance where there is a single quote, it should be the standard single quote character found to the right of the semicolon key on a QWERTY keyboard. However, after a thorough investigation, I found that WordPress or the Syntax Highlighting plugin was translating the second set of single quotes into "closing curly single quotes." I even checked the database and found that I have the data in there correctly; however, as it gets rendered, the quotes get incorrectly translated somewhere. SO, to fix this I used double quotes in the call to bloginfo(); -- now the code is syntacticly correct although not syntactically preferred (i.e. it would be preferred to use single quotes because there is no need to parse the text found in the function call). Finally, I've added a third snippet which shows what your body tag should look like after adding the "container" tag. Cheers! @ james - For the second snippet in the post, there should be two dashes to indicate the closing of the html conditional statement. I have corrected that error.

Also, regarding the single quotes in the second snippet: In every instance where there is a single quote, it should be the standard single quote character found to the right of the semicolon key on a QWERTY keyboard. However, after a thorough investigation, I found that WordPress or the Syntax Highlighting plugin was translating the second set of single quotes into “closing curly single quotes.” I even checked the database and found that I have the data in there correctly; however, as it gets rendered, the quotes get incorrectly translated somewhere.

SO, to fix this I used double quotes in the call to bloginfo(); — now the code is syntacticly correct although not syntactically preferred (i.e. it would be preferred to use single quotes because there is no need to parse the text found in the function call).

Finally, I’ve added a third snippet which shows what your body tag should look like after adding the “container” tag.

Cheers!

]]> By: james http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-805 james Sat, 03 May 2008 07:27:49 +0000 http://michaelwender.com/?p=681#comment-805 gr. the comment engine snipped the last bit of the code. email me if it isnt clear what needs to be changed. thanks! gr. the comment engine snipped the last bit of the code. email me if it isnt clear what needs to be changed. thanks!

]]> By: james http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-804 james Sat, 03 May 2008 07:26:24 +0000 http://michaelwender.com/?p=681#comment-804 I am just getting started on this, and i am glad to find your snippets of code here, but i think you used an emdash instead of two hyphens in the and, i dont know if it matters, but you used ’ instead of ' in ’template_directory’. so really the code should read: <link rel="stylesheet" href="/blueprint/print.css" type="text/css" media="print" /> <!--[if IE]><link rel="stylesheet" href="/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]--> And just for the sake of clarity, my body tag now looks like: <body class=" container"> thanks for the good work, seeing the code on here gave me the guts to try it out myself. please post more as you integrate these two very cool tools. I am just getting started on this, and i am glad to find your snippets of code here, but i think you used an emdash instead of two hyphens in the and, i dont know if it matters, but you used ’ instead of ‘ in ’template_directory’. so really the code should read:

<link rel=”stylesheet” href=”/blueprint/print.css” type=”text/css” media=”print” />

And just for the sake of clarity, my body tag now looks like:

<body class=” container”>

thanks for the good work, seeing the code on here gave me the guts to try it out myself. please post more as you integrate these two very cool tools.

]]> By: Michael http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-795 Michael Mon, 28 Apr 2008 12:31:01 +0000 http://michaelwender.com/?p=681#comment-795 Adam, thanks for commenting. Furthermore, I'm just happy that one of my commenters has used the word "reticent" in his comment. ;) Adam, thanks for commenting. Furthermore, I’m just happy that one of my commenters has used the word “reticent” in his comment. ;)

]]> By: Adam Kayce http://michaelwender.com/2008/04/15/using-wordpress-sanbox-and-blueprint-css/#comment-787 Adam Kayce Fri, 25 Apr 2008 18:51:06 +0000 http://michaelwender.com/?p=681#comment-787 Interesting; I've been reticent to dive into the Sandbox or Blueprint... and yet, there's a keen method to this madness. I've been investigating various frameworks, and these two seem to be champs (one of my own sites uses The Morning After, too, so I'm semi-familiar w/ Blueprint). Putting the two together just may be the best of both worlds... if, I can figure out all the classes and stuff! Breathe... patience... and give it time. That's what I'm telling myself. Good stuff, though. Thanks for the merge. Interesting; I’ve been reticent to dive into the Sandbox or Blueprint… and yet, there’s a keen method to this madness.

I’ve been investigating various frameworks, and these two seem to be champs (one of my own sites uses The Morning After, too, so I’m semi-familiar w/ Blueprint). Putting the two together just may be the best of both worlds… if, I can figure out all the classes and stuff!

Breathe… patience… and give it time. That’s what I’m telling myself. Good stuff, though. Thanks for the merge.

]]>