Jump to content


Photo
- - - - -

Custom CSS Not Displaying


Best Answer Rob , 25 February 2013 - 09:57 PM

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.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 25 February 2013 - 08:54 PM

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: 

Please Login or Register to see this Hidden Content

 

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: 

Please Login or Register to see this Hidden Content

 

 

.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?


#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 February 2013 - 09:17 PM

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?



#3 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 25 February 2013 - 09:36 PM

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



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 February 2013 - 09:57 PM   Best Answer

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.



#5 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 26 February 2013 - 05:09 AM

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