Need help? Check out our Support site, then


Twenty Eleven Header Background Transparency - so sorry

  1. 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;}</p> <p>body {background:#ffffff;}<br /> #main {padding: 0;<br /> background-color:#fff;<br /> }<br /> #access {margin: 0 auto; box-shadow: none;}<br /> #primary {background-color:#fff;}<br /> #branding { border-top: none; }<br /> #primary {background-color: #ffffff ! important;}<br /> #branding img {<br /> background: transparent;<br /> -moz-border-radius-topright: 20px;<br /> -moz-border-radius-topleft: 20px;<br /> border-top-left-radius: 20px;<br /> border-top-right-radius: 20px;<br /> }

  2. 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).

  3. 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 {<br /> background: transparent;<br /> -moz-border-radius-topright: 20px;<br /> -moz-border-radius-topleft: 20px;<br /> border-top-left-radius: 20px;<br /> border-top-right-radius: 20px;<br /> }</p> <p>#access {<br /> background: transparent url(http://littleshoppeonwebstreet.com/blog/wp-content/uploads/2012/12/nav_back3.gif) repeat-x;<br /> height: 40px;<br /> }</p> <p>#access ul ul a {<br /> background: transparent;<br /> border-bottom: 0px dotted #ddd;<br /> }<br /> #access li:hover > a,<br /> #access a:focus {<br /> background: transparent; /* Show a solid color for older browsers */<br /> color: #373737;<br /> }<br /> #site-generator {<br /> background: url(http://littleshoppeonwebstreet.com/blog/wp-content/uploads/2012/12/footer.jpg) repeat-x;<br /> border-top: 1px solid #ddd;<br /> color: #ffffff;<br /> font-weight: bold;<br /> font-size: 12px;<br /> line-height: 2.2em;<br /> padding: 2.2em 0.5em;<br /> text-align: center;<br /> }</p> <p>#site-generator a {<br /> color: #ffffff;<br /> }<br /> #site-generator a:hover {<br /> text-decoration: underline;<br /> color: #ffffff;<br /> }<br /> .entry-title {<br /> clear: both;<br /> color: #222;<br /> font-size: 20px;<br /> font-weight: bold;<br /> line-height: 1.5em;<br /> padding-bottom: .3em;<br /> padding-top: 15px;<br /> }

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

    #page {-moz-border-radius-topright: 20px;</p> <p> -moz-border-radius-topleft: 20px;</p> <p> border-top-left-radius: 20px; </p> <p> border-top-right-radius: 20px;<br /> }

  5. 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.

Topic Closed

This topic has been closed to new replies.

About this Topic