Twenty Eleven Header Background Transparency – so sorry

  • Author
    Posts
  • #1089412

    cuysan
    Member

    Sorry to bring up something that has been discussed many times. I searched and read through all related but still have an issue.

    http://littleshoppeonwebstreet.com/blog/

    I was able to make the page background transparent with the below css rules on my child theme. However there is a large section of the body that isn’t filling with white. Cannot seem to locate a fix using style rules. Any help would be greatly appreciated.

    #page {background:transparent;}

    body {background:#ffffff;}
    #main {padding: 0;
    background-color:#fff;
    }
    #access {margin: 0 auto; box-shadow: none;}
    #primary {background-color:#fff;}
    #branding { border-top: none; }
    #primary {background-color: #ffffff ! important;}
    #branding img {
    background: transparent;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    }

    #1089600

    cuysan
    Member

    I did remove the duplicate #primary {background-color:#fff;} in above post. All of this is in a effort to have a transparent background behind the header (for rounded corners).

    #1089682

    cuysan
    Member

    I removed the css rules as described above and now only have the below on my child template style.css. Now the only thing I need to figure out is how to get the transparency behind the header so the rounded corners show:

    #branding img {
    background: transparent;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    }

    #access {
    background: transparent url(http://littleshoppeonwebstreet.com/blog/wp-content/uploads/2012/12/nav_back3.gif) repeat-x;
    height: 40px;
    }

    #access ul ul a {
    background: transparent;
    border-bottom: 0px dotted #ddd;
    }
    #access li:hover > a,
    #access a:focus {
    background: transparent; /* Show a solid color for older browsers */
    color: #373737;
    }
    #site-generator {
    background: url(http://littleshoppeonwebstreet.com/blog/wp-content/uploads/2012/12/footer.jpg) repeat-x;
    border-top: 1px solid #ddd;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    line-height: 2.2em;
    padding: 2.2em 0.5em;
    text-align: center;
    }

    #site-generator a {
    color: #ffffff;
    }
    #site-generator a:hover {
    text-decoration: underline;
    color: #ffffff;
    }
    .entry-title {
    clear: both;
    color: #222;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    padding-bottom: .3em;
    padding-top: 15px;
    }

    #1089683

    cuysan
    Member

    Just added my css rounded corners to the #page. Issue solved.

    #page {-moz-border-radius-topright: 20px;

    -moz-border-radius-topleft: 20px;

    border-top-left-radius: 20px;

    border-top-right-radius: 20px;
    }

    #1089825

    I checked http://littleshoppeonwebstreet.com/blog/ and I found that site is setup using WordPress software, but it is not hosted here at WordPress.com. See http://support.wordpress.com/com-vs-org/ to learn about the differences.

    If you still need help, you should try asking in the volunteer WordPress.org forums at http://wordpress.org/support/ or in a general CSS forum.

The topic ‘Twenty Eleven Header Background Transparency – so sorry’ is closed to new replies.