Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
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 :).
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.
Made the changes suggested, but it looks the same :-/
No worries, let me look at it and work on the CSS…
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;
}
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! )
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!
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?
