Twenty Eleven Header Background Transparency – so sorry

• 

  cuysan · Member · Dec 5, 2012 at 4:09 pm

  • Copy link
  • Add topic to favorites

  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;
  }

• 

  cuysan · Member · Dec 5, 2012 at 6:54 pm

  • Copy link

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

• 

  cuysan · Member · Dec 6, 2012 at 2:21 pm

  • Copy link

  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;
  }

• 

  cuysan · Member · Dec 6, 2012 at 2:28 pm

  • Copy link

  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;
  }

• 

  designsimply · Member · Dec 27, 2012 at 5:50 am

  • Copy link

  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.