WordPress and Graphics II

In this tutorial, you can learn how to change your masthead in your WordPress theme. This change may involve working with a CSS file, which Linda also covers here. You will need to use Photoshop or some other graphic program that can create .jpg, .gif and/or .png files.

How to Use the Photoshop Pack with Hybrid News

If you plan to use the Photoshop Pack for the Hybrid News Theme, you really do have your work cut out for you. The changes are time-consuming; but, once you complete them, you'll feel more confident about how your site works – mainly because you will delve into how that site works.

The first step is to open the .css file in your child theme (or, rather, your child-of-a-child theme). When you open that .css file, scroll down a bit until you see this:

************************************************/
body {
      font: 12px/22px Verdana, Geneva, Tahoma, sans-serif;
      }
 
/* Body container */
#body-container {
      background: #fff url(images/bg.png) repeat-x 0 0;
      }
 
/**
* Elements
************************************************/

You can see above that the body-container uses both a background colour (white = #fff) and an image. That image is "bg.png," so that's the image you need to find in your new images folder. If you are working in Photoshop and with the Photoshop Pack, that image will be a "bg.psd" file.

If you are working with another graphic image program, you have no worries – simply open the "bg.png" file and follow the instructions for "Masthead Image Changes in Themes Other Than Hybrid News" above.

If you are working in Photoshop with the .psd file, open the bg file in Photoshop. This is what you'll see:

If you do not see all the layers shown in the layers window above right, then click on the arrows by the folders in that window and you'll see your layers.

Now you can change the colours on those layers one by one. If you wonder why one small strip contains so many layers, take a look at how this background looks at Appomattox Transcription:

In the image above, you can see that the background is created by a gradient affect, from dark at the bottom to light at the top. You can keep this gradation or flatten the colour so that you lose the gradation. Or, to make life REALLY easy, you can flatten the image and use the Photoshop Gradient Tool to replicate this look, but with a different colour. I'm going to walk you through those steps, but I'll warn you to read through this first to understand why flattening that image may not be the way to go...

1. First, choose a colour that you want to use for the top part of the gradient, then choose a colour you want for the lower part of the gradient. In my case, I'm choosing a red and a white, and the red part will be at the top of the background image.
2. Flatten the .psd file (Layer > Flatten Image) so that you are working only with one layer. You can see above that the image is flattened, as only the background shows in the layers window.
3. Note that, in the bar above the windows, the selection I made for the gradient...it's a simple bar image, but you can use any style you want. Experiment! After all – you have the original image in the Photoshop Pack folder, and you always can retrieve it if you screw up.
4. Take the gradient tool and place it at the "0", or at the top of the flattened image, and drag it downward.
5. When you're finished, save the file in your custom images folder as "bg.png". Photoshop will ask if you want to replace the file that already exists in that folder and you will say "yes." (just for details, I choose "None" when the Interlace window pops up).
6. Upload that image – not the entire folder – to your images file in your child theme on the server.

I followed the steps above, and here are the results:

Oops! That new background change creates two problems for me...first, the menu at top needs to change from black to the top red colour. And, the bottom menu also has issues. I'll tackle the first issue here, and you can replicate the changes to make your site work for you, too:

Open that .css file from your child-of-a-child theme if it isn't already open. Go to this part of the file, where the code for navigation resides...the navigation code covers the top part of that masthead area.

* Page Navigation
************************************************/
#navigation {
      width: 960px;
      height: 25px;
      margin: 0 auto;
      background: #00070f;
      }
#page-nav {
      float: left;
      width: 700px;
      margin: 0 0 0 -15px;
      }
#page-nav ul {
      list-style: none;
      margin: 0;
      }
#page-nav li {
      float: left;
      margin: 6px 0 0 0;
      padding: 0 0 8px 0;
      }
#page-nav a {
      display: block;
      font: normal normal normal 11px/11px Verdana, Geneva, Tahoma, sans-serif;
      color: #999;
      padding: 0 15px 0 15px;
      border-right: 1px solid #353535;
      }
 
/* Drop-down styles */
#page-nav li:hover ul, #page-nav li.sfHover ul  {
      top: 19px;
      }
#page-nav li li:hover ul, #page-nav li li.sfHover ul, #page-nav li li li:hover ul, #page-nav li li li.sfHover ul  {
      top: -1px;
      }
#page-nav ul ul {
      border-top: 1px solid #222;
      background: #111;
      }
#page-nav li li {
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #222;
      }
#page-nav li li a {
      padding: 7px 7px;
      border: none;
      }
 
/**
* Search form (in navigation)
************************************************/

I marked the part you need to change first in yellow above. The hex colour that needs to go in that space, where the #00070f now resides, is the hex number of the top colour you used for your gradient. In my case, it is the red colour, which is #f50b0b. I replace that hex number, save the file (Save for Web makes this process easy in PhotoShop), and upload it to my server. The results:

Now I need to alter the type in that menu so readers can see it. That code is in the same navigation code shown above in this section:

#page-nav a {
      display: block;
      font: normal normal normal 11px/11px Verdana, Geneva, Tahoma, sans-serif;
      color: #999;
      padding: 0 15px 0 15px;
      border-right: 1px solid #353535;
      }

Change the "color" to whatever colour you need to make that type stand out – if the background is dark, make the type lighter. If the background is lighter than the original – as mine is – then make the type darker. In my case, I made it black for now, so that it stands out:

Note the "|" barrier to the right of the "Home" link – that is the "border-right: 1px solide #353535;" in the code above. If you need to change that colour, that's where you do it.

Now, I need to work on the bottom part of that masthead. Not that the colour seems to recede under that menu, and that the type is outrageously ugly. Part of the issue here is that this client does not have content to help flesh out that menu, so I may render it invisible. You, however, do not need to do this. But, you can learn where this code lies so you can alter your site to fit your needs.

First, I need to go back to the background and change that colour to the bottom colour shown in the image above. But, that makes my background pink, it jams the type up against the white background in the entry form, and other issues continue to pile up. While you might want to take this route (and I have for some clients and it worked out great), the easiest route is to alter the bg.psd file by layers so you do not need to go that deeply into the .css code. If you are, however, a developer, you can see the possibilities within this method.