- This topic has 3 replies, 2 voices, and was last updated 5 years, 8 months ago by
Sebastian.
| Author | Posts |
|---|---|
 Intergise
August 3, 2018 at 11:44 am
|
How do you style different elements with the same CSS? For example, using Beaver Builder there are button created with different modules that need to be selected differently but should have the same style. To be efficient I want to have the one set of styling applying to all buttons so any changes can be made once, not multiple times. I can’t see how to do this except create several selectors with the same style. |
 Sebastian
August 3, 2018 at 3:01 pm
|
Hey, Would you mind sending me a link to your site so I can advise you more specifically? My general advice is this: Ideally all of the buttons share a common class e.g. primary-button. In which case, you would choose one of Microthemer’s Targeting suggestions that includes the primary-button class. The targeting suggestions are located in the the right hand pane when the advanced options are expanded in targeting mode. The number to the right of each option shows how many elements a selector targets on the current page (not site-wide). However, if the buttons don’t share a common class, or all buttons share a single common class but you only want to target a subset, a different approach is required. CSS selectors can be joined using commas. So another option is to copy the CSS selectors you created for individuals buttons and join them together using commas. You can get/set the selector code for a given selector via the Selectors menu. Or by clicking the name of the current selector in the top toolbar. So you might end up with a selector that looks like this:
Once you have created a custom selector that targets your collection of buttons, you can set the styling via MT in just one place. As I said, if you can send me a link to the page/pages you’re working on I can explain this in more concrete terms. Thanks, |
|
Intergise
August 4, 2018 at 6:10 am
|
The site is a development site on my local server. It’s a blueprint to use Beaver for layout and Microthemer for styling so putting in work now to speed up development down the line. It’s not online unfortunately. The buttons do share a common class, That seems to be what I having an issue with, using a selector the takes precedent over BB. |
|
Sebastian
August 4, 2018 at 11:38 am
|
I see, it’s a case of CSS specificity. By default, Microthemer’s preference for adding !important to all styles is enabled. This helps beginners make changes before getting too deep into the rules of CSS specificity. It sounds like you may have turned this preference off, not being a complete beginner yourself. In which case, ensuring your selectors have a higher specificity score than Beaver Builder is probably the best approach. You can still fall back on !important on a per-style basis by clicking the faint i to the right of the CSS property field (which only shows when global !important is disabled). One trick for making CSS selectors more specific, without introducing the classes of parent elements (as in your example), is this:
It’s a bit of a hack, but works. Classes joined together with no space are meant to be used in this way:
But by repeating a single class, browsers will still hike up the specificity score of the selector. Just thought it worth mentioning in case in comes in handy with your prep. |
