Forum Settings
Forums

colourful modern list (adapted from Clarity)

New
Pages (2) « 1 [2]
Dec 4, 2024 4:56 PM

Offline
Sep 2010
282
@tukumi i've been using this cursor set for the past decade, which is all i'll ever need
Dec 4, 2024 6:45 PM

Offline
May 2020
13
Reply to sunnysummerday
@tukumi i've been using this cursor set for the past decade, which is all i'll ever need
I already have this cursor set downloaded, It's super cute X3

oh and what theme do you use for your browser ! :p
tukumiDec 4, 2024 6:49 PM
/ᐠ。‸。ᐟ\
Dec 4, 2024 7:01 PM

Offline
Sep 2010
282
@tukumi fufufu, i use Vivaldi which lets me make a .css file and edit everything. that's classified though. just for me!
Dec 6, 2024 11:54 AM

Offline
Apr 2014
304
👀

comf ________
Dec 6, 2024 2:33 PM

Offline
Sep 2010
282


Dec 6, 2024 2:46 PM

Offline
Apr 2014
304
i spent hours looking for a good free snow cap/pile/clumps/whatchamacallit but couldnt find anything good so i made it myself. heh
the one on the status-menu was taken from freepik tho

is it possible to add snow on the avatar? hmm..
Dec 6, 2024 2:52 PM

Offline
Sep 2010
282
[data-owner="1"] a.profile:after, a.username:after

@karmashizzle adding it to those will work.. i've already added stuff to the :before.

(edit: i forgot to mention, the first is what list-owners see, 2nd is for non-list owners.)
sunnysummerdayDec 6, 2024 3:01 PM
Dec 6, 2024 8:52 PM

Offline
Apr 2014
304
Reply to sunnysummerday
[data-owner="1"] a.profile:after, a.username:after

@karmashizzle adding it to those will work.. i've already added stuff to the :before.

(edit: i forgot to mention, the first is what list-owners see, 2nd is for non-list owners.)
@sunnysummerday tank!

i've upscaled and redrawn the snowies cuz the previous ones were a lil too smol and pixely


i did in fact looked at your list and was inspired by the christmas theme
karmashizzleDec 6, 2024 8:57 PM
Dec 7, 2024 4:22 AM

Offline
Sep 2010
282
@karmashizzle i did notice some iffyness.. now re-do the avatar one!



Dec 7, 2024 2:38 PM
魔法少女

Offline
Nov 2020
428
@sunnysummerday @karmashizzle these edits are so cute!! (´♡‿♡`)


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

Offline
Apr 2014
304
almost deleted the smaller one you're using before checking your list. *phew*


final final ver → https://i.imgur.com/TwFr940.png
karmashizzleDec 8, 2024 2:11 PM
Dec 7, 2024 7:40 PM

Offline
Sep 2010
282
@karmashizzle ..hm, no! i actually liked the shape of the first *ai upscales that instead*, but i appreciate it ╮(︶▽︶)╭

@giaa16

@sunnysummerday もっと雪、もっと雪!!

Dec 10, 2024 9:31 AM

Offline
Apr 2014
304
hi. apparently my list is shifted to the left on mobile but yours is fine. how 2 fix? elp

something's overflowing?? yeh i cant figure it out
karmashizzleDec 10, 2024 2:23 PM
Dec 10, 2024 2:46 PM

Offline
Sep 2010
282
@karmashizzle that's one of the things i just fixed (which was a pain!), but i'm holding off updating until next year.

/* Temporary fix for extra space on right side when window is too small */
.header {width: 1060px;}
.header .header-menu {position: absolute;margin-left: 0;top: 0 !important;left: 206px;}
.header .header-title {left: 206px;}
.list-menu-float {padding-left: 238px;width: 822px;}
[data-owner="1"] .list-menu-float .profile {left: 40px;}
.btn-menu a.username {left: -166px;}
body:before, body:after, .cover-block, .status-menu-container {min-width: 1060px;}

i think that's all the code related to it @_@
Dec 10, 2024 4:00 PM

Offline
Apr 2014
304
thx. i also added @media (width <= 1280px) and .list-block{padding-left: 90px}. not sure if needed or necessary but it works 👍
Dec 10, 2024 7:42 PM

Offline
Sep 2010
282
@karmashizzle oof, i knew i needed to fix the cover area too. i just re-did it as a grid, which works much better!

.list-block {width: 1060px;}
.list-unit .list-stats {margin: 0 auto 21px;}
.list-table {
	display: grid;
	margin: 13px auto;
	gap: 26px;
	grid-template-columns: repeat(5, 150px);
	justify-content: center; }
.list-item {margin: 0;}
.list-table > tbody:first-of-type {margin-left: 942px;}
footer {margin: -30px auto 0;width: 1060px;}

that can be added with the previous code, so padding-left isn't needed.

- "repeat(5" can be changed to increase covers per row.
- "gap" can be changed for more space between covers.

edit: if you made your snowman into its own image, you could animate it! (.btn-menu:before is available.) (ง˙▿˙)ง
Dec 11, 2024 12:54 AM

Offline
Apr 2014
304
messing with all those numbers is pain i'll just stick with the provided values yep.
the shtuff you added on the status menu is p dope. i think im content with a static lil snowdude for now
Jan 10, 10:32 AM

Offline
Sep 2010
282
6.0 update notes...
- new look for avatars, along with changeable icons when hovering them
- coloured border appears around entries when hovered (mods available)
- small vignette added to pattern and avatar areas (easily disabled)
- added 'entrance' animation for when entries first load on the page
- '100'/Perfect Score tag now has 3 different sizes: 100, 100+, 100-
- list view: FontAwesome tags now show animations (and scale better)

technical notes...
- shortened code due to MAL character limit (allowing for more mods)
- moved main bg to body:before (so it doesn't require '!important')
- fixed a lot of the code to work better regardless of window size
- & (hopefully) improved performance on pages with a lot of entries

AwesomeFont.css & FontAwesome.css have been replaced with tags.css & icons.css
(* these are just for bookmarking, so you know how tags work & what icons can be used)


main update, 6.0 (jan 10, 2025)
list view update, 1.7 (jan 10, 2025)

Jan 26, 7:09 PM

Offline
Feb 2010
11955
every Sunny design is a banger 😳

Mar 7, 11:51 PM

Offline
Apr 2014
304
Discord avatar frames - https://ibb.co/album/Bzq809



/* avatar frame overlay */
[data-owner="1"] a.profile:after, a.username:after {
    content:"";
    position: absolute;
    height: 240px;
    width: 240px;
    top: -45px;
    left: -45px;
    background: url() no-repeat 16px center/auto 208px;
    opacity: 1;
    pointer-events: none;
    /*filter: grayscale(0%) saturate(0%) brightness(1) hue-rotate(0deg)*/
Mar 8, 12:10 AM

Offline
Sep 2010
282

(⁄ ⁄•⁄ω⁄•⁄ ⁄)
Mar 10, 8:36 AM

Offline
Sep 2010
282
@karmashizzle here's improved code to allow for per-category image/filter/opacity:


..and i found this site that has all the discord avatar decorations!
(they can be downloaded all at once from github using this site.)

Mar 10, 11:14 AM

Offline
Apr 2014
304
neat and thanks.
now i dont have to extract the assets manually in the dev console lul
Pages (2) « 1 [2]

More topics from this board

» Question on the MAL x Honeyfeed 2025 contest

MarioNakano64 - 56 minutes ago

0 by MarioNakano64 »»
56 minutes ago

» Didn't know the Anime Lists could be so customised.

AnimePedestrian - Mar 4

17 by Shishio-kun »»
3 hours ago

» Kitsune for MyAnimeList, a new client for MAL for iOS.

alexMadeira - Feb 21, 2024

16 by alexMadeira »»
11 hours ago

» 【 ART THREAD 】Let's share our art! ‪‪❤︎‬ ( 1 2 )

mewmewforever - Aug 30, 2024

83 by erotardation »»
Today, 4:42 AM

» AI-Powered Anime Recommendations + Stats ( 1 2 )

ameo___ - May 23, 2022

79 by Retro8bit »»
Yesterday, 1:00 AM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login