Targeting Different States of an Element

Hey,

Thanks for bringing this to my attention. I like your suggestion.

They way I see this fitting into Microthemer’s current selector management system would be to have an extra ‘Create state selector’ icon along with the disable, clear, delete icons. So when you click the name of the current selector in the top toolbar, you can hover over this icon and choose one of the common states:

normal
:hover
:active
:visited
:focus

This would create a new selector based on the current one but with a different state.

Would that work for you?

Cheers,
Sebastian

P.S. if you want the same styles to apply in all states and only make the style changes in one place (on one selector), the best approach would be to manually create a comma separated selector that targets all states e.g.

a, a:hover, a:active, a:visited, a:focus

But given the comparison with other CSS editors, I don’t think that’s what you’re after right now.

Hey,

The multi-select seems perfectly doable 🙂

Could you send me a link to the site you’re working on so I investigate this active menu issue? You can use our contact form if you prefer.

Microthemer should pick up on any classes WordPress adds to the currently active menu item. Although not necessarily when coming up with suggestions in the quick create menu. To see more options, expand the advanced targeting options and then use the dropdown menus under ‘Targeting suggestions’ to find alternative selectors that target the same element(s) you clicked. So if you click on the active menu item, look for alternative suggestions under the very top suggestion that targets a single element on the page. It will look something like:

.current-menu-item a

(although the class name may be a bit different with your theme)

If the class if present in the HTML but MT still isn’t picking it up I will release a fix for that ASAP.

Cheers,
Sebastian

Thanks for providing access. Microthemer was picking up on the current menu item, but in the 2nd suggestion that targets two elements on the page. This is because you have a copy of the main menu in the footer of your site.

To show you how you can target the active menu item without using page-ids, I’ve created a folder called ‘Seb example active menu‘. I created one selector for the link element, and another selector for the span element inside the link element, so that you can set the text color. You will need to disable or delete your previous selectors for targeting the menu links, otherwise they will override the two selectors I created (because they have higher CSS specificity).

For Microthemer to be able to come up with a selector that targets the currently active link only in the context of the header, I will need to tweak the algorithm a bit. This will require a bit of testing to ensure the number of permutations remains low enough to avoid performance lag. But I will aim to get this done fairly soon.

On the topic of performance lag. I recommend not having the Styles tab open when you have the advanced targeting options expanded. Your theme loads too much CSS for this feature to operate quickly (it was locking the browser for 10 seconds, as shown by the red warning). Instead, have the computed tab showing. And Right click > Inspect in Chrome to get the same information that is shown on MT’s Styles tab.

I hope that helps. Please let me know if you have any further questions.

Cheers,
Sebastian

Hey thanks for sharing the video.

I hadn’t actually added any styles to the new selectors I created. I was leaving that bit to you. Sorry for the confusion. I’ve have done this now.

I’ve disabled your entire Main menu folder. And dragged a couple of your original selectors into my ‘Seb example active menu’ folder. I also threw in a selector for targeting the donate button, including it’s hover state.

If you now have all the selectors you need to style the menu in my custom folder, you can go ahead and delete the main menu folder. And then rename my custom folder. Or, if I’ve missed something, please let me know.

Thanks!
Sebastian

You’re welcome 🙂

1. I wasn’t sure if you wanted to style the footer menu in exactly the same way as the header menu. No problem, I achieved that by simply removing the header prefix from the selector. So I changed it from this:

header .current-menu-item a

To this:

.current-menu-item a

To make the gallery show as active, I updated the selector to tap into that class too (using a comma to join the selectors):

.current-menu-item a,  
.current-menu-ancestor a

I also noticed that Genesis styling was overriding the white background and green text for the active sub-menu item, so I made a final adjustment to cater for that (by including .sub-menu I gave the selector high enough CSS specificity to override Genesis’ submenu item styling):

.current-menu-item a, 
.sub-menu .current-menu-item a, 
.current-menu-ancestor a

I hope that helps. Menus are probably the most technical things to style 🙂

Cheers,
Sebastian

Hey,

Happy to help! And yes, I do see why you would like a convenient way to add state selectors 🙂

I actually added the comma selector by clicking the name of the selector in the top toolbar and customising the Code field. It’s not actually possible to edit the selector via the code editor right now. But this will change very soon. The feature I’m currently working on is making the GUI styles and custom code styles interchangeable. So you can edit via either method for properties that are supported with GUI fields. I will make the selector code editable via the editor before releasing this feature.

Thanks,
Sebastian