Link styling [edit a click event style]

Author Posts

venorme April 4, 2015 at 8:35 am

Heads up! this post was created when Microthemer was at version 3. The current version is 7. Some references to the interface may be out of date.

Hello.
Trying to style menu. Did great with current, active and hover but cant seem to get it right. When I hover style is ok, when I click and keep mouse over clicked button style is ok, but when I click and move mouse from the button – link styling is changing. Which selector should I go for (tryed em all). It`s defo not active link.

Sebastian April 4, 2015 at 9:26 am

Hi there,

Please could you send me a link to your site and let me know which internet browser you’re using?

Many thanks,
Sebastian

venorme April 4, 2015 at 9:30 am

Thank you for swift response.
It’s development site ukrbot.com
Chrome 34

Sebastian April 6, 2015 at 10:18 am

Hey,

Are you referring to the dotted lines that appear when you click on one of your menu links? https://themeover.com/wp-content/uploads/2015/04/dotted-lines.png

Or are you referring to this affect that only occurs in Chrome when you drag a link: https://themeover.com/wp-content/uploads/2015/04/dragged-link.png

I think the later is caused by some native Chrome styling. The same thing happens if you drag a link on themeover.com. I’m not sure if this can be overridden I couldn’t find any info online about it. It’s not hugely common for people to try to drag links in a menu though.

But are we even talking about the same thing?

Cheers,
Sebastian

venorme April 6, 2015 at 10:43 am

Here how looks normal link with mouse hovered on it Here

And here how it looks like after I press the link and move mouse away Here

Sebastian April 6, 2015 at 11:05 am

Ah I think I see what you mean now. I believe the blue link is caused by a transition effect. Microthemer doesn’t have UI fields for transition yet so you’ll need to override this by pasting the following code into the custom code editor (see icon in top right of interface)

li.menu-item a {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

If you want to disable the transition effect on all links (not just menu links) you would use this code instead:

a, 
li.menu-item a {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

Please let me know how you get on.

Cheers,
Sebastian

venorme April 6, 2015 at 11:23 am

Pity to say but it does not work. I ve tryed both microthemer css and custom css from theme.
Getting these types of warning in MThere and here

Abland April 6, 2015 at 10:34 pm

Hi, venorme,

Maybe try adding focus to your hover selector.
Where you have:
li.menu-item a:hover

add focus also:
li.menu-item a:hover,
li.menu-item a:focus

Sebastian April 7, 2015 at 10:37 am

Ah yes, I see now that your theme has some styles for links in the :focus state.

a:focus {
color: #0a6ebd;
text-decoration: underline;
}

Hopefully Abland’s suggestion will work for you. BTW the warnings in the code editor are not critical, they’re just providing extra guidance on how to write less code or support more browsers with browser prefixes.

venorme April 7, 2015 at 6:02 pm

That was great idea. Working as intended now.
Thank you both Sebastian and Abland.
Wasn`t even aware of focus settings existence.


venorme April 7, 2015 at 6:11 pm

BTW after todays update microthemer runs way faster.
Wanted to ask are you planning to add that focus selector? Had no idea it`s coded into theme I am using

Sebastian April 8, 2015 at 1:37 am

Ah that’s brilliant that you’ve noticed a bump in speed.

And yes, we can add the :focus pseudo selector to the wizard for link and form elements.

Cheers,
Sebastian

You must login or register to reply to this topic.