Jump to content

Archived

This topic is now archived and is closed to further replies.

gabelloyd

CSS Processing without LESS files on server.

Recommended Posts

gabelloyd    4
gabelloyd

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
Danny    1,327
Danny

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 ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
James B    436
James B

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:       
*/
 


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

gabelloyd thanks i will take a look at this for you 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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. 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
gabelloyd    4
gabelloyd

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
gabelloyd    4
gabelloyd

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
gabelloyd    4
gabelloyd

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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
Danny    1,327
Danny

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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gabelloyd    4
gabelloyd

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

  • 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?
      Thanks
      Michael 
    • wyo22ski
      By wyo22ski+
      Hello,
       
      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+
      Hello. 
      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.
       
      Cheers.
    • Jason
      By Jason+
      Hi.
      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?
×