Making A Header Image For The StudioPress Theme

Written by Costa on April 8, 2008
Categories: Theme Modification Tips

Finally had some time and the mood to do some WordPress Theme modding again. As promised earlier, I put the StudioPress Theme to task again, this time using the codes given to me by Darran of LimeTouch.

I must say here that this mod might be a little difficult for one that has entirely no knowledge of CSS as it involves modding the stylesheet and the header files in order to get a resonably good alignment for the header image. However if you are as adventurous as me and enjoy having your head knocked against the wall, please be my guest. Remember to keep an original copy of the theme after you have uploaded it to xammp so if you screw up so bad that you can’t remember what you did, you can always replace the corrupted file with the original one.

First thing you got to do is to make your image. To make things easier, make the image width not more than 500 px. The height is not an issue, so you can make it whatever you like. Title the image whatever you like and upload it to your theme’s image folder. Now open your stylesheet and scroll down until you see the #header code. Immediately after the division sign insert these codes.

#header {
background: url(images/header2.jpg);
float: left;
width: 310px;
height: 90px;
margin-top:0px;
}

Those are mine preference. Adjust the dimensions accordingly. Now when you reload your theme, you should see the image appearing on your header, but everything seems all jumbled up. The search box will be appearing inside your header image and the RSS Button will be pushed down below your header. All this has to do with the header file. The search box is located within the header wrapper in the header file so it appears inside the header image. To overcome that, we have to move the search box away from the header wrapper.

Open your header php and locate the codes for the search box. It should be directly below the codes <div id=”wrapper”>. Cut and paste the codes to the position immediately before the closing of the header codes. </head> Update and reload your theme. The search bar should now rest somewhere inside the blue column on the top. In my case, I just remove the search box entirely as I feel it is never used and if I do want a search box, I can always use the widgets available and place it in my sidebar.

Now comes the RSS image. Locate these codes in your header php.

<div class=”cleared”></div>
<div id=”underheader”>
<div id=”toprss”><a href=”feed:<?php bloginfo(‘rss2_url’); ?>”>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/grabrss.gif” alt=”grab our rss feed”></img></a>
</div>

Cut the whole lot and paste them, also just before the closing of the header, </head>. Update and reload again. The RSS image should know be at the same level as your new header image. Now the whole header will look a lot better.

I faced some problems like the whole page content going out of alignment and that was because there was an extra closing division tag that I forgot to remove when I deleted the search box codes. The whole portion of the head codes should look something like this. (Without the Search Box)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta name=”verify-v1″ content=”2t2I3SJ6iToU8/B62DxxdpwXzDqhB5VPZbArSs55ZJw=” />
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<title><?php if (is_home () ) { bloginfo(‘name’); echo ” – “; bloginfo(‘description’);
} else { wp_title(”,true); echo ” – “; bloginfo(‘name’); }?></title>
<meta name=”robots” content=”index,follow” />
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” />
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<link rel=”icon” type=”image/x-ico” href=”<?php bloginfo(‘template_url’); ?>/images/favicon.ico” />
<?php wp_head(); ?>
<div class=”cleared”></div>
<div id=”underheader”>
<div id=”toprss”><a href=”feed:<?php bloginfo(‘rss2_url’); ?>”>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/grabrss.gif” alt=”grab our rss feed”></img></a>
</div>

</head>

So if something don’t seem right, compare and see if you an extra </div> somewhere. Bear in mind that what is written here is just for the StudioPress Theme. Other themes works differently. Take a look at my other blog, Online Entrepreneur, where I am using the theme. It should give you a rough idea of how it should look. I replaced the background and the RSS image as well.

Advertisements

7e3740b17266a8c8381d505ee9ced6f1

Article by Costa Fong

@costafong

Who loves to mod and mess up WordPress Themes.

Costa has written 557 articles here. Some are awesome, some are lame.

If you enjoyed this post, whether it's awesome or lame, consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

SUBSCRIBE NOW to receive free Photoshop Action scripts for creating beautiful eCovers.

Users who found this page were searching for:

studiopress full header
studiopress add icon in header
adding an extra image into wordpress header
full header on studiopress template for wordpress
make header image stick to the top wordpress
where do i upload my images to for studiopress

18 Responses to “Making A Header Image For The StudioPress Theme”

Comments

Read below or add a comment...

Darran

April 8, 2008 at 9:39 pm

I hoped my codes helped I am just having a terrible time with my own blog design, elastic layouts
David

June 6, 2008 at 9:37 am

I tried doing the steps you wrote here and the image wouldn’t appear. In the first step where you said to place the code after the “division sign” I tried doing so and no image appeared. The image I have is located in my uploads folder and I’m not sure I know what you mean by “division sign”
- Costa
  
  June 6, 2008 at 8:07 pm
  
  Hi David,
  
  The image must be uploaded to the image folder in the theme, not your usual upload folder in WordPress.
  
  I assume you know how to upload a new theme to your server. Go back to where you uploaded the theme, open the folder and and you will see another folder named “images” inside. Upload your image into that folder.
  
  Remember the exact name of that image file. If you named it “header” then follow the steps in step one. Else, replace the word “header” with whatever name you use.
  
  Hope this helps.
  
  Cheers!
David

June 6, 2008 at 11:06 pm

Thank you for clarifying that, but I was wondering where the “division sign” is. I know you said to place the code after the division sign but I have yet to see it in the style sheet after the #header.
- Costa
  
  June 7, 2008 at 8:29 am
  
  Hi Again,
  
  Every function, if i can call it that, is enclosed within it’s own division, denoted by this sign, { and this sign, }. so you must put whatever extra codes you plan to add outside if any divisions or else that particular function will be screwed.
  
  If you look at the header division you will see “#header” followed by { before the description of how the header should look. The there will be another } to close that whole division.
  
  However, if you are just planning to add a header image, you need not bother about this. Just find the header division in step one and add in the extra codes.
  For more info check out this post.
  
  http://blogigs.com/simple-modifications-for-your-wordpress-theme/
david

June 7, 2008 at 10:40 pm

thank you so much. you are amazing for getting back to me on this subject whenever I have a question. great post, great blog, and i’ll definitely be coming back.
david

June 8, 2008 at 3:05 am

is there instructions on how to add the search bar or the feedburner email subscription bar under the rss button? also when i add my blog title in the settings of wordpress is pops up above my logo…how would i prevent that? (sorry for all the questions but i’m a boob )
david

June 8, 2008 at 4:21 am

p.s. i meant noob lol lil humor for my troubles
- Costa
  
  June 8, 2008 at 8:54 am
  
  No problem at all David, It’s my pleasure to be able to help.
  
  I visited your blog and saw you have successfully inserted the header image. Congrats on that!
  
  To add the e-mail subscription form just locate the RSS image codes which is in the header php. (second piece of code in the above post) Now you will see the “div” and “/div” tags as compared to the } symbol in the stylesheet. Just BEFORE the “/div” tag insert all the codes of the subscription form that you copied from feedburner. Make sure you did not accidentally delete the “/div” tag when doing this or else everything will go haywire. So remember to back up your original header php file first.
  
  As for the Search bar, The Google Search Bar that you are using is much better than the default one. It actually helps Google Index your site more. As a suggsetion, you can put it inside your “Welcome” box after your welcoming message. It will look neater that way and not clutter your header. Just stick the codes in after your introductions.
  
  Your second question, If you want to have a blog title, but do not want it to show up, go back again to your stylesheet. Scroll down until you see this division -#underheader h1.sitename. Inside this division type in, “display:none” without the quotation marks, but remember the semi colons after that line. Like thus.
  
  #underheader h1.sitename {
  display: none;
  padding: 0 0 0 0;
  position: relative;
  font-size: 23pt;
  width: 600px;
  }
  
  Now, your title will still be there when you look at the Title Bar on top of your browser, but it won’t be displaying in your header.
  
  Enjoy messing up your theme! Hope you make lots of dollars from your blog. I have one recommendation if you are just starting out on MMO, but if you are already an expert, you can forget this. Go and read Grizz blog. He is starting a brand new tutorial from scratch and what he is going to tell you may open up something that you have not realized before. Click the link below.
  
  Making Money Online For Beginners.
David

June 8, 2008 at 11:54 am

Once again thank you. My blog is actually going to be a mixed bag of things and not focus on just MMO. I already follow Grizz along with Vic and Court so I’m definitely learning many ways to earning online.

As for my theme you are a lifesaver, BUT there are only TWO things left I need to ask and then my theme is complete: how do I make my entire background black (since the background of my logo is black, unless you think it looks ok) and how do I make the letters white for the feedburner email subscription box?

I’m definitely linking to your page for all this work you’ve helped me with
- Costa
  
  June 9, 2008 at 9:22 am
  
  Hi David,
  
  Now that is the easy part. In your stylesheet, look for these codes. It is just under the “Reset Default Ends” comment.
  
  body {
  position: relative; /* Fixes browser resizing bug in IE6 */
  margin: 0 auto 10px auto;
  width: 950px;
  font-family: Verdana, sans-serif;
  text-align: center; /* IE Centering Technique */
  background: #000000;
  }
  
  The last line which says “backgound” is what you have to change. These are my preferences. The original will have an image as background. Delete that and add in #000000; which is the hex color code for black.
  
  Next your feed subscription form. Look for this line of words within the whole bunch of codes for the form, “Enter Your Email Address”. Just before these words, type, < font color="white" >After the Enter Your Email Text, type < /font > There should be no white spacing for these codes. I purposely spaced it so the tags will not work here or else you won’t see anything
StudioPress User

September 28, 2008 at 10:17 am

I also did something similar to my blog. I put an image header and got rid of the RSS logo completely form the top.

I first updated the style.css file:
#underheader {
background-image: url(“http://islam4parents.com/wp-content/themes/StudioPress/images/header.png”);
background-repeat: no-repeat;
background-position: right;
/*background-color: green;*/
clear: both;
margin-top: 20px;
padding: 0 0 15px 0;
}

Then all I had to do was comment out this in the header.php file:

<img style=”float: right” src=”/images/header.png” alt=”grab our rss feed”>
<a href=”feed:”>
<img src=”/images/grabrss.gif” alt=”grab our rss feed”>
Jonathan

April 28, 2009 at 3:17 am

Hi, great work on the tutorial!

Do you know how to center the theme? I’m browsing everywhere to find the answer, but I don’t know what file to edit – and with which tags.
You shure seem somebody who knows what he’s doing! Can you help me out? Thanks!
- Costa
  
  April 28, 2009 at 8:52 am
  
  Hi Jonathan,
  
  It’s been nearly a year since I used the Theme, so I have to apologise as I won’t be able to help now. I have this very bad habit of changing themes every time WordPress updates. LOL. I hate knowing that I am using a Theme that is not up to date with WordPress.
  
  Anyway, what do you mean when you said, “center the theme” Do you mean your theme is not aligned to the center of your monitor screen?
Jonathan

April 28, 2009 at 2:46 pm

Thanks for your reply!
Yes, my theme (studiopress) is now aligned to the left (by default), but i’d like it centered.
If you could help me, thanks!

Is it not so smart to use a rather outdated theme?
- Costa
  
  April 28, 2009 at 10:35 pm
  
  Hi again Johnathan,
  
  That’s strange. Most, if not all, Themes aligns to the center by default. The StudioPress theme is from a very reputable guy so it surely cannot be a design problem. Are you using IE6? It is notorious for misreading css codes. If so, I’ll suggest you update your browser to Firefox or at least IE7
  
  If it’s not a browser problem and if you have not mess with the CSS file, I really cannot figure out whats wrong. BUT if you have done something with the CSS file, try replacing that file with the original one.
  
  And your last question, it’s a matter of choice. If you don’t mind missing all the new features that the latest version of WordPress has to offer, there’s nothing wrong with using an “outdated” Theme. I’m just paranoid, that all.
  - Jonathan
    
    April 29, 2009 at 7:28 pm
    
    I’m using IE 8, and a new clean install WP 2.7.1
    I haven’t messed up the CSS, because I simply don’t know what to edit, lol.
    I editted some content text in a rsidebar.php, but that shouldn’t be the flaw.
    So, I guess (indeed) that it is a bug of somesort.
    
    Well, thanks for thinking along with me. I’m gonna post it to the guy who made the theme. (Although others have reported the same bug.)
said026

May 6, 2009 at 1:22 am

Thanks you very much ^^