User’s custom CSS keeps disappearing. Override styles issue.
-
At least the header styles, which are configured in the header builder, are constantly being applied and not applied. This most likely applies to the custom CSS in the header, but it likely applies to other parts of the site as well. The problem lies in the style override queue. My custom styles don’t require !important btw.
There are no additional styles defined anywhere else in the settings. And everything works as expected on other sites with your theme.
Also, Convert large CSS files to inline styles in the performance settings does not affect the style loading order.
Attachments:
You must be
logged in to view attached files.
Hello,
Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.
Best Regards,
Hello,
You have missed the admin login URL. Can you please share the WP admin login URL in the private area so I can check and give you a possible solution?
Best Regards,
Oh, I’m sorry. Here it is!
Hello,
You can try adding the !important flag to your custom CSS rules so they take priority over the theme’s default styles.
Like this:
.wd-tools-inner {
width: 100% !important;
}
Best Regards,
I don’t like this solution. I specifically wrote that I don’t use it on purpose. Either the theme or my system has the order of the downloaded files set incorrectly. Can I hope your specialists will look into this?
Hello,
Would you like this custom CSS to be applied only within the Header Builder? Could you please specify which other areas of the site are being affected by this code? Also tell me what you actually want to do?
Best Regards,
Hello,
It seems like the rest of the site’s CSS remains intact. Don’t you just think this is still a problem?
I don’t want to do anything special about it, but using !important seems highly questionable to me. Due to its maximum priority and the fact that it might be needed at another stage in the chain.
Hello,
I have reviewed your custom css. When you copy CSS directly from the browser’s developer tools, you’re often copying styles that are already applied by the theme. Those styles may change depending on the header layout, so pasting them into Custom CSS doesn’t always work reliably.
If you’d like to apply permanent styling changes:
- Please avoid copying the exact CSS rules you see in the inspector, as those are already part of the theme.
- Instead, create custom override rules with your own selectors. This way, you’re not duplicating theme code but adding only what’s needed to adjust the design.
This way, your changes will always override the theme defaults. If you have any questions, feel free to contact us.
Best Regards,
Could you be more specific about what you mean? Do I need to write a higher-priority selector?
For example, I need to select button elements in the header. If I can’t assign a custom class to the element, how do you suggest accessing it? I’d ask you to write a specific CSS selector so I understand you correctly.
Is it okay that, in fact, if I select exactly the same selector as in the theme, then due to the correct priority of loading style files, the problem will be solved?
Hello,
For example, if you’d like to adjust the header tool icons and text, you can use selectors like this:
.whb-header .wd-tools-element .wd-tools-icon:before {
font-size: 25px !important;
color: #ff0808;
}
.whb-header .wd-tools-element .wd-tools-text {
color: red !important;
}
.whb-header .wd-tools-element:hover .wd-tools-text {
color: blue !important;
}
This approach avoids duplicating the theme’s full CSS and only overrides the parts you want to change.
Best Regards,
.
