Jump to content
Sign in to follow this  

Pagelines LESS Compiler Recommendation

Recommended Posts


Hey Guys,


I have just a small recommendation for the next iterative upgrade of Pagelines. If you can, I would really appreciate it if you could tell your compiler to stick the child theme's style.less file in AFTER you stick the main wp-admin chosen styles in. I'm working on a site right now that I'm using a custom font on, so I've setup the fonts and some mixins in the style.less file, however, all of it is getting overridden because the styles chosen in the backend are being added to the compiled stylesheet after the child theme's .less styles. Just to make this a bit more tangible:


@font-face {
    font-family: 'FontinRegular';
    src: url(@{plChildRoot}/lib/fontin/fontin_sans_r_45b-webfont.eot);
    src: url(@{plChildRoot}/lib/fontin/fontin_sans_r_45b-webfont.eot?#iefix) format('embedded-opentype'),
         url(@{plChildRoot}/lib/fontin/fontin_sans_r_45b-webfont.woff) format('woff'),
         url(@{plChildRoot}/lib/fontin/fontin_sans_r_45b-webfont.ttf) format('truetype'),
         url(@{plChildRoot}/lib/fontin/fontin_sans_r_45b-webfont.svg#fontin_sans_rgregular) format('svg');
    font-weight: normal;
    font-style: normal;
// Font Mixin
.fontinRegular(){ font-family: FontinRegular, Helvetica, Verdana, Arial, sans-serif;}
// Add Mixin

And when I look at the stylesheet, Firebug shows it coming up like this:

// line 8949
thead, h1, h2, h3, h4, h5, h6, .site-title {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: bold;
// line 7207
.site-title {
    font-family: FontinBold,FontinRegular,Helvetica,Verdana,Arial,sans-serif;

In essence meaning my custom font is being overridden because the default/wp-admin styles are being added in afterward. So I have to add an !important into the .fontinRegular() mixin so that it doesn't get wiped out by the other style calls.


You would make my life, and really any other developer's life much easier if my child theme's style.less is the last one to be added to the compiler :)


Thank you!

Share this post

Link to post
Share on other sites



Thank you for making this suggestion.  I've moved the topic to a different category to make sure it gets the attention it deserves from our developers.


I see you've found a solution with the !important tag, and was about to suggest an option of placing the font call in Custom Code, but that really defeats your purpose.


I'm going to bring this to our developers' attention directly.


Again, many thanks for alerting us to this issue.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

You're most welcome! I absolutely love this framework and don't have enough good things to say about it, but something like this will make a huge difference for some of the more experienced developers like myself that prefer hacking away in the actual files vs. the wordpress backend. And sorry for posting in the wrong category, was a little late at night when I came to the awareness and wasn't thinking when I posted -_-

Share this post

Link to post
Share on other sites

No worries.  That's why they give me moderator privileges.

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

Sign in to follow this  

  • Similar Content

    • Kedark
      By Kedark+
      Hello, I need help. Can and how to do it. I need to add more page appearance templates (page attributes). At the moment it's default and FRAMEWORK A, FRAMEWORK B etc. I need to add two more. How can I do this.
      Unfortunately, I did not find such a thread on the forum.
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
    • dougalperman
      By dougalperman+
      Hi there,
      I'm a big fan of Pagelines, and have been for years.
      I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward.
      I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels.
      I can't work out how to change either.
      I'm using the latest version of Pagelines Framework (Pro) with the Agency them.
      Any help or advice very much appreciated.
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, could you let me know where the custom less/css is saved to - i.e. how I could access it directly via the server.
      I hid the Admin Bar by mistake and now can't save any changes to the Custom CSS as the Save Button is not available - so I need to find another way to access and edit the custom CSS.
      Thanks in advance
    • Audun MB
      By Audun MB+
      How do I get the LESS in a child theme to compile?