WordPress.org

Ready to get started?Download WordPress

Forums

weird border around header image (4 posts)

  1. Anonymous
    Unregistered
    Posted 6 years ago #

    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?

  2. chaoskaizer
    Member
    Posted 6 years ago #

    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>
  3. Anonymous
    Unregistered
    Posted 6 years ago #

    awesome, it worked, thanks!!!!

  4. chaoskaizer
    Member
    Posted 6 years ago #

    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}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags