• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 How to make footer background transparent - solved

#1
Hi,
I am having difficulty making the footer container transparent in order to reflect my WHITE to BLUE gradient background. Website is www.HairySquid.com.
PLEASE if someone can help, tell me how to get have my background continue.

I have edited in Extra.css the following in order to get my background:

Code:
#headerMover
{
background: -webkit-linear-gradient(white, blue); /* For Safari */
background: -o-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, blue); /* Standard syntax */
}
#headerMover, #headerProxy, #header, #content, #footer
{
    background-color: transparent !important;
}
 

Amaury

Well-known member
#2
Admin CP > Appearance > Style Properties > Footer > Main Container

Set the background to a clear value and set the border to a clear value and set its style to none and its width to 0px.
 
#3
Admin CP > Appearance > Style Properties > Footer > Main Container

Set the background to a clear value and set the border to a clear value and set its style to none and its width to 0px.

Thank you for the quick response, however when I implement those settings, it still leaves a big white rectangle at the bottom. I am trying to make it a seamless background. I appreciate your help, but this didn't help me get closed to a solution. Even at the bottom of the Main Container page it says "Controls the appearance of the container for the upper footer section." So this is only adjusting those upper sections of the footer and not the whole width of the page and below.
 

Amaury

Well-known member
#4
Thank you for the quick response, however when I implement those settings, it still leaves a big white rectangle at the bottom. I am trying to make it a seamless background. I appreciate your help, but this didn't help me get closed to a solution. Even at the bottom of the Main Container page it says "Controls the appearance of the container for the upper footer section." So this is only adjusting those upper sections of the footer and not the whole width of the page and below.
Which footer are you talking about? The one where the style chooser is or the section footer at the bottom of a discussion listing?
 

mistypants

Well-known member
#8
Why did you add the background gradient to the #headerMover div? You can just add the CSS to Style Properties -> General > HTML if you want it to span the entire page. That won't conflict with the footer, based on the quick test I did.
 
#11
Why did you add the background gradient to the #headerMover div? You can just add the CSS to Style Properties -> General > HTML if you want it to span the entire page. That won't conflict with the footer, based on the quick test I did.
Problem fixed thank you to Mistypants! What a legend! Thanks for your help Amaury as well. Both of you were invaluable to solving this for me. I really appreciate it!!