Welcome, Guest. Please login or register.

ShoutBox!

 

Skhilled

2024-03-24, 09:52:09
It may be released as early as today...if we all agree on it. ;)
 

Skhilled

2024-03-24, 09:37:46
Thank you, sir!  :)
 

Ken

2024-03-24, 09:28:38
I like it. Dark themes are not my first choice, but I like the crisp, clean lines.  :thumbup:
 

Skhilled

2024-03-24, 08:56:28
The original theme is here:

https://www.jpr62.com/demos/index.php
 

Skhilled

2024-03-24, 08:53:17
You can always see the latest previews here but registration is disabled:

https://skhilled.com/cztest/index.php
 

Ken

2024-03-24, 08:50:36
Any previews yet?
 

Skhilled

2024-03-24, 08:46:18
We almost have another theme completed.  :laugh:
 

Skhilled

2024-03-24, 08:45:18
What's up, bro?  :drinking:
 

Ken

2024-03-24, 08:42:45
Hi Steve.  :)
 

Skhilled

2024-02-21, 21:11:25
I missed that one. LOL

Recent Topics

TP Articles


Search in titles
Search in article texts

Author Topic: How To Make Things Change Colors Upon Hovering  (Read 3734 times)

0 Members and 1 Guest are viewing this topic.

Offline Skhilled (OP)

  • Administrator
  • *
  • Posts: 8972
  • Gender: Male
  • All of my passwords are protected by amnesia...
  • View Gallery
    • Buildz Hosting
How To Make Things Change Colors Upon Hovering
« on: August 17, 2019, 09:07:02 AM »
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:

Code: [Select]
/* 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:

Code: [Select]
/* 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:

Code: [Select]
background: #000;

Offline Ken

  • Vietnam Era Veteran
  • Administrator
  • *
  • Posts: 11658
  • Gender: Male
  • View Gallery
Re: How To Make Things Change Colors Upon Hovering
« Reply #1 on: August 17, 2019, 11:47:22 AM »
Neat looking trick.  :thumbup:
"Not all who wander are lost."-Tolkien
Yesterday When I was Young.

Offline Skhilled (OP)

  • Administrator
  • *
  • Posts: 8972
  • Gender: Male
  • All of my passwords are protected by amnesia...
  • View Gallery
    • Buildz Hosting
Re: How To Make Things Change Colors Upon Hovering
« Reply #2 on: August 17, 2019, 12:24:20 PM »
Next I plan on trying to make the boards on the home page do the same.  :wink: