[Support request] Simple CSS plugin issue?

[Weatherly]

We have a site built on Generatepress, Generatepress Premium and using the Simple CSS plugin. It royally screwed up the site after WordPress 5.8 update. Apparently, all the custom CSS posted on individual pages is no longer working. If I paste it into the main file it works. But some of it we only wanted on those pages. Is there any way to fix this? I know the plugin hasn’t been updated in quite a while. But it seems an odd way to break.

[Leo]

Hi there,

Any chance you can link us to the site in question? We are unaware of this issue currently.

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Weatherly]

Here is the site. And a page that is affected. If you look at the left Top Reasons to Work section and see the white, that is how we originally had it. I took that code from the simple css metabox down below and put it in the main simple css file. The rest is still in that metabox. And as you can see the colors and css for the list are overwritten.

The text on the right areas should be a larger font.

We had a lot of code we only wanted on those specific pages.

[Weatherly]

ok we fixed THAT page by adding it to the main css. But this issue affected more than one page (and who knows if its on other sites. Haven’t checked.)
So here is the ‘demo’ site. It’s CSS is nothing like the original (which was done in Site Origin Page Builder) but the basic list colors are still messed up, (should be white since the original background is blue) and the fonts also are the wrong size and style.

[Weatherly]

and now THAT site works. Why does it hate the main site? I don’t even know how to troubleshoot this.
I put all the Careers metabox Css in the ‘main’ simple css. Seemed to work fine until I checked the Contact page and it blew that up. Because sure enough some of that only was meant to be ON the Careers page.

[David]

Hi there,

sorry for the delay, i have asked Tom to take a look at this issue. He may have more insight behind what may be the problem

[Tom]

Hi there,

Not too sure what could be happening here.

When you edit one of those pages, does the CSS still exist in the metabox, or is it gone?

If it’s still there, try running one of the problem pages through a CSS validator to make sure there aren’t any syntax errors: https://jigsaw.w3.org/css-validator/

[Weatherly]

I am not seeing anything that should relate to it in the Validator. The code has been there for well over a year and worked fine until the update. I tried turning off most of the other plugins but that didn’t fix anything.

I can say it seems to look weird if editing CSS (the main CSS) in the ‘Customizer’ view. But usually it goes back to normal afterward. This time it simply didn’t. It was weird on the page itself. It’s like for whatever reason it does not see the metaboxes.

We also have code in the simple css home page metabox. Simply one line that turns the footer widget links WHITE. But they ignored that code and changed to blue. (You can still see it in the FIX) site. So it’s not just one page.

Also: I tried putting the code in the SiteOrigin pagebuilder with an !important and it was also ignored. I even temporarily tried out another plugin that works the same way just to test. It also used the meta box method on the page. It hung up so badly it wouldn’t let me save. That made me very suspicious that something is conflicting with the meta box method in general.

[Tom]

Can you share the CSS in the metabox on the FIX site that isn’t working? I’m not able to find it via the developer tools.

Let me know 🙂

[Weatherly]

The way it doesn’t pop in developer tools is one reason I suspect it’s not reading it at all.

On the Careers Page it’s

.container {padding-top:0px;}
.vid-container {
  max-width: 1070px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.vid-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
} 
.vid-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.navbtn {padding:15px;}
h1 {
    font-weight: bold;
    font-size: 62px;
}
h2 {
    font-weight: 300;
    font-size: 29px;
}
.pos-title h2 {
    color: #1f3667 !important;
    font-size: 1.7em !important;
    font-family: 'Kreon';
    background: linear-gradient(
0deg
, rgba(255,255,255,0.7), rgba(255,255,255,0.7)) !important;
    padding: 10px !important;
    border-radius: 10px;
    font-weight: 500;
}
.widget-title {
    margin-bottom: 12px;
    font-size: 37px;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
}
.widget-title {
    text-align: center;
    text-transform: uppercase;
}
p {
    margin-bottom: 1.05em;
}
p.mission, p.vision {
    margin-bottom: 0.0em !important;
}
.testimonials blockquote {
    background-color: #fff;
    border-radius: 0px 15px 15px 0px;
}
.tstmnl-pic {
    border-radius: 50%;
}
blockquote p {
    font-family: 'Kreon';
    font-style: normal;
}
.mission {
    text-align: center;
    font-size: 1.3em;
    padding: 15px;
    font-family: "Kreon", serif;
}
.vision {
    text-align: center;
    font-size: 1.3em;
    padding: 15px;
    font-family: "Kreon", serif;
   color:#405696;
}
.values h3 {
    color: #fff;
    margin-bottom: 20px;
}
/* list styles */
.widget ul li {
    list-style-type: disc;
    position: relative;
    padding-bottom: 0px;
}
.olist {
  list-style: none;
  color: #dfe7f9;
}
.olist-li {
  font: bold 24pt helvetica, arial, sans-serif;
  position: relative;
}
.olist-h2 {
  color: #ffffff !important;
}
.olist-p {
  font: 12pt helvetica, arial, sans-serif;
  color: #dfe7f9;
  padding-left: 60px;
  margin-bottom: 0px;
}
.olist-span {
  position: absolute;
  line-height: 25px;
}
.loan-officer .widget-title { color:#fff; }
.loan-officer ul li { color:#fff; }
.wpgmp_infowindow.fc-infowindow-acerra {
    max-width: 210px!important;
}

img.wpgmp_marker_image.fc-item-featured_image.fc-item-large {
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
}

.cbmteammb {
    display: none;
}
@media only screen and (max-width: 480px)  {
.cbmteammb {
    display: block;
}
.cbmteamdt {
    display: none;
}
}

On the Home Page we just have this:

#footer-widgets a {color: #ffffff;}

[Tom]

The fact that the browser isn’t reading the CSS at all means your CSS has parse errors. Browsers will quit reading the CSS on a page if it encounters an error.

For example, run your FIX page through this tool: https://jigsaw.w3.org/css-validator/

You’ll see quite a few parse errors that need to be fixed.

[Author]

Posts