• 0

CSS Processing without LESS files on server.


Question

Posted · Report post

Hi team,

 

I pushed my test site up to a server this morning and I've been wrestling with processed CSS files being created and submitted to the wp-content/uploads/pagelines/ folder.  When these files are created, it is "breaking" the site, causing massive css errors.  When I delete the new generated files and re-push the two files (editor-draft.css and the timestamp css file) that are from my local development, everything is ok.  I'm confused about this because I do not have anything in the Custom CSS window in DMS and I deleted the style.less file from the child theme on the server to see if that would help.

 

My site is a child theme.  Locally, there was a style.less file compiling into a style.css file using CodeKit.  The style.css file has all my processed css from the style.less file.  I removed the style.less file from the server (kept everything intact locally where I'm not having this problem) when style.less file when I started to see files being created in that folder.  [attachment=1923:Screen Shot 2014-01-26 at 10.44.34 PM.jpg]

 

I do have WooCommerce setup.  Do you think the woocommerce.less file is being compiled into the uploads/pagelines/ folder?  Are there other .less files that could be compiled that I'm not aware of yet?

 

Feel free to ask me further questions.  I can't publish this for real until I get this figured out.  Thanks in advance.

Share this post


Link to post
Share on other sites

44 answers to this question

  • 0

Posted · Report post

Yeah, I thought that was the case, but CodeKit runs a validator and it checked out.  I also went to CSSLint and it checked out there, too.  

 

When logged in, some CSS is now rendering, but things like the navbar and some other elements are not loading.  Not sure if this is a conflict somewhere or what.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you remove all your custom CSS/LESS, save the file/setting, then clear your browsers cache and then login again, is everything working or are there still issues ?

If removing all your custom CSS/LESS doesn't resolve the issue, can you contact our helpdesk with your admin username and password so we can take a closer look, also include a link to your site and a link to this topic please.

 

hello at pagelines dot com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nope, doesn't work.  Updated to 1.1.6 and that made it worse.  Now the CSS does not load whether I am logged in or out.  Sent another email to PL support.  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've checked the inbox but no email with login credentials has come yet for this topic.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, I'll send it again.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The other thread seems to be a mulitisite issue.

 

Logging into your site with the standard DMS theme active the compiled css seems to be loading fine - http://screencast.com/t/RyvPBseoys and http://screencast.com/t/OjTxBKoDA

 

Activating your custom theme, the css is still compiling ok, its generating the compiled css file - http://screencast.com/t/Fp2kkBtYx

 

The navbar is displaying, but it's showing as the mobile button. This will be down to some of the editing within the child theme you've made. Your compiled css is loading the following with the child theme active - http://skyline.longtailcreative.com/wp-content/uploads/pagelines/compiled-css-1391644021.css so that would lead me to think the reason the code isn't rendering fully is due to an error in the style.less you've created.

 

The easiest way to test this in my opinion would be to copy all of your code in the style.less you entered and paste into a blank text doc. Then switch back to the main theme so the child theme is inactive.

 

In your css/LESS panel, start pasting in chunks of the code from your style.less bit by bit. Saving and refreshing the see the changes take affect, if it gets to a point where the changes stop taking effect, you've reached part of the code which is broken and anything after this point won't be being read.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Is there an updated WooCommerce sections?  These sections seem to be the culprit.  When I remove them, the CSS renders, but then I lose the eCommerce, which is the whole point of the job.  

 

I used the provided WooCommerce sections from Ellen:  http://pagelines.ellenjanemoore.com/woocommerce/ that I downloaded a few weeks ago when I started this project.  I did not customize any of these section's functions, only style changes and hooking into the main WooCommerce functions within my functions file.  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, the Woo integration Ellen made for the PageLines Framework isn't required inside DMS. Woo and DMS will work together straight out of the box so as long as the standard Woo plugin from wp.org is installed and active you'll be ok.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok.  Well, I have a bit of work to do.  I had used the individual sections to configure the product pages.  Am I correct in now thinking that I should try to do what Ellen did with separating out sections of WooCommerce if I want to pick and choose what is shown?

 

I think for other users, it would help to really clarify if something is for "Framework" or "DMS" since the two do not seem to be compatible with each other.  Much of what I have learned from this is that a lot of documentation and offered plugins or Git code is still from Framework, which has made working with DMS very hard.  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

Anything no available in the DMS directly isn't compatible with DMS (unless its a third party store via a developers own url in which case they will state if its DMS compatible in their own shop on the site, most third part devs will have a Framework and a DMS version available if they've made an edition for each system).

 

I've not used Ellen's integration for the Framework previous so I'm not sure 100% what you mean by separating the sections. I've copied the Author ellenmva into thread in case she can advise further for you. If you mean separating by product category etc, you'll be able to do this in the same method as setting up categories for WordPress posts etc.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well, it's apparent what I mean about Ellen's structure of the sections if you look at her file structure, so I'll leave that up to you. 

 

This entire experience has been super frustrating.  I'm fighting the DMS more than anything.  I'll be going along for hours and then the CSS doesn't load, and I have to back out EVERYTHING I've done before DMS "resets" and I can start to build back into it.

 

I bought DMS so that it would help take a bit of basic content placement off my back and allow others in the studio to work directly on front end things, but it's made developing a site twice as hard.  Not only does one have to build for WP, we have to build against the DMS platform, which has no rhyme or reason for failure.  It's one thing if the DMS has specific failure points that I can design around, but failure points seem completely random.  For example, I've place a bit of less into a style.less file within a custom section.  It worked for 6 hours today with constant page reloads while I set up everything else.  After a failure and backing out everything, removing this less seemed to bring me back to a starting point.  "Ok," I think, "I'll not put the style.less into the section, I'll put that bit of code into the 'DMS Fallback LESS' section". When I do this, the CSS is loaded before the WooCommerce, so the default WC styles override my section customization.  The customization is there - I can see it in Inspect Element, but it doesn't load.  I tried backing out other styles from their sections and putting them into the DMS Fallback LESS area, but that didn't work, either.  So, I loaded it back into the section.  Then the CSS stopped working.  So I put it back into the DMS Fallback, and all of a sudden it works.  The CSS is loading after the WC styles load, so it works.  Then I load the rest of the styles from the other sections into the DMS Fallback (styles that have been working all day), and then the DMS loads BEFORE the WC styles!  Maddening!  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Not sure how you come to the conclusion that Ellen's WooCommerce integration was compatible with DMS, no where on that sections page does it state it is compatible with DMS. It isn't even in our store, If a section is not in the PageLines store, then it is not compatible with DMS

 

http://pagelines.ellenjanemoore.com/woocommerce/

 

If you have downloaded an extension from a third party store then you need to make sure that the extension you downloaded is compatible. We do not provide support to third party extensions, all support is carried out by the author of that extension.

 

DMS is fully compatible with WooCommerce without the need to install a third party extension, we use it for our own marketplace - http://www.pagelines.com/shop/

 

If you prefer to have sections similar to how Ellen's products works, then I recommend you either refactor the section making it compatible with DMS yourself or you get in touch with Ellen and see if there are plans to update it for DMS.

 

http://pagelines.ellenjanemoore.com/

 

In regards to your CSS/LESS issues, you should not be adding CSS/LESS via the DMS fallback area, this area is specifically for locating errors and removing them, it should not be used as an alternative or method of including new CSS/LESS.

 

Also, from what I can tell having viewing your CSS from the DMS fallback area, your CSS/LESS is full of errors which is the reason as to why it is not loading.

 

For example, you have this in your CSS/LESS which isn't valid so what happening is everything below this doesn't load because it's pretty much commented out.

 

.test-title {
  background: @backgroundlitegray;
  margin: 0px 8px;
  font-family: \\\\\\\\\\\\\\\'Yellowtail\\\\\\\\\\\\\\\', cursive;
  
}
 
.brand-summary-checkout-our-brands {
  color: @skylinecolor;
  margin-bottom: 1em;
  border-bottom: 1px @skylinecolor solid;
  font-family: \\\\\\\\\\\\\\\'Yellowtail\\\\\\\\\\\\\\\', cursive;
}
 
Another error you have is you appear and I am not sure why, to be using C++ comments, this isn't recommended in CSS stylesheets, you should be using:
 
/* Comment goes here */ = Single Line
 
/* Comment
goes
here
*/ = multiple line
 
Using // is incorrect, so you will want to resolve this too, see here for more information - http://www.w3.org/TR/CSS21/syndata.html#comments
 
When you address these errors, your CSS/LESS should load, unless I have missed something.
 
I recommend you do not use a compiler either, if you're not familiar with the CSS > LESS nesting, then use the following website, which will convert your CSS nests to LESS.
 
http://css2less.cc/

I also highly recommend you install and use a code editor, such as Sublime Text 2 or 3(beta), install a few packages which will make your life much easier. When I added your full custom CSS/LESS to my Sublime Text 3, I could see your error(s) immediately, due to the syntax highlighting.
 
Basically, anything in green is commented out - http://cl.ly/image/0e1A0N1N3K2B

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My god.  I'll try to keep calm here, but I am so infuriated by this entire process.  

 

 

 

Not sure how you come to the conclusion that Ellen's WooCommerce integration was compatible with DMS, no where on that sections page does it state it is compatible with DMS. It isn't even in our store, If a section is not in the PageLines store, then it is not compatible with DMS

 

http://pagelines.ell...om/woocommerce/

 

As I JUST STATED ABOVE, the documentation for "PAGELINES" is confusing as to what constitutes "FRAMEWORK" and "DMS".  Coming to Pagelines for the first time, the two appear to be interchangeable. However, not only are they not interchangeable, it's basically a completely different product.  Except, Framework is not even a continued product offered, and it's completely incompatible with DMS.  I found it just crazy that a product made by the same company (is this really a company or just a few dudes in a warehouse in San Francisco?) is not backwards compatible whatsoever.  

 

Furthermore, at no fault of Ellen's, the documentation does not clearly state where and when compatibility does not happen for plugins.  

 

 

If you prefer to have sections similar to how Ellen's products works, then I recommend you either refactor the section making it compatible with DMS yourself or you get in touch with Ellen and see if there are plans to update it for DMS.

 

http://pagelines.ellenjanemoore.com/

 

I did this.  It works.  The CSS is not compiling, but I did this. 

 

 

 

In regards to your CSS/LESS issues, you should not be adding CSS/LESS via the DMS fallback area, this area is specifically for locating errors and removing them, it should not be used as an alternative or method of including new CSS/LESS.

 

Ok, news to me.  I must have made the mistake of READING THE DOCUMENTATION:  http://docs.pagelines.com/customize/dms-customize-options

 

 

 

Adding CSS/LESS to PageLines DMS via the Custom Code Options, is fast and simple. All you need to do is navigate to **DMS Toolbar → Custom Code and select the Custom LESS/CSS tab, which will present you with the LESS/CSS Editor.

 

Now, for the comments in the Fallback area, I am not putting them there.  The COMPILER PUTS THEM THERE.  

 

 

Also, from what I can tell having viewing your CSS from the DMS fallback area, your CSS/LESS is full of errors which is the reason as to why it is not loading.

 

For example, you have this in your CSS/LESS which isn't valid so what happening is everything below this doesn't load because it's pretty much commented out.

 

.test-title {
  background: @backgroundlitegray;
  margin: 0px 8px;
  font-family: \\\\\\\\\\\\\\\'Yellowtail\\\\\\\\\\\\\\\', cursive;
  
}
 
.brand-summary-checkout-our-brands {
  color: @skylinecolor;
  margin-bottom: 1em;
  border-bottom: 1px @skylinecolor solid;
  font-family: \\\\\\\\\\\\\\\'Yellowtail\\\\\\\\\\\\\\\', cursive;
}

 

My local less:

.brand-summary-checkout-our-brands {
	color: @skylinecolor;
	margin-bottom: 1em;
	border-bottom: 1px @skylinecolor solid;
	font-family: 'Yellowtail', cursive;
}

is then COMPILED BY DMS INTO:

.brand-summary-checkout-our-brands {
  color: @skylinecolor;
  margin-bottom: 1em;
  border-bottom: 1px @skylinecolor solid;
  font-family: \\\\\\\\\\\\\\\'Yellowtail\\\\\\\\\\\\\\\', cursive;
}

So yeah, no crap this doesn't work.  I'm not retarded.  

 

 

Another error you have is you appear and I am not sure why, to be using C++ comments, this isn't recommended in CSS stylesheets, you should be using:

 
/* Comment goes here */ = Single Line
 
/* Comment
goes
here
*/ = multiple line
 
Using // is incorrect, so you will want to resolve this too, see here for more information - http://www.w3.org/TR...a.html#comments

 

Argh.  This is something I can change.  The comments have been here since I started this thread weeks ago, so a little bummed this was just brought up.  I can certainly change the commenting method.

 

 

 

I recommend you do not use a compiler either, if you're not familiar with the CSS > LESS nesting, then use the following website, which will convert your CSS nests to LESS.

 

I stopped using CodeKit for Pagelines (or should I call this DMS?  I'm so confused about the product branding!) when you first told me not to earlier in the thread.  The style.less file does not compile for me, which we addressed a few weeks ago on this same thread.  I deleted the style.less file from the child theme and started using the Fallback area PER FORUM RECOMMENDATIONS.  Now, I have conflicting info from you above. 

 

 

 

I also highly recommend you install and use a code editor, such as Sublime Text 2 or 3(beta), install a few packages which will make your life much easier. When I added your full custom CSS/LESS to my Sublime Text 3, I could see your error(s) immediately, due to the syntax highlighting.

 

Yeah, dude.  This is what I use and it shows no errors.  I only get errors when I copy the code to the dev site and DMS decides to comment out all my work.  This is not my first website.  Just my first Pagelines (DMS?) experience and it's been horrible.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You know what's also awesome?  The comments in Pagelines less files:

 

 

// Variables.less

// Variables to customize structural elements in PageLines
// -----------------------------------------------------
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Removing the styles from the DMS Fallback area and putting the style.less file up seems to cause havoc, too.  

 

Is there a "Recompile" action somewhere so I can pull pieces of the styles out and as I reload them I can test to see if that compiling has caused the error?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

As I JUST STATED ABOVE, the documentation for "PAGELINES" is confusing as to what constitutes "FRAMEWORK" and "DMS".  Coming to Pagelines for the first time, the two appear to be interchangeable. However, not only are they not interchangeable, it's basically a completely different product.  Except, Framework is not even a continued product offered, and it's completely incompatible with DMS.  I found it just crazy that a product made by the same company (is this really a company or just a few dudes in a warehouse in San Francisco?) is not backwards compatible whatsoever.  

 

Furthermore, at no fault of Ellen's, the documentation does not clearly state where and when compatibility does not happen for plugins.  

 

 

When you say interchangeable, do you mean work as one? If so, where does it state that PageLines Framework and DMS are interchangeable, if this is wrote anywhere, I will remove it right away. As DMS and PageLines Framework are two completely separate products and are not compatible with one another. PageLines Framework is now considered legacy and will only receive maintenance updates and major bug fixes, it is feature frozen and all development is focused solely on DMS.

 

Every single item on our store is compatible with DMS, our previous store where extensions were compatible with PageLines Framework, this store has been discontinued, as the majority of developers wanted to focus on DMS. If any customer continues to use PageLines Framework and wants access to previous store items, they need to either contact our helpdesk for PageLines created extensions or contact the third party author for non-created PageLines Framework extensions such as Ellen's WooCommerce compatibility plugin.

 

Your issue with WooCommerce has come from the fact that you have installed a third party extension from a third party store, an extension that isn't mean't for DMS. I will contact Ellen and ask her if its possible for to add Framework after the word PageLines, as this extension is to my knowledge not compatible with DMS.

 

 

 

Ok, news to me.  I must have made the mistake of READING THE DOCUMENTATION:  http://docs.pageline...stomize-options

 

In regards to your use of the DMS Fallback system, where on the documentation you linked does it state that you should be adding new CSS/LESS via the fallback system, its doesn't. The DMS fallback system is as the name suggests a fallback, a failsafe, if a user adds a script via the DMS Visual Editor, which gives them an error causing the DMS Visual Editor not to load, then they can go to the Fallback system and remove it, resolving their issue. That is the only use for the Fallback system, it is not and shouldn't be used as an alternative method for adding CSS. I recommend you end this practice as soon as possible.

 

 

Now, for the comments in the Fallback area, I am not putting them there.  The COMPILER PUTS THEM THERE.  

 

 

What do you mean the compiler is adding comments ? It is not possible for DMS to add comments into a user code. I have just checked myself multiple times, not once has any comment syntax being included in my custom CSS/LESS.

 

You will need to provide a video so we can see this first hand.

 

 

My local less:


.brand-summary-checkout-our-brands {
    color: @skylinecolor;
    margin-bottom: 1em;
    border-bottom: 1px @skylinecolor solid;
    font-family: 'Yellowtail', cursive;
}

is then COMPILED BY DMS INTO:


.brand-summary-checkout-our-brands {
color: @skylinecolor;
margin-bottom: 1em;
border-bottom: 1px @skylinecolor solid;
font-family: \\\\\\\\\\\\\\\'Yellowtail\\\\\\\\\\\\\\\', cursive;
}

So yeah, no crap this doesn't work.  I'm not retarded.  

 

Firstly, do not use language like that, as this may offend some of our users. Secondly DMS again, like above doesn't randomly add comments to code and certainly doesn't add C++ comments into font-family properties, again I've just added 23 custom fonts used very similar code and not once upon save as any of my custom CSS/LESS returned like yours.

 

 

Argh.  This is something I can change.  The comments have been here since I started this thread weeks ago, so a little bummed this was just brought up.  I can certainly change the commenting method.

 

Well you can certainly use // if you like, as some developers do, I was just pointing out that the proper comment syntax is /* ... */

 

 

 

I stopped using CodeKit for Pagelines (or should I call this DMS?  I'm so confused about the product branding!) when you first told me not to earlier in the thread.  The style.less file does not compile for me, which we addressed a few weeks ago on this same thread.  I deleted the style.less file from the child theme and started using the Fallback area PER FORUM RECOMMENDATIONS.  Now, I have conflicting info from you above. 

 

Who told you to use the Fallback system ? 

 

Also, what was the purpose of you using CodeKit ? I don't understand why you're using it.

 

 

 

Yeah, dude.  This is what I use and it shows no errors.  I only get errors when I copy the code to the dev site and DMS decides to comment out all my work.  This is not my first website.  Just my first Pagelines (DMS?) experience and it's been horrible.

 

DMS doesn't not comment anything out, like I said above. I have test your issue multiple times and not once as DMS added comments to the custom CSS/LESS. If it did, this issue would have been spotted immediately. DMS does not add comments to code.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This is how I write my custom CSS/LES, it may help you.

 

I use the following apps:

 

  • PHPstorm
  • Sublime Text 3 beta with the following packages:
  • SublimeLinter
  • Alignment
  • SublimeCodeIntel
  • LESS
  • Gist
  • CSS Comb
  • BracketHighlighter
  • Emmet
  • Trailing Spaces
  • Theme Spacegray

I write all my CSS and LESS CSS in Sublime Text and then simply copy and paste into DMS Toolbar > Custom > Custom CSS/LESS or the style.css/style.less file.

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