Jump to content


Photo
- - - - -

Footer background

footer background

Best Answer James B , 16 April 2013 - 03:40 AM

Yes you can adjust the margin to affect how far in each side goes. You'll probably need to adjust the right side to a lesser figure than the left to get it to display as you intended.

Go to the full post


  • Please log in to reply
20 replies to this topic

#1 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 14 April 2013 - 09:59 PM

Hi Guys,

 

Want to be able to change the footer background from white to a light shade of grey on this website im working on test.propertywealthadvisors.com.au

 

Can you please point me in the right direction?

 

Thanks,

 

Adrian



#2 batman

batman

    Bat Learning

  • Members

  • 1768 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 April 2013 - 11:14 PM

Hi Adrian

 

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

Please Login or Register to see this Hidden Content

You can go

Please Login or Register to see this Hidden Content

or

Please Login or Register to see this Hidden Content

and select the color as you like

 

You may also use color codes there, such as

Please Login or Register to see this Hidden Content

, if you wish to use more specific colors.

 

It is advisable to learn how to do this on your own too.  

Check out 

Please Login or Register to see this Hidden Content

 

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

Please Login or Register to see this Hidden Content

 

Also please be sure to watch our Firebug video tutorial here.

Please Login or Register to see this Hidden Content



#3 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 14 April 2013 - 11:32 PM

Hi,

 

Thanks for that although it did not work :(



#4 batman

batman

    Bat Learning

  • Members

  • 1768 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 15 April 2013 - 12:07 AM

Hi adrian

Please try with

 

Please Login or Register to see this Hidden Content

or

Please Login or Register to see this Hidden Content



#5 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 15 April 2013 - 12:16 AM

Tried that but still doesn't work

 

test.propertywealthadvisors.com.au

 

this is my css customized section:

 

 

body{
  
  #highlight .highlight-subhead {
font-size: 1.2em;
        color: #008080;
    font-weight: bold;
letter-spacing:0;
text-transform: none;       
    
#footer {background-color: grey !important;}
  }}


#6 batman

batman

    Bat Learning

  • Members

  • 1768 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 15 April 2013 - 12:23 AM

Hi again
Please see the difference 
 body{}

 

#highlight .highlight-subhead {
font-size: 1.2em;
        color: #008080;
    font-weight: bold;
letter-spacing:0;
text-transform: none;  }
    
#footer {background-color: grey !important;}


#7 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 15 April 2013 - 12:28 AM

Perfect! thank you. Am I able to situate the nav buttons closer to my logo and aligning itself to the bottom of the logo itself?



#8 Danny

Danny

    Is Awesome!

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

Posted 15 April 2013 - 06:30 AM

Firstly, if your original question has been answered then please mark the topic as resolved and if you have any other questions, create a new topic.

 

To answer your question above, if you wish for your navigation to be position below your logo, you will need to replace the BrandNav section with both the Branding section and  NavBar/Nav Classic section.



#9 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 15 April 2013 - 10:36 PM

Hi,

 

On my footer background I have shortened the widths to match the features width size although I have noticed when I switch to other monitors or take a look on the iphone, the footer background is messed up. Not sure if the below CSS is correct:

 

 

#footer {background-color: #EAEAEA !important;
  position: relative;
margin-left: 100px;
  margin-right: 100px;}


#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 April 2013 - 12:33 AM

The footer is designed to be responsive, but when you apply margins with fixed pixel widths, responsiveness is no longer applicable.  That's why it won't work in mobile devices which rely strictly on responsive measurements like em or %.

 

I'd highly recommend you invest some time at

Please Login or Register to see this Hidden Content

learning the ins and outs of CSS and responsive design. They have some great resources there that will be most helpful to you.



#11 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 16 April 2013 - 12:39 AM

Ok thanks. So which property should I be looking at when reducing the width for it to display the same on all devices?



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 April 2013 - 12:54 AM

That depends on what you want to accomplish.  Just use em or percent (%) instead of pixels (px).

 

This will help you to find the right measurements. 

Please Login or Register to see this Hidden Content



#13 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 16 April 2013 - 12:59 AM

Thanks I understand that, although what naming convention do I use? Will it be margin? left/right? So many naming conventions



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 April 2013 - 01:03 AM

You're changing the values, not the names of these two bits:

margin-left: 100px;
  margin-right: 100px;
 
There's no naming conventions needed.


#15 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 16 April 2013 - 01:12 AM

Thanks, I used the % and works fine but i tried viewing on the iphone and it has messed the footer, I think it has to do something with the 'position'?



#16 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 April 2013 - 02:08 AM

I've checked your site on my iphone and the footer looks fine, its displaying the same as the desktop view.

 

However, you can also tweak css in the different views using the browser css plugin -

Please Login or Register to see this Hidden Content

 

There's a guide to the various css prefixes the plugin uses here -

Please Login or Register to see this Hidden Content



#17 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 16 April 2013 - 02:17 AM

on my iphone everything loads although the background color of the footer is off balance and the right side is out of line



#18 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 April 2013 - 02:57 AM

Ah i see, sorry was looking at the other url in your profile, not the test one. I've spoken to you in live chat about the icon sizes, but since checked the background in the iphone.

 

Ok if you have the site set to fixed width background and not on one of the responsive layouts then you could have the same issue as the client below. This has been placed on the bug report and is currently being investigated.

 

Please Login or Register to see this Hidden Content

 

In saying that looking in your css code you've added a 5% to the footer container which will bring in the margins and the background. If you wanted to give the effect of the color only being applied behind the content area of the page you could have used the .content-pad class inside the footer to apply the color to.



#19 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 16 April 2013 - 03:07 AM

Ok thanks that works well on the iphone...I just want to slightly change the footer background size to be in line with the features banner?

 

should I use these properties below:

 

 

 margin-left: 5%;
    margin-right: 5%;

 

Thanks for your assistance been a good help!



#20 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 April 2013 - 03:40 AM   Best Answer

Yes you can adjust the margin to affect how far in each side goes. You'll probably need to adjust the right side to a lesser figure than the left to get it to display as you intended.







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