WordPress.org

Support

Support » Themes and Templates » weird border around header image

weird border around header image

  • hey all,

    I’m sure this is an incredibly noob question, but I’ve downloaded a theme and added my own header image instead of the default (text) header. I don’t know php at all so I just threw in some html (ugly, I know). Anyway, the site still has this weird thin border around the image, which I don’t want:
    http://sun-zoo.com/roadsontheearth/

    here’s my code (added to the Header section):
    <center><a href="http://www.sun-zoo.com/roadsontheearth/"><img src="http://www.sun-zoo.com/banner.jpg"></a></center>

    any ideas on how to make the border disappear?

Viewing 3 replies - 1 through 3 (of 3 total)
  • simple solution:
    replace the image code with

    <img src="http://www.sun-zoo.com/banner.jpg" alt="Sun Zoo&apos;s American Expatriate" class="photo" width="600" height="91" style="border:none !important"/>

    but that is so 90`.

    recommended solution:
    edit your theme stylesheet, go to “Admin Dashboard > presentation/design > Theme editor > select style.css.

    add the below css code and save

    #header img{border:0pt}
    #header p{text-align:center}

    and you might as well replace the HTML code (its invalid)

    <center>
    <a href="http://www.sun-zoo.com/roadsontheearth/">
     <img src="http://www.sun-zoo.com/banner.jpg">
    </a>
    </center>

    with

    <p><a href="http://www.sun-zoo.com/roadsontheearth/" rel="home" title="Sun Zoo&apos;s American Expatriate">
     <img src="http://www.sun-zoo.com/banner.jpg" alt="Sun Zoo&apos;s American Expatriate" class="photo" width="600" height="91" />
    </a></p>

    awesome, it worked, thanks!!!!

    Cheers [resolved], anyway there is some error with your css and it need correction.

    open style.css

    #header, #content,#sidebar,#primarycontent, #footer, .widget {
        overflow: hidden;
    
    #header img{border:0pt}
    #header p{text-align:center}
    }

    replace with

    #header, #content,#sidebar,#primarycontent, #footer, .widget {
        overflow: hidden;
    }
    #header img{border:0pt}
    #header p{text-align:center}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘weird border around header image’ is closed to new replies.
Skip to toolbar