About opacity change in picture window template in blogger blog

D D
D D
from Mumbai
8 years ago

I am using blogger's picture window template for all my blogs.  I want to change the opacity in the sidebar region. Is it possible to change this opacity value by editing HTML or by adding CSS while customising template in advanced mode? Also is it possible to change opacity / colour of footer? Please help me and tell if it is possible? If yes then where to locate the code? and how the changes should be made?

Edited 8 years ago
Reason: Not displaying in forum
Replies 1 to 1 of 1 Descending
Ranjith
Ranjith
from hyderabad
8 years ago

I tried doing it. It doesn't look perfect but still you can try it once.

Go to Template > Customize > Advanced > Add CSS

In the text box, enter the following :

.sidebar {
background-color:rgba(255,0,0,0.1);
-moz-border-radius: 15px;
border-radius: 15px;
padding:10px;
}

The background colour and opacity can be adjusted by changing  rgba( 255 , 0 , 0 , 0.1 )

The first three numbers 255, 0 and 0 represent a colour. ( Use this online colour picker to find the RGB values for the colour you want ) and 0.1 represents the opacity value - Opacity value can be anything between 0 and 1.

The 15px number on 2nd and 3rd line indicate the radius of that curved box in the sidebar.

Padding 10px gives the empty space - border.

But there is one problem - empty boxes are appearing at the bottom of the sidebar with the above css. Frown

Ranjith
from hyderabad
8 years ago

Use opacity values between 0 and 0.1. Only then , it appears translucent.

D D
from Mumbai
8 years ago

Thanks Ranjith!Smile It worked well on one of my blog. No empty boxes. Only the buttons google translate, Subscribe to are partially coming out of the coded area. So is it possible to change the opacity of entire translucent area (outer wrapper?) which includes blog post and sidebar region?

D D
from Mumbai
8 years ago

not sure about the term outer wrapper...

D D
from Mumbai
8 years ago

just found out it as main-innerSmile

Ranjith
from hyderabad
8 years ago

Only the buttons google translate, Subscribe to are partially coming out of the coded area.

The most probable reason is that the horizontal space required for translate gadget and subscribe gadget is more than the alloted one. First try the following :

Change the padding to something less than 10 ( ex : 9, 8, 7... )

padding:10px;

If the above thing doesn't work, then try increasing the width of the sidebar. Template > Customise > Adjust Widths > Right Sidebar ( Drag the slider until the entire translate/subscribe comes within the box.

.

is it possible to change the opacity of entire translucent area 

Use the following CSS code :

.main-outer {
background-color:rgba(255,0,0,0.2);
}

Hope that this helps. If you still have any problem, you can ask me. Smile

D D
from Mumbai
8 years ago

Thanks a lot!Smile

You have answered all my questions. Smile

Ranjith
from hyderabad
8 years ago

just found out it as main-inner

I was busy typing the answer when you posted the above thing. Laughing Finally learned some template manipulation because of this thread. Laughing

D D
from Mumbai
8 years ago

yup Laughing


LockSign in to reply to this thread