Jump to content

Archived

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

dawsonbarber

Blog Page CSS Different From Page and Post CSS

Recommended Posts

dawsonbarber+    19
dawsonbarber

I'm having a (bizarre) problem that I can't figure out.

 

Copied a live site to a staging area (WP Engine) and then uploaded the updater and got DMS 2 all set up on the child theme I'm using (one of the ones PageLines offered a while back so pretty bare bones) and started to tidy a few things up (navbar customizations didn't carry over and some ibox stuff but, other than that, a pretty seamless transition).

 

Anyway, all of a sudden the blog page lost the customizations I'd made but all other pages - including blog posts - have retained most of them.

 

The CSS for the blog page is actually different than what shows up for all other pages, posts, and even the DMS fallback.

 

It's doing my head in so I thought I'd see if there were any suggestions/ideas.

 

Thanks

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello dawsonbarber

 

Do you have a link to the site we can look at?


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
dawsonbarber+    19
dawsonbarber

So now I've noticed a new wrinkle to the problem:

  • The (minor) modifications I made after upgrading to 2.0 only appear if I'm logged into the site (but still not on the Blog page)
  • When I'm logged out, none of the modifications appear

I've cleared cache, cookies, everything, shut down, rebooted, blah blah blah, and am still seeing different versions when logged in vs when logged out.

 

Share this post


Link to post
Share on other sites
dawsonbarber+    19
dawsonbarber

Okay, things just keep getting stranger.

 

I've deactivated all plugins except PageLines Pro.

 

I've flushed the caches.

 

I deleted all CSS and added one minor modification.

 

And now static pages, blog page, and blog post are each reflecting different modifications - apparently as a result of different CSS being applied to different pages/posts (even though, as mentioned, I deleted all CSS and added only one simple modification):

 

  • Static pages reflect the actual CSS as I modified it to be (deleted everything and added a simple modification)
  • Blog page have the CSS from before 2.0 update
  • Blog post has the CSS from after the 2.0 update with the modifications I'd made yesterday
  • Fallback reflects the actual CSS as I modified it to be (deleted everything and added a simple modification)

I have attempted to delete the CSS - even though I've already deleted it (and shows as such on the page and in Fallback) when I'm viewing the blog page and blog posts but, after publishing and refreshing the page, all of the CSS returns.

 

I'm rather lost as to what to do now.

Share this post


Link to post
Share on other sites
dawsonbarber+    19
dawsonbarber

Here's the debug info:

 

DMS Debug Info

WordPress Version
3.8.1

WordPress Debug
Disabled

Multisite Enabled
Yes

Current Role
Administrator

Framework Path
/nas/wp/www/staging/totallom/wp-content/themes/dms/dms

Framework URI
http://totallom.staging.wpengine.com/wp-content/themes/dms/dms

Framework Version
2.0

PHP Version
5.3

Child theme
Yes
/nas/wp/www/staging/totallom/wp-content/themes/totallocalonlinemarketing
http://totallom.staging.wpengine.com/wp-content/themes/totallocalonlinemarketing

PHP memory
256

Mysql version
5.5.27-28.1-log

PHP type
Apache2handler

PHP User
Posix functions are disabled on this host!

OS
Linux

Installed Plugins
dms-plugin-pro/dms-plugin-pro.php
pagelines-updater/pagelines-updater.php

Share this post


Link to post
Share on other sites
dawsonbarber+    19
dawsonbarber

I've added the code from this thread to the child theme functions.php file, flushed the cache, and there's no change (deleted CSS continues to show up - differently - on static pages/fallback, blog page, and posts).

Share this post


Link to post
Share on other sites
dawsonbarber+    19
dawsonbarber

Activated 2.0 (instead of child theme) and problem remains exactly as described above.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Can you create an admin logon for your site and send the credentials to hello at pagelines dot com and we will jump on and take a look 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
dawsonbarber+    19
dawsonbarber

Created a super admin login for you (it's a multi-site installation so WordPress will have to send you the login details, so you may want to keep an eye on your spam folder).

 

I was thinking about reverting to the pre-2.0 state and going through the upgrade process all over again but will hold off until after I hear back from you.

 

For what it's worth, since activating 2.0 had no effect, I reactivated the child theme.

 

And, in keeping with the strangeness that's going on with this installation, all of the custom code returned to static pages and PageLines Fallback (so everything I deleted has come back).

Share this post


Link to post
Share on other sites
dawsonbarber+    19
dawsonbarber

Hey Martin

 

Would you mind letting me know that you have - or haven't - received the email with login credentials?

 

Thanks

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Yep i have your logon. Sorry there was no link to the forum post so it got missed. Taking a look for you now 


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

Actually - can you make sure the logon has admin rights as currently the account does not 


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
dawsonbarber+    19
dawsonbarber

Sorry Martin.

 

I thought I'd given you super admin access.

 

You have it now.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

yep - that worked. taking a look now :) 


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

Hi Dawson 

 

Check your CSS by validating the custom CSS by pasting into here http://jigsaw.w3.org/css-validator/#validate_by_input

 

You will see errors. Once fixed you should be back to normal.. 

 

you will see three bits that need attention (ignore the warnings below for now)  http://screencast.com/t/SsFcnVH1O


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
dawsonbarber+    19
dawsonbarber

This just keeps getting weirder.

 

In Firefox the header/navbar is the same on all pages - including blog page and blog posts.

 

Looking at the LESS Fallback in Chrome...it's different in Firefox (after refreshing the pages).

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

thats to do with error in your CSS. fix those and everything will be ok again. 


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
dawsonbarber+    19
dawsonbarber

None of the code changes I make on the front end take effect after publishing them on the pages with problematic code.

 

I can't edit or delete anything on either the blog page or blog post.

 

I've made and saved the changes in the Pagelines LESS fallback area - and it fully validates - and have refreshed the page to make sure the changes took effect.

 

When I refresh the blog page and post on the site, the same problematic CSS shows up again.

 

I have deleted all of the CSS from the Pagelines LESS fallback area, saved the changes, refreshed the page, and confirmed all CSS was gone.

 

I have then tried to delete all CSS in front end editor, clicked publish a million times, refreshed the page, and the (problematic) CSS returns.

 

Went back to Pagelines LESS fallback area, refreshed the page, and different code showed up.

 

As it stands right now, all static pages have the same CSS on front end as in Pagelines fallback area.

 

But the blog page and blog posts have the problematic CSS (different from fallback area and from static pages).

 

And for some reason, the blog post shows up with the same header/nav style as the static pages - even though it's got the problematic CSS.

 

But the blog page - with the problematic CSS - shows up with different header/nav style.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

just correct the CSS issues and re-enter the code and it should work 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
dawsonbarber+    19
dawsonbarber

That's what I said I did (fixed the errors and validated the code to be sure).

 

The problem is that changes to the code - via front end CSS editor - on the blog page and blog post do not take effect after publishing them (and refreshing the page).

 

They do on static pages, but not on blog page or blog post.

 

Take the code from the fallback area or any static page and you will see that it validates.

 

Try deleting the code on the blog page and blog post, paste in the validated code, refresh the page, and it will revert to the problematic code.

 

Changes to the code on those pages do not take effect.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

ok thanks  - sorry i missed that. 

 

Just reporting this now - bare with me 


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

Ok - corrected the CSS issue and repasted the text and clicked save and now CSS is consistent across the site. 

 

http://screencast.com/t/ExV1reGhu95C


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
dawsonbarber+    19
dawsonbarber

I couldn't see the change live, so I cleared everything (cache, cookies, history) and looked at the site again.

 

It looked as it does in the screen capture you provided - until I logged in.

 

Then the header/nav style disappeared on all pages except for the blog post.

 

I tested at the CSS for the static and blog pages and they validated.

 

The CSS for the blog post did not. It still contained the same errors as before - specifically:

 

At line 44:

.gform_footer input.button {
.FlatButton;
}

And at line 874 (to be precise, the period at the end of this: a.btn:active.):

input#gform_submit_button_1:active, input#gform_submit_button_8:active .modal-footer a.btn:active. #commentform p input#submit:active {
padding-top: 15px;
margin-bottom: -1px;
box-shadow: 0px 1px 0px 0px #239a55;
}

I'm still unable to get the edits to stick (as before, I've tried to delete them but after publishing the changes and refreshing the page, they're back).

 

In order to see if I could get the static and blog pages to take on the header/nav style I wanted, I copied the code from the CSS on the blog post page and pasted it into the CSS on a static page, published, and refreshed the page.

 

CSS added:

.section-navi .navi-container {
 height: auto; 
}

.header-nav {
 padding: 15px 0; 
}

.header-nav ul li a {
  color: #fff;
}

That worked - sort of.

 

While the header/nav took on the style that it should have, the problematic bits of code were somehow "magically" added to the CSS.

 

I deleted them, published and refreshed the page, and those edits seemed to have taken effect (style remained and deleted code was gone).

 

I went back to the blog post to delete the problematic code there, published and refreshed the page, but the code remained (so did the style).

 

I checked in Pagelines Fallback area and the problematic code is not there.

 

So the problem appears to be almost solved, but I am concerned that I'm unable to get edits to the front end CSS on blog posts to save and that there are basically 2 slightly different versions of the CSS.

 

I know that I could just do my edits on non-post pages or in the Fallback area, but doesn't really solve the problem (and doesn't give me comfort that something won't go wrong or break in the future).

 

Sorry for all the detail but hopefully it will help to get to a solution.

Share this post


Link to post
Share on other sites
dawsonbarber+    19
dawsonbarber

Okay, so forget what I said about things being almost solved.

 

After taking an hour or so to do something else, I came back, refreshed one of the static pages, and found that the edits that were published and showing up are gone.

 

Different CSS on different pages and I can't even delete CSS on certain pages.

 

And it seems as if the Pagelines fallback isn't "overriding" the front end CSS editor.

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