Hi, please

Author Archives: Ken Hurd

Adding Blueprint CSS to your Wordpress theme

Adding Blueprint CSS to your Wordpress Theme.

This tutorial assumes that you have already installed Wordpress, if you have yet to do so check out the 5min Wordpress installation or check with your hosting company, many come with a ‘one click install’ option.  In this tutorial we’ll be adding Blueprint CSS to the powerful blogging platform Wordpress. This tutorial has been written using Wordpress 2.9.2.

What is Blueprint CSS and why should we care?

Good question. Blueprint CSS is a CSS framework that provides structure to your design.   When installed it comes with a grid already in place, typographic styling and other goodies that give a nice foundation for the styling of your content.  It is easy to use and probably the most important thing about Blueprint is the amount of time and headache it can save.

Here and here are two tutorials I found useful while learning Blueprint.

1. Download Blueprint CSS. Blueprint comes with a custom 24 column grid of 950px in width or you can create your own custom grid here.

If you decide to use a custom grid generated from bluecalc you need to modify one of the provided stylesheets (steps 2 &3) .

2. Open the screen.css file in your favorite text editor
3. In that file, replace the code under the comment /* grid.css */ (and before the comment /* forms.css */) with the one provided to you through the generator.

*Please Note*  I happen to be using a child theme of Thematic but it is not required to install Blueprint.

4. Once your style sheets are set create a folder called ‘CSS’ inside the theme folder you are using(found within the WP-content folder), and place the downloaded blueprint folder within ‘CSS’.  Create another stylesheet called ’style.css’ that will become your personal stylesheet for styling your blog.  This will allow you to modify the styling without having to disrupt the styling already in place by Blueprint CSS.  See below for a screenshot of file structure:

Great, now Blueprint is in your theme and ready to be called to action.  To do this we need to call it with a little bit of PHP since it is working in a dynamic setting.

5. Open your funcitons.php file (found in your theme folder) in your favorite text editor

6. Using PHP we’ll need to call each of the provided stylesheets downloaded through Blueprint CSS as well as our stylesheet that we’ll be modifying.   Insert the code below and be sure to insert the directory name you are using in place of the text ‘XXXXX’ below.   The first 3 functions call the stylesheets provided by Blueprint CSS, the final is the custom stylesheet you’ll be using.  NOTE ***This stylesheet should always be called last.***

7. Finally let’s invite Blueprint to the party.

In your style sheet ’style.css’ you’ll want to import the blueprint provided ’screen.css’ file at the top of your imports if you happen to have multiples as with Thematic.

/*Invite Blueprint to the party*/
@import url('blueprint/screen.css');

That’s it for the addition of Blueprint CSS

Now you can add classes to your HTML to span various columns within your grid as shown in the youtube tutorial.  You can also DL a cheatsheet for Blueprint here:

BlueprintV0.8byGJMS

Good luck and happy styling!

CFS to-do

OSD Project Proposal:

I am going to create a tutorial on either how to add blueprint css to your wordpress theme or creating a menus within WP 3.0

WP Progress this week:

1. Blueprint CSS is up and working

2. The site is now live – thanks to Angel and Mushon for the help

Still left to-do:

1. find and install a plug-in for the image gallery on item pages

2. create secondary navigation for each category

3. find and install plug-in for e-commerce portion

4. pull items from pages to the index page in a rotation fashion.

A lot left but I feel like I’m almost there now that some of my technical issues have been address.

MAMP to live

I’ve also been stuggling with going live, a lot of back and forth this week with my hosting company.

I was able to transfer my site from MAMP to my host(thanks Angel) but it seems as though my styling is not being called.

Here’s my site.   Anyone else have this issue?  The funny thing is, the styling works from my machine but not when I view from other machines so maybe my style sheets are still linked to my local host?    That’s my guess but I’m not sure how to trouble shoot that…

CFS – the styling…

Hi all,

I am struggling with the positioning of several elements, hoping someone can send along some much needed help!  Sorry for the delay on this, I had installation issues with my live site and had to reset my gist.  I’ve got my repository 01 up and a link to my site

Thanks in advance.

1. the positioning of my blog title(the logo) is roughly 70px lower than wanted and not centered.

2. i’m unable to position the menu bar and blog description directly under the logo.

3. not so much a positioning question but more a php question (i think?)…the secondary navigation floating to the right of the logo, how do we build a set of secondary links or what should I be searching for in the plug ins?

Thanks in advance!

H2H2 – w3schools

http://www.w3schools.com/

The popular and widely used online resource for all things programming.

This site is pretty amazing in the depth of knowledge one can acquire here.  They claim to be the largest web developer site on the ‘net and all of the tutorials and information are free, very nice.

The homepage does a nice job of structuring all of the content.  As you can see there is a ton of information, from topics as basic as your first <p> tag in HTML to more complex server scripting tutorials and syntax.  Each topic is broken down further into categories and continuing to more advanced subjects.  All of these are laid out in succession from beginner to advanced, with each chapter building on the previous.

Great, so you’ve found a site that consolidates all of this information.  Can’t you just google search your problem and find it almost as easily?  Yes, you can but w3schools offers a great section within their site that allows you to tinker with the code and see what you’re doing to it, much like the way firebug works in our browsers.   Example As you can see, putting something into action like this is a very powerful tool to assist in the learning process.

While the ability to manipulate the examples are helpful, I feel like the examples themselves leave a bit to be desired.  They are pretty drab and not really inspiring the creative process.  The simplicity can become a bit confusing as well.  On the homepage they state the following:

“Because time is valuable, we deliver quick and easy learning.”

“Never increase, beyond what is necessary, the number of words required to explain anything”
William of Ockham (1285-1349)

This is all well and good but often you are not going to use the code in the fashion that they use it, it fails on a real world level.  It is so boiled down that the structure of code is affected and you are often left wondering about how this is structured within the rest of my content.  This is a tricky topic to touch on, understandably, because everyone’s outcomes and needs for the code differ.

Overall I think this site is a great resource.  Much like the encyclopedia is, it should be used as a reference material or as a support to a greater understanding of the code.  I cannot imagine teaching yourself any of the programming languages solely based on the knowledge of w3schools.

Additional resources:

Forum is offered as well as a reference list if you don’t know what that word or acronym means and need a quick look-up.

Hope this helps as another tool in the web building arsenal :)

mock up #2

i’ve posted another direction.

any feedback would be much appreciated. thanks

carrot flowers shop mock #1

i’ll try and have another page up this week.  any feedback would be super sweet!

thanks.

updated wireframes

Ps mockups to come, sorry for the delay.

WPress trouble shooting

Last night I had an issue when trying to connect to the htdocs for my WP site locally.  It responded by saying “Error establishing a database connection”.

I uninstalled everything and started over again.  This time when renaming the the database username in the config.php file I kept it as “root” as shown in the youtube video around 4:30.

This did the trick but I’m not really sure why.  Mushon, do you know why the username would need to be “root”?  Maybe it doesn’t and the reinstall is what really did the trick for me?

What is PHP?

I found this site that does a pretty good job of briefly explaining what PHP is and how it’s considered to be dynamic…

What Is PHP?