Duplicating style settings for a single element to other elements

This topic contains 2 replies, has 2 voices, and was last updated by  laucocos 2 months ago.

Author Posts

laucocos

On my website https://www.inspiratti.com/ I have created a button style using Microthemer called “landing page button” .mt-30012 [type=”button”]

As I have refined the style settings to a look that works well for my website, I would like to be able to copy the style settings for this button so it can be used for other buttons.

I realise this could be done manually by creating a new selector in Microthemer and applying the same settings but I wondered if there was a quicker way to achieve this.

Many thanks,
Laura


Sebastian

Hey Laura,

You have a few options here. The best is probably to make the selector code target more elements than it does right now. That way you only have to change the styles in one place (on one selector) and all buttons will be affected. This is useful if you would like to tweak your button styling in future. For example, your current selector is this:

.mt-30012 [type=”button”]

The page-id prefix ensures the styling will only affect input elements of type button on one page on your site. If you want the styling to apply to a button on another page, target the other button with Microthemer, ensuring the advanced targeting options are showing. Then, instead of creating a new selector, copy Microthemer’s CSS selector code from the targeting suggestions and append it to your current selector, separating the two with a comma e.g.:

.mt-30012 [type=”button”], .my-other-button

This video shows how to join selector code into one selector: https://screencast-o-matic.com/watch/cbiU6klaX5

Another option, if you do want to have separate selectors, it to copy the original selector. You can do this from the Selectors menu in the top left. Hover over a selector and then click the copy icon that appears on the right. You may have to expand the full set of icons if the copy icon isn’t showing by default. The icon for that is on the far right of the selector.

Do you think either of those solutions will work for you?

Cheers,
Sebastian


laucocos

This works perfectly, thank you.

You must login or register to reply to this topic.