5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Logo CSS and header HTML (wordpress)?? Please help

by Peterdeg
3 replies
  • WEB DESIGN
    • |
Hi there,

I saw a video on Noble Samurai that talked about how to get the best out of your header. With some code the very first thing that google sees is an anchor text link to your home page. Sounds pretty useful but can't figure how to make it happen as the details are a bit vague.

Here are the only instructions (ignore all "*" as they are there so the pics don't show up):

Using CSS you can have a simple anchor with desired text and replace the text with an image.
HTML Required

Can't put HTML here as my post count is too low. But basically it is a pic classed as a logo

CSS Required

.logo{
display:block;
text-indent:-1000em;
background: url(images/noble-samurai-logo.png) no-repeat 0 0;
width:90px;
height:90px;
}

I can do the html bit as that is just changing the image tag in
header.php but I can't seem to put the .logo CSS in the right place
in the wordpress stylesheet for it to work. Where would I put this?

Would really appreciate anyone's help with this.

Many thanks

Pete
#css #header #html #logo #wordpress
  • Profile picture of the author Gclunis
    hey in css when you reference an image like that
    background: url(images/noble-samurai-logo.png) no-repeat 0 0;

    and the image is in a different directory you must mark up to it. Here is the correct (should be) coding.

    background: url(../images/noble-samurai-logo.png) no-repeat 0 0;

    Hope this helps, if not please feel free to send me a message and I can take a look at it furthur
    Signature

    Cheers,
    Gregg

    {{ DiscussionBoard.errors[3715203].message }}
    • Profile picture of the author mtgpro11
      I saw this video also and then looked at several of my sites = Yikes! = my pretty banners don't do anything for my SEO - in fact - Google can't see much at all!
      I also have very little clue on how to install this code. The info above is also not complete enough to help. The HTML in the instructions includes an http ref to Google dot com - do I actually put that in the header editor of my theme? Is it an invitation to Google or something? Then, I would add the css to the style sheet - where? Under the header reference in the style editor I am guessing. I've messed some with css but it's always a challenge to find the correct places to amend it.
      Can someone provide a little clearer information please???
      Thanks
      Leslie
      {{ DiscussionBoard.errors[3721433].message }}
  • Profile picture of the author mtgpro11
    Well, I spent the morning on this and (now don't forget IT Depends On The WP Theme - they are Different) - In my theme the "banner" is considered the header. I went into the theme editor for the header and found the label "banner" and I added this code to it:
    <div id="banner"><a style= display:none; href="http://www.besttreadmillreviews.axisitnow dot com">Best Treadmill Reviews</a><p> after the "banner" that was already there!
    However, this did make a minor change to my site - the <p> had to be added because the "home" "privacy" etc also disappeared if I didn't use it. It did add a line which brought the labels down one line because that's what <p> does - maybe I'll go back and add a <br> instead. I did not have to change the css with this method. Probably not very elegant but I got what I wanted when I looked at the site with the Web Developer Tool.
    If you don't use the code "style= display:none;" then the link will show up in the top of your banner/header.
    I hope this helps others who were having problems with trying to code this. Just don't forget to use your FireFox tools to see your site (Inspect Element) to find out what your theme uses for the header!
    Good Luck
    Leslie
    {{ DiscussionBoard.errors[3722488].message }}

Trending Topics