Forum Settings
Forums
Top
  >  
Forum
  >  
Shishio's Custom MyAnimeList
  >  
Shishio's Custom MyAnimeList D...
  >  
[CSS - MODERN] Custom row high...
RecentWatchedIgnoredSearch Forum

[CSS - MODERN] Custom row highlights

New
Nov 6, 2016 9:53 PM
#1
Shishio-kun

Offline
Feb 2010
11293
This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862



Thanks Cateinya for translating this from the classic tutorial!

There's a lot of ways to make your row highlight when you put your cursor on any part of it. Some layouts have these by default but you'd have to rip the codes out to apply it to any layout. I've done that and posted them below- all you'll have to copy and paste them to the bottom of your CSS edit box. Check back as I'm sure more highlight styles will be added over time!

See the bottom of the post for info on how to customize the highlights, its pretty easy.


Dark highlight with font raise on hover


Taken from this layout: http://myanimelist.net/forum/?topicid=412787

/****************************/
/* Silver highlight and font resize on Hover */
/****************************/
.list-table-data:hover td {
background-color: rgba(72, 64, 87, 0.6) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;

font-size: 12px !Important;
-moz-transition: .4s ease;
-webkit-transition: .4.5s ease;
-o-transition: .4s ease;
}





Aquamarine-row hover


Taken from this layout: http://myanimelist.net/forum/?topicid=412713


/****************************/
/* Aqua Highlight on Hover */
/****************************/
.list-table-data:hover td {
background-color: rgba(4, 150, 100, 0.9) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}




Blue-row hover


Taken from this layout: http://myanimelist.net/forum/?topicid=412713


/****************************/
/* Blue Highlight on Hover */
/****************************/
.list-table-data:hover td {
background-color: rgba(80, 50, 225, 0.9) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}



Purple-row hover


Taken from this layout: http://myanimelist.net/forum/?topicid=393393&show=20#msg19182504

/****************************/
/* Purple Highlight on Hover */
/****************************/
.list-table-data:hover td {
background-color: #AC00E6 !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}






White highlight with clear black font


Taken from this layout: http://myanimelist.net/forum/?topicid=450489


/****************************/
/* White highlight with black font on Hover */
/****************************/
.list-table-data:hover td {
color: black !important;
background-color: white !important;
opacity: 1 !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}

.list-table .list-table-data:hover a{
color: black !important;
}






Pink-line hover


Taken from this layout: http://myanimelist.net/forum/?topicid=393503&show=40#msg19224524


/****************************/
/* Pink Highlight on Hover */
/****************************/

.list-table-data:hover td {
background-image:url(http://dl.dropbox.com/s/7jfq7ci2jzsjqt9/hl2.png);
background-repeat: no-repeat;
background-size:100% 100%;
}

/* Highlight Image for First Column */
.list-table-data:hover td:first-of-type
{background-image:url(http://dl.dropbox.com/s/fvaxgt22bl9uubn/hl3.png);}

/* Highlight Image for Last Column */
.list-table-data:hover td:last-of-type
{background-image:url(http://dl.dropbox.com/s/fync1jnnp6ijswg/hl4.png);}

.list-item {
background-color: transparent !important;
}








Dark-red line hover


Taken from this layout:http://myanimelist.net/forum/?topicid=393503&show=40#msg19225198



/****************************/
/* Dark-red Highlight on Hover */
/****************************/

.list-table-data:hover td {
background-image:url(https://dl.dropbox.com/s/mh1xxfqpkpebxm8/hl2.png);
background-repeat: no-repeat;
background-size:100% 100%;
}

/* Highlight Image for First Column */
.list-table-data:hover td:first-of-type
{background-image:url(https://dl.dropbox.com/s/1brcvy03yoln0eu/hl3.png);}

/* Highlight Image for Last Column */
.list-table-data:hover td:last-of-type
{background-image:url(https://dl.dropbox.com/s/p58vjxqufjitetw/hl4.png);}





How to customize the highlights:
There's not many codes so these are easy to edit! Keep in mind some highlights use background images for the highlight effect or background color.

If its a background image you can just switch it out with your own background image you want to use.

For background color, change the color name or numbers. By numbers, I mean when instead of a color like blue codes use a HTML color code like rgba(4, 150, 100, 0.9). The numbers in parenthesis mean: amount of red, green, blue, and opacity. They mix together for a custom color rather than a named one. You can change the numbers for red/blue/green from 0 to 255. And you can change opacity from 0 (transparent) to 1.0 (fully visible) or any decimal amount in between. Use this online color generator to make it easier for you: http://css3generator.com/ and choose RGBA, generate your colors and opacity, then copy the background-color code for your own custom row color!

The transition codes affect how fast the highlight comes on. -moz- is for Firefox, -webkit- is Chrome/Safari transitions and -o- is for Opera. You'll see a number with an "s" like 1s. This means it takes 1 second to come in. Simply adjust the number for faster or slower highlights, like for faster highlights at 4/10s of a second:

-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;

btw when customizing, leave the !important codes intact on the rows so these highlights override any others on your layout.

Also, its possible to mix highlights with background colors and background images.





Making rows glow when you point to them (default, Clarity, and some other layouts with rows)

Box shadow generator:
https://www.cssmatic.com/box-shadow
/*------------------------------*\
GLOWING ROWS ON HOVER
Make a new box shadow here
https://html-css-js.com/css/generator/box-shadow/
\*------------------------------*/

.list-table-data:hover{
box-shadow: 1px 1px 15px 9px #FF0000;
}
Shishio-kunFeb 21, 2023 10:02 AM
Reply Disabled for Non-Club Members
Jan 15, 2017 3:24 AM
#2
Sa_Kage

Offline
Jan 2016
26
Hey!

I think I did a minor improvement on the highlighting with colors...
It annoyed me, that the status color was gone on the highlighted row, so I tried a bit an finally found some code, that did the job.
It may be that there are better ways to archieve that, but that's the one I found.
Just append the following code to your custom CSS:
.list-table-data:hover .data.status.watching {
  background-color:#2db039 !important;
}

.list-table-data:hover .data.status.completed {
  background-color:#26448f !important;
}

.list-table-data:hover .data.status.onhold {
  background-color:#f1c83e !important;
}

.list-table-data:hover .data.status.dropped {
  background-color:#a12f31 !important;
}

.list-table-data:hover .data.status.plantowatch {
  background-color:#c3c3c3 !important;
}
Nov 16, 2018 8:37 PM
#3
Shishio-kun

Offline
Feb 2010
11293
Sa_Kage said:
Hey!

I think I did a minor improvement on the highlighting with colors...
It annoyed me, that the status color was gone on the highlighted row, so I tried a bit an finally found some code, that did the job.
It may be that there are better ways to archieve that, but that's the one I found.
Just append the following code to your custom CSS:
.list-table-data:hover .data.status.watching {
  background-color:#2db039 !important;
}

.list-table-data:hover .data.status.completed {
  background-color:#26448f !important;
}

.list-table-data:hover .data.status.onhold {
  background-color:#f1c83e !important;
}

.list-table-data:hover .data.status.dropped {
  background-color:#a12f31 !important;
}

.list-table-data:hover .data.status.plantowatch {
  background-color:#c3c3c3 !important;
}


OH wow that's really cool, thanks!
Oct 3, 2023 2:45 PM
#4
IridescentJaune

Offline
Jun 2021
2315
Reply to Sa_Kage
Hey!

I think I did a minor improvement on the highlighting with colors...
It annoyed me, that the status color was gone on the highlighted row, so I tried a bit an finally found some code, that did the job.
It may be that there are better ways to archieve that, but that's the one I found.
Just append the following code to your custom CSS:
.list-table-data:hover .data.status.watching {
  background-color:#2db039 !important;
}

.list-table-data:hover .data.status.completed {
  background-color:#26448f !important;
}

.list-table-data:hover .data.status.onhold {
  background-color:#f1c83e !important;
}

.list-table-data:hover .data.status.dropped {
  background-color:#a12f31 !important;
}

.list-table-data:hover .data.status.plantowatch {
  background-color:#c3c3c3 !important;
}
@Sa_Kage Thanks for the code. I've added the code in both my anime and manga lists but I always wondered why I couldn't make it work for my manga list. I just realized that I forgot to change watching and plantowatch to reading and plantoread. Now, the status colors are also showing in my manga list. It took me ages to realize that. 🤦 Haha.

So here's the code for manga lists:
.list-table-data:hover .data.status.reading {
  background-color:#2db039 !important;
}

.list-table-data:hover .data.status.completed {
  background-color:#26448f !important;
}

.list-table-data:hover .data.status.onhold {
  background-color:#f1c83e !important;
}

.list-table-data:hover .data.status.dropped {
  background-color:#a12f31 !important;
}

.list-table-data:hover .data.status.plantoread {
  background-color:#c3c3c3 !important;
}







Reply Disabled for Non-Club Members
See All Discussions

More topics from this board

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Jul 21, 2017

359 by CLModerno »»
May 5, 7:50 PM

» [CSS - MODERN] Add side renders to list layouts (including for each category!)

Shishio-kun - May 15, 2021

3 by gwynsyl »»
May 5, 1:41 PM

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Apr 15, 2010

7819 by Nunphell »»
May 5, 12:35 PM

» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!

Shishio-kun - Dec 10, 2023

9 by hacker09 »»
May 2, 9:29 PM

Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fix

Shishio-kun - Nov 17, 2023

1 by Zelathis »»
Apr 29, 7:49 AM

MoreTop Anime

  1. 1 Sousou no Frieren
  2. 2 Fullmetal Alchemist: Brotherhood
  3. 3 Steins;Gate
  4. 4 Gintama°
  5. 5 Shingeki no Kyojin Season 3 Part 2

MoreTop Airing Anime

  1. 1 One Piece
  2. 2 Hibike! Euphonium 3
  3. 3 Haikyuu!! Movie: Gomisuteba no Kessen
  4. 4 Kono Subarashii Sekai ni Shukufuku wo! 3
  5. 5 Yuru Camp△ Season 3

MoreMost Popular Characters

  1. 1 Lamperouge, Lelouch
  2. 2 Levi
  3. 3 Monkey D., Luffy
  4. 4 Lawliet, L
  5. 5 Roronoa, Zoro
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login