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

footer: can't move an image to a desired location.

Discussion in 'XenForo Questions and Support' started by Rukiri, Apr 21, 2011.

  1. Rukiri

    Rukiri Member

    My footer is pretty much done but I have an image I want to slide where my content color is, for me it was a whie/grey gradient and the footer was a dark blue.

    However, I can't seem to move it like I usually do with css images. I would have just done margin-right: xxpx;

    I'm sure it's an easy fix but I'm just so frustrated right now.
    as you can see the image loads to the left and can't be moved.

    Unless I could extend my content back-ground color to where my footer text is, I wouldn't have to use an image.

    footer overlay.png
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Add this to EXTRA.css

    Code:
    .footerLegal .pageContent {
    background-color: @primaryDark;
    }
    
    Change the colour to suit.

    You can also add an image by using the background attribute instead of background-color.
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Edit this template:

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .footer .pageContent
    {
    	background-color: @contentBackground;
    	border-bottom-right-radius: 0px;
    	border-bottom-left-radius: 0px;
    }
    
    .footerLegal .pageContent
    {
    	background-color: @contentBackground;
    	padding: 10px 10px;
    }
    
    The result:

    Screen shot 2011-04-21 at 1.22.29 AM.png

    edit - brogan!
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

  5. Rukiri

    Rukiri Member

    Thanks, that worked!
    But how do I move the footer text down at least 20 pixels?
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Add some padding, like so:

    Code:
    .footer .pageContent
    {
    	background-color: @contentBackground;
    	border-bottom-right-radius: 0px;
    	border-bottom-left-radius: 0px;
    	padding-top: 20px;
    }
    
    .footerLegal .pageContent
    {
    	background-color: @contentBackground;
    	padding: 10px 10px;
    }
    
     

Share This Page