Struggling to target an element

This topic contains 7 replies, has 2 voices, and was last updated by  Sebastian 2 weeks, 5 days ago.

Author Posts

ahelman

Hi – just wondering if I’m missing a trick.

I often struggle to target a “live” element – for example, a testimonial slider’s “previous” or “next” button. What happens is when I try to target it, the element does get highlighted by MT, but when I click on it, instead of being selected, the “button” itself does its thing, i.e. I ended up “pushing” that button.

How do I get MT targeting to select it instead?


Sebastian

Hey,

It’s possible to target elements with Microthemer without actually clicking them.

  1. Expand the advanced targeting options by clicking the show advanced link in the top toolbar with Targeting mode active
  2. Click on something near the slider prev/next button so that Microthemer scrolls to the correct area of HTML for the slider
  3. Look for the HTML element that says e.g. ‘Next’. You can use Ctrl+F after clicking the HTML to search for text.
  4. Click the line of HTML that has the Prev/Next button to select it.
  5. Click the CREATE SELECTOR button when you are ready

That should do it. If you’re still stuck, please let me know!

Cheers,
Sebastian

P.S. You can also use the directional controls above the HTML pane, or the breadcrumbs below it to select elements without actually clicking them.


ahelman

Hi there

I had tried something similar before posting as it happens as I was hoping I could create a selector from the HTML pane.

However, when I try that (clicking on this line):

<a class="wpmslider-prev" href=""></a>"

Before I can click create selector, it jumps to highlighting the next “div” line about 20 lines on?


ahelman

Actually, I see that line is not the correct one – when I “inspect” the page it’s the correct class, but not in that div. When I search in that pane for the correct div it isn’t there, so I suspect the issue is that MT cannot see that HTML for some reason.

I’m going to import the CSS I need for that class into MT and see what happens…


ahelman

So – ended up using Google inspect to determine the selector – wrote some basic CSS and imported into MT, where I finished off the styling visually.


Sebastian

Hmm, the jumpy line issue suggests your theme might be conflicting with MT’s HTML inspector feature. This can happen if the theme injects HTML during targeting, thus throwing the line calculation off. It’s normally fixable. If you don’t mind sending me access details for the site via our secure contact form I would be happy to investigate a fix.

Regrading importing the CSS. You can enter custom CSS selectors by editing the suggestions on the targeting suggestions pane. Or by using the (+) icon to manually add a selector to a folder via the Selectors menu (top left). So you don’t actually need to use the Packs > Import > CSS stylesheet feature (in case that’s what you were referring to when you say import).

I’m glad you figured out a way forward though 🙂

Cheers,
Sebastian


ahelman

Hi there

I think the issue was more that I was choosing the wrong selector in the HTML pane – I was trying to choose a selector that wasn’t supposed to display in the context the page was set up, hence MT struggling to find it in the UI. You would know better than me, of course 🙂 If you still want to have a poke about that’s fine with me, just re-confirm and I’ll do as you suggest re credentials etc.

And lol I didn’t know those 2 methods to add selectors! I do now – thanks 🙂


Sebastian

Ah, maybe it’s OK then. But if you have any issues in future let me know and I’ll take a look for you.

Thanks!
Sebastian

You must login or register to reply to this topic.