• 0

Sidebar, morefoot, and footer backgrounds

Question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 - http://docs.pagelines.com/tutorials/section-area-styling

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 http://screencast.com/t/uXnXd5uE9AE

 

More information on css inside the framework can be found at - http://support.pagelines.me/docs/customization/custom-css/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, thanks for your support :-)

 

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

 

.section-morefoot {
    background: #000000;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 - http://www.keywestphoto.ca/portfolios/.  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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem, happy to help!

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