Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Running WordPress 3.1 with the free Boldy theme from Site5.

Here is a working version of my website: http://www.dekhoforum.com

I want to achieve something like this screenshot: enter image description here

i.e. Have a 2nd logo above the social media icons.

EDIT - Screenshot shows moving an existing image to the new location.
This is misleading, and I actually need a new placeholder for an image, and not to move the existing logo (which is the right image), as this will not be consistent on the other pages such as the blog. - In short, its a marketing requirement to get this logo at the top of each page, across the entire site.

One option I did ponder, was somehow trying to add another social media icon, but link it to my main company website.

I have tweaked PHP in the past on previous themes, but always had a little guidance from you wonderful lot.

Was wondering if anyone could advise? I have been snooping in the header.php, but I imagine I will need to write a new line in somewhere?

Any help would be great.

share|improve this question
    
How can I tweak my Question to get an answer? Perhaps I need to include a sample of the header PHP code? –  Simon Apr 4 '11 at 3:35
add comment

1 Answer

up vote 3 down vote accepted

This can easily be accomplished with CSS.

Sometimes it's better to use CSS to modify your theme. I use the Web Kit developer tools or Firebug to make live edits in the browser until it looks right then save it back to CSS.

Edit the following lines in style.css.

/* line 201  pulled down the icons to make room for the 2nd logo */
#topSocial {
    position:absolute;
    right:0;
    top: 150px;
}

/* line 80  add relative positioning to the wrapper div to allow the logo to be positioned absolute */
#wrapper {
    margin:0 auto;
    width:960px;
    position: relative;
}

/* line 85 made the header a little taller to make room for the 2nd logo*/
#header {
    height: 220px;
    position:relative;
    background:url(images/bk_header.png) 0 0 no-repeat;
}


/* line 312 moved the logo in place using position absolute */
#blurb img {
    border:none;
    position: absolute;
    top: 90px; 
    right: 15px; 
    margin-top: 5px;
}

The result:

enter image description here


Edit after question was clarified that an additional logo was needed

To add an additional logo open your header.php file and find the lines that look like this:

Edit

The 2nd logo code shown below should go at line 78 in your header.php file

enter image description here

<!-- END TOP SEARCH -->
<!-- BEGIN TOP SOCIAL LINKS -->

Between those two line add the basic XHTML to display a linked image:

<!-- END TOP SEARCH -->
<!-- BEGIN 2ND LOGO -->
<div id="new-logo">
<a href="http://link_you_want_image_to_point_to"><img src="http://url_of_image" width="xx" height="xx" /></a>
</div>
<!-- END 2ND LOGO -->
<!-- BEGIN TOP SOCIAL LINKS -->

Use the exact same CSS I gave you above except change

#blurb img {
     border:none;
     position:absolute;
     top: 90px;
     right: 15px;
     margin-top: 5px;
}

to:

#new-logo img {
         border:none;
         position:absolute;
         top: 90px;
         right: 15px;
         margin-top: 5px;
    }
share|improve this answer
    
This is amazing = Really impressed, and will take a more in depth look at editing CSS live in the browser. However... My screenshot is a little misleading. If I applied your fix, the logo would vanish on other pages like the blog - dekhoforum.com/?category_name=blog As the 'blurb' section, only appears on this home page. –  Simon Mar 30 '11 at 0:43
    
Therefore, I need to find a way to actually add a 2nd image. See edits to original Q –  Simon Mar 30 '11 at 0:44
    
What information do you need to provide an answer? Don't get me wrong, ur answer is great and does provide a solution, but I should have worded my Q better. (Revised) –  Simon Apr 4 '11 at 3:36
    
I gave you the exact code to make it work. Did you read my edited answer? The code I gave you above should be inserted at line 78 in header.php. –  Chris_O Apr 4 '11 at 3:57
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.