Changing hover text color/size, background color

  • 1
  • Question
  • Updated 5 years ago
  • Answered
  • (Edited)
Hello everyone,

I've been geting use to using the CSS a little more, but I cant seem to find out how to change the hover text size, color etc, for the links on my site.

The white blan box just wont due :P

Ive been searching all over google and in these forums, but I keep seeing alot of the same thing and it mostly has to do witht he HMTL.

Is there away I can change thing in the CSS to be site wide ?

Im using the midnightalley template.

Thank you for your time.
Kevin
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Kevin

It's quite easy to change the hover properties of your text elements, using the Site CSS. When you open the Site CSS Editor, click on the "Site CSS" tab on the right-hand side to display the default CSS of your Style template. Now browse for the word "hover". You can use the browser search functionality to make it easier. You will find an a, sys_text, menu tag, etc. where the hover properties can be edited. Copy the respective section and paste it to your overrides field on the left. Make your changes and click on the preview tab to check.

If you need help with a particular section/code, please let me know.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
Hello Stefan

Yeah I have been playing with that for awhile not in the CSS, even before I made the post.
I have a few sections I have been playing with and neither of them seem to do nothing.

A. Changing this one changed the color of the link when hovered over the link, just like I wanted.
}

a:hover {

text-decoration: none;

color: yellow;

}

The rest of these I don't see any changed when I alter them, maybe im doing it wrong ?

B.
}

#menu a:hover {

text-decoration: underline;

}

C.
}

.sys_footer a:hover {

text-decoration: none;

}

D.
}

.sys_txt a:hover {

text-decoration: none;

color: #FFFFFF;

}
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
How come this post says answered when its not ?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Kevin

When I check the left-hand side box (overrides box) of your Site CSS Editor, it looks like the complete original CSS code has been copied over. This is not the correct way to work with CSS overrides, and it can cause unwanted results.

What you need to do is to only copy code sections that you'd like to change, e.g. if you have
body {

color: #ffffff;
background-color: #000000;
with: 500px;
height: 100%;
}

and you just want to change the font colour, you will add this to your overrides box:
body {

color: #f3f3f3;
}

Please remove all redundant code from your overrides box and check the result again. If it's still not working, I'll be happy to look at it again if the overrides box has been cleaned up.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
o7 Stefan,

I would like to fix the cluter.
You are correct tho I did copy the whole override.
Above the override box it says "Site CSS Overrides Copy the rules from your existing Site CSS and make customizations to override them"
So I did just that, this is the first time I have done any of this.
This is my first website and what I have learned about CSS is all done in less then a week.

Ive already played with some of the code, so now I have to figure out how to add that with the whole CSS override I guess.
Thankfully Im able to make more then one site lol.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Kevin

You've got a point that the sentence you quote from the CSS Editor can be misunderstandable. Did you know that we have a tutorial on how to use the Site CSS? The tutorial will give you important hints and point out the most frequent code edits.

If you clean up your existing CSS in your overrides box and let me know what else to change, I'll be happy to assist you further.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
Clean!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Kevin

Thank you for cleaning up ypur Site CSS. If you wish to change the behaviour of your menu links on mouse-over, please add this code to the left-hand side overrides box of your CSS Editor:
#menu a:hover {

color: red;
text-decoration: none;
}

This will remove the underline and display the menu link red when you hover over one of them with your mouse. You can edit this code to your liking by changing the color code. For web-friendly colours please see e.g. our Colour Code Chart.

If you'd like to change anything else, please specify on this thread, and I'll be happy to assist you further.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like
Sorry, I didnt mean that kind of hover text thats more of a mouse over highlight.
Again this is all new to me so pardon my ignorance.
What im looking to change is the text/box color for this:

class=body_con

Tooltip maybe its called ?
Or maybe I have to edit the HTML evertime I wanna change it ?
lol I dont even know how to stop this code.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Kevin,

We are unclear on what you're trying to accomplish. Could you please send us a screenshot or share with an example with us of what you're trying to do and perhaps we can help further.
Photo of Kevin Norman

Kevin Norman

  • 39 Posts
  • 1 Reply Like


This could be very well be changin in my site idea, im now looking to have icons and possibly leave the link itself alone. I have a few questions about that aswell.

If I was to tak that link, how would I imput an icon or picute beside it if im using the HTML editor ? I need to use the HTML editor because its the only way I can make the javacript links im making.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Kevin

I see. The tooltip bubble is an HTML default feature which displays on mouse-over when you add a title attribute to the HTML of your links. I personally can't think of a way to customize this tooltip, but I know that there are other ways to create a tooltip by using Javascript. However, I'm not familiar with the code it takes to achieve this, so the only thing I can suggest is that you do a websearch or ask our advanced users on the forum for assistance.