Add underline to link text on hover

This topic contains 4 replies, has 2 voices, and was last updated by  Sebastian 4 years, 6 months ago.

Author Posts

graffig

Hey folks – really daft question time!

What area within the Themeover styling panel can I find the option to add an underline to link text on hover – just cannot find the text-decoration option – could add manually, however, would like to see if I’m missing this styling option in the panel

Many thanks in advance


Sebastian

Hey,

No worries! It’s second from right on the Font property group. I can see why you would be looking in the Text group as the CSS property starts with text-, but it seemed odd to separate it from bold and italic, which belong to the Font group (font-…). I guess I was thinking of non-coders when I made that decision many moons ago.

BTW you can enable text labels for the properties via the View menu. Or by using the keyboard shortcut Ctrl+Alt+L (my preferred options for easily toggling on and off).

I’ve been considering have text labels on by default. What are your thoughts on that?

Cheers,
Sebastian


graffig

Hi Sebastian,

Thank you so much for getting back to me so quickly!

Oh, and many thanks for the text label options – I like the ability to toggle on and off via the keyboard shortcut – probably better for others as gives folk a choice then I suppose.

Found the Font underline styling option 🙂 Is there the ability to add CSS or style so the option only shows on hover? Love the ability to drag the selectors into the different folders btw.

Thanks again Sebastian

Daron


graffig

Sorry Sebastian – one more question for the day – appreciate you getting back to me on a Saturday BTW!

Just wondering as per the enclosed screen grab link: https://www.dropbox.com/s/ior1jq4dgbbdjmt/menu%20item%20seperators.jpg?dl=0
if there is a way to change the height of these border separators for the menu items – or would I need to add a different type of styling to achieve a ‘shallower’ height of separator?

Thanks again


Sebastian

Hey Daron,

Sorry for the slow reply, I only had a short window to reply to forum post over the weekend 🙂

You can change the height of the separators in your image by lowering the top and bottom padding of the menu items. However, this may be undesirable because the user will have to be more precise when clicking on the menu items without the surrounding padding.

I experimented with replacing the top and bottom padding with a top and bottom transparent border of the same height, but it created a faded effect at the top and bottom rather than completely shrinking the height of the side border:

transparent top and bottom border

So yes, I think you need to achieve this effect without using borders. This can be done using an ::after pseudo element. The following video shows the steps involved:

http://somup.com/cFehXaVAi0

And if you want to not have the separator for the last menu item you can create a separate ::after pseudo selector just for that (I forgot to add this when I made the first video): http://somup.com/cFehXpVAiU

Note, the sampled/recent styles shown in the dropdowns in the video haven’t been released yet. The feature needs a bit of refinement, but will be available very soon!

Cheers,
Sebastian

You must login or register to reply to this topic.