Making blocks transparent

Permalink
Hi all,

Just wondering was there a way to make content/image blocks transparent. I would like to have some sort of colour in the block but have it faint so that the background image can come through while not affecting the ability to read/view what is in the block.

Hope the above makes sense.

Barry

misebaz
View Replies:
JohntheFish replied on at Permalink Reply
JohntheFish
You will need to write some css rules for the block background or image.

The basic css is explained at
http://www.w3schools.com/css/css_image_transparency.asp...

If Googling for more about it, the keywords to search for are:
css transparency.

You may be able to do some of this by adding rules to a block design. However, it is more likely you will need to write some more specific style rules and add them to a new template for the blocks concerned or to your theme.

You could also use my style quickie addon (currently on offer)to add css to a page.
http://www.concrete5.org/marketplace/addons/style-quickie/...
misebaz replied on at Permalink Reply
misebaz
Hi JohntheFish

Your w3schools link worked a treat.

Cheers
misebaz replied on at Permalink Reply
misebaz
Hi JohntheFish

The code I found works on Internet Explorer but when I use Chrome it doesn't. How can I overcome the transparency issue across several operating sysems?

opacity:0.6;
filter:alpha(opacity=60)


Thanks

Barry
Steevb replied on at Permalink Reply
Steevb
Use my code below!
JohntheFish replied on at Permalink Reply
JohntheFish
As 55 says.

The 'filter:' part is IE specific. Its the 'opacity:' part that other browsers process and they need to have something to set the opacity of. In the example link, it was setting the opacity of an image (so it had something to work on).

By setting a compound background style called .opaque, that compound style includes a colour (black) and an opacity for that background (0.7) (or 0.6 in your case).
Steevb replied on at Permalink Reply
Steevb
I use CSS, so in the theme CSS file I have a class called opaque:
.opaque{background:rgba(0,0,0,0.7);}

This gives a black transparent background.
The first three '0' are rgb for black, the '0.7' is the alpha amount of transparency. '0' is completely see through, '1' is solid.
This is for white:
.opaque{background:rgba(255,255,255,0.7);}
TrinityBob replied on at Permalink Reply 1 Attachment
Hi,

I found an easy way to add transparency to a block that has been assigned a color. My columns i have assigned the following color rgb(53, 51, 51).

To add transparency, in edit mode, click on the column tag, then click 'Edit Area Design'. The second icon 'Background color and image' , click on the color picker then copy and paste the color code below into a textbox bottom right hand of the box ->
rgba(53, 51, 51,0.7)

The 'a' allows opacity to be applied to the color where '0.7' is percentage allowed, in this case 70%

I have attached a screenshot to make it a bit easier.

Hope this helps