Jump to content

Archived

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

layasamadhi

Front-end custom less/CSS doesn't work in DMS2

Recommended Posts

GetMeWebDesign+    115
GetMeWebDesign

mtsurgery"] @[member="nokow. Are the pages, that you have the problem on, static front pages or front pages when you are using them for your latest posts? 


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
mtsurgery+    1
mtsurgery

To answer your question, the problem I continue to have with CSS updates is an isolated issue and ONLY exist on the static front page of the main site or the HOME page. I am developing a website not a blog site, so I have designated the main starting page as a "static page" (under Dashboard--->Settings--->Reading).  The CSS is not responding to this page only.  On the contrary, any and all subsequent pages (not posts) work fine without any CSS issues.  Something changed with the back-end coding with the DMS 2 update as this problem did not exist previously.  I hope this answers your question.

 

MT

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

mtsurgery. Have you tried creating a duplicate "front page" of the one you have, then making that the static page? It is important, with this CSS issue, to make sure you stipulate a template when creating the page in wp admin, because whenever i didnt I saw a repeat of the legacy CSS problem I thought I had got rid of.

 

If the "new" static page has correct CSS, then delete the old and change the permalink of the duplicate to that of your original static front page. Fingers crossed that might solve the problem


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
markwphoto+    3
markwphoto

Okay after playing around with this for a few days trying to get CSS to save properly here's what I've noticed. 

 

Whatever page you have setup to be your post page (for blog/news content), it will potentially have the issue of the CSS not saving properly. So if you go to the Dashboard, Settings, Reading and you have the first option selected to Latest post, this would be your post page. Even if you don't have post content on that page, WP still designates it to be your post page! If you select the Static Pages options in which you designate a Front page and separate Post page, whatever you designate as the Post page will end up potentially having the issue.

 

I have been able to save custom CSS on the Post page but at some point it will fail (I'll get to that in a minute). I have had less success saving custom CSS on a single post page. As MTSurgery stated if you save the CSS on any other page other than the post page it will usually save for the whole site. 

 

As I stated I have been able to successfully save custom CSS on the Post Page until I switch to Legacy Mode on the WP Content/Loop and WP Post/Loop settings in the DMS interface.  Once I do that then all h#%* breaks loose on saving the custom CSS. If I turn Legacy Mode back off then I still have the saving issue even though legacy has been turned off. 

 

Here's my temporary fix/work around. If you go to Site Settings in DMS, Resets, click RESET CURRENT POST TYPE SETTINGS, and then publish the changes now I'm able to save the CSS settings just fine on any of the pages. Although sometimes saving the custom CSS on a single post page breaks it again. For this reason I try to remember to save the custom CSS on any other page than the Post page as stated above.

 

I hope I'm explaining this well enough so you understand it and hopefully this will help with developing a fix!

Share this post


Link to post
Share on other sites
markwphoto+    3
markwphoto

BTW I tried creating and assigning templates to all my pages and that didn't solve my problems. 

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

markwphoto. That makes sense. I now only add custom CSS/LESS under Pagelines in the wp admin (DMS Fallbacks), and save. That way it seems to set globally. I know it is a few extra clicks (jumping back to wpadmin and then back to DMS mode*) but avoids the nightmare I and others have experienced and in trying to change it when make changes if your front page is your 'latest posts'

 

Assigning templates... it worked for me in removing on all other pages the "Parse error CSS" which was being inherited from the bad on the 'latest posts' front page.

 

Not sure you should do this, but I often keep wp admin open if making CSS/Less changes, as well as, the DMS editor. I refresh first the wpadmin and then the DMS editor and that can avoid the clicking back and forth. Cant be good practise though?


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
markwphoto+    3
markwphoto

 

Not sure you should do this, but I often keep wp admin open if making CSS/Less changes, as well as, the DMS editor. I refresh first the wpadmin and then the DMS editor and that can avoid the clicking back and forth. Cant be good practise though?

 

GetMeWebDesign. That's pretty much what I've been doing as well. It gets a little annoying have to jump back and forth between multiple pages that are open but at least  it's somewhat of a work around.

Share this post


Link to post
Share on other sites
Jackey    29
Jackey

Experience the same... and notice that it only happens on LESS entered on special pages like the blog page, and single-post page. The static pages are fine.

Share this post


Link to post
Share on other sites
Simon    247
Simon

Can someone provide a small snippet of css that fails everytime and and the same page every time.

 

Reading this post some people it works for static pages others for the blogroll page, we need to find a pattern.

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

Simon_P I think for many it is a bit of CSS parse error, whether that is an accidental mistake or some error caused by "Refresh" or "Publish". That was what did it for me, with an unclosed comment (sure I didnt paste it in unclosed!)

 

How I have read this.... all relates to special post pages like Blog roll, whether you are using it for your front page as 'latest posts' or have a static front page and blog page. The advice has to be... post you CSS changes (for the time being) in the WP admin > Pagelines > DMS Fallbacks > Custom CSS/LESS, until the cause is discovered

 

And painful as it seems, the only sure way to clean up Parse errors etc that have occurred on those special post pages, is to Site Settings > Resets > Reset Current Post Type Settings and clear any cache


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Jackey    29
Jackey

Okay..

 

Have this on my static pages:

=============

body {}

=============

 

Have this on my Post pages:

=============

.pl-sharebar-pad .txt {
opacity: .6;
}
 
.post h1.entry-title {
  display: none;
}
==============
 
Have this on my BLOG page:
==============
#feedburner_email_widget_sbef_email {
  margin-bottom: -2px;
}
 
 
#textboxu996jy .pl-area-wrap {
  background-position: 50% 50%;
}
 
 
 
 
.tekst p {
  line-height:1.5em;
}
 
#site .zmt h2.tablepress-table-name {
  margin-top:0;
}
 
 
#site .section-modal-popup-dms .pl-section-pad {
  padding:0 !important;
}
 
.ngf-indeling .column-1 {
  width:140px;
  text-align:left;
}
 
.ngf-indeling .column-2 {
  width:110px;
  text-align:left;
}
 
.ngf-indeling .column-3 {
  width:70px;
  text-align:left;
}
.ngf-indeling .column-4 {
  width:50px;
  text-align:left;
}
 
.ngf-indeling .column-5 {
  width:50px;
}
 
.ngf-indeling .column-6 {
  width:250px;
  font-weight: bold;
  text-align:left;
}
 
.ngf-indeling .column-7 {
  text-align:right;
}
 
.ngf-indeling .column-8 {
  text-align:left;
}
 
.masthead {
margin-bottom: 0px;
}
@media (max-width: 767px) {
  .ibox.top-aligned .ibox-media {
    max-width: 160px;
  }
  
}
 
div.ibox-link a {
  display: none;
}
 
.ibox .ibox-desc {
  margin-bottom: 0;
}
 
.ibox-media.img a span:hover {
.opacity(70) !important;
}
 
.pl-hero-wrap .pl-hero h1 {
  margin-top:0;
font-size: 50px;
}
.pl-hero-wrap .pl-hero p {
font-size: 15px;
}
 
 
 
h2.icallout-text {
  margin-bottom:10px;
}
 
.lidworden h2.icallout-head {
  font-size: 28px;
}
 
#herouyd4t4 .pl-hero h1.m-bottom {
  font-size: 65px;
}
#herouyd4t4 .pl-hero p {
  font-size: 32px;
}
 
 
.tp-bannertimer {
  z-index: 20;
}
 
.panel  {
 
color:#FFF;
  background-color: #ef4027;
background-image: -moz-linear-gradient(top,#f04831,#ee3319);
background-image: -ms-linear-gradient(top,#f04831,#ee3319);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#f04831),to(#ee3319));
background-image: -webkit-linear-gradient(top,#f04831,#ee3319);
background-image: -o-linear-gradient(top,#f04831,#ee3319);
background-image: linear-gradient(top,#f04831,#ee3319);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f04831',endColorstr='#ee3319',GradientType=0);
border-color: #ee3319 #ee3319 #ae200d;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  padding:20px;
}
 
#propricingumapzk {
  margin-top: 14px;
}
 
 
#mastheadunyper h1 small {
font-size:34px;
}
 
 
.pl-hero-wrap .pl-hero h1 {
margin-top: 0;
font-size: 55px;
}
 
.pl-hero-wrap .pl-hero p {
font-size: 18px;
}
 
.noframe .pl-imageframe img, img.pl-imageframe {
padding: 0 30px 0 0;
background: transparent;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius: 0;
}
 
.drag-drop-editing .pl-section.section-plcolumn {
  outline: 1px dashed #fab4c0;
}
 
 
#widgetizeruvmztd a img {
padding-top: 20px;
}
 
 
body.blog .article-wrap.meta-mode-author .wrp {
margin-bottom:40px;
  .border-radius(10px);
}
 
body.blog .article-wrap.meta-mode-author .wrp .hentry-pad {
  background:#f0f0f0;
  .border-radius(10px);
  padding:3%;
 
}
 
body.blog .article-wrap.meta-mode-author .wrp .hentry-pad .post-excerpt {
  font-size:140%;
  padding:0 5px;
}
 
body.blog .article-wrap.meta-mode-author .wrp .hentry-pad a.continue_reading_link {
  font-size:130%;
  float:right;
}
body.blog .article-wrap.meta-mode-author .wrp .hentry-pad .post-meta .post-title-section h2.entry-title {
  font-size:45px;
  padding:0 5px;
  text-align: center;
}
.mgsPinsheet h2.tablepress-table-name {
margin: 0 0 .6em;
}
 
#widgetizerubiba4  .widget h2.widgettitle {
  font-size:18px;
  padding: 0 8px 3px 0px;
 
}
 
#widgetizerubiba4  a.rsswidget img {
  margin-top:-3px;
}
#widgetizerubiba4 ul ul {
padding-left:11px;
}
#widgetizerubiba4 ul li a.rsswidget {
  font-size:15px;
  font-weight:bold;
}
#widgetizerubiba4 ul li .rssSummary {
  font-size:14px;
}
 
#widgetizerubiba4 ul li {
    margin-top:1em;
}
 
 
.mgs-boxed {
  border: 1px solid #dddddd;
  .border-radius(10px);
  background-color: #f2f2f2;
  padding:15px 10px 0px;
}
 
==================

Share this post


Link to post
Share on other sites
Jackey    29
Jackey

BTW the code on the static pages work as expected.

The code on the two other page types I can't change or remove.

 

Moved all my custom less to the Pagelines-Customize plugin... 

Share this post


Link to post
Share on other sites
Simon    247
Simon

BTW the code on the static pages work as expected.

The code on the two other page types I can't change or remove.

 

Moved all my custom less to the Pagelines-Customize plugin... 

So let me get this right, that huge block of css is on every page right? and you can edit it on a static page, but all single posts and all archive pages the changes are not saving?

Share this post


Link to post
Share on other sites
Jackey    29
Jackey

It is more delicate Simon.

 

No the huge block is on the BLOG page and is persistent on my BLOG page (can't change it, can't delete it)

The smaller block is on the Post page and is persistent on my Post page (can't change it, can't delete it)

 

I can publish it, and then it will be on all my pages except the Post pages.

 

I can then remove it on a static page and it will be removed on all static pages (but not on the BLOG page and the Post page)

Share this post


Link to post
Share on other sites
markwphoto+    3
markwphoto

It is more delicate Simon.

 

No the huge block is on the BLOG page and is persistent on my BLOG page (can't change it, can't delete it)

The smaller block is on the Post page and is persistent on my Post page (can't change it, can't delete it)

 

I can publish it, and then it will be on all my pages except the Post pages.

 

I can then remove it on a static page and it will be removed on all static pages (but not on the BLOG page and the Post page)

 

That's consistent with what I've experienced although I don't have a big block of CSS. I can get the css on the Blog and Post page to delete if I RESET CURRENT POST TYPE SETTINGS. From there if I want to save the CSS, I save it either in the Fallback or any page other than the Blog and Post Pages. Once you start saving the CSS while on the Blog Page or Post Page it eventually has the potential to break again. I've also noticed if you switch Legacy mode on for the WP Post/Content Loop it will break the saving of the CSS even if you turn Legacy Mode back off. The only way to fix it is to again  RESET CURRENT POST TYPE SETTINGS and save your Custom CSS from Fallback or any other pages than the Blog or Post Pages. 

Share this post


Link to post
Share on other sites
Simon    247
Simon

were you using pageless plugin?

Share this post


Link to post
Share on other sites
markwphoto+    3
markwphoto

were you using pageless plugin?


For myself I was not. I disabled almost all of my plugins when I upgraded to help troubleshoot the problems.

Share this post


Link to post
Share on other sites
Simon    247
Simon

ok, i'll rephrase that.. were you ever using the plugin pageLESS?

Share this post


Link to post
Share on other sites
markwphoto+    3
markwphoto

ok, i'll rephrase that.. were you ever using the plugin pageLESS?


Not that I recall. I think I may have installed and had it enabled it with DMS1 but I never used it.

Share this post


Link to post
Share on other sites
Simon    247
Simon

well it inserts custom_less as a setting on post/page level..

 

by default dms only ever saves css as a super global option, never ever on a page or post level, there is just no way that data can get into the post_meta settings...

 

but that plugin saves its data there... thats why you cant remove it. Can you try reinstalling that plugin and seeing if you can remve the css from that page/post/type then?

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

Simon_P And for those that never installed or used that plugin? While DMS may not be able to access the settings, the option is there on the page and the page (for latest posts/blog roll) is given a template name...Posts Page. Could all of this be caused by DMS trying to save CSS where it shouldn't (can't)?


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Simon    247
Simon

i dont know how it got there..

Share this post


Link to post
Share on other sites
markwphoto+    3
markwphoto

well it inserts custom_less as a setting on post/page level..
 
by default dms only ever saves css as a super global option, never ever on a page or post level, there is just no way that data can get into the post_meta settings...
 
but that plugin saves its data there... thats why you cant remove it. Can you try reinstalling that plugin and seeing if you can remve the css from that page/post/type then?


I'll try that when I get home tonight.

Share this post


Link to post
Share on other sites
mtsurgery+    1
mtsurgery

I am glad that we have developers and admins on this discussion.  It seems that we are on the right track and I'm sure the developers will rectify the problem soon.  Obviously, there is a problem with refreshes and updates to the CSS with regard to the static index page.  This problem never existed before DMS 2 so that is where the problem exists.

 

Unfortunately, last night's release of DMS 2.0.1 update did not fix the CSS issue.  I've looked and nobody so far has shown unclean CSS code.  I doubt it's a CSS code problem that is causing this error.  If that was the case then the whole CSS would never compile in the first place.  Just for the sake of discussion, I did run my CSS through a cleaner and there were no errors, but again, if there were major errors, it would never compile in Pagelines.  Someone mentioned a parsing error?  Maybe so.  I am not privey to see the backcode of Pagelines in the way the developers can but I'm sure it is a quick fix as long as we can continue pointing them in the right direction.  Will continue to follow this discussion and offer any suggestions.

 

MT

Share this post


Link to post
Share on other sites
Simon    247
Simon

if somebody wants to PM me i might have a plugin that will temporarily delete the css on the page level.. 

 

its experimental... until we find out how the css got there i the 1st place.

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?
×