Transparency Issue

…so what have you tried? You need to be specific if you want help with this, without someone logging in and looking at your files.

It appears the section that is gray is controlled by 3 classes; .content ; .home ; and .blog . you will need to edit one those in your CSS. You’ll probably have to try each one, or combination of them until you find which one gets it. (with a child theme of course) I’m thinking maybe .blog class may do it…but I could be wrong.

Hi,

Please put this custom css in your custom css section of theme options

#wrapper {
    background: none;
}
.content {
    background-color: transparent;
    background: #5555554D;
}

Thank you

If you put it in the right place, it should have. The class should already exist because I got that off your active page. you shouldn’t have to add it. Stylesheets “cascade” …so if it’s not in the right place, something else could override it. You can try using !important also…

and “transparent” or “none” haven’t always been valid CSS, they are new, so an older browser could throw an error. Does that change the color if you put an actual color there? I don’t see a gray box anymore, so maybe you got it already? …anyways, here’s some additional CSS code to use or not use… It’s hard to tell without access to the actual files to play around with. Romik’s post should work, except the color has too many numbers in it, and it’s not a color. Change that, or remove it, and the rest should be good, if you put it in the correct class/id on the stylesheet. Here’s some more CSS to play around with…

display:inline-block;
/*you really shouldn’t have to change this though, since the area you want transparent is already correct, right? */

.page-template-blog-page-php
.format-gallery {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

/* This is for old stuff (replace classes and values with your own) : */
.page-template-blog-page-php
.format-gallery {
/* Required for IE 5, 6, 7 */
/* …or something to trigger hasLayout, like zoom: 1; */
width: 100%;

/* Theoretically for IE 8 & 9 (more valid) */
/* …but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* or (Opacity=0) */

/* This works in IE 8 & 9 too */
/* … but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

• This reply was modified 9 years, 2 months ago by bdbrown.

Hi,

You try to !important rule in css, Especially in #wrapper css.

Thank you

The code is right, it’s just a matter of finding/locating the correct class/id that it belongs in. Wrapper is too far out on the div tree…it would be much easier if I can see the code. Can you email me a copy of the style.css and the child theme stylesheet if you have one. I can’t look at it today, but maybe on the weekend…after late Saturday.

You can try the classes individually…for example, try

.format-gallery {
background: #666;
} 

if not that one, try the others in the fix I gave you, by themselves. (each part preceeded by a “.” is a class, everything preceeded with a “#” is an ID ) So the fix I gave you is 3 classes…try each one individually.

• This reply was modified 9 years, 2 months ago by bdbrown.