Background transparent in header

[jowie]

Good morning, 

 

 I have 4 issues, but i will open each one in differnt topics.

 

My first problem is how to chage the background header of my theme, i want to change the background to transparent.

 

Is possible do it?

 

I'm ussing default theme with the skin LESS-CleanTheme

 

The website is the following: WEBSITE

[Er.Ritesh]

hello jowie

what you want  to change header background or theme background.

[jowie]

hello jowie

what you want  to change header background or theme background.

 

Hello Er.Ritesh

 

I want to change header backgroung into transparent. I want to see the theme background in header

 

Thanks!

[walidon]

By default you site background is white! the header it self is transparent to show the white background! you can change the colour of the header if you like!

what you want is to divide the two parts, header and the rest of the website, so that the header will not be part of the rest, so the header will be transparent and the rest will be white!

plus you still have on the general background the blue picutre!

 

I hope that I understood well what you want!

[jowie]

By default you site background is white! the header it self is transparent to show the white background! you can change the colour of the header if you like!

what you want is to divide the two parts, header and the rest of the website, so that the header will not be part of the rest, so the header will be transparent and the rest will be white!

plus you still have on the general background the blue picutre!

 

I hope that I understood well what you want!

 

Hello walidon, 

 

Thanks for your answe. If by default the color of header is transparent, why i cannot see the theme background in header?

 

Please see attached file, this is all i want to do with header.

[jowie]

By default you site background is white! the header it self is transparent to show the white background! you can change the colour of the header if you like!

what you want is to divide the two parts, header and the rest of the website, so that the header will not be part of the rest, so the header will be transparent and the rest will be white!

plus you still have on the general background the blue picutre!

 

I hope that I understood well what you want!

 

I have understood, how can i separate the header? 

Edited January 13, 2014 by jowie (see edit history)

[vekia]

from #page remove #background #FFF

.cleantheme #page {
padding: 0 15px;
background: none repeat scroll 0 0 #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.08);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.08);
box-shadow: 0 0 8px rgba(0,0,0,0.08);
}

add code to the #columns only

[jowie]

from #page remove #background #FFF

.cleantheme #page {
padding: 0 15px;
background: none repeat scroll 0 0 #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.08);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.08);
box-shadow: 0 0 8px rgba(0,0,0,0.08);
}

add code to the #columns only

 

Thanks a lot vekia

 

after delete this line

background: none repeat scroll 0 0 #FFFFFF;

all website appears transparent, but i only want the header, then, if i add 

background: none repeat scroll 0 0 #FFFFFF 

 to 

#column-left {

It will be ok? What happen with center content?

 

Thanks a lot for your support!

[vekia]

hello

 

you've got there "#columns" id, use code for this id, not for #column-left etc

[jowie]

hello

 

you've got there "#columns" id, use code for this id, not for #column-left etc

 

Sorry, 

 

My knowledge in css is very limited, i do not understand or i don't find the text #columns in code. Could you please help me to solve it?

[vekia]

if this code doesn't exist in your css file, you can just create it

 

#columns {

 

}

[jowie]

if this code doesn't exist in your css file, you can just create it

 

#columns {

 

}

 

Good afternoon vekia

 

i have tried this code and it runs well, (thanks again)

#columns {
background-color: #fff;
}

But there is an issue, you can see there are transparent zones in left and right of the #columns. for this reason I have tried this code:

#columns {
background-color: #fff;
border: 20px solid #FFF;
}

but there is no border in left side, only in bottom, right and top of columns. Do you have any idea?

[vekia]

use this code:
 

#columns {
background-color: #fff;
z-index: 1;
float: left;
padding: 15px!important;
;
}

[jowie]

Hi Vekia, 

 

I have already tried this code for myself, but there is a problem, all #columns move to the right and i don't know how to center it. There

 

Now it is implemented with you code, i have not more ideas to fix it :S

 

Thnaks for your patience

[jowie]

Hello!

 

I have fixed it. Thanks for all

 

This is the code i've used:

#columns {
background-color: #fff;
z-index: 1;
float: left;
padding: 15px!important;
right: 15px;
}

Please, change the topic to SOLVED

[vekia]

lol somehow margin - right: 15px doesnt work here if you write it without spaces between - in margin - right 

[jowie]

lol somehow margin - right: 15px doesnt work here if you write it without spaces between - in margin - right 

 

¿Can you see the website centered in your computer?

 

I have checked in differents computers and it looks well 

[vekia]

¿Can you see the website centered in your computer?

 

I have checked in differents computers and it looks well 

 

i can confirm

everything works well

tested on:

- chrome

- firefox

- safari

- ie

- maxthon

[ZORANVEDEK]

I too  am trying to  get  a header to be transparent and I am at a complete loss as to  how to  accomplish it.  I believe I am on a different theme than  what is being discussed here.  I've started a thread about it here:
 

... any help is appreciated.  I feel like I'm banging my head against a wall  here.