Jump to content

changes to style.less file not showing up

Recommended Posts

dcahill82    0

New to Pagelines and LESS. It is my understanding that Pagelines utilized the style.less file since that's where all the code is (as opposed to the style.css). When I make a change to the style.less file and save it. The changes are NOT reflected in the site. What do I have to do to make my changes show up?

FYI - just installed the latest Pagelines and the MUD child theme so am working int he MUD child theme directory.

Share this post

Link to post
Share on other sites
beardedavenger    158


Yup child themes utilize a style.less. The parent framework is (as of 2.3) composed of several encapsulated less files. These files,along with all the style.less files found within the theme, sections, and plugins, are all compiled into one virtual css file. When you save the framework, it will recompile and recache the file. So if you're working on a live site, you have to give the framework a random save to recache.

Here are some reasons why LESS fails to update;

1. Its failing in the compiler due to markup, but the compiler isn't flagging it. Happens on occasion with some syntax.

2. The framework needs a save to recompile the less

3. There's already a LESS error, and future LESS changes wont be updated.

4. CSS isn't specific enough so your rules are being overridden.

5. Just doing it wrong.

I'm gonna bet on #4. What's the specific thing you're trying to do?


  • Like 1

Something big is coming for DMS + photographers.



Nick Haskins & CO - New home for all of my PageLines Store products! 



Better DMS - News, Tutorials, and Tips



Share this post

Link to post
Share on other sites
Mictlan    1


Before I was using the editor to ad the code and make my changes. With this last update the same code I was using is no longer making any change. I read to not ad code in the editor instead go to the setings and make the changes there. I am still learning and I cant find that folder where I can add my code. I found a CSS folder with, multisite.css, objects, shortcodes, animation, but non of those make any diference i f I am add my code to those files. I opened the admin.css at the admin folder and there is no change yet. How can I find that .css file that will make my changes come back?

Share this post

Link to post
Share on other sites
Rob    547


There are several places under different circumstances where you may apply CSS changes.

  1. If you're using a Child Theme, use an FTP client and open the sub-folder for the child theme and apply your changes to style.less. The child themes are found in wp-content/themes/ in a sub-folder with the child theme name.
  2. If you're using Framework directly, go to Dashboard > PageLines > Site Options > Custom Code in CSS Rules. This is totally allowed, and there's no restriction against it. Changes made here will be applied site-wide, whether you use a child theme or not.
  3. If you have the PageLines Customize plugin activated, go to Dashboard > Plugins > Editor. From the drop down list, select PageLines-Customize, then on the right side, select pagelines-customize/style.css and apply your changes and save.

Please do not attempt to edit core files as you suggest above. You will either totally break your site or, you will lose any changes made there with the next update. We do not support editing core files.

Former PageLines Moderator, Food Expert and Raconteur

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

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
    • wyo22ski
      By wyo22ski+
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
      my website : https://www.wedding-photography-minneapolis.com
    • Jason
      By Jason+
      Feel free to delete this post if its not helpful or its just plain wrong.
      I though it might be useful to share how I customize the size of the builder. (reduce my eyestrain )
      1 - install stylerbot extension in chrome (stylerbot keeps this css every time you access the url)
      2- add this css to stylerbot for the site you are working on
      .CodeMirror {
          font-size: 14px;
          height: 600px;
      .pl-workarea.pl-has-sidebar .pl-workarea-sidebar-container {
          right: 0px;
          width: 500px;
      .pl-workarea.pl-has-sidebar .iframe-container {
          right: 500px ;
      change sizes to suit.
    • Jason
      By Jason+
      I can't seem to get the Teamwork section to accept custom css. I am trying to change the padding from 7em to 1em on the splash part
      I have tried
        .pl-sn-teamwork .pl-tw-splash {
          padding-top: 1em;
          padding-bottom: 1em;
      This works in chrome inspect but when added to custom css nothing happens.
      I have also tried most of the classes I can see accoiated with this section but again nothng seems to happen.
      Any ideas?