2 quick question regarding mouse over

[jok3r]

Hello all,

Need some help on how to change two things regarding mouse over.

1) Forum menu (Home/Forum/Admin/Profile/Members etc) how do i remove changes when Hover one of those categories with the mouse?

2) Custom Pages how can i remove all effects when mousing over a link that does not have a target?

Thank you for any help

[Tumbleweed]

Jun 19, 2017 12:13:33 GMT -8 jok3r said:

Hello all,

Need some help on how to change two things regarding mouse over.

1) Forum menu (Home/Forum/Admin/Profile/Members etc) how do i remove changes when Hover one of those categories with the mouse?

2) Custom Pages how can i remove all effects when mousing over a link that does not have a target?

Thank you for any help

To change the menu, head to:Admin>Themes>Advanced Styles & CSS>Visual Editor>Header (Top)>Forum Banner>Navigation Bar>Button>Text and then Hover
Just make sure your "hover" is the same as the "text" and you shouldn't have any affect on hover.

On question two, do you mean if a link doesn't have: target="_blank" or target="self", etc? If so, I'm not sure of a way to target just those except by writing the html markup so you can change them. Like giving those without a target a class. I'm not even sure if that is what you are asking. 

Actually, on question two, I did a bit of digging so if you are talking about what I said, your css would be something like this for a custom page:


a{color:red!important;}
a:hover{color:blue!important;}
a:hover:not([target]){color:red!important;}

The bolded section is what is looking for links with no "target" attribute and thus you'd make it the same style as used on a regular link you are not hovering over, which is in blue. 

[jok3r]

Jun 19, 2017 21:03:25 GMT -8 Tumbleweed said:

To change the menu, head to:Admin>Themes>Advanced Styles & CSS>Visual Editor>Header (Top)>Forum Banner>Navigation Bar>Button>Text and then Hover
Just make sure your "hover" is the same as the "text" and you shouldn't have any affect on hover.

On question two, do you mean if a link doesn't have: target="_blank" or target="self", etc? If so, I'm not sure of a way to target just those except by writing the html markup so you can change them. Like giving those without a target a class. I'm not even sure if that is what you are asking. 

Actually, on question two, I did a bit of digging so if you are talking about what I said, your css would be something like this for a custom page:


a{color:red!important;}
a:hover{color:blue!important;}
a:hover:not([target]){color:red!important;}

The bolded section is what is looking for links with no "target" attribute and thus you'd make it the same style as used on a regular link you are not hovering over, which is in blue. 

Thank for checking.

On the first, everything works now as intended. About the second, i can give an example:

<a href="#101" target="_parent">Example1</a>  
<tr><th><a name="101" class="goto">Example1</th></tr>
In a sentence for unfamiliar people: What it does is when clicking on "example" from the fist line, page will scroll down to "example" in the second line".

The problem comes when mousing over the "example1" in the second line. (text is "shrinking")

This is a Theme problem because it works as intended on every other Theme except my own.

[Tumbleweed]

jok3r , 

First, in that example, not sure if you copied directly from your custom page or just typed an example on the fly but you are missing the closing </a>(blue) on the a name one.

<a href="#101" target="_parent">Example1</a>
<tr><th><a name="101" class="goto">Example1</a></th></tr>

I did do some testing on my own custom page and it seems typical css for links does not affect "<a name..." links. Why it is o.k. when not hovering over it but not o.k. when hovering over it, I don't know without going through all your css. So try adding this to your custom page, click on the html tab (Set the 14px to whatever size you want.) 

<style>
a:link{font-size:14px!important;}
a:hover{font-size:14px!important;}
a:not([target]){font-size:14px!important;}
a:hover:not([target]){font-size:14px!important;}
</style>

You could and should actually move that to your style sheet but of course you'd need some identifier so the css targets only the custom page and of course remove the style tags.

Edit: Actually, thinking about this more, depending upon how you have your page set up, this could affect your menu buttons if you have them showing so you really need to have a unique id around all the content/links you have on your custom page so you can target only the content within that id.

So if you don't have anything already, you should probably put a div around your whole custom page with a id: Like:

<div id="custom-page-one">
html custom page content here with all links, etx
</div>

And then all your css would have that id:

#custom-page-one a:link{font-size:14px!important;}
#custom-page-one a:hover{font-size:14px!important;}
#custom-page-one a:not([target]){font-size:14px!important;}
#custom-page-one a:hover:not([target]){font-size:14px!important;}

If none of this is helping you then we probably need a link to that page and it would need to be viewable to guests.

[jok3r]

Thank you for pointing on how to fix it it helps!

Actually it was copied from an under construction page and i had forgot the closing </a> on many cases.

[Tumbleweed]

Jun 20, 2017 12:01:36 GMT -8 jok3r said:

Thank you for pointing on how to fix it it helps!

Actually it was copied from an under construction page and i had forgot the closing </a> on many cases.

I actually edited my last post several times so make sure you are reading my last edit. Let me know if any of the suggestions work.

[jok3r]

Thank you for checking Tumbleweed. I also checked with the person who made the html code in the first time and pointed me to a similar code fix.

Later i also managed to locate the source of the problem in Theme's CSS. It was the a:hover variable
What i used to have:
a:hover { color: Link_hover_color; font: Link_hover_font; text-decoration: Link_hover_decoration; }
The change i made (i can only delete since i am a junior in coding):
a:hover { color: Link_hover_color; text-decoration: Link_hover_decoration; }

[Tumbleweed]

Jun 21, 2017 1:12:03 GMT -8 jok3r said:

Thank you for checking Tumbleweed. I also checked with the person who made the html code in the first time and pointed me to a similar code fix.

Later i also managed to locate the source of the problem in Theme's CSS. It was the a:hover variable
What i used to have:
a:hover { color: Link _hover_color; font: Link _hover_font; text-decoration: Link _hover_decoration; }
The change i made (i can only delete since i am a junior in coding):
a:hover { color: Link _hover_color; text-decoration: Link _hover_decoration; }

Glad you were able to locate the css. So are you all good now?

[jok3r]

Yes Thank you for the very fast support!