Forum Settings
Forums

colourful modern list (adapted from Clarity)

New
Oct 14, 2024 9:28 AM
#1

Offline
Sep 2010
283
notice: only cute people can use this! them's the rules

i've finally decided to share my take on Valerio_Lyndon's 'Clarity'

2-in-1: optionally install Stylus + extra code to toggle between cover/list
also: changeable patterns/avatars, spooky dark mode, hover-able notes,
ㅤㅤ "rewatch" count, .5 decimal scoring, and nearly 200 icon tags, etc.
(note: make sure "hardware acceleration" is enabled in your browser for smoother performance!)





install (works for both anime/manga)...
1. download the theme from -> here <-
2. go to list style design, switch template to modern, save, click on 'default theme'
3. expand 'add custom css' box at the bottom, paste downloaded code, save
ㅤ 3.5 change the manga @import at the top of the code to your USERNAME, save
ㅤㅤ * (your manga list needs to be set to PUBLIC for this to work)
4. go to list preferences, check -> these boxes <-

optional (if you want list view as well)...
1. install Stylus browser extension (chrome / firefox)
2. download the extra code from -> here <-
3. open Stylus and select 'write new style'
4. select 'import', paste code, 'overwrite', name it anything
5. change the USERNAME in 'urls matching the regexp' (two locations) to your username
6. toggle from the extension bar (while on your list) to switch views


how to use tags

advanced tags

"more info" script

available patterns

customisations

dark mode

pixiv artists: various, watching, completed, on hold, dropped (for any other artwork i've used, just ask (๑˃̵ᴗ˂̵)و)
other stuff: crayon for mal (site theme), crayon for anilist, paimon's paintings everywhere (genshin mod)
thanks to: Valerio_Lyndon (obviously!), Shishio-kun (covers), Cpt_Mathix (script)

sunnysummerdayFeb 13, 3:13 AM
Pages (2) [1] 2 »
Oct 14, 2024 12:06 PM
#2

Offline
Feb 2010
12090
Looks amazing!
Oct 14, 2024 4:39 PM
#3

Offline
May 2020
13
This the cutest list theme ever!!!!!!! ૮꒰ ྀི◜๑◝ ꒱
/ᐠ。‸。ᐟ\
Oct 14, 2024 6:07 PM
#4
Offline
Jul 2018
562289
Aww this so cute I really like your list I hope you can also change picture from current anime to PTW this is cute.
Oct 18, 2024 2:17 PM
#5

Offline
Sep 2010
283
3.7a
- minor update to make replacing patterns/avatars easier
- also improved 'all anime' & 'watching' avatar quality
- oh and even made the dropdown arrows less blurry >_>

3.7b
- fixed issues with hovering/clicking category names

3.7c
- made it a bit easier to click the 'edit tags' button
- list view: cover image now shows on entry hover (mod)




go here for more FontAwesome icons to choose from.
sunnysummerdayJan 16, 8:06 AM
Oct 28, 2024 8:11 AM
#6

Offline
Apr 2014
306
hi. thanks for the list. is gud. however, i made it uncute. soz. cuz ya know, dark mode is life.

1. how to fix:

2. am i trippin or was the 'top: 135px' used to be 145px?
.add-edit-more {
    color: transparent;
    margin-right: -2px !important;
    padding: 2px 10px 0;
    top: 135px;
    right: 2px;
    position: absolute;
    transition: 0.1s ease-out !important;
    opacity: 0;
    z-index: 10
}
Oct 28, 2024 9:22 AM
#7

Offline
Sep 2010
283
@karmashizzle



i don't see that odd line anywhere, and uh, i don't think so.. @_@..
Oct 30, 2024 3:02 PM
#8

Offline
Sep 2010
283
4.0
- added dark mode for plebs too poor to buy lamps

4.1
- *forgot about theming the progress popup* oops..
- moved rewatch tag to the top (it spins on hover!)

4.2
- code cleanup and lots of fixes/improvements :x

sunnysummerdayNov 8, 2024 10:24 AM
Oct 31, 2024 7:10 AM
#9

Offline
May 2020
13
will there be a manga list version!? >__<
/ᐠ。‸。ᐟ\
Nov 8, 2024 11:07 AM

Offline
Sep 2010
283
4.4
- added support for notes (⌐■_■)
- (enable it from list settings)

4.4a
- minor fixes/improvements to notes, season, type, progress, and score.
- re-enabled score edit dropdown (because firefox ignores the keyboard.)



sunnysummerdayNov 14, 2024 5:10 PM
Nov 9, 2024 2:05 AM

Offline
Apr 2014
306
using the fontawesome icon for the notes umm.. tail thingy was very creative
but why not use clip-path instead?
clip-path: polygon(100% 0%, 80% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);


its interesting that on my list the 'tv special' break off and does this but it's fine on your list. wut.
must be a browser thing ig, just like that weird line in advanced options,
and not having !important after background: color in .data.airing-finished causes it to not display the bg.
Nov 9, 2024 8:05 AM

Offline
Sep 2010
283
@karmashizzle

1. i didn't know that was a thing! clip-path doesn't show anything for me though.
2. 'tv special' text is definitely annoying. i'll look into resizing all four bottom parts.
3. i'll add the !important tag to that even though the background is showing for me.

i'm on vivaldi (chromium) btw, but i test it in firefox too..
Nov 10, 2024 3:56 AM

Offline
Apr 2014
306
1. really? i tested it on an emulation for vivaldi and it shows up

Nov 10, 2024 10:16 AM

Offline
Sep 2010
283
@karmashizzle ooh, 'tis magic. i always seem to take the harder path when making stuff (⁄ ⁄•⁄ω⁄•⁄ ⁄)

as for the tv special text, i tried making the right side slightly wider, but it didn't look good. looking at your code though, you no longer have "font-family: ABeeZee" under "body", so it's using Verdana/Arial. that would be why it doesn't fit. i ended up improving some of the code for those two bars anyway. letter-spacing is less now for 'type' to match what's used for 'season', which helps a bit ┐( ̄ヮ ̄)┌
Nov 10, 2024 6:26 PM

Offline
Apr 2014
306
@sunnysummerday ahh thats why.. didnt even noticed the change it made after i edited it out lul. i've readded the font-family under body.
typo here:
.data.title>.link {
font: normal 14px/40px Segou UI !important;

thanks for the updates
Nov 10, 2024 6:48 PM

Offline
Sep 2010
283
karmashizzle said:
typo here: Segou

(ノಥ益ಥ)ノ ┻━┻
Nov 14, 2024 5:07 PM

Offline
Sep 2010
283
4.7
- added support for manga lists (read more about it below)
- replaced infinity (∞) tag with perfect score (100) tag
- added cute icons when sorting by aired/published date

4.7a
- small fix that affects "re-reading"



sunnysummerdayNov 18, 2024 1:08 PM
Nov 14, 2024 7:50 PM

Offline
May 2020
13
these updates are awesome!!!!!!!!!!!!
/ᐠ。‸。ᐟ\
Nov 15, 2024 7:10 AM

Offline
Apr 2014
306
sunnysummerday said:
@karmashizzle your tags will need to be adjusted: use "left: -18px" for all of them and move them up 40px :x

thanks for the heads up & update
Nov 16, 2024 3:46 AM

Offline
Apr 2014
306
👀


thoughts? 15charYep
Nov 16, 2024 4:27 AM
Reply to karmashizzle
👀


thoughts? 15charYep
@karmashizzle
I love this idea, but I think the colors kinda clash with the scheme?? Maybe using three different crown symbols instead of the typical gold-silver-bronze indication could work a bit better? Or numbering them? I don't have the brain capacity to think about any other examples, but a way to tell the tiers apart while staying within the color scheme would be pretty cool!

This is still cute af tho so I might still use it as is if it's added <3
Nov 16, 2024 4:35 AM
Actually, since I'm already here, I have a suggestion. I just thought it could be nice to have a "10+" label for rewatches. I don't see much of a point in having the actual number go higher than that, but it seems like an easy way to get around the cap. It could even replace the current "10" label. Just a thought!

PS. I fell in love with this design the moment I saw it, thank you so mcuh for sharinggg
Nov 16, 2024 7:02 AM

Offline
Apr 2014
306
@iShipMyFriends hm hm .. as someone who lacks creativity the bronze/silver/gold coloring is the best i got.
i'll see how i could improve it
---
👀




karmashizzleNov 16, 2024 9:17 AM
Nov 16, 2024 9:22 AM
@karmashizzle
Don't get me wrong, it's not like it looks bad! It might even be best like that because I can't think of many good ways to make it clear what's first, second and third tier. It was just a thought I had.
Nov 16, 2024 10:57 AM

Offline
Sep 2010
283
@karmashizzle did you make that after seeing what i added on mine, or is it pure coincidence? awkward!



basically i made a way to add any FontAwesome icon with ease, but i'm still messing around with it (๑˃̵ᴗ˂̵)و

@iShipMyFriends i'll add a 10+, but i stopped at 10 because of how much duplicate code was required..
Nov 16, 2024 7:13 PM

Offline
Apr 2014
306
Reply to sunnysummerday
@karmashizzle did you make that after seeing what i added on mine, or is it pure coincidence? awkward!



basically i made a way to add any FontAwesome icon with ease, but i'm still messing around with it (๑˃̵ᴗ˂̵)و

@iShipMyFriends i'll add a 10+, but i stopped at 10 because of how much duplicate code was required..
@sunnysummerday BWOAH. nah i didnt look at ur list. got the idea from the "100" tag combined with this feature i had on Clarified theme :)
Nov 16, 2024 7:26 PM

Offline
Sep 2010
283
@karmashizzle i actually had '100' auto-applied to 10's until i found issues with 9.5 and sorting by score, so i switched it to a tag ._.
Nov 17, 2024 4:34 AM

Offline
Dec 2019
4
the cutest theme ever (≧◡≦) ♡
i've been using your crayon theme for myanimelist and anilist for a while now, happy to see a list version of it as well

although quite a bit of a request from me but would it possible to theme anilist's lists' similar to this as well? i primarily use anilist (⁄ ⁄>⁄ ▽ ⁄<⁄ ⁄)
Nov 17, 2024 1:37 PM

Offline
Sep 2010
283
@fyh oh, so you're like a stalker? hmph! i.. don't plan on changing my anilist theme at all, since it looks good enough for me :x
Nov 18, 2024 7:00 AM

Offline
Sep 2010
283
5.0
- added nearly 100 FontAwesome icon tags (each with regular/solid variants)
- added jello/bouncy animations to white buttons, filter popup and stats bar
- ..and made it easy to add more icons (only one line of code per icon needed)



sunnysummerdayJan 11, 7:40 AM
Nov 18, 2024 9:03 AM

Offline
Dec 2019
4
cute updates (⌒▽⌒)♡

a little bit of problem on my end though, the more info window won't display on top no matter what
i tried messing with the z-index but it's still the same (╥﹏╥)



edit: i find that disabling the transform scale on list items fixes it but not sure how to make it work with the transform enabled
edit 2: btw, the fontawesome css file you linked isn't opening
ryuNov 18, 2024 10:43 AM
Nov 18, 2024 12:17 PM

Offline
Sep 2010
283
@fyh it's the 10% mod, but try this one instead:


i updated the link (it should say flooffluff now in the url), and i'm pretty sure that one's working.
Nov 18, 2024 3:20 PM

Offline
Dec 2019
4
Reply to sunnysummerday
@fyh it's the 10% mod, but try this one instead:


i updated the link (it should say flooffluff now in the url), and i'm pretty sure that one's working.
@sunnysummerday thank you so much, everything's flawless now (๑˃ᴗ˂)ﻭ
Nov 18, 2024 7:34 PM

Offline
Sep 2010
283
github auto-update
- icon colour, outline colour & glow can now be set from within the tag (◍ ´꒳` ◍)

to make it work, type the colour with a space before and after, and have it in-between the # and the Keyword:

#Banana (regular icon that matches the status)
## Yellow Banana (solid, yellow icon)
#+ GlowPink Purple Stars (regular, larger size, pink glow, purple icon)
# WhiteOrange Basketball (regular, white inside + orange outline)

it's uh, sort of confusing, but still pretty simple. each colour also comes with three shades (except yellow):

# Blue TV (regular, blue icon)
# Blue- TV (regular, lighter blue icon)
## Blue+ Glow TV (bold, darker blue icon, status glow)

look at the .css -> here <- to see everything
sunnysummerdayNov 18, 2024 8:52 PM
Nov 18, 2024 10:24 PM

Offline
May 2020
13
I wish mal had a custom poster chooser to make your list cuter/cooler!! :p
/ᐠ。‸。ᐟ\
Nov 19, 2024 11:32 PM

Offline
Sep 2010
283
github auto-update (no need to manually update anything)
- added more modifiers
- added more icons

AwesomeFont.css (modifiers) FontAwesome.css (icon list) <- these are just for reference (useful to bookmark)



if you didn't notice, multiple tags can be applied to an entry to stack/combine!

## B4 = Message, #-- B2 == <3 (Baka to Test)
#+ = SquareDash, #- = Paw (Chi's Sweet Home)
#+ = DropPink- Blue- Candy (Chimimo)
#+ Blue Rain, ##- Red- Umbrella (My Neighbor Totoro)
## GlowOrange Orange- PotFood (Dungeon Meshi)

i expect most people will stick to simple stuff like #Duck and #Candy though


sunnysummerdayNov 20, 2024 8:18 PM
Nov 20, 2024 12:24 AM

Offline
May 2020
13
@sunnysummerday sorry my english is bad!!

I meant the option to change your listed anime pictures, like on your list! ㅇㅅㅇ
/ᐠ。‸。ᐟ\
Nov 20, 2024 12:36 AM

Offline
Sep 2010
283
@tukumi oh, that! it's still not that difficult, if you can find a good quality image (450px+ width recommended).

/* Cover replacements */
.data.title [href^="/anime/1/"]:before {background-image: url(https://i.imgur.com/7gJMRO8.png);} /* Cowboy Bebop */

"/anime/1/" refers to the id number (in the url) when you visit its page. just upload to imgur and link it
Nov 21, 2024 8:27 AM

Offline
Sep 2024
387
Colourful modern list (adapted from Clarity)
Cute modern list nicely done also!

“Everyone has a right to pursue a happy life. The difficult part is to be given that right.”
Frederica Bernkastel

Nov 22, 2024 7:37 PM

Offline
Sep 2010
283
github auto-update
- added looping animation modifier
- added outline-only colour modifier
- added alternative glow/drop modifier

FontAwesome icons can now individually be given animations (check my list to see.)
(i had to remove a line from the 5.0 code, so update the theme -> here <- )


Nov 22, 2024 11:29 PM

Offline
Sep 2021
21
Absolutely love it! I'm using it now, lol. (Hope you don't mind)
Hi! I don't do fancy things...
Nov 23, 2024 7:02 PM

Offline
Sep 2010
283
@UnownDragon of course it's okay! *forced smile* (it looks like you messed up applying dark mode though..)
Nov 23, 2024 7:07 PM

Offline
Sep 2021
21
Reply to sunnysummerday
@UnownDragon of course it's okay! *forced smile* (it looks like you messed up applying dark mode though..)
@sunnysummerday :( CSS is the bane of my existence. But it looks fine, right?... right?
Hi! I don't do fancy things...
Nov 23, 2024 7:10 PM

Offline
Sep 2010
283
@UnownDragon other than the darkened pattern at the top, yeah, just very freckle'y ┐( ̄ヮ ̄)┌
Nov 26, 2024 11:12 AM
Offline
Sep 2024
3
Hi! Thank for such a wonderful theme! Im just facing one issue.

The profile images for my anime don't seem fine. Could u help me fix it?

Nov 26, 2024 12:00 PM

Offline
Sep 2010
283
@SomeDimwit make sure you have all the right boxes selected in list settings (as mentioned in the main post.)

( ⚆ _ ⚆ )

..and i forgot to update the "category names with icons" code to use shorter words, so you should fix that too :x
Nov 26, 2024 1:34 PM
Offline
Sep 2024
3
Reply to sunnysummerday
@SomeDimwit make sure you have all the right boxes selected in list settings (as mentioned in the main post.)

( ⚆ _ ⚆ )

..and i forgot to update the "category names with icons" code to use shorter words, so you should fix that too :x
@sunnysummerday Thanks! Fixed it! :)
Dec 4, 2024 5:56 AM
魔法少女

Offline
Nov 2020
430
I'm so glad I discovered you made a list theme in addition to the Stylus theme for MAL. (╥﹏╥)


°:. *₊ ° . ° .• 𝐼𝒻 𝒶𝓃𝓎𝑜𝓃𝑒 𝑒𝓋𝑒𝓇 𝓉𝑒𝓁𝓁𝓈 𝓂𝑒 𝒾𝓉’𝓈 𝒶 𝓂𝒾𝓈𝓉𝒶𝓀𝑒 𝓉𝑜 𝒽𝒶𝓋𝑒 𝒽𝑜𝓅𝑒,
𝓌𝑒𝓁𝓁 𝓉𝒽𝑒𝓃, 𝐼’𝓁𝓁 𝒿𝓊𝓈𝓉 𝓉𝑒𝓁𝓁 𝓉𝒽𝑒𝓂 𝓉𝒽𝑒𝓎’𝓇𝑒 𝓌𝓇𝑜𝓃𝑔. °:. *₊ ° . ° .•
𝚍𝚎𝚕𝚒𝚟𝚎𝚛𝚒𝚎𝚜
𝚗𝚎𝚠𝚜𝚕𝚎𝚝𝚝𝚎𝚛𝚜
Dec 4, 2024 7:28 AM

Offline
Sep 2010
283

(⁄ ⁄•⁄ω⁄•⁄ ⁄)
Dec 4, 2024 4:33 PM

Offline
May 2020
13
You should make a windows cursor themed after your stylus theme and list theme (^・ω・^ ) it'll look pawsome!!
/ᐠ。‸。ᐟ\
Pages (2) [1] 2 »

More topics from this board

» AZONE "Happiness Clover" Yuka Sasamori

MasterTasuke - 4 hours ago

1 by -LG »»
4 hours ago

» im making a webcomic

MiniChu202 - 7 hours ago

0 by MiniChu202 »»
7 hours ago

» What hosting site do people use for their forum signature images?

Rezurrekt - Mar 1

15 by Shishio-kun »»
Yesterday, 12:19 PM

» i was thinking of making my own manga

foxzilockzi - Apr 13

15 by maaaikinhu »»
Yesterday, 5:45 AM

» ♥Konomi Yuzuhara♥ 2025

MasterTasuke - Apr 10

7 by Retro8bit »»
Apr 13, 7:48 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login