Skip Navigation

[Resolved] Bootstrap CSS overrules custom CSS

This thread is resolved. Here is a description of the problem and solution.

Problem: Bootstrap CSS overrules custom CSS

Solution: There is currently a bug that causes custom CSS files to be loaded in the wrong order, and sometimes Bootstrap is loaded after them. This can result in Bootstrap styles overriding your own custom styles. A temporary solution is to override Bootstrap CSS using more specific selectors:

body.blog { margin:0 auto; }
body.blog .ddl-nav-wrap { margin-top: 6px; }
This support ticket is created 7 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by Dido 7 years ago.

Assisted by: Christian Cox.

Author
Posts
#539568

Hi, on my site hidden link is 1 page, where the custom CSS is overruled by Bootstrap css.

see hidden link
This proble occurs after latest updates.

it seems strange to me.
is this a bug or do I miss something?

#539726

Hi, I can see that the order in which your CSS files are loaded seems to be different on this page. This is a bug that has been reported specifically for the Toolset Starter Theme. Our developers are aware of the issue and are planning to fix this in a future release of Layouts. In the meantime, the best solution I have is to add more specific selectors to the styles you need to override in your own custom CSS. For example, please add the following rules in Layouts CSS and JS:

body.blog { margin:0 auto; }
body.blog .ddl-nav-wrap { margin-top: 6px; }

By adding the .blog class to these selectors you will override Bootstrap's styles. I recommend duplicating the styles that are overridden on the blog page and applying the extra blog class selector to restore your styles. Please let me know if you need assistance with this and I'll be glad to help.

#539811

Hi Christian,

this works. I'm not amused about this bug, but thanks for the tip.

#580250

Hi, a quick update to let you know that the latest version of Layouts includes a fix for this issue. The new version is now available for download in your accounts area here on wp-types.com. Please feel free to check it out and provide feedback in a new ticket if necessary. Thanks for your patience while we worked to resolve the source order issue.

#580281

Thank you for letting me know!