WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Move an image in the header (19 posts)

  1. Christopher Roberts
    Member
    Posted 1 year ago #

    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

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

  3. Christopher Roberts
    Member
    Posted 1 year ago #

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

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  5. Christopher Roberts
    Member
    Posted 1 year ago #

    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 :-)

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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 :).

  7. Christopher Roberts
    Member
    Posted 1 year ago #

    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.

  8. Christopher Roberts
    Member
    Posted 1 year ago #

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

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  10. Christopher Roberts
    Member
    Posted 1 year ago #

    Thanks ever so much for your help :-)

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, add this to your CSS:

    #branding img#logo {
       float: right;
       margin-right: 200px
    }
    
    #branding img {
       float: none;
    }
  12. Christopher Roberts
    Member
    Posted 1 year ago #

    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 :-)

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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! )

  14. Christopher Roberts
    Member
    Posted 1 year ago #

    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

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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!

  16. Christopher Roberts
    Member
    Posted 1 year ago #

    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?

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hmm, yeah I see what you mean - I kinda have the same reaction - "oh, that looks kinda good, or is "clean" better?" One thing you could try with the shadow is increasing the spacing between the letters:

    letter-spacing: 1.1px;

    ??

    But, of course, this level of detail probably goes right past most people and they'd think we are nuts for even thinking about it -- lol!?

    I started reading your blog - nice -- LOVE this line:

    Mediocre content annoy me.

    Too bad more people don't feel that way - ha ha.

  18. Christopher Roberts
    Member
    Posted 1 year ago #

    Check these out, which one is your favourite?
    http://www.technologybloggers.org/images/header-options.jpg
    http://www.technologybloggers.org/images/header-options-2.jpg (same as header-options.jpg but with markings on)

    I think, (although am not sure!) bottom right is my favourite.

    The images on the right have letter-spacing of 0.5px - 1.1 was too big!

    "I started reading your blog - nice -- LOVE this line: Mediocre content annoy me. " - Why bother pouring time and effort into a site if you don't 'mean business'? Why write for a rubbish blog? Nobody want to read rubbish, so who are you writing to/for? I would love it if you stuck around :-)

    I am one of the main contributors for the blog, but someone else you should check out - if you get chance - is Jonny Hankins, one of our other writers. He posts every Thursday (occasional posting more/less frequently) and every week I look forward to his articles - they are always a great read!

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I agree - bottom right - maybe put a bit more space between the title and social icons?

    On the other, I emailed you via your site.

Topic Closed

This topic has been closed to new replies.

About this Topic