Customizing Kubrik with Wordpress

Exclusive offer: get 50% off this eBook here
WordPress and Flash 10x Cookbook

WordPress and Flash 10x Cookbook — Save 50%

Over 50 simple but incredibly effective recipes to take control of dynamic Flash content in Wordpress

$23.99    $12.00
by Peter Spannagle Sarah Soward | April 2010 | Content Management Open Source Web Development WordPress

In this article by Peter Spannagle and Sarah Soward, authors of the book Wordpress and Flash 10x Cookbook, we will apply the knowledge of CSS stylesheets, template files, and template tags and make some changes to the default Kubrik theme.

Getting ready

The first step is to make a list of the changes that you want to make. Here's what we've come up with:

  • Increase width to 980px
  • Increase font sizes in sidebar
  • Use a graphic header

We've picked 980px as our target width because this size is optimized for a 1024 screen resolution and works well in a grid layout. Several CSS adjustments will be necessary to realize this modification, as well as using an image editing program (we will be using Photoshop).

How to do it...

To increase the page width, the first step is to determine which entries in the CSS stylesheet are controlling the width. Using Firebug to inspect the page (as seen below), we find that the selector #page has a value of 760px for the width property. And #header has a width of 758px (less because there is a 1px left margin). The .narrowcolumn selector gives the main content column a width of 450px. And #sidebar has a width of 190px. Finally, #footer has a width of 760px.

Customizing Kubrik with Wordpress

So, we will increase #page and #footer to 980px. #header we will increase to 978px. Let's apply all of the additional 220px width to .narrowcolumn. Taking note of the existing 45px left margin, our new value for the width property will be 700px. That means #sidebar width will remain at 190px, but the margin-left will need to be increased from 545px to 765px.

  1. Click on Appearance | Editor.
  2. In the right-hand column, below the Templates heading, click on style.css.

Scroll past the section that says /* Begin Typography & Colors */, until you get to the section that says /* Begin Structure */.

Make the following changes to the stylesheet (style.css), commenting as appropriate to document your changes.

#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 980px; /* increased from 760px */
border: 1px solid #959596;
}
#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 200px;
width: 978px; /* increased from 758px */
}
.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 700px; /* increased from 450px */
}
#sidebar {
margin-left:765px; /* increaseed from 545px */
padding:20px 0 10px;
width:190px;
}
#footer {
padding: 0;
margin: 0 auto;
width: 980px; /* increased from 760px */
clear: both;
}

Adjustments via Photoshop

We'll also need to use an image editing program to modify the three background images that create the rounded corners: kubrikbg-ltr.jpg, kubrickheader.jpg, and kubrickfooter.jpg. In this example, we modify kubrik-ltr.jpg (the background image for #page), a 760px image.

  1. Open up the image in Photoshop, select all, copy, create a new document (with a white or transparent background), and paste (Ctrl-A, Ctrl-C, Ctrl-N, Ctrl-V).
  2. Increase the canvas size (Image | Canvas Size) to 980px, keeping the image centered on the left-hand side by clicking on the left-pointing arrow.
  3. Select one half of the image with the Rectangular Marquee Tool, cut and paste.
  4. Use the Move Tool to drag the new layer to the right-hand side of the canvas. In this case, it does not matter if you can see the transparent background or if your selection was exactly one half the image. Since the middle of the image is simply a white background, we are really only concerned with the borders on the left and right. The following screenshot shows the background image cut in half and moved over:
  5. Customizing Kubrik with Wordpress

  6. Save for Web and Devices, exporting as a jpg. Then, replace the existing kubrikbgltr.jpg with your modified version via FTP.

The steps are similar for both kubrickheader.jpg and kubrickfooter.jpg. Increase the canvas size and copy/paste from the existing image to increase the image size without stretching or distortion. The only difference is that you need to copy and paste different parts of the image in order to preserve the background gradient and/or top and bottom borders.

In order to complete our theme customization, the width of .widecolumn will need to be increased from 450px to 700px (and the 150px margin should be converted to a 45px margin, the same as .narrowcolumn). Also, the kubrikwide.jpg background image will need to be modified with an image editing program to increase the size from 760px to 980px. Then, the individual post view will look as good as the homepage. By following the same steps as above, you should now be prepared to make this final customization yourself.

Our next goal is to increase the sizes of the sidebar fonts. Firebug helps us to pinpoint the relevant CSS. #sidebar h2 has a font-size of 1.2em (around line 123 of style.css). Let's change this to 1.75em. #sidebar has font-size of 1em. Let's increase this to 1.25em.

To use a graphic in the header, open up kubrickheader.jpg in a new Photoshop document. Use the magic wand tool to select and delete the blue gradient with rounded corners. Now, use the rounded rectangle tool to insert your own custom header area. You can apply another gradient, if desired. We choose to apply a bevel and emboss texture to our grey rectangle. Then, to paste in some photos, decreasing their opacity to 50%.

In a short time, we've been able to modify Kubrik by re-writing CSS and using an image-editing program. This is the most basic technique for theme modification. Here is the result:

Customizing Kubrik with Wordpress

WordPress and Flash 10x Cookbook Over 50 simple but incredibly effective recipes to take control of dynamic Flash content in Wordpress
Published: April 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

There's more...

Let's explore theme customization in more detail, continuing to use the default Kubrik theme. In the subsequent sections, we will add a second widgetized sidebar and create a custom template for a page. These final two goals provide the opportunity to apply our understanding of template hierarchy and the use of template tags.

Adding a widgetized sidebar

Adding a widgetized sidebar is an intermediate task. Let's make a unique sidebar which we can use in a custom page template.

First, let's add the CSS we'll need to the stylesheet. Our new sidebar is similar to the original. The larger font size and dashed border are the only stylistic differences:

#sidebar-custom {
padding: 0px 0 10px 10px;
width:190px;
margin-left: 765px;
border-left: 2px dashed #000000;
font-size: 1.5em;
}

We will also add our new selector to other stylesheet entries to avail ourselves of existing formatting:


#sidebar h2, #sidebar-custom h2 {
margin: 5px 0 0;
padding: 0;
}
#sidebar ul li, #sidebar-custom ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}
#sidebar ul ul, #sidebar ul ol, #sidebar-custom ul ul {
margin: 5px 0 0 10px;
}

Now, let's create a the sidebar itself. Create a new document in your text editor. We start with a

to hold the contents of the sidebar. Then, start an unordered list, followed by a function to display whatever widgets have been enabled for the custom sidebar. Next, some data to display in case no widgets are being used. Then, the end of the unordered list and the end of the if statement, followed by the end of the custom sidebar. Save this document as sidebar-custom.php and upload to the theme directory:
<div id="sidebar-custom">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_
sidebar('custom') ) : ?>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_
li=<h2>Categories</h2>'); ?>
<?php wp_list_bookmarks(); ?>
</ul>
<?php endif; ?>
</div> <!-- end sidebar-custom -->

The final step is to modify the theme functions to register our new sidebar. The easiest way to add multiple sidebars is like this:

register_sidebars(2);

Click on Appearance | Editor and click on functions.php.

You will see that Kubrik is set up to register a single sidebar:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}

Let's modify this entry to give the original sidebar a name (original), and then copy and paste the register sidebar function and give the second array another name (custom):

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'original',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'custom',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}

For more information, see: http://codex.wordpress.org/Widgets_API

Creating a custom page template

It's easy to create a custom page template.

Start by creating some CSS for the new page. We'll use the .narrowcolumn entry as a starting point:

.customcolumn {
float:left;
padding:0 40px ;
margin-left: 20px;
width:665px;
background: #F5B82A;
}

Now, create a new document in your text editor. The first thing you need is to declare the template name. This is wrapped in a PHP tag and commented out, as follows:

<?php
/*
Template Name: My Custom Page Template
*/
?>

Next, copy and paste the code that we will be starting with. In our case, we'll copy and paste the entire text of the page.php file from the default theme folder. You could use any existing template, such as index.php or archive.php, depending on your goals.

We also have the opportunity to use any template tags we choose in our page template. As an example, here we include the comment form:

<?php comments_template(); ?>

To use our new sidebar, simply modify the existing template tag:

<?php get_sidebar('custom'); ?>

To apply the new template, edit any page. In the Attributes menu on the right-hand side, there is a Template menu. Pull down to find and click to select the new template: My Custom Page Template. Click Update Page to save your changes. You can also apply a template via the Quick Edit menu in the Edit Pages screen:

Customizing Kubrik with Wordpress

Here is the finished code:

<?php
/*
Template Name: My Custom Page Template
*/
?>
<?php
/**
* @package WordPress
* @subpackage Default_Theme

*/

get_header(); ?>

<div id="content" class="customcolumn" role="main">
<br /><div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this
page &raquo;</p>'); ?>

<?php wp_link_pages(array('before' => '<p><strong>Pages:</
strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
<?php comments_template(); ?>

</div>
<?php get_sidebar('custom'); ?>
<?php get_footer(); ?>

Summary

You have now learned the basics of theme customization. To summarize, many changes are made simply by modifying CSS rules. Other changes require the use of an image editing program. You've also learned how to add a widgetized sidebar, and how to create a custom page template that uses template tags to output content from the database. Keep studying, and practicing, and you will soon be able to modify any theme, or even create your own!

If you have read this article you may be interested to view :

WordPress and Flash 10x Cookbook Over 50 simple but incredibly effective recipes to take control of dynamic Flash content in Wordpress
Published: April 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Peter Spannagle

Peter Spannagle is a WordPress Consultant and technology trainer, specializing in client-side coding, design using the Adobe Creative Suite, and online marketing. He is based in Oakland, California and works with clients in the San Francisco Bay Area, statewide, nationally, and internationally. In over 12 years of consulting experience he has enjoyed working with small businesses, non-profits, green businesses, artists, and independent professionals. He invites you to contact him for help with your next WordPress project.

Sarah Soward

Sarah Soward develops the curriculum for and teaches the Adobe Creative Suite and design theory at the Bay Area Video Coalition (http://www.bavc.org). She has 5 years experience as a technology trainer and is Adobe Certified. She specializes in creating web and print collateral for small businesses and non-profits. She is the Art Director for The Pagan Alliance, a non-profit organization, and a working fine artist (oil painting and drawing). In addition to teaching Flash, she is also an expert in the use of Dreamweaver, Fireworks, Photoshop, Illustrator, and InDesign.

Books From Packt

WordPress 2.8 Theme Design
WordPress 2.8 Theme Design

WordPress 2.8 Themes Cookbook
WordPress 2.8 Themes Cookbook

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

OpenX Ad Server: Beginner's Guide
OpenX Ad Server: Beginner's Guide

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Getting started with Audacity 1.3
Getting started with Audacity 1.3

Django 1.1 Testing and Debugging
Django 1.1 Testing and Debugging

Grok 1.0 Web Development
Grok 1.0 Web Development

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software