Custom styles not being picked up

I'm using the Builder to create my own custom theme and things are coming along nicely except the custom css styles are not being picked up at all in the browser.

Everything looks awesome in the Builder / Upfront editor interface (see image "how it looks in editor":wink:

the Custom Preset interface is working as expected however, when I save and then check on the front end the style will NOT display no matter what I try... (see image "how it looks in the browser":wink:

It is doing my head in!!!!!

I have an ::after class on the banner region to give the green shaded effect which I thought might be causing the issue but even if I remove it the issue with the other styling remains.

I've inspected the element in the browser and there are all of these other styles that are listed.. my custom class is nowhere to be found though and the active class is from some random core / archive css files?!? The version #s don't even match

See below for the various css files that are over riding all other styles. They're not even associated with my custom theme but look like some archived default setting?

css file for H1

css file for H4

css file for button

  • Sajid
    • DEV MAN’s Sidekick

    Hello Brett,

    Hope you are doing well today :slight_smile:

    You are doing really great job with Upfront Builder, I like it.

    For the issue, please check if these settings are actually being saved and also check in the console you don't get any error messages when you try to save the changes.

    Also, if you could enable support staff access then I will be able to take a closer look. To grant access go to WPMU DE V -> Support -> Support Access -> Grant Access or see this manual.

    Take care and have a nice day :slight_smile:

    Best Regards,

  • Brett
    • Site Builder, Child of Zeus

    Hey sajid,

    Thanks, it took a couple of attempts to get the hang of the Builder set up but I think I've got the hang of it now :slight_smile:

    The custom presets are being saved in the Editor and are being displayed. They stay there even when I close / open up the page. From the Editor view everything looks perfect.

    But when I open another tab to review the page on the front end, it is not the same as the view in the Editor. The font is all wrong and the button is not the right colour.

    If I set the font format in the Global Fonts the size stays the same but the custom css that dictates letter-spacing etc doesnt get picked up, instead it gets over-ridden by these mystery styles

    I've granted access so have a look around and see what you can find

    Cheers.. Brett :slight_smile:

  • Nastia
    • Support Rock Star

    Hello Brett , I trust you are doing well today!

    My apologies for the delay in this thread. It wasn't simple to find so I've addressed this issue to our developers. The issue was that the custom CSS preset wasn't loaded at all on the front end.

    We've looked through your theme and turns out there is an unclosed CSS comment on Navigation preset.

    Please open your theme in Upfront edit mode, click on the menu element's settings > Appearance > the Agilei preset should be selected > Edit Preset CSS and delete the commented CSS on line 43, at the end of the editor.

    Please see the screenshot

    Once the commented CSS code removed, the buttons colors will load on the front end.

    Let me know of you have any further questions!

    Kind regards,

  • Brett
    • Site Builder, Child of Zeus

    OMG you guys rock - i had a feeling that it was going to be something very minor that was causing the issue as I had never experienced anything like this - incidentally, this is also the first time that i commented out CSS in a module - I was playing around with config - so i will remember NOT to comment out any CSS or HTML in the future

    Thanks very much, client is now very happy that site matches with design!!

    Cheers Brett

    PS: Keep on creating A++ themes and plugins - WPMU is the Go-to-Source for all things WP

  • Brett
    • Site Builder, Child of Zeus

    OK so I think that I jinxed myself...

    Once I removed the commented out CSS from the navigation preset, the custom banner buttons and font styles were picked up and displayed on the browser.

    However, the green tinted overlay that was displaying is no longer displaying. Once again, the entire custom CSS style is not being picked up by the browser even though it is displayed in the Editor UI

    I am wondering what is the cause of this issue now? Hope that you guys can help me out again..

    cheeers.. brett

  • Sajid
    • DEV MAN’s Sidekick

    Hello Brett,

    Hope you are doing good today :slight_smile:

    The reason of the tinted overlay not being displayed was the wrong Div class. I replace the CSS class selector from upfront-region-center to upfront-region-container-homepage-banner and it did worked on both views (front and editor).

    Was that only custom CSS that were not working or there is more custom CSS code ?

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.