Adding Transparency
Permalink
Hi all,
I am relatively new to using Concrete and am finalizing the main page. I've been able to add a custom background to the theme, but now I'd like the other elements on the page to become transparent to allow the background to show through.
The header, Nav background, footer, etc. I'd all like to have a transparent background to allow the page background to show through.
Is this possible? If so, how could I go about doing it? I'm using the Slate theme currently.
I am relatively new to using Concrete and am finalizing the main page. I've been able to add a custom background to the theme, but now I'd like the other elements on the page to become transparent to allow the background to show through.
The header, Nav background, footer, etc. I'd all like to have a transparent background to allow the page background to show through.
Is this possible? If so, how could I go about doing it? I'm using the Slate theme currently.
Try this:
Thanks...I added this line to the Add Your CSS option within the theme manager but no change. Should I be adding this to a particular file within the theme?
I assumed the areas were classes, I don't think they are.
Try removing the '.' at the front header, nav .etc.
Try removing the '.' at the front header, nav .etc.
If you can post a public url it would be easier to figure out the code.
http://ownerstobuyers.com/concrete5.6.0.2/
Attached is a screenshot of the transparency applied. Also the main.css code replacement to achieve this. Just replace your current main.css with this file.
Thank you. This certainly helped with the transparency. The only issue I have now is seeing the background image. I'm assuming this code in the main.css is controlling it:
/* customize_miscellaneous */ body { background-image:url(http://ownerstobuyers.com/concrete5.6.0.2/packages/theme_slate/themes/slate/images/backgrounds/bg.jpg);
For whatever reason, on my side the background image isn't displaying. I cleared the cache on my browser and for the site but to no avail.
Does this need to be set elsewhere? Or should the main.css take care of that?
/* customize_miscellaneous */ body { background-image:url(http://ownerstobuyers.com/concrete5.6.0.2/packages/theme_slate/themes/slate/images/backgrounds/bg.jpg);
For whatever reason, on my side the background image isn't displaying. I cleared the cache on my browser and for the site but to no avail.
Does this need to be set elsewhere? Or should the main.css take care of that?
Sorry to disagree, but the attached image shows complete opacity, not 50%.
My code snippet will work if you remove the full stop in front of the areas required, as previous post.
My code snippet will work if you remove the full stop in front of the areas required, as previous post.
What he said...
Thanks for your assistance all and appreciate the patience with my noob-ness here trying to get the transparency situated.
Tallacman's .css file made the transparency what I was looking for, however the background was not showing through.
I have the following code added to the CSS to add the background and transparency, but still not transparency in the blocks unfortunately:
body { background-image:url(http://ownerstobuyers.com/concrete5.6.0.2/packages/theme_slate/themes/slate/images/backgrounds/bg.jpg);
header,nav,footer {opacity:.5;
filter:alpha(opacity=50);
filter:
The slate theme is apparently removing the last "alpha(opacity=50)";} when I go to save the changes to the CSS
Tallacman's .css file made the transparency what I was looking for, however the background was not showing through.
I have the following code added to the CSS to add the background and transparency, but still not transparency in the blocks unfortunately:
body { background-image:url(http://ownerstobuyers.com/concrete5.6.0.2/packages/theme_slate/themes/slate/images/backgrounds/bg.jpg);
header,nav,footer {opacity:.5;
filter:alpha(opacity=50);
filter:
The slate theme is apparently removing the last "alpha(opacity=50)";} when I go to save the changes to the CSS
Okay, I think I'm getting somewhere. I think there was an issue with how the CSS code was handling the objects on the page.
Adding
body{
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
To the code adds opacity to everything on the page, wherein using nav or header doesn't make a difference. The issue with this is that it sets all objects, including the icons and text to the specified opacity.
I'm assuming in this case I need to use an iframe code to get what I need, to not allow the text or icons to become transparent, I'm just not that familiar with coding to figure that out.
Adding
body{
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
To the code adds opacity to everything on the page, wherein using nav or header doesn't make a difference. The issue with this is that it sets all objects, including the icons and text to the specified opacity.
I'm assuming in this case I need to use an iframe code to get what I need, to not allow the text or icons to become transparent, I'm just not that familiar with coding to figure that out.
Hi,
Tricky stuff with opacity. Usual I'd use rgba reference for h-tags color/background because it does not inherit it parent properties, a bit problematic with images but can use technique below.
or;
Another way, have additional div after body as (say <div="bg"> </div>) background with 100% width/height to screen and position relative to top/left, set the transparent. Then your other div's (contents etc) from below to position absolute/relative to the body, which will overlap your bg div. Which leaves the body with any color selection as fallback. Then your contents/images will not inherit the transparency.
Hope it helps out,
Irsah.
Tricky stuff with opacity. Usual I'd use rgba reference for h-tags color/background because it does not inherit it parent properties, a bit problematic with images but can use technique below.
or;
Another way, have additional div after body as (say <div="bg"> </div>) background with 100% width/height to screen and position relative to top/left, set the transparent. Then your other div's (contents etc) from below to position absolute/relative to the body, which will overlap your bg div. Which leaves the body with any color selection as fallback. Then your contents/images will not inherit the transparency.
Hope it helps out,
Irsah.
