1. 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

Discussion in 'Styling and Customization Questions' started by Quinton, Jan 15, 2014.

  1. Quinton

    Quinton New Member

    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;
    }
     
  2. Amaury

    Amaury Well-Known Member

    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. Quinton

    Quinton New Member


    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.
     
  4. Amaury

    Amaury Well-Known Member

    Which footer are you talking about? The one where the style chooser is or the section footer at the bottom of a discussion listing?
     
  5. Quinton

    Quinton New Member

    [​IMG]
     
  6. Amaury

    Amaury Well-Known Member

    What I posted should have worked. Can you screenshot the results?
     
  7. Quinton

    Quinton New Member

    sure thing[​IMG] [​IMG]
     
  8. mistypants

    mistypants Well-Known Member

    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.
     
    Quinton and Amaury like this.
  9. Amaury

    Amaury Well-Known Member

    You didn't put 0px for the width. Give that a shot.
     
  10. Quinton

    Quinton New Member

    My mistake... but I did just do that and it didn't solve the problem. Im going to look into what mistpants mentioned. Ill report back im sure.
     
    Amaury likes this.
  11. Quinton

    Quinton New Member

    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!!
     
    mistypants and Amaury like this.

Share This Page