Create and Edit WordPress Themes: How to Style the Sidebar


show more Styling the sidebar provides you with in-depth training on Developer. Taught by Chris Coyier as part of the WordPress 3: Creating and Editing Custom Themes show less
please wait ...

Styling the sidebar

Our structure is looking good, our header is looking good, and we just finished with the navigation. So let's finish off styling of our sidebar. The last thing we have to do here are these little boxes over here, so if we look in the Photoshop file, this is what we are trying to accomplish, and now if we look in our index.html file, each of those boxes are within these divs here. Div with a class of widget. So that's what we are going to working with in our CSS.

Now I'll scroll to the bottom here, just after the navigation, and anything with a class of widget here is what we are going to be styling. Now in our Photoshop file, the only image we are going to be need is this gradient, little page curl thing here. That's this layer. I can verify that by turning at on and off, this layer here, Sidebar Box. So I am going to option click on the eyeball, and get just it activated.

Then in the Image I am going to Trim and give rid of all Transparent Pixels, so we have just it. I a...

Styling the sidebar
Video duration: 7m 55s 4h 28m Intermediate

Viewers:

Styling the sidebar provides you with in-depth training on Developer. Taught by Chris Coyier as part of the WordPress 3: Creating and Editing Custom Themes

Subjects:
Developer Web
Software:
WordPress
Author:
please wait ...