Support » Fixing WordPress » Move an image in the header

  • Resolved Christopher Roberts

    (@christopherrobertswordpress)


    Okay…

    I am a member of the admin team for a community blog called Technology Bloggers.

    Currently the logo is on the left of the header – as you can see on the blog.

    I want to move the logo to the centre like in this image I have created – http://www.technologybloggers.org/images/idea-technology-bloggers-header.jpg

    I am really unsure how to move the logo, as the code is tricky to edit, and after a few trials, I am getting nowhere. I am not too great with PHP and CSS, but understand some basics.

    All I want is to have that image in the centre, but it is proving a challenge!

    The theme is twenty-ten with a few custom modifications.

    Any ideas?

    Thanks 🙂
    Christopher

Viewing 15 replies - 1 through 15 (of 18 total)
  • Moderator Andrew Nevins

    (@anevins)

    Christopher Roberts

    (@christopherrobertswordpress)

    Thanks for the help, but I would rather ask it here – I am not a member of any of the other forums.

    I would start by wrapping all the social media icons in a div with a class or id so that you can target them separately in the CSS code.

    Christopher Roberts

    (@christopherrobertswordpress)

    Not sure how to.

    All I want is for this image

    <img src="http://www.technologybloggers.org/images/Technology-Bloggers-Logo.png" alt="Technology Bloggers Logo" width="85" height="85" border="0">

    to display in the centre of the page, like so: http://www.technologybloggers.org/images/idea-technology-bloggers-header.jpg

    Stylesheet code: http://pastebin.com/sFy2sUAX

    Page header code extract from header.php

    <div id="branding" role="banner">
    
    				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    
    				<<?php echo $heading_tag; ?> id="site-title">
    
    					<span>
    
    						<img src="http://www.technologybloggers.org/images/Technology-Bloggers-Logo.png" alt="Technology Bloggers Logo" width="85" height="85" border="0"><a href="<?php echo home_url( '/' ); ?>" title="Go to the homepage" rel="home"><?php bloginfo( 'name' ); ?></a><br /><a href="http://www.facebook.com/TechnologyBloggers/" target="_blank" title="Technology Bloggers Facebook Page"><img class="f"
    onmouseover="this.className='fa'" onmouseout="this.className='f'"
    src="/images/img_trans.gif" alt="Technology Bloggers Facebook Profile" width="40" height="40"></a><a href="https://twitter.com/TechBloggers" target="_blank" title="Technology Bloggers Twitter"><img class="t"
    onmouseover="this.className='ta'" onmouseout="this.className='t'"
    src="/images/img_trans.gif" alt="Technology Bloggers Twitter Profile" width="40" height="40"></a><a href="https://plus.google.com/u/0/105633094957689395216/" target="_blank" title="Technology Bloggers Google Plus Profile"><img class="g"
    onmouseover="this.className='ga'" onmouseout="this.className='g'"
    src="/images/img_trans.gif" alt="Technology Bloggers Google+ Profile" width="40" height="40"></a><a href="http://www.youtube.com/TechnologyBloggers" target="_blank" title="Technology Bloggers YouTube"><img class="y"
    onmouseover="this.className='ya'" onmouseout="this.className='y'"
    src="/images/img_trans.gif" alt="Technology Bloggers YouTube Profile" width="40" height="40"></a><a href="http://www.technologybloggers.org/feed/" target="_blank" title="Technology Bloggers RSS Feed"><img class="r"
    onmouseover="this.className='ra'" onmouseout="this.className='r'"
    src="/images/img_trans.gif" alt="Technology Bloggers RSS Feed" width="40" height="40"></a>
    
    					</span>
    
    				</<?php echo $heading_tag; ?>>
    
    				<div id="site-description"><strong>Read | Contribute | Benefit</strong><br />A whole community of technology bloggers</div>
    
    			</div><!-- #branding -->

    I am sure it is really simple, I just don’t understand!

    If anyone could tell me where to stick the code I would be most grateful 🙂

    Okay, first make a copy of your header.php and style.css files someplace safe (i.e. local computer) – just in case this doesn’t work and we need to go back to the current version.

    Then replace the section you posted above with this:

    <div id="branding" role="banner">
    
    				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    
    				<<?php echo $heading_tag; ?> id="site-title">
    
    						<img id="logo" src="http://www.technologybloggers.org/images/Technology-Bloggers-Logo.png" alt="Technology Bloggers Logo" width="85" height="85" border="0"><a href="<?php echo home_url( '/' ); ?>" title="Go to the homepage" rel="home"><?php bloginfo( 'name' ); ?></a>
    
    <div id="socialicons">
    						<a href="http://www.facebook.com/TechnologyBloggers/" target="_blank" title="Technology Bloggers Facebook Page"><img class="f"
    onmouseover="this.className='fa'" onmouseout="this.className='f'"
    src="/images/img_trans.gif" alt="Technology Bloggers Facebook Profile" width="40" height="40"></a><a href="https://twitter.com/TechBloggers" target="_blank" title="Technology Bloggers Twitter"><img class="t"
    onmouseover="this.className='ta'" onmouseout="this.className='t'"
    src="/images/img_trans.gif" alt="Technology Bloggers Twitter Profile" width="40" height="40"></a><a href="https://plus.google.com/u/0/105633094957689395216/" target="_blank" title="Technology Bloggers Google Plus Profile"><img class="g"
    onmouseover="this.className='ga'" onmouseout="this.className='g'"
    src="/images/img_trans.gif" alt="Technology Bloggers Google+ Profile" width="40" height="40"></a><a href="http://www.youtube.com/TechnologyBloggers" target="_blank" title="Technology Bloggers YouTube"><img class="y"
    onmouseover="this.className='ya'" onmouseout="this.className='y'"
    src="/images/img_trans.gif" alt="Technology Bloggers YouTube Profile" width="40" height="40"></a><a href="http://www.technologybloggers.org/feed/" target="_blank" title="Technology Bloggers RSS Feed"><img class="r"
    onmouseover="this.className='ra'" onmouseout="this.className='r'"
    src="/images/img_trans.gif" alt="Technology Bloggers RSS Feed" width="40" height="40"></a>
    
    </div> <!-- socialicons -->
    
    				</<?php echo $heading_tag; ?>>
    
    				<div id="site-description"><strong>Read | Contribute | Benefit</strong><br />A whole community of technology bloggers</div>
    
    			</div><!-- #branding -->

    We’ll still need to add CSS, so don’t freak if it looks terrible right now :).

    Christopher Roberts

    (@christopherrobertswordpress)

    Trying it out on my test site first: http://www.technologybloggers.co.uk/test/

    I can give you access to the code if you need – I can create you an account and give you login.

    Christopher Roberts

    (@christopherrobertswordpress)

    Made the changes suggested, but it looks the same :-/

    No worries, let me look at it and work on the CSS…

    Christopher Roberts

    (@christopherrobertswordpress)

    Thanks ever so much for your help 🙂

    Okay, add this to your CSS:

    #branding img#logo {
       float: right;
       margin-right: 200px
    }
    
    #branding img {
       float: none;
    }

    Christopher Roberts

    (@christopherrobertswordpress)

    Ha hah!

    You are fantastic. I have spend hours (probably 4/5) trying to work it out, failing, attempting to reconstruct the site etc. and you do it in 5 minutes!

    Thanks WPyogi, as soon as it is on the main site I am Tweeting that your help made it happen – if that is okay?

    Just checking, when I added the code, it looked like this:

    #branding img#logo {
       float: right;
       margin-right: 200px
    }
    
    #branding img {
       float: none;
    }
    #branding img{border-top:0px solid #000;border-bottom:0px solid #000;display:block;float:left;}

    I changed it to this, and the logo stayed fixed

    #branding img#logo {float: right;margin-right:200px}
    #branding img{border-top:0px solid #000;border-bottom:0px solid #000;display:block;float:left;}

    …is this code okay, or must I keep the exact code you gave?

    Once again, my most gracious thanks 🙂

    Oh no, my code is definitely not gospel – LOL! Hardly. Whatever works is great — and your site looks really good too :). I’m glad to be of help… and sure, tweet it if you like. I’ll have an semi-anonymous second of fame on Twitter!! (Hey, one funny coincidence is that I have a cousin named Christopher Roberts! )

    Christopher Roberts

    (@christopherrobertswordpress)

    I have a horrible eye for perfection, so needed to tweak the code slightly to make the image perfectly central – give or take half a pixel! The code is now live on the main site http://www.technologybloggers.org/

    The promised tweet can be found here: https://twitter.com/techbloggers/status/293329584529752064

    Whatever works is great — and your site looks really good too 🙂 – thanks 🙂 I put a lot of effort into it, and never seem to be happy – always something to teak! I just hope everyone in the community likes it.

    You aren’t my cousin are you? 😉

    By the way, is this your website?
    http://www.wpyogi.com/

    Once again, thanks 🙂
    Christopher

    No, I haven’t actually been in touch with my cousin in years, but I’m pretty sure he still lives in California (as do I). No, that’s not my website — it actually belongs to another moderator – Christine Rondeau. We ended up with that same name quite by coincidence /accident — I’ve thought for a while that I should perhaps change mine…

    Anyway, nice job and I understand the perfectionist deal too :). But don’t drive yourself too crazy over it. LOL!

    Christopher Roberts

    (@christopherrobertswordpress)

    Ah, not in the UK then!

    I have been tweaking the name, and just added a shadow under it. Part of me likes it, whilst another part of me thinks it looks a bit odd. What’s your thoughts?

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Move an image in the header’ is closed to new replies.