Jump to content


Photo
- - - - -

Sidebar, morefoot, and footer backgrounds


Best Answer Danny , 03 February 2014 - 12:26 PM

Try the following:

 

.morefoot-col {
background-color: #FFF;
}

Please be aware that we do not provide extensive CSS support, if you're having difficulty identifying the classes, I recommend using Chromes Dev tools.
Go to the full post


  • Please log in to reply
9 replies to this topic

#1 062098

062098

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 15 January 2014 - 02:25 AM

Hey everyone.  I'm using pagelines dev and have no background color but just an image background.  I would like a way to add a solid color background behind any individual widget within a sidebar, morefoot, or footer, so that all sections are cleanly displayed.  Any thoughts?



#2 Danny

Danny

    Is Awesome!

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

Posted 15 January 2014 - 12:59 PM

HI,

 

I am not entirely sure what you're trying to achieve, if you want to add a a background color to a specific section you could use the styling classes field to add your custom CSS class name to that section, which will add that classes styling. See here for more examples - 

Please Login or Register to see this Hidden Content

 

If you wish to add a background to a particular widget in your sidebar, you will need to use custom CSS.



#3 062098

062098

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 15 January 2014 - 07:03 PM

Thanks for your reply.  I've seen topics here of users wanting to have a solid color behind the entire morefoot section, but what I am wanting to do is to have a solid color behind each widget content behind any morefoot or sidebar on a page where there is a background iamge and no fill.  So, for example, a categories widget on a sidebar could have white behind it within the context of it on its own, so that other widgets in the sidebar also have white, but it is not a solid band of color running under the whole section.  So the end result looks like boxes close together but with space between. 



#4 James B

James B

    Advocate

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

Posted 16 January 2014 - 12:29 AM

Hi there,

 

Each widget will have it's own ID or class that you can assign a color to using css. If you look into the chrome inspector or firebug at each widget in the sidebar, you'll see the id for each container you can then use this id to apply your color.

 

See in this screenshot there's the id for the widget on the left and in the right the css code I've applied to that widget to change the color

Please Login or Register to see this Hidden Content

 

More information on css inside the framework can be found at -

Please Login or Register to see this Hidden Content



#5 dvr

dvr

    Member

  • Members
  • 14 posts
  • LocationCanada
  • Framework Version:2.3.4
  • Country: Country Flag

Posted 27 January 2014 - 09:08 PM

I must thank everyone apart of pagelines.. I so often find my answers and usually right off the bat too..

I've learned to work with firebug too.. quite extensively.

 

Guys, from the title on this one though, you've got me stummped..

 

Simple put, morefoot background a solid color.. it just will not go...

 

thanks in advance..

dvr

 



#6 James B

James B

    Advocate

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

Posted 28 January 2014 - 03:07 AM

Hi there, thanks for your support :-)

 

To set the morefoot area to a solid color use the following css.

 

.section-morefoot {
    background: #000000;
}


#7 062098

062098

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 03 February 2014 - 02:38 AM

Thanks very much for the posts.  Doing the above method adds a solid color behind the section to the full page width, but what i'm looking for is something that will add a color behind JUST each individual widget container, much like a border on a box.  So that if there is three widgets in morefoot, each will have a white box behind with space between each one, and ideally with the top and bottom edges flush - that is, lined up evenly with each other.  Check out my website as an example - 

Please Login or Register to see this Hidden Content

.  I've used boxes as links and would like to have morefoot (and other widgets) with white boxes around so that the look is consistent.



#8 Danny

Danny

    Is Awesome!

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

Posted 03 February 2014 - 12:26 PM   Best Answer

Try the following:

 

.morefoot-col {
background-color: #FFF;
}

Please be aware that we do not provide extensive CSS support, if you're having difficulty identifying the classes, I recommend using Chromes Dev tools.


#9 062098

062098

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 03 February 2014 - 01:58 PM

Thanks Danny, that did exactly what I needed!  Simple solution but it had me stumped!



#10 Danny

Danny

    Is Awesome!

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

Posted 03 February 2014 - 02:28 PM

No problem, happy to help!