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

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

Brogan

XenForo moderator
Staff member
#2
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.
 

Jake Bunce

XenForo moderator
Staff member
#3
Unless I could extend my content back-ground color to where my footer text is, I wouldn't have to use an image.
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!
 

Jake Bunce

XenForo moderator
Staff member
#6
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;
}