Overriding style.basic.css

[donlangeParticipant]

Hello Ernest,

Could you please tell me if there is a way to override the styles contained in ajax-search-pro/css/style.basic.css without using !important?

There are styles within ajax-search-pro/css/style.basic.css that cannot be overridden using Themes & Styling > Custom CSS (see screen capture for clarification) without the use of !important.

Perhaps there is a way to enqueue the theme files in a particular order so I can edit all CSS using the style.css file of my Divi child theme. Editing would be much easier using the cPanel File Manager than the little box shown in the screen capture.

Thank you very much,
Don

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

The order of CSS files does not matter when the browser renders them. The only thing that matters is the CSS rule specificity. There are basically 4 groups of CSS rules, each with higher specificity than the other (elements & pseudo, class, ID and inline). For example, a CSS rule that includes an element ID, will override another rule that only targets the same element via it’s class, no matter the order. The order only matters with rules with the same specificity.
This is also a cause of many CSS conflicts, such as parent elements having higher specificity rules will apply on their child nodes – for example a shortcode prints out some elements, styled in a specific way, but if the parent element (where the shortcode is placed) has a higher specificity rule, it will apply instead. To overcome this issue, developers use IDs, and very high specificity CSS rules, to avoid any possible styling conflicts across themes and plugins.

Using !important will save you the headache of constructing higher specificty rules to override the existing ones, which can be very lengthy and could take a lot of time. Since you only want to override some aspects, using !important is not a bad practice in this case whatsoever. I highly suggest keeping them as they are, for the best possible compatibility.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Good Day Ernest,

Thank you for the information. I look forward to learning more about your plugin.

Actually, I should apologize for not checking the HTML source code before bothering you with a trivial CSS question; however, I understood the interface depicted above (editor-css.jpg) actually inserted Inline style (using the style attribute) rather than style tags.

Just a friendly suggestion to eliminate ambiguity:

Your method of including CSS using the editor located at Theme & Styling > Custom CSS, is referred to as Embedded style in the US. Perhaps this is not globally accepted terminology; however, there should be a way to differentiate between the two implementation types since the true Inline style possesses the most specificity.

Regards,
Don

• This reply was modified 5 years, 3 months ago by  donlange.

[Ernest MarcinkoKeymaster]

Hi Don,

You are right, I didn’t even noticed the mistake there about the ‘inline’ terminology. That should be indeed ’embedded’, and not inline, that is completely different.
Your question makes complete sense now, I am very sorry about the missunderstanding.

I will make sure to correct that in the upcoming release 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts