Make Background of Content Area Transparent Without Affecting Content

[sedique 0]

How do i make the background of the content area to be transparent but not affect the content itself. I tried to do it, but it didn't work out... I kept making both the background and content transparent. So how do i make the background transparent?

[James B 436]

Hi there,

 

In Platform in the color control tab you'll be able to remove the color in the 'body background color' field. This will remove the background color to the content area and only allow the page background to show through.

 

For more info on the options in this panel, see http://www.pagelines.com/docs/design-control

[sedique 0]

Not exactly what i wanted... I was looking for a way to make the background transparent, so it is still there but just transparent.

[sedique 0]

Any ideas?

[James B 436]

I'm not really following what you mean, do you mean adjust the opacity on the background, so the white is more see through?

 

Making it transparent will remove the content background color completely, which will give the same affect as removing the color for the content area in the color control tab.

[sedique 0]

I'm not really following what you mean, do you mean adjust the opacity on the background, so the white is more see through?

 

Correct, that is what i want to do.

 

Making it transparent will remove the content background color completely, which will give the same affect as removing the color for the content area in the color control tab.

 

 

So, then how would i avoid it? I am only planning on making it 10% see through... Would i have to seperate the content from the background?

 

So what  do you think i should do?

[James B 436]

To adjust the opacity of the color for the background you'll need to use some css. First thing to do will remove the content background color completely form the color control tab and from the css you have applies to the .page-canvas area. Then you'll need to add the color into the css as a rgba value. Like below.

 

.page-canvas {

    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);}

 

If you're using firebug there's an inbuilt color picker you can use to create the transparency values. I've included a short videocast below to show you the transparency slider in the color picker.

 

http://screencast.com/t/rKJEP0uUL

[luminouscomm 0]

I was able to set the background transperency after finding this trick but I want to know if there is a way to leave my body opaque as it currently is, but revert the header section back to it's original format. Meaning, I need to know how to make the body of my site opaque but not the header portion. Is that possible? It appears as though the CSS tweak above makes all content opaque. Any advice?

[Danny+ 1,327]

Can you provide a link to the site in question so we can take a look.

[Karmatose 0]

Hi there,

I'm also with the issue of adjusting specific section's opacity. I entered the suggested code ( .page-canvas etc etc) letter for letter, and added "page-canvas" in my template local styling classes, but nothing happens :-/ have I done something wrong here?
Any help would be very greatly appreciated :-)

Dean