Jump to content

Archived

This topic is now archived and is closed to further replies.

floydwebb

Body background and Page Background Color

Recommended Posts

floydwebb

I am not very good at CSS. And I see there are no Variables for "Body background" & "Page background" colors defined in site options. Are these options not available?  Is there a tutorial that will show me how to change content/postloop background colors?

 

A little help please?

 

Floyd Webb

 

 

Share this post


Link to post
Share on other sites
Danny

If you want to have a background image and have your page i.e. content area be a specific color, you will want to use the Box Layout mode, add your background image and then set the color for you content area in Color Settings.

 

http://d.pr/i/HpOx

http://d.pr/i/ko9c

 

If you're using the layout option Full Width Display and upload a background image, your content will be transparent. However, with the sections being full width you can follow this guide to add whatever colors you like.

 

http://docs.pagelines.com/tutorials/section-area-styling

 

However, this will then hide your background color or image due to your using the full width display layout option. So what you can do is this, using the same principle as the link above section area styling.

 

However, code your custom classes like this:

 

.bg-white {
  .pl-content {
    background-color: white;
    color: #343536;
  }
}
 
This means that when you add the bg-white class to any of your sections styling classes, the background color will be white but only for the content area of that section.
 
 
You can do the same thing for blue backgrounds, green and so forth, for example:
 
.bg-blue {
  .pl-content {
    background-color: #428BCA;
    color: @white;
  }
}

 

Feel free to copy and paste my code and change the class name to represent the background color, and also change the color value, or remove it complete if you like.

As you could do this:

 

.bg-white {
  .pl-content {
    background-color: white;
  }
}
 
Then add a custom class for text colors, like so:
 
.blue-text-baby { color: #428BCA; }
.green-text-baby { color: green; }
.red-text-baby { color: red; }
 
Then mix and the match the two for example, lets imagine you would like to have your sections content area background to be blue and have green text, you would add the following to the styling classes field:
 
.bg-blue text-green-baby
 
Save and this should display the sections with a blue background and a green text (please take into consideration that is a basic classes guide and that hyperlinks will most likely require addition styles).

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×