• 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

HI,

Not sure what you mean by this statement - Locally, there was a style.less file compiling into a style.css file using CodeKit.

 

All CSS in DMS is LESS CSS and are stored in .less files, all these files are then compiled into one dynamic file. So if you add custom CSS/LESS to a child themes style.less file there is absolutely no need for you to use an application to compile that for you into a style.css file.

 

Is that what you're doing ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes, that is what I'm doing.  I'm using CodeKit to compile style.less into style.css.  

 

Ok, so what I need to do is clear the styles from style.css and leave the header information like this:

/* 
* 	Theme Name: Skyline Bike from DMS 2 
*	Description: Skyline Bike child theme.  
*	Template: dms
*	Version: 2.0.0
*	Author: Gabe Lloyd 
*/

/* grab our parent theme */
@import url("../dms/style.css");

/* grab specific Google font */
@import url(http://fonts.googleapis.com/css?family=Yellowtail);

/* start css compiling */

and then after the comment "start css compiling", delete everything from this file, but leave everything in the style.less file.

 

I believe I misunderstood this tutorial : http://www.pagelines.com/local-development-tips-for-dms/2/  where Simon talks about the style.css file, then working with the .less file.  When I was working locally and not seeing any compiling into the style.css file, I (incorrectly) assumed that something was wrong and that I needed to use CodeKit to compile it for me into style.css.  However, what is really happening is that style.less is being compiled into the wp-content/uploads/pagelines/ folder, NOT style.css.  

 

If I now understand it, let me know and I can make the changes to my site and I'll mark this topic solved.  

 

Thanks Danny.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, that's correct. Just the header information is required in the style.css, all the custom code needs to go into style.less and will be compiled along with everything else. You don't need to import the parent theme styles, just set the template to DMS like below.

 

/*
Theme Name:     Mytheme
Theme URI:      http://www.mytheme.com
Description:   
Author:       
Author URI:    

Tags:

Demo:
Template:       dms
Version:       
*/
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm getting somewhere, but this is not yet solved.

 

Making the above changes, the site looks good when not logged in.  However, when we login to the site and then attempt to use the DMS editor, no CSS is being loaded at all.  

 

Visit yourself to view the rendered code to see if anything is weird:  http://skyline.longtailcreative.com/  (site is not 100% done, so don't judge).

 

When I do login, there is no CSS being applied to the site.  There is this java error that I can see when I inspect the element in Chrome:

 

"Uncaught TypeError: Cannot read property 'scrollHeight' of undefined "

if($(this).find('.tabs-nav').hasClass('hover')){
				var	nav = $('.current-panel .tabs-nav')
				,	height = nav.height()
				,	scrollHeight = nav[0].scrollHeight
				,	fromTop = nav.scrollTop()


			} else {
				var	height = obj.$panel.height()
				,	scrollHeight = obj.$panel[0].scrollHeight
				,	fromTop = this.scrollTop

			}

Which is from pl.toolbox.js line 248.  

 

 

Thanks for any help.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello There 

 

Can you create an admin logon for your Wordpress site and send the credentials to hello @ pagelines dot com along with a link to this forum topic and we will jump on and take a look at the code for you. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin - just created it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

gabelloyd thanks i will take a look at this for you 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello @gabelloyd 

 

The plugins you had installed included 'PageLines Customise' - this is a plugin for the Framework and not for DMS. I have deactivated this and you will want to remove this 

 

You also had the Framework version of Hooker plugin installed which i have deactivated. 

 

Also in Wordpress > Settings > Reading you had Front page set to display 'Your latest posts' but you didn't have any posts at all on your site. I created a post and this fixed the CSS on your site. If you set the front page to display posts it needs to have a post to load in order to load the site CSS. 

 

you should see the site displaying normally now. 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin,

 

Thanks for your help so far.  Seems my child theme is still giving me problems, but the site does work with the DMS, so there is progress!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Gabe - is this a site that was previously running the Framework and has been updated to use DMS? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Martin, No, I'm new to Pagelines, so this is DMS from the beginning.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK can you describe the steps you used to create the child theme? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sure.

 

I downloaded Nick's base theme here:  https://github.com/bearded-avenger/nicks-base-theme

 

In the style.css file, I added this code: 

/* 
* 	Theme Name: Skyline Bike from DMS 2 
*	Description: Skyline Bike child theme.  
*	Template: dms
*	Version: 2.0.0
*	Author: Gabe Lloyd 
*/

/* grab our parent theme */
@import url("../dms/style.css");

/* grab specific Google font */
@import url(http://fonts.googleapis.com/css?family=Yellowtail);

/* start css compiling */

and from there I started my customizations.  I have custom functions.php, custom sections and custom style.less file.  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah ok - so having reviewed your files - can you check your Style.css - in the dropbox file you shared with me there seems to be different content within the style.css file. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah yes, I changed that after James recommended that I delete everything out of it except the comments at the top.  Should I leave the call to the parent theme?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I reverted that change to style.css to call the parent theme and the google font.  When I login to the site and go to edit with DMS, the CSS is not loaded.  I updated the Dropbox with the reverted changes to style.css for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi guys - any update on this?  I really need this to work so I can deliver the site.  Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, all your css/LESS goes into the style.less inside your child theme. The style.css is only required for your header information.

 

See some examples here for some of the third party themes - http://screencast.com/t/8dGRtH8uknZB and http://screencast.com/t/tZ0tNY9Ub

 

More information on creating child themes can be found here - http://docs.pagelines.com/developer/dms-theming

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James,

 

Yes, I have read this documentation many times.  Loading a style.css with and without a import of the parent theme makes no difference.  In fact, after your last help (above), I loaded the style.css file without the import call, and Martin recommended I not do that in our email thread.  I'm so confused about how this works, and it seems like a really basic thing.  

 

Sending me links to the documentation that I've already read doesn't help when I've already told you the problem is apparently more complicated than general setup.  I'm sorry, but I've paid my money and I've been patient, but my problems are all Pagelines based, not Wordpress or development based.  I should be able to get a resolution, and according to Pagelines, this is the only resource for help.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If I delete the compiled css files and editor-draft.css (which is empty), will all of that get regenerated by pagelines?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello @Gabe 

 

James was advising to use the Style.less not Style.css 

 

Hi there, all your css/LESS goes into the style.less inside your child theme. The style.css is only required for your header information.

 

See some examples here for some of the third party themes - http://screencast.com/t/8dGRtH8uknZB and http://screencast.com/t/tZ0tNY9Ub

 

More information on creating child themes can be found here - http://docs.pagelines.com/developer/dms-theming

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I understand this.  I now have a style.css file with just header info.  My less file has my styles.  The fact remains that when I login to the site, and attempt to update the site using DMS editor, there are no css files being called.  

 

martin - when you went into the site, you activated the parent DMS theme, but I have custom sections that I need for this project, so I need to have the child theme active.  

 

Furthermore, I have made changes locally to styles, but when I load the style.less file via FTP, the changes are not reflected on the dev site.  Something is not right.  I am pleading with you guys to actually answer my question and not send me to vague documentation, which I have read already.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK, the way this works is like this:

 

If you plan on using nothing more than normal CSS in your child theme, then there is no need for a style.less file. However, if you plan on using LESS CSS, then you need a style.less file, when you use less, there isn't any point in having your normal CSS in one file and your less in another, so all your CSS being CSS or LESS CSS, should be included in the style.less file, as that file supports both LESS and CSS. The style.css file doesn't support LESS, only normal CSS.

 

So your child themes style.css file, if you plan to use both LESS and normal CSS, should contain nothing more than the following:

 

/*  
Theme Name: Danny's Uber Theme
Description: A theme of uber awesomeness!
Version: 1.0
Author: Danny Awesome!
Template: dms
*/
 
This information is important as it tells Wordpress what the theme is called, version number, description and most importantly that it is a child theme for DMS via the Template: tag.
 
Once you have this sorted, can you tell us exactly how you're adding your LESS CSS/CSS to your style.less file, as you mentioned in one of your previous posts that you were using codekit or something. There is no need for a third party application to compile your LESS CSS, this is done for you by the DMS engine. All you need to do is create your LESS in a code editor and then copy and paste it in your style.less file, then save it.
 
So information on how you're adding your code will be appreciated.

Also, with your custom CSS/LESS not loading when logged in, sounds rather odd. So can you enable PL debug mode and provide a link to your site please, so we can take a closer look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

Ok, I'll break this down again.  I created a child theme from this:  https://github.com/bearded-avenger/nicks-base-theme

 

When I was working locally, the less was not compiling, so I used CodeKit to compile into the style.css file within the child theme and it seemed to work for me.

 

When I transferred the site to a development environment so the client could check it out, the CSS did not load.  I found out that this was because of the style.css having content as well as the style.less file having content, as well as my front page not being configured properly (though it was not an issue working locally).  Since then, I have removed all content except the header information from the style.css file.  Still, the style.less was not working, so I copied the content from that into the Less editor in the WP Admin > Pagelines > DMS LESS Fallback and then deleted the style.less file from the child theme.  This has allowed the non-logged-in viewer of the development environment to see a formatted website.  However, when logged in, the site is not loading CSS unless you are in WP Admin.  

 

Dev link:  http://skyline.longtailcreative.com/ and debug is enabled.  Pagelines also has an admin login for the site.  martin has the info.

 

On a side note, and I'm not sure if this has anything to do with this, but I've noticed similar threads on the forum since the 1.1.5 DMS release.  This coincides with my problems, as well.  The other forum posts seem to show that errors in LESS compiling are causing CSS to not load.  Because my site is rendering CSS when not logged in, I'm not sure if it's the same issue, but the problems did start after I updated to 1.1.5.  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you have errors in your LESS CSS, then there will be problems loading your code, this will happen regardless of what version of DMS you're using. I highly recommend you review your all your custom CSS and make sure that there are no errors such as:

 

missing semicolons ;

missing {  or }

 

and any other possible errors. If both your local site and development site was having difficulty compiling your CSS, then its likely you had errors or non valid code there.

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