Opacity Affecting Widget Area

  • Hi there,

    I’ve made a child theme from the twenty-eleven theme (kept the original, made a copy, and started changing the copy). I’ve made a transparent header graphic for only the home page so far and then added opacity to the #primary so that the entire area would show through to the background image that I made.

    This, of course, affected my widgets. I changed my font color on my widgets, but they’re still hard to see. Plus, it’s as if there is not text at all within my widget area (only the side – not the footer). When I roll my mouse over the area it’s as if there’s an image over them. So, with the Recent Posts section the link isn’t working because it’s as if it isn’t there.

    Here’s the link: https://www.moningmaniacs.com

    I appreciate any help you can give to help bring out the widgets and so that they’re easier to see. I tried a background image, but that didn’t help either. But the main thing is to make it so the links are actually working.

    Thanks!

    dij

Viewing 1 replies (of 1 total)
  • Thread Starter dijares

    (@dijares)

    Okay, I finally found a fix for this, although I don’t really know if it’s the best fix. I really had to mess with the CSS. For some reason none of the margins were making any difference. So I messed with the percentage of the #primary and #content widths. I also messed with the #secondary. Right now I’m using the layout with the widget area on the right.

    Here’s the portion of CSS (style.css) I messed with… I kept the originals marked out for anyone who needs to see them (you can also see where I applied the opacity for anyone else who needs it).

    #primary {
	float: left;
	/*margin: 0 -26.4% 0 0*/;
	margin: 0 0 0 0;
	width: 75%;
	/*width: 100%;*/
	/*added background color and then opacity for content areas*/
	background: #C64304;
	opacity: 0.6;
}
#content {
	margin: 0 0 0 7.6%;
	/*margin: 0 34% 0 7.6%;*/
	width: 90%;
	/*width: 58.4%;*/
}
#secondary {
	float: right;
	margin-right: 1%;
	/*margin-right: 7.6%;*/
	width: 18.8%;
}

Viewing 1 replies (of 1 total)
  • The topic ‘Opacity Affecting Widget Area’ is closed to new replies.