My custom CSS is not saving

I have created a custom theme. I can't seem to get the Main menu to save the CSS changes I have made.

  • 1337user
    • Mr.

    Hello Huberson,

    Backup created via FTP; go ahead.

    Here's another video; where I changed the CSS on the TopMenuBar to have a gradient background.
    You can see the change in upfront; but when looking at it from a browser, the CSS loads, but then disappears; it gets overwritten by a top tier command?

    https://youtu.be/J0E52EnuAMQ

    Thank you for taking the time to review and assess this issue!

  • Huberson
    • Recruit

    A simple fix is to append "!important" to each rule, and instead of adding the CSS globally, make it specific to the region you want to apply changes to.
    [image pos="1"]

    I have added the CSS gradient with the below code for demonstration purpose, you can always remove/modify it as you see fit.

    background: -moz-linear-gradient(left, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 10%, rgba(130,130,130,1) 30%, rgba(130,130,130,1) 50%, rgba(130,130,130,1) 70%, rgba(51,51,51,1) 90%, rgba(51,51,51,1) 100%) !important;
    background: -webkit-linear-gradient(left, rgba(51,51,51,1) 0%,rgba(51,51,51,1) 10%,rgba(130,130,130,1) 30%,rgba(130,130,130,1) 50%,rgba(130,130,130,1) 70%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%) !important;
    background: linear-gradient(to right, rgba(51,51,51,1) 0%,rgba(51,51,51,1) 10%,rgba(130,130,130,1) 30%,rgba(130,130,130,1) 50%,rgba(130,130,130,1) 70%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%) !important;
    box-shadow: 0px -10px 20px #303030 !important;

    Feel free to ask if you need more assistance, we always here to help.

    Huberson

  • Huberson
    • Recruit

    This is due to the cascading nature of CSS, selectors with higher priority override those with lower priority. For example, #upfront .menu{ color: green } will override .menu{ color: red; }. In your case, the background gradient did not take effect because of a somewhat grey background rules with higher precedence.

    You can always check the browser console to see which rules is active on a certain element.

  • 1337user
    • Mr.

    I see; the background color set in the region takes priority over the CSS. I guess that's the answer.

    While trying to figure this out I noticed that now.. I don't see the CSS visual gradient in BUILDER nor do I see the CSS listed in the custom CSS box...

    I feel that there is something, underlying, wrong.

  • Huberson
    • Recruit

    That's odd, I just remove the styles under global theme CSS and save the navigation CSS now everything is gone.

    .page-id-3818 #page {
        max-height: 100vh;
        overflow: hidden;
    }
    
    OFF///upfront-region-container-mainmenutop {
    background: -moz-linear-gradient(left, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 10%, rgba(130,130,130,1) 30%, rgba(130,130,130,1) 50%, rgba(130,130,130,1) 70%, rgba(51,51,51,1) 90%, rgba(51,51,51,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(51,51,51,1) 0%,rgba(51,51,51,1) 10%,rgba(130,130,130,1) 30%,rgba(130,130,130,1) 50%,rgba(130,130,130,1) 70%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(51,51,51,1) 0%,rgba(51,51,51,1) 10%,rgba(130,130,130,1) 30%,rgba(130,130,130,1) 50%,rgba(130,130,130,1) 70%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=1 ); /* IE6-9 */
    box-shadow: 0px -10px 20px #303030;
    
    }
    
    .upfront-region-mainmenutop {
        box-shadow: inset 0px 0px 20px #303030;
    }
    
    OFF///upfront-region-container-mainfooter {
    z-index: 20;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    }

    You might try using a different browser to do the editing.

  • Huberson
    • Recruit

    It might be an issue on your server, a bug, I'm not quite sure. Please try clearing Upfront cache and make the changes in incognito mode to see if they persist. If there is no issue in incognito, then reset your browser cache.

    Please do let us know if that solves the issue.

  • Huberson
    • Recruit

    Hi, really sorry for the time it took to reply back to you, and thank you for the additional testing.
    Although it's clear that the issue is present from your tests, I can't really confirm if it is a bug since I was not able to replicate the issue even on your own server as you can see from my previous troubleshooting.

    If you can please re-enable support access so I can perform a few more checks. Once it's confirmed to be a bug, I will push it to developer in charge of Upfront.

  • Huberson
    • Recruit

    I'm not certain it's a bug with Upfront or server issue. I just re-applied gradient to main menu and it persist on save. Basically if it was an issue on the server or a bug I should have got the same result from your tests.

    I will request some tech to perform the same tests on your website and see what they come up with. In the meantime try using a different computer and let us know what result you get.

    Best,
    Huberson

  • Huberson
    • Recruit

    Hi, just an update, if you were making changes with Upfront editor and then use Builder to add the custom CSS, modifications made from Builder might not take effect on current site. I think adding the custom styles with editor instead of Builder might help.

    Basically Upfront Builder modify the theme while Upfront editor is used to add content to your website and can also be used to changes site appearance(more on that: https://premium.wpmudev.org/forums/topic/text-problem-for-upfront#post-1185566).

  • Huberson
    • Recruit

    Hi,
    As we are testing this on the same server, I should have been able to see the same result as you, which is not the case.
    Have you tried making changes using Upfront Editor from the site front page instead of Builder? Technically changes make in Editor override Builder.
    Since I cannot replicate the issue, I will need some more information from you tests before I can escalate the issue. For example, if you have edited the theme with Upfront editor.

    Best,
    Huberson

  • 1337user
    • Mr.

    This is a fresh WP install with Upfront added; no I have not touched Editor, just Builder.
    Why would I want to mess around in editor if a Theme is not set up yet in Builder?
    Upon resetting or importing the theme to a new host all changes would be lost...

    I'm getting a bit grumpy about this; I've invested a lot of time already showing the issue over and over.
    As stated in the other topic: https://premium.wpmudev.org/forums/topic/im-having-issues-with-upfront-builder-i-cant-edit-the-theme-info
    There's an acknowledgment that the theme info can sometimes not be saved. But usually hitting the Save button results in error 500?, Oops something went wrong

  • Kasia Swiderska
    • Support nomad

    Hello 1337user,

    I apologize for the inconvenience that this issue is causing and delays on our end. Could I get access to your sandbox site to investigate that? Could you please send in the following via our secure contact form https://premium.wpmudev.org/contact/ :

    - Mark to my attention, the subject line should contain only: ATTN: Kasia Swiderska
    - Do not include anything else in the subject line, doing so may delay our response due to how email filtering works.
    - Link back to this thread
    - Include WordPress admin access details (login address, username & password)
    - Include FTP log-in details (hostname, username & password)
    - Include any relevant URLs for your site

    IMPORTANT: Please make sure you select "I have a different question" for your topic, so it doesn't go back to the forums - this and the subject line ensure that it gets assigned to me.

    Please confirm here that you send those credentials

    kind regards,
    Kasia

  • Kasia Swiderska
    • Support nomad

    Hello 1337user,

    Thank you for the credentials. I did some tests on your site and I was able to confirm issue there. But here is strange thing.
    After change in CSS in theme in Builder I downloaded theme - I did that twice - and installed on my site. Then I checked Global CSS in Builder on my site.
    And changes made on your site were actually applied to the theme files. So it's not that the changes are not saved - it looks like every time when you load Builder and open Global CSS styles are not loaded from the files but database. That is of course
    not correct.
    I tested this for plugin conflict and enabled debug log, but there was no positive results with that.

    In this case I will bring our SLS (Second Line Support) developer to investigate why this is happening on your site. I will keep you updated about our findings.

    kind regards,
    Kasia

  • 1337user
    • Mr.

    Hello Kasia,

    thank you for your time and effort!
    I'm glad to hear that this is finally re-creatable and can be confirmed as non-standardised behavior.

    Did you try to change the theme info as well? This gives errors on saving. Server 500 - oops something went wrong.

    Kind regards

  • Panos
    • SLS

    Hi there 1337user ,

    Hope you are doing well today!

    Apologies for late reply! This is not a bug actually this is how it's supposed to work. Once you have an active theme, changes made in upfront builder are not loaded, only changes from upfront editor are.

    You can simply go to admin > Upfront > General and click on the "Reset Theme" button to reload the theme and you should be able to see these changes there.

    I would suggest to keep the Builder editor page loaded on one tab and the front end loaded on a separate tab so you can see the CSS in the global CSS field without needing to press the reset button each time.

    Hope this helps :slight_smile:

  • 1337user
    • Mr.

    Hello Panos,

    thank you for taking the time.

    The problem with that is, that when you have added a blog data page block in the upfront editor or any other tweaks that need to be done in the editor, will be lost; upon resetting the theme, in the builder.

    But if I read what you say correctly; it will save my CSS when the theme that I'm working on is not set to the active theme?

    /offtopic a bit.

    Being able to set the (blog) post data page and featured image region in Upfront Builder would be a time saver.

  • Kasia Swiderska
    • Support nomad

    Hello 1337user,

    But if I read what you say correctly; it will save my CSS when the theme that I'm working on is not set to the active theme?

    Yes, when theme is not activated and edited in Editor then CSS will be saved.

    Being able to set the (blog) post data page and featured image region in Upfront Builder would be a time saver.

    I'm not sure if I understand this correctly, but you can create a single post layout and add there Post Data and Feature Image data (if you edit it, you can also setup a default image to see how it looks):


    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.