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

[Rukiri]

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.

 

[Paul B]

Add this to EXTRA.css

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

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:

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



edit - brogan!

 

[Paul B]

 

[Rukiri]

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

 

[Jake Bunce]

Add some padding, like so:

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