WordPress.org

Forums

WordPress border header (6 posts)

  1. andragel
    Member
    Posted 5 years ago #

    I've tried dozens of time to put this css code on my site (http://ecullen.org) but it doesn't work,meaning that it apply the border to header,too,and I do not want this.What should I do?

    [code moderated]

  2. Joni
    Member
    Posted 5 years ago #

    Good grief, just post the relevant portion of the stylesheet code that you are having problems with; better yet, just post a LINK to the site at issue. Most of us use developer tools to examine the markup and CSS anyway.

    I took a look at the site and I don't understand what the problem is.

  3. andragel
    Member
    Posted 5 years ago #

    The problem is this section:

    #head img,

    img {border-top: 2px solid #a19a92;border-bottom: 2px solid #a19a92;border-left: 2px solid #a19a92;border-right: 2px solid #a19a92;text-align: center;background: #202020;padding: 3px;margin: 3px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}

    a img {border-top: 2px solid #a19a92;border-bottom: 2px solid #a19a92;border-left: 2px solid #a19a92;border-right: 2px solid #a19a92;text-align: center;background: #202020;padding: 2px;margin: 2px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}a:hover img {border-top: 2px solid #a48d62;border-bottom: 2px solid #a48d62;border-left: 2px solid #a48d62;border-right: 2px solid #a48d62;text-align: center;background: #000000;padding: 2px;margin: 2px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}

    If I add this code,than it will show a rounded border on photos but also on the header,and I do not want that.Any solutions?

  4. andragel
    Member
    Posted 5 years ago #

    any ideas?

  5. esmi
    Forum Moderator
    Posted 5 years ago #

    You need to start by adding a unique class or id (such as #head) to your header image markup. Currently it cannot be distinguished from any other image on your pages using CSS. Then you could use something like:

    img {
    	text-align: center;
    	background: #202020;
    	padding: 3px;
    	margin: 3px;
    	border: 2px solid #a19a92;
    	-moz-border-radius: 5px;
    	-khtml-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
       }
    a img {
        text-align: center;
        background: #202020;
        padding: 2px;
        margin: 2px;
        border: 2px solid #a19a92;
        -moz-border-radius: 5px;
        -khtml-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    a:hover img {
    	background: #000;
    	border-color:a48d62;
    }
    #head, a #head {
    	border:none;
    }
  6. andragel
    Member
    Posted 5 years ago #

    I've added this:

    <img id="head" title="header" src="http://ecullen.org/wp-content/themes/skinh/ecullenorg.jpg" alt="" width="900" height="470" />

    And the codeyou suggested and still the same problem

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags