Using a selector over again to style more elements

Tagged: , ,

Author Posts

kyle July 28, 2017 at 10:26 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

I feel like I’m missing something basic about how to use selectors. Let’s say I’ve targeted a text box on my page and made a selector, naming it “fancy body text” with my preferred styles and colors. I then scroll further down the page and realize there’s a second box of text that I’d like to style with the “fancy body text” selector. How do I do that?

If I target or double-click the second text box, I’m only seeing options to create a new selector. Can I target an element and apply an already made selector to it?

Thanks for any guidance.

Sebastian July 29, 2017 at 10:42 am

Hey Kyle,

In the Microthemer interface, if you hover over the Help menu item and then click the Targeting video option, you can learn about Microthemer’s targeting options, including how to target multiple elements with one selector.

Microthemer suggests alternative selectors that target related elements on the page. One of these options will be suitable in most cases, but if you find that Microthemer doesn’t suggest a selector that targets the two boxes in question, you have two options. Both involve a bit of custom code:

Option 1 – Comma separated custom selector

See instructions below or watch this video demo.

  1. Expand the advanced targeting options by clicking the show advanced link while in targeting mode.
  2. Target the second box by clicking it.
  3. The default selector at the top of the list (on the right) will be a selector that targets just that box. Copy the selector code.
  4. Exist targeting mode without creating the selector.
  5. Finally, click the name of the ‘fancy box text’ selector in the top toolbar to reveal the quick edit options
  6. Append the code you copied after the current code, separating the two pieces with a comma e.g.
    .original-selector, .second-selector
  7. You can comma separate however many selectors you like: 2, 3, 5, 10 etc. But it’s preferable to use one of MTs suggestions if possible. This leads us on to option 2

Option 2 – Updating the HTML with custom classes

If you have the know-how to update your theme’s HTML, you can add a common class to elements on the page that you want to apply the same styling to. So for instance, you could add class=”.fancy-box” to all HTML elements that should have the “fancy box” styling. Of course this requires some understanding of HTML code. But if you use a page builder like Beaver Builder, it is possible to add custom classes to chunks of content (modules) via the Advanced settings. So you would just enter fancy-box into an input field.

I hope my answer helps a bit. Please feel free to share a link to your site if you need more specific guidance.

Thanks,
Sebastian

mermaremmc July 31, 2017 at 12:54 pm

Just popping in to say, thanks Sebastian – this was helpful to me (hopefully for Kyle too). I didn’t realize that targeting video was there, I appreciate it’s attention to detail and slower pace.

Sebastian July 31, 2017 at 3:47 pm

That’s great to hear @mermaremmc. Thanks for dropping by 🙂

You must login or register to reply to this topic.