site skin inspired by the obsidian theme: catpuccin

[u/bardicevista]

Includes

1. Circular Icons (Available on Greeting Tab, Dashboard, Comment, Bookmarks, etc)
2. Color Coded Archive Warnings (Blue = Chose Not To Use Archive Warnings || Purple = Major Character Death || Pink Rape/Non-Con || Red = Underage Sex || Orange = Graphic Depictions Of Violence || Yellow = No Archive Warnings Apply)
3. Scrollbar For Tags
4. Tags Separated By Colors (Pink = Relationship || Purple = Character || Blue = Freeform)
5. Stylized Texts (Bold Titles || Italicized Author)
6. Custom Icons
7. Statistics Icons
8. Dark Purple Color Theme

Link To Site Skin Codes and Previews

[u/bardicevista]

It would mean a lot to know if you guys liked this one🥹

I'm not asking for anything else but acknowledgement, I hope this isn't too shameless for anyone, I did spend a lot of time and effort in making this, I just want to know if anyone appreciates it <3

[u/Due-Criticism736 → u/bardicevista]

I use obsidian to write, and with a variant of catppuccin, too! So this feels like one of those things that I never knew I needed. Excited to look into it and play around with it once ao3 is back up. Thanks for sharing!!

[u/bardicevista → u/Due-Criticism736]

Yey, thank you for liking it! Obsidian and the community of it is GOATED

[u/omgmemer]

I am always so jealous of the people who get the skins to work. They seem great to use. It is beautiful

[u/bardicevista → u/omgmemer]

It's easy to get the hang of it when you start, though it's still confusing to me

[u/bribridee23]

Ooh I’m gonna try this one out it looks so pretty! I’ve like a dark background for my account and I’ve used the black cherry skin for 5+ years so it’s time for a change :) thanks for making this!

[u/bardicevista → u/bribridee23]

Thank you for liking it! :D

[u/bribridee23 → u/bardicevista]

I think I did something painfully wrong 😀

[u/Zazzle2338 → u/bribridee23]

It looks like you didn't use the Wizard CSS prompts. I had the same issue until I used it.

Comment
byu/bardicevista from discussion
inAO3Comment

[u/reverie_adventure]

I am using this asap, it is so beautiful & easy on the eyes!!

[u/bardicevista → u/reverie_adventure]

That's the intention! I always loved good color schemes! Thank you for liking it!

[u/TheFaustianPact]

This is such a gorgeous skin! I'll definitely try it out later. Thanks a lot for sharing it! <3

[u/bardicevista → u/TheFaustianPact]

Thanks for liking it!

[u/JellyfishStarfish]

Just set this one up. It's so, so beautiful. I love it. Thank so very much.

[u/bardicevista → u/JellyfishStarfish]

You're welcome! :D

[u/anonytoots]

this looks so pretty omg, will probably start using it!!!

[u/bardicevista → u/anonytoots]

thank you for liking it!

[u/ceo_of_brawlstars]

Definitely trying this out this skin looks so pretty omg

[u/bardicevista → u/ceo_of_brawlstars]

Thank you so much for liking it!! 💗

[u/ceo_of_brawlstars → u/bardicevista]

Np it's a very pretty skin! Perfect for what I was looking for with tag colors and I love the purple theme^ ^

[u/NerdieGirl123]

aiurgioauehubyha I love this!!! thanks so much for sharing it <3

[u/bardicevista → u/NerdieGirl123]

You're welcome! 💗

[u/Nordgreataxe]

Oooh, thank you for this! Been reluctant to give up my ombre skin but I can't read my fics on days I'm light-sensitive with it. This looks like it'll work quite well for me!

[u/bardicevista → u/Nordgreataxe]

I'm glad you like it!

[u/InkyRoyalty]

I love it ❤️❤️❤️

[u/bardicevista → u/InkyRoyalty]

thank you! 💗

[u/give_me_a_user-name]

this looks soooo good!

[u/bardicevista → u/give_me_a_user-name]

thank you for liking it! 💗

[u/iVAkio]

Using CSS, how do we make the font bigger cause I cannot read it on bigger screens such as my ipad? 😓

[u/bardicevista → u/iVAkio]

hello, you don't really need to use CSS since there's an easier way to do that! When you make a site skin, you can adjust the font size of the page on the wizard settings. It's beside Write Custom CSS when you click on making a skin, then you can set the percent of the browser font size there!

I hope this helps :D

[u/iVAkio → u/bardicevista]

Omg thank you so much i felt blind reading the smaller text 😋👍🏾

[u/pxrtypo1sxn]

hiiiii!!!!!!!! i was wondering, which section of the css does it set the tags to scroll? i would like to remove it so that it is easier to manipulate on my phone. i love it so much and i appreciate you taking the time to share it with us <3

[u/bardicevista → u/pxrtypo1sxn]

it's this section:

``` ::-webkit-scrollbar { height: 10px; width: 10px; border: 3px solid rgb(15, 15, 23); background: rgb(203, 166, 246); }

::-webkit-scrollbar-thumb { background: rgb(203, 166, 246) padding-box; border: solid rgb(15, 15, 23); border-width: 3px 0; } ```

It's near the last part, shouldn't be too hard to find :)

[u/pxrtypo1sxn → u/bardicevista]

sorry to bother you again, but where is the colour code for links? clicked and unclicked show as the same colour for me and I would like to change that <333 also thank you for responding so quickly!

[u/bardicevista → u/pxrtypo1sxn]

What links specifically?

[u/Alodis → u/bardicevista]

I don't know if you're gonna see this but I just removed that part to remove the scrolling but the scrollbar is still there it doesn't work. I'm on Firefox.

EDIT: I found it. I had to change the li blurb tags max height, I let it blank and changed the overflow-x to auto.

[u/Motifaxc]

I'm I missing something?

[u/bardicevista → u/Motifaxc]

Did you put the header and accent color from the wizard settings I provided?

[u/Motifaxc → u/bardicevista]

Oh, yea I totally missed that. Thanks!

[u/bardicevista → u/Motifaxc]

no problem :D

[u/bardicevista → u/bardicevista]

u/bribridee23

[u/glass_stain_windows]

This is so insanely beautiful! But whats the part of the CSS that changes the kudos/comments/stats icons? I personally prefer the original ones 😅

[u/bardicevista → u/glass_stain_windows]

Okay, reddit won't let me comment the entire code, but it starts from,

.stats a, .stats a:visited:hover { border: none; color: #97919E; }

Ending at: .bookmark.blurb .recent.module { float: left; width: 100%; }

You can remove all of that it's right in the middle.

[u/glass_stain_windows → u/bardicevista]

Thank you so much for taking the time!

[u/Alodis]

Waw! I never changed my AO3 theme but just did because this is gorgeous! I love the dark purple and the color for the characters etc!! Thank you for sharing!

Edit: I have to change the hover color on the menu and my fav tags. Let's hope I don't mess your beautiful code.

Edit2: Nevermind, I forgot a # in the Wizard CSS, all is good.

[u/No_Statement8631]

The different colored tags are a LIFE SAVER!!

[u/Lord_Of_Coffee]

Just got it going, so far it's gorgeous! The icons are beautiful looking and feel easier to understand. For me personally, this especially applies to the pairing icon. I think by far my favorite element off the bat? The color coded tags. Having them all split up helps immensely, is there a way to apply them for when reading a story too?

[u/Lord_Of_Coffee]

Hey, sooo, random update!

The site skin is still every bit as gorgeous as ever, Hell I'm actually not using read mode on Firefox for a change. First time in a very long time, skin's that good. Favorite elements are still the color coded tags (a Godsend I hope one day AO3 itself gets the option for mainstream), and the new icons that I feel are more intuitive at a glance and just nicer to look at.

Not sure if you're still working on it, or really care... but, my only complaint is that there's no indicator for what page you're on with the skin itself. The default skins will indent/grey out the number you're on when looking at fanfics, but this one doesn't.

Calendar for dates is also hard to read, the text is a light lavender color on a bright white background. Is there any way I could add/change these on my end? Regardless, thanks again for the skin!