Builder is not retaining Global Theme CSS

Hello,

I am having some trouble getting my Global Theme CSS to stay in Builder. Whenever I paste the following CSS into the Global Theme CSS area in Builder, the CSS applies, works on the front-end, but whenever I close builder and reopen, the Global Theme CSS is reverted back to the previous. If I were to save without pasting the CSS back into the Global Theme CSS area, the CSS would be reverted back and lost. I have validated the CSS to make sure there is nothing goofy. I have tried adding and removing vendor prefixes to see if that is the problem. I have tried with and without the #ufc0 references, but have not had any luck.

Some questions in regards to CSS Vendor Prefixes and Global Theme CSS:
What CSS Vendor Prefixes are needed and allowed in Global CSS? What is causing the following CSS to not work in Builder? What vendor prefixes should not be used? Is there a guide available for the allowed CSS and related for Upfront / Builder? Just to check if something like display: flex; is allowed or not....

Please review and let me know what is causing this issue.

body { background-color: #ffffff; background-color: rgba(255,255,255,1); }
.gbn { width: 100%; height: 3px; background: #ufc0; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ufc0 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, #ufc0 50%, rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ufc0 50%, rgba(255,255,255,0) 100%); }
.gbn2 { width: 100%; height: 3px; background: #ufc0; background: -moz-linear-gradient(left, #ufc0 0%, #ufc0 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, #ufc0 0%, #ufc0 50%, rgba(255,255,255,0) 100%); background: linear-gradient(to right, #ufc0 0%, #ufc0 50%, rgba(255,255,255,0) 100%); }
.gbn3 { width: 100%; height: 3px; background: #ufc0; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ufc0 50%, #ufc0 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, #ufc0 50%, #ufc0 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ufc0 50%, #ufc0 100%); }
.gbn0 { width: 100%; height: 3px; background: #000000; background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); background: linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); }
.desktop-breakpoint .ubermenu-main, .desktop-breakpoint .ubermenu-social { text-align: right; }
.tablet-breakpoint .ubermenu-main, .tablet-breakpoint .ubermenu-social { text-align: center; }
.mobile-breakpoint .ubermenu-main, .mobile-breakpoint .ubermenu-social { text-align: center; }
.desktop-breakpoint .upfront-region-container-roof .upfront-region-container-bg { box-shadow: 0 3px 9px -3px rgba(0,0,0,.5); }
.desktop-breakpoint .upfront-region-container-roof { position: absolute; width: 100%; }
.desktop-breakpoint .upfront-region-intro { padding-top: 120px; }
.desktop-breakpoint .upfront-region-container-intro .upfront-region-container-bg { min-height: 570px; }
.tablet-breakpoint .upfront-region-container-intro .upfront-region-container-bg { min-height: 460px; }
.tablet-breakpoint .upfront-grid-layout { width: calc(100% - 3em); min-width: 540px; }
.mobile-breakpoint .upfront-grid-layout { width: calc(100% - 1em); min-width: 315px; }
.popup .ubermenu-icon { text-shadow: rgba(0,0,0,.25) 1px 1px 0; padding-right: 8px; padding-left: 7px; min-width: 15px; text-align: center; }
.popup .wdpu-content p { line-height: 1.62em; }
.popup .wdpu-text { margin: 0 240px 0 0; }
.popup .wdpu-image { width: 240px; }
.popup .wdpu-image img { max-width: 240px; max-height: 180px; }
.popup .wdpu-msg p { font-size: 18px; padding-left: 5px; }
.member-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -10px; margin-top: -10px; }
.member-list li.member-link { -webkit-box-flex: 1; -ms-flex: 1 0 270px; flex: 1 0 270px; margin-left: 10px; margin-top: 10px; }
.member-list li.member-link { list-style: none; list-style-type: none; cursor: pointer; }
.member-list li.member-link span { display: block; width: 100%; text-decoration: none; line-height: 32px; padding-bottom: 5px; box-sizing: border-box; }
ul.member-list li:after { border-bottom: 2px solid #d4d4d4; display: inline-block; display: block; content: ''; }
ul.member-list li:empty:after { border-bottom: 0 solid #d4d4d4; }
.tablet-breakpoint .member-list li.member-link { max-width: calc(50% - 10px); }
.desktop-breakpoint .member-list li.member-link { min-width: calc(33.33333% - 10px); }
.member-list li.member-link { background: #f9f9fa; color: #000000; box-sizing: border-box; padding: 10px; }
.member-list li.member-link:hover { background-color: #ufc0; color: #FFF; border-radius: 4px; box-shadow: 0 0 3px rgba(0,0,0,.25); }

Thanks,
Michael

  • Nastia
    • Support Rock Star

    Hello Michael, I trust you are doing well today!

    I've tested this on my installation and can't replicate the same. All changes are saved. And I can't replicate the same on your site too. I've edited an empty theme GBN001 and the CSS changes were saved. Would you please confirm that the CSS code is visible there?

    Please try to make this changes with a different browser and let me know how it goes.

    Kind regards,
    Nastia

  • Mtwo
    • Site Builder, Child of Zeus

    Nastia, thank you for the quick reply. I do see that css within the 001 theme. However, in the currently active theme, GBN009, it does not work. I have tried in multiple browsers and in private mode. Every time I load the theme in Builder, that CSS is gone. Can you look at the 009 theme and let me know what the issue is there.
    Thanks for your efforts, I do appreciate it.
    Michael

  • Nastia
    • Support Rock Star

    Hello Mtwo , I hope you're well!

    I can confirm that the Global Theme's CSS is not saved with GBN009 theme. While saving changes the following JS error appeared in the developer's console:
    Uncaught SyntaxError: Unexpected token

    I've tested your theme on my site, and the changes that were not visible on your installation are showing on mine and I can no longer replicate the issue.

    Would you please perform a quick check for a conflict with another plugin? Deactivate all plugins and try to save change in Global Theme CSS in Builder, close and re-open Builder again to see if the changes are saved. If everything is well, activate one plugin at a time, repeating the same test, to find the plugin that causes this.

    Follow the steps from the flowchart:
    https://premium.wpmudev.org/manuals/using-wpmu-dev/getting-support/

    Let me know how it went!

    Kind regards,
    Nastia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.