Opacity For White Space In Minimal? « Support Forum | Kriesi.at

Support Forum » Flashlight

Opacity For White Space In Minimal?

32 posts from 10 voices

Started 1 year ago by justinbryeans
Latest reply from Dude
This topic is closed
This topic is resolved

Tags:

12 Next »

justinbryeans
Member

Hello,

I'd like to set the white spaces to appear a bit opaque, so as to the see the image through them...

Thanks,
Justin

Posted 1 year ago #
Dude
Dude
Hey,
the easiest way is to create a semi transparent background image (.png) with Photoshop or Gimp. Then apply it to the sidebar with following code:
```
.sidebar .box {
background: url("../images/skin-minimal/sidebarbg.png") repeat transparent;
}
```
You can change the image path and/or image name :)
Posted 1 year ago #
justinbryeans
Member

Thanks.

What size should I make the image?

Posted 1 year ago #
Dude
Dude

The code above will repeat the image - you can even create a 1x1px image if you'd like to save traffic/.

Posted 1 year ago #
justinbryeans
Member

Thanks. How can I change the post box on the front page in the same way?

Posted 1 year ago #

Dude
Dude

You can use following code:

.content .box {
background: url("../images/skin-minimal/sidebarbg.png") repeat transparent;
}

Posted 1 year ago #

justinbryeans
Member

Thanks.

So I created the .png at 90% opacity. Yet when I paste these code portions in the quick CSS, instead of getting an opaque white background for the post area and sidebar, I get complete opacity...

Posted 1 year ago #
Dude
Dude

Did you try to use an absolute path instead of ../images/skin-minimal/sidebarbg.png ?

Posted 1 year ago #
justinbryeans
Member

I used the exact path you suggested.

Posted 1 year ago #

Dude
Dude

Ok - in this case replace:

../images/skin-minimal/sidebarbg.png

with:

http://yourdomain.com/exact-image-location/path.

i.e. 

http://yourdomain.com/wp-content/themes/flashlight/images/skin-minimal/sidebarbg.png

Make sure that you can view the image in the browser - otherwise it won't be display as css background image too.

Posted 1 year ago #

fotonicole
Member

Hello!
I tried to apply this to the MINI Content box but it doesn't work. Can it be done? I already tried it on the other content boxes and worked perfectly.
Thank you very much in advance for your help!

Posted 1 year ago #
areaofinterest
Member

Dude you are my hero!

How can I do the same with the date-box on posts and the woocommerce shopping cart under the main-menu?

My blog is really getting there!!

Best,
Martin

Posted 1 year ago #
areaofinterest
Member

Yet another question beside the one above.

It seems that the changes of opacity I did to the content area and the main menu did not work when on the frontpage and the blog. When on pages it's all perfect.

Best,
Martin

Posted 1 year ago #
baiaz66
Member

Need to have ths to my Minibar and my right bar...
It seem to not work...

Posted 1 year ago #
jschneier
Member

I also tried to apply this to the mini content box on the front page and it did not work. It DID work for the menu so it is not a problem with the path.

Posted 1 year ago #

Dude
Dude

Try to add following code to css/custom.css:

.box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
background-color: transparent;
}

Posted 1 year ago #

vpopp
Member

I find this works but it works for all boxes. I need the transparency to be only on the left sidebar menu area. I really need it to be only 40% or thereabout. Any way to do that?

Posted 1 year ago #
baiaz66
Member

How to make it transparent ... not completely gone

https://skitch.com/baiaz/8y8s1/myownpictures

After adding this:
.box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
background-color: transparent;
}

the solide white is gone... but I want it like the rest ....

Posted 1 year ago #
Dude
Dude

You can use rgba colors instead: http://www.css3.info/introduction-opacity-rgba/ but they're not supported by all browsers (modern css3 browsers support them though).

Posted 1 year ago #
praecurvo
Member

I'm trying to figure out where to add this code. I too would like a transparent menu bar and mini-box.

Posted 1 year ago #
Dude
Dude

Use the code I posted above but instead of:

background-color: transparent;

use i.e.:

background-color: rgba(0,0,255,0.5);

Posted 1 year ago #
baiaz66
Member

I used background-color: rgba(0,0,255,0.8); -- and that was perfect

Posted 1 year ago #
praecurvo
Member

I am sorry, but could someone please explain in detail where to enter these codes please?

Thank you,
aaron

Posted 1 year ago #
jrichman63
Member

I'm also getting confused by this thread. So is this the correct code for the custom CSS box (obviously setting the rgba value to what ever you want):

.box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
background-color: rgba(0,0,255,0.5);
}

Posted 1 year ago #
jrichman63
Member

This code works for me. But the menu drop downs aren't transparent and the main menu overlaps with the already transparent bar reducing the transparency and making it mismatch the rest of the transparent elements..

Posted 1 year ago #
Dude
Dude
Yes - this is the drawback of transparent elements (overlapping elements will reduce the transparency). You can change the background of the menu with following code:
```
#top .main_menu .menu ul {
    background-color: rgba(0,0,255,0.5);;
}
```
Posted 1 year ago #
jrichman63
Member

What about the sub menus transparency?

Posted 1 year ago #
Dude
Dude

The code I posted above ( .main_menu .menu ul ) will change the submenu background color.

Posted 1 year ago #
jrichman63
Member

The menu code didn't work for me. Is there code to sett the transparency for all the components separately? Because I would really like that.

I'm trying to set everything to .8 transparency but leave the main vertical bar (under the menu that extends down to the hind menu toggle) at the original 0.1 / 0.2 transparency.

Thanks! I'm looking forward to the response.

Posted 1 year ago #
Dude
Dude
Yes - here is the element list:
```
.box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget
```
I.e. if you just want to change the widget background use:
```
.widget {
    background-color: rgba(0,0,255,0.5);
}
```
I'd suggest to use plugins like firebug: https://addons.mozilla.org/en/firefox/addon/firebug/ - they help you to investigate the css code and elements.
Posted 1 year ago #