Archived

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

  • 0

Custom CSS Not Displaying

Question

Posted · Report post

I am trying to have a gray background for a landing page for a book giveaway I will soon be promoting.  I have made many pages like this in the past.

 

Here is the URL of the page in question: http://runneracademy.com/matt-fitzgerald-book-giveaway/

 

Here is the custom CSS I have implemented in the Pagelines Customize Plugin:

 

 

.page-id-4377 #page {background-color: #E7ECEF;}
 
body.page-id-4377 {background-color: #E7ECEF; margin-top: 30px;}
 
body.page-id-4377 .content-pad {padding: 0;}
 
.page-id-4377 .page-canvas {background-color: #E7ECEF !important;}
 
 

I have a similar page that is up on my site from a prior contest where this works just fine so I am baffled.

 

Here is the existing page that works correctly along with the CSS: http://runneracademy.com/dk-contest/

 

 

.page-id-2130 #page {background-color: #E7ECEF;}
body.page-id-2130 {background-color: #E7ECEF; margin-top: 30px;}
body.page-id-2130 .content-pad {padding: 0;}
.page-id-2130 .page-canvas { background-color: #E7ECEF !important; }
 
What might the issue be?

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

There could be all sorts of reasons causing it, including, as I mentioned, the order in which the CSS is loaded.  Plugins could affect it; other CSS; coding conflicts... It's really difficult to diagnose without testing everything.  While you're correct, that we've recommended using the style.css in PageLines Customize in past,  any of the three possible locations should work:  Custom code; the PageLines Customize style.css; or a child theme's style.css or style.less.

 

When I Firebug, I find the snippet mentioned above coming from compiled CSS, so it's being loaded from somewhere within standard files.  That's why I recommending using the Custom Code - as it's one of the most efficiently loaded stylesheets.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I'm not sure where in PageLines Customize plugin you added this code, but I'm presuming you meant style.css.

 

Try applying your code after body {} in Dashboard > PageLines > Site Options > Custom Code. It may simply be the queue in which the CSS loads.

 

I'm seeing results with this one line body #page .page-canvas (add your background color and the specific page-id) and changing the content pad with the page-id and .content .content-pad.

 

Just out of curiosity, did you check out our premium plugin, LaunchPage?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,


Yes, I meant the style.css in the Customize Plugin.

 

This doesn't answer why the code for the other page, and many other landing pages I have in a similar format, all work with the code above that is all placed in the style.css portion of the customize plugin.  In fact, I started using it because I was told that was best practice and to avoid using the Dashboard > PageLines > Site Options > Custom Code

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

 

It worked. Just wish I could figure out why it didn't work in the other location as it is not ideal to have multiple places IMO.

 

Thanks

Share this post


Link to post
Share on other sites