[Improvement request] Highlight the currently active selector in the folder list

Tagged: ,

Author Posts

ddenev February 18, 2018 at 8:59 pm

Hi Sebastian,

Would it be possible to add highlighting for the currently active selector in the folder list? This would help more quickly find when needed.

Thanks!

Sebastian February 19, 2018 at 12:15 pm

Hey,

Do you mean style the menu item a bit differently from all the other items in the folders & selectors menu (as opposed to highlighting the elements on the page the currently active selector targets, which can be done using View > Highlight or a keyboard shortcut: Ctrl + Alt + H)?

If so, I’m happy to add this to our todo list. When it comes to finding the currently active selector though, have you noticed that the currently active selector is referenced in the top toolbar:

Selectors >> [current folder] >> [active selector]

Cheers,
Sebastian

ddenev February 19, 2018 at 12:56 pm

Hi Sebastian,

Yes, you are correct – I mean styling the folder menu in such a way that the currently active selector is highlighted.

I know that the selector is in the top row but sometimes I need to find it in the folder list just to be able to find another selector which is close to it (I order them logically) and prev/next will not do since I am not sure which was the previous or the next selector 🙂

I know it sounds silly and I guess this could be a low prio request therefore 🙂

Best regards,
Drago

Sebastian February 19, 2018 at 3:54 pm

I see what you mean. That would be a nice touch, and nice touches are never silly 🙂

It’s on the list.

ddenev May 1, 2018 at 1:54 pm

Dear Sebastian,

Thank you so much for implementing this feature! It is a lifesaver indeed!

Now that we have it implemented, would it be OK if I suggest a slight improvement in the styling of the selection? Currently it is very light and I still search for it – I would prefer it to be somehow more eye-catching 🙂

Here are some ideas:

  • Make the text bold
  • Invert the background and color – make the color #FFF and the background #3C4658 (this is the color used in the ruler). In this case the icons would also need to be inverted.
  • Tell us how to customize this ourselves 🙂

Thank you again for listening to your users!

Best regards,
Drago

Sebastian May 2, 2018 at 10:15 am

Hi Drago,

I’ll discuss potential design adjustments with Monika. If you want to implement something for yourself right now, you can add the following code to your theme’s functions.php file:

// Drago Microthemer override CSS code
add_action('admin_head', 'custom_mt_selector_in_focus');
function custom_mt_selector_in_focus() {
	echo '<style>
    .strk.strk.strk-sel.in-focus:not(.hello-me) {
		background: yellow;
	}
  </style>';
}

Replace background: yellow; with whatever styles you like.

Cheers!
Sebastian

ddenev May 2, 2018 at 4:53 pm

Hi Sebastian,

Thank you so much for the suggestion! I implemented it and it works excellent!

(I am using the Code Snippets plugin to enable this in admin only)

Best regards,
Drago

PS: Just a small edit to the code above: it should be “.strk.strk-sel.in-focus:not(.hello-me)” (one .strk less) 🙂

Sebastian May 3, 2018 at 8:27 am

OK, I’m glad it works without the extra .strk, that was actually an intentional hack to ensure the selector is more specific that the one in MTs stylesheet (repeating the class with no space between adds 10 specificity points). But I guess WP adds the code later in the HTML document, so the selector overrides MT by coming later in the source order.

Also, I think the admin_head hook ensures the above code only displays on the admin side. But I can see how using the Code Snippets plugin might be more convenient 🙂

Cheers,
Sebastian

You must login or register to reply to this topic.