Targeting Different States of an Element

This topic contains 11 replies, has 2 voices, and was last updated by  Sebastian 2 months, 1 week ago.

Author Posts

omojesu

Hi – Is there any plans to combine targeting different states of an element together? For example, if we want to make CSS changes to an element’s active, hover and normal state, currently, one would have to make the necessary changes multiple times since there is no option to target the other states in the same session. This is not very efficient at all? The other major CSS plugins allows you to make those changes without having to retarget the same elements multiple times.

In summary,
Use case: You want to change the font color and background of a text element in the normal, active and hover states.
MT Current Workflow:
1) Select the text element
2) Change the font color and add the background
3) Reselect the same text element
4) Click the gear icon and select :hover state
5) Change the font color and add the background
6) Reselect the same text element
7) Click the gear icon and select :active state
8) Change the font color and add the background

Ideal Workflow found in competitive CSS plugins:
1) Select the text element, change the font color and add the background
2) Select the hover state, make applicable changes
3) Select the active state, make applicable changes


Sebastian

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.


omojesu

Thanks Sebastian. This is similar to what I had in mind. I was actually planning to mock this up but you seem to be on the right track.

My suggested approach to account for multiple selectors is instead of a single select for the states as you are proposing, make it a multi select or checkbox option such that users can select which of the states they want to target at the same time. If only one state is selected, then only that state is targeted and so forth.

BTW – A somehow related issue I encountered again was when I was attempting to target the active page menu. It was so convoluted that it took me a long time to do. Infact, I had to resolve to doing a page id level targeting of each individual menu item to be able to make css changes highlighting the active menu for each page when in reality it should just be one single site level targeting.

The issue was that I couldn’t target the css class of the active menu. MT was only detecting the id of the entire menu item set so any changes I made to that id was applying not only the active menu item I was after, but to all the menu items.


Sebastian

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


omojesu

I have sent the info via the Contact form as requested.

Thanks


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


omojesu

Thanks.

Disabling the previous CSS targets doesn’t seem to work. When I disabled those, the expected states on the elements are lost even with your selected targets enabled. Please see animated video below for what happens when I disabled those css targets.

I have sent a contact form of a link to an animated video to show you what happens. Pls feel free to disable those previous sectors as well so you can verify.


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


omojesu

Wow! Thanks for the above and beyond support. I agree there was a gap in communication.

While your new selectors work as expected, there are still some gaps:
1) Active bottom nav is no longer highlighted and appears not to be targeted in your selector. When on a page, the applicable top menu item is highlighted but this is not the case for the bottom nav for that same page.

2) The Gallery main nav menu is no longer highlighted when on any of the sub menu gallery nav page.


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


omojesu

Sebastian – A super gem you are indeed! Your customer support is unparalleled and you are always raising the bar and very responsive to feedback. keep up the good work buddy!

Hopefully, you’ve seen why it is super important to streamline the targeting of multiple states of the same selectors in a single bit:)

In selecting multiple ids/class to target, I am assuming you had to manually add the comma separated lists of ids/classes via the code editor like below , I assume?
“.current-menu-item a, .sub-menu .current-menu-item a, .current-menu-ancestor a {”


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

You must login or register to reply to this topic.