WordPress.org

1. dobner
   Member
   Posted 2 years ago #

   Hey,

   I want to swap out the standard header text for my site

   http://mountainash9.com/

   and include a text image that I am producing in PhotoShop.
   I have been looking in the documents archive to find out what I need to do and still not clear. I want the image to:

   1. Float on top of the existing greenish background
   2. Left justified
   3. Be clickable

   Has anyone got instructions on how to do this? If not, can you give me steps to follow to make this change. I'm not a WordPress jockey.
   Also in what format do I need to save the text image file in (tif, gif, jpeg) in order to get a transparent background?

   Thank you

   Frank

2. s_ha_dum (was apljdi)
   Member
   Posted 2 years ago #

   You'll need .gif or .png for transparency. .png will give you better resolution.

   You'll need to edit your theme to do this, so open your theme's header.php file in a text editor and find this part:

   <div id="headerimg">
      <h1>
         <a href="http://mountainash9.com/">Mountain Ash</a>
      </h1>

   Its not likely to look exactly like that in the .php source but hopefully you can find it. There is good chance that "Mountain Ash", for example, will be something like <?php bloginfo('name'); ?>. You need to convert that to an image. I'd do it something like this:

   <div class="myheaderimage">
      <a href="http://mountainash9.com/">
         <img src="path/to/the/image" alt="" />
      </a>
   </div>

   You almost always need an absolute path for images in WP so look into the bloginfo function. Once you get the image to show up you'll have to move to step two-- the CSS to get it to show up the way you want.

3. dobner
   Member
   Posted 2 years ago #

   Does the whole <div..>....</div> in the current header.php file get changed to the <div..>...</div> with all of the appropriate changes that you suggested above?

   I think I will need to put the blog in PRIVATE mode while I do this.

4. s_ha_dum (was apljdi)
   Member
   Posted 2 years ago #

   I changed the <h1> to a div. That's all. div class headerimg in your theme contains a whole lot of stuff. The class is misnamed if you ask me. You may also be able to add a background image to that div though. You could try adding in your style.css:

   div.headerimg {
     background: url('path/to/image.jpg');
   }

5. dobner
   Member
   Posted 2 years ago #

   Well apljdi

   I was able to make the changes that you suggested and changed the header, but as you can see, I still have a white background that I need to deal with.

   http://www.mountainash9.com/

   Thanks

   Frank

6. dobner
   Member
   Posted 2 years ago #

   Hey

   I made another change to it and happy with the placement. I think I went a little overboard on drop shadow, but that is for another day.

   thanks for your help

   Frank

Topic Closed

This topic has been closed to new replies.