Jump to content
Sign in to follow this  
designpoint

Footer background

Recommended Posts

designpoint    0
designpoint

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

Share this post


Link to post
Share on other sites
batman    389
batman

Hi Adrian

 

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

#footer {background: grey;}

You can go

http://www.w3schools.com/cssref/css_colornames.asp

or

http://html-color-codes.info/

and select the color as you like

 

You may also use color codes there, such as #C00000 , if you wish to use more specific colors.

 

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

Check out 

http://support.pagel...ion/custom-css/

 

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

and check out W3 Schools for more info. 

http://www.w3schools.com/

 

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

http://www.pagelines.com/wiki/Custom_CSS


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

Hi,

 

Thanks for that although it did not work :(

Share this post


Link to post
Share on other sites
batman    389
batman

Hi adrian

Please try with

 

#footer {background: grey !important;}

or

#footer {background-color: grey !important;}

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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

Share this post


Link to post
Share on other sites
batman    389
batman
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;}

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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 http://www.w3schools.com/css/ learning the ins and outs of CSS and responsive design. They have some great resources there that will be most helpful to you.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.  http://pxtoem.com/


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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

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

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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'?

Share this post


Link to post
Share on other sites
James B    436
James B

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 - http://www.pagelines.com/store/plugins/browser-css/

 

There's a guide to the various css prefixes the plugin uses here - http://support.pagelines.me/docs/plugins/browser-specific-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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

Share this post


Link to post
Share on other sites
James B    436
James B

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.

 

http://www.pagelines.com/forum/topic/26262-background-issues-viewing-on-mobile-devices/

 

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

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!

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Houston Haynes
      By Houston Haynes+
      OK - folks - back with another nit... The "back to top" link works - BUT - it's only active (i.e. clickable with the associated action following) when the mouse-over hovers over the footer area of the page. I did a quick change of the z-depth (to -1) and nothing made a difference. Any thoughts on how to make the *entire* back-to-top icon hover-able/actionable? Thanks!
       

    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have been unsuccessfully trying to get my 3-column widgetized footer aligned centered. The widget section itself is aligned left because the alignment appears to be controller the widget's content only. The container that contains the widget section is aligned centered. I have chosen a 3 column layout and I added 3 widgets, assuming they would be aligned centered.
      Any idea of what I may be doing wrong?
      The page is question is: http://www.michaelkummer.com
      Thanks
      Michael
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • carl
      By carl+
      How do I remove the leaf html5, css3 logos from the footer? Sorry if this have been covered a thousand times, but no clear cut solution available for my version of DMS2. Do I need to go pro to remove? Cheers!
×