-
Posts
-
Hi guys,
this time I do have a pretty generic question: I do have a plugin that has a pretty detailed custom css to define all aspects of the plugins design. As I would like the plugin to be aligned with Enfold’s design I would like to match different elements of the plugin that do have a defined style in the theme. E.g. if you go to http://www.dasjuengstegericht.org/verzeichnis/ you can see that there’s the default “search-button” from Enfold and the custom “search-button” from the plugin.
Taking this example: As I would like to be flexible (in case of updates), I would like to build some kind of reference that would match “if plugin-search-button-style, then use default-search-button-style”.
I know it will be a lot of work to manually match that but as I only want to do it for some items, my question is: Is that possible, and how can it be done?
Thanks in advance for any idea…
Cheers!
quicky
Hi quicky2000,
I’m not really clear on what you are trying to do. If you want to overwrite the plugin’s style then you can do so by adding the same selectors to the Quick CSS field or custom.css file and then style them.
Because of the way css works by default, if the plugin doesn’t have a specific style in place then the themes styling will take effect anyway.
Regards,
Devin
Hi Devin and thanks for your reply,
as the plugin defined allmost every aspect of it’s design it is pretty isolated from the theme’s design. Of course it uses similar element (like a search-button), but they are all defined in it’s own styles. As I’m not a CSS-pro I’m happy that I at least found out how to manually define the design for the plugin but as most of the elements are already defined in enfold’s design I thought there might be a way to just reference the design and say “match plugin-button-design with enfold-button-design” like some kind of nesting.
If that’s not possible via CSS could you give me at least an idea on how to optimize my approach… for example there is an element called “sabai-btn” I know how to change the color with this:
.sabai-btn {
color:#000000
}
but how could I set the color dynamically that it’s always the color that comes from Enfold’s selected color-scheme?
Thanks again
quicky
There isn’t a way to set it dynamically via css. The difference in color is because enfold has styles for the tables and the plugin doesn’t have a style for them.
So the plugin data is: table {} while the theme has table{some styles}. In those cases, the plugin is a blank slate and the theme styles fill in that blank.
What you would want to do is inspect the plugin with dev tools (Chrome>right click>inspect element) and for each css selector either style the element as you want it or clear out the theme styles by add the same properties but default values (almost the same thing as adding new styles completely).
- The topic ‘How to align a plugin's css with the theme's css’ is closed to new replies.