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>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1 class=”sitename”><a href=”<?php echo get_option(‘home’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h2 class=”sitedesc”><?php bloginfo(‘description’); ?></h2>
</div><!– Closes underHeader –>
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.
Related posts:
- Clickable Header Image For The Neoclassical Theme The Neoclassical Theme comes with a revolutionary rotating header image. You can actually use as many header images as you like and they will rotate on each refresh. It’s a cool feature, but when it comes to branding your blog, this rotating images makes it quite difficult for visitors distinguish...
- Inserting A New Header Image I said before that I don’t like to mess with header images for WordPress Themes that does not comes with any header images. Themes like this one that I am using does not have provisions for header images and when you are not good in CSS codes like me, trying...
- Video Tutorial – Cutomizing Your WordPress Theme Header Image When I first started dabbling in WordPress Theme Customizations, I was zilch, having completely no prior training in any programming language whatsoever. I learned through sheer arrogance, not believing in the fact when we wanted to learn something, we should learn the basics first. Instead, I wanted the shortest...
- How To Add A Second Header To Your WordPress Theme Just added a second header to my Theme. When I created this Theme, there was no plans at all of wanting a second header as I don’t have anything that’s worth occupying that prime piece of blog estate, but since I am on a subscriber increment campaign, I thought...
- How To Add A Banner In Your WordPress Header Banner Ads is one of the most popular format for advertisers and publishers alike. That’s because banner ads often occupies the best piece of a blog’s real estate, that is the blog header or on the top of the contents. These areas are the most visible to anyone visiting...
{ 18 comments }
I hoped my codes helped
I am just having a terrible time with my own blog design, elastic layouts 
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”
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!
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.
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/
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.
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
)
p.s. i meant noob lol lil humor for my troubles
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.
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
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
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”>
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!
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?
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?
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.
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.)
Thanks you very much ^^
Comments on this entry are closed.