Jump to content


Photo
* * * * * 1 votes

Adding a unique background to the footer

footer background custom css

Best Answer Danny , 29 May 2014 - 11:16 AM

Hi,

 

You can try the following custom CSS:

 

body.fixed_width #footer {
background: blue;
max-width: 100%;
}
 
If you want to use an image, you will need to edit the CSS above, I also recommend you remove any custom CSS you have related to the footer, as it will likely conflict.
Go to the full post


  • Please log in to reply
5 replies to this topic

#1 scribblebean

scribblebean

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 27 May 2014 - 09:24 PM

Website URL: 

Please Login or Register to see this Hidden Content

Framework Version: 2.1 
WordPress Version: 3.9.1
Screenshots: attached

 

Details:

I would like to add a custom background behind the footer, while having a separate background for the rest of the site. I'd like to add that to the section highlighted in the attachment. How do I do that?

 

Steps taken: 

I added #footer { background-image: url(YOUR-IMAGE-URL) } In Custom Code -> Custom CSS (per this thread: ) but it doesn't change anything. One comment in that thread mentioned changing the layout template but I don't have more details than that, so I'm not following how to fix the issue.

 

Notes:

I'm working on this for a client who uses Pagelines, and I'm not familiar with the framework.

 

Thanks so much for any help you can offer.



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 27 May 2014 - 09:58 PM

You have posted in the free version of the DMS forum. You say you are using 2.1 - could you confirm this for us 

 

The CSS you say you used - im assuming the code you added wasnt as follows 

Please Login or Register to see this Hidden Content

Could you provide the exact CSS you used please?

 

Although...

 

 

If you are using DMS 2 Version 2.1, you can add a a 'canvas area' section to the footer and make sure all the content for the footer is inside the canvas area, you then have the option to set a background for the canvas area and thus the footer. 



#3 scribblebean

scribblebean

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 29 May 2014 - 12:25 AM

Thanks for the quick reply.

 

I assumed we have 2.1 because the Pagelines dashboard says we have no new updates, which I suppose I shouldn't have done. Sorry. I looked in Appearance> Themes> Pagelines framework and found it's Version 2.4.5.

 

I don't know what a canvas area section is or how to add it. Do you mind elaborating, please? 

 

The actual CSS is 

 
#footer { background-image: url(

Please Login or Register to see this Hidden Content

) }
 
I put it at the end of the CSS/LESS Rules section with a hard line between it and the last css text.


#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 May 2014 - 11:16 AM   Best Answer

Hi,

 

You can try the following custom CSS:

 

body.fixed_width #footer {
background: blue;
max-width: 100%;
}
 
If you want to use an image, you will need to edit the CSS above, I also recommend you remove any custom CSS you have related to the footer, as it will likely conflict.

  • scribblebean likes this

#5 scribblebean

scribblebean

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 30 May 2014 - 02:37 AM

SCORE, thank you! That worked.



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 May 2014 - 09:20 AM

No problem.







Also tagged with one or more of these keywords: footer, background, custom css