Recent Topics

Members
Stats
  • Total Posts: 10,737
  • Total Topics: 1,372
  • Online today: 229
  • Online ever: 879
  • (Jan 21, 20, 05:49:15 PM)
Users Online
Users: 0
Guests: 188
Total: 188

How To Make Things Change Colors Upon Hovering

Started by Skhilled, Aug 17, 19, 10:08:24 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Skhilled

I've found a way to do this in the SMF 2.1 RC2 version but will work in any modern version of SMF.

I found this by accident working on a new theme that uses the ".bg.even/.bg.odd" code in index.css. There's code for alternating colors like in a topic, in the admin, etc. For instance, open any topic with more than one post in it on this forum. You'll notice that the posts alternate between two colors. That part uses the ".bg.even/.bg.odd" code or ".windowbg/.windowbg2" (mostly for SMF 2.0.15).

You can see it in action here on the help, calendar, and member pages:

https://skhilled.com/rc2/index.php?theme=14

What you'll need to do is create a "hover" for the code in question so it changes it to another when you put your mouse over it. ;) The following is code from 2.1 RC2:

/* Here comes the glory... */
.windowbg:nth-of-type(even), .bg.even {
    background: #1f1f1f;
}
.windowbg:nth-of-type(odd), .bg.odd {
    background: #282828;
}


Change it to this:

/* Here comes the glory... */
.windowbg:nth-of-type(even), .bg.even {
    background: #1f1f1f;
}
.windowbg:nth-of-type(even):hover, .bg.even {
    background: #000;
}
.windowbg:nth-of-type(odd), .bg.odd {
    background: #282828;
}
.windowbg:nth-of-type(odd):hover, .bg.odd {
    background: #000;
}


Just change the background of the following code to whatever you want the hover color to be:

background: #000;