Jump to content

Archived

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

imagineutopia

Making Content Area White so background doesn't show on text

Recommended Posts

imagineutopia    6
imagineutopia

I have a background image on my page but its interfering with how the text looks.

 

I'd like the entire background of the content of the site to just be white and not have the background showing through.

 

How can I do that? In the old pagelines I had a little css I would throw in each site to make this happen.

 

Here is how it looks:

 

mess.jpg

 

Here is how I'd like it to look:

 

ideal.jpg

Share this post


Link to post
Share on other sites
imagineutopia    6
imagineutopia

is this possible to do?

 

this should probably be in the customization forum. can we move it over there?

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign
.drag-drop-editing .pl-sortable-area, .drag-drop-editing .pl-sortable-column {
background: #fff;
}
 
In your custom CSS

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
imagineutopia    6
imagineutopia

I've added that css but it didn't have any effect.

 

when that is the only css in there I am getting no background color still.

 

no.jpg

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

If that isnt working then try referencing with a custom class, from your Custom CSS/LESS (I prefer always to add to the Pagelines > DMS Fallbacks >Custom CSS/LESS in the wp admin) such as:

 

.whitecontent {
  background: #fff;
}
 
Then for each section on the page, add, under the standard options > Custom Styling classes:
 
 whitecontent
 
More laborious than the previous suggestion, which worked using Chrome developer..
 
 
 

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
imagineutopia    6
imagineutopia

I'm able to get it to work in the editor now but when I go to the live site its still not showing the color.

 

looks good in the editor using just this: 

 

.drag-drop-editing .pl-sortable-area, .drag-drop-editing .pl-sortable-column {
background: #fff;
}
 
Anybody know why the live site would be ignoring this CSS that the editor is displaying correctly? 
 
who.jpg

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

Apologies... should look at what I pasted in. shouldn't have .drag-drop-editing in there as that would be for when editing only

 

This is what you should have, if in Custom CSS/LESS

 

body.display-full .pl-content {

background-color: #fff;
}
 
The custom class "whitecontent" can also be used and referenced as mentioned above.
 
 
Which, of course, makes much more sense! Sorry I have mucked you about... long day

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
imagineutopia    6
imagineutopia

thanks for your help. doing it in one big bulk like that is causing other areas to mess up but I think making the whitecontent as a class should work.

 

thanks.

 

again.jpg

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Did the class method work for you?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
imagineutopia    6
imagineutopia

yes kind of but I am getting gaps in my items from time to time.

 

what can I do about all these gaps? are there paddings I need to manually be removing from items?

 

http://184.154.227.20/~localsta/

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

yes kind of but I am getting gaps in my items from time to time.

 

what can I do about all these gaps? are there paddings I need to manually be removing from items?

 

http://184.154.227.20/~localsta/

Canvas area settings > Set area padding > 0px


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
skippingstones    1
skippingstones

this also helped me with my problem.... took me a long time to find how to get white content background. 

 

yay! 

  • Like 1

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Good to know this helped :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×