Color coded guide "Global Complete Theme Customization"

Color coded guide "Global Complete Theme Customization" - Printable Version

+- Vivarium (https://vivariumrpg.com)
+-- Forum: OOC (https://vivariumrpg.com/forumdisplay.php?fid=1)
+--- Forum: Community (https://vivariumrpg.com/forumdisplay.php?fid=8)
+---- Forum: General Chatter & Games (https://vivariumrpg.com/forumdisplay.php?fid=30)
+---- Thread: Color coded guide "Global Complete Theme Customization" (/showthread.php?tid=4337)

Color coded guide "Global Complete Theme Customization" - Rem - 5/5/2024

THIS IS FOR THE GLOBAL CUSTOM CODE, ONLY VISBLE TO THE USER, NOT A CHARACTER CODE FOR OTHERS TO SEE!

For the below tutorial, I left the opacity numbers at the end since it felt like it was a good way to display how things may look -- if you want to change the opacity, Widow gave us this handy link to a site that helps explain how to alter it. Please be warned that these colors are not pretty or dull, and it’s only to display how to use the code and what exactly each line changes. If I’ve messed up somehow or left something out, don't be scared to tell me that I’m an idiot. Also, if there isn't a color dot next to something, it just means I made it white.

Please note that Widow is still customizing this code, so as of now the bottom lines (secondary and tertiary sections) do not change any colors. I’m also not sure what --base-bg-color: is, I’ve messed with it and haven't noticed anything.

Below is an EMPTY code -- all hex codes will be white.

Code:
/* DARK MODE */

:root {

    --banner-image: url('URL GOES HERE');

    --banner-image-no-subject: url('/wcc_assets/themes/Vivarium/sonia4kres_dark_nosubject.png'); /* basically mimics banner but no subject for pattern purposes */

--banner-image-position: center center;

--texture-image: url(‘URL GOES HERE → try https://www.transparenttextures.com');

--banner-sname-color: #FFFFFF;

--banner-sname-hov-color: #FFFFFF;

--banner-sname-shadow-color: #FFFFFF;

--base-bg-color: #FFFFFF;

--base-bg-color-body-overlay: #FFFFFFF2;

--base-bg-color-faded: #FFFFFFD9;

--base-bg-color-muted: #FFFFFF;

--base-txt-color: #FFFFFF;

--base-txt-color-faded: #FFFFFFD9;

--base-txt-color-muted:#FFFFFF;

--base-lnk-color: #FFFFFF;

--base-lnk-hov-color: #FFFFFF;

--base-border-color: #FFFFFF4D;

--main-nav-bg-color: #FFFFFF;

--main-nav-bg-color-faded: #FFFFFF;

--main-nav-bg-color-muted: #FFFFFFA6;

--main-nav-txt-color: #FFFFFF;

--main-nav-lnk-color: #FFFFFF;

--main-nav-lnk-hov-color: #FFFFFF;

--box-bg-color: #FFFFFF1A;

--box-alt-bg-color: #FFFFFF1A;

--primary-accent-color: #FFFFFF;

--primary-accent-color-faded: #FFFFFFD9;

--primary-accent-color-muted: #FFFFFFA6;

--secondary-accent-color: #FFFFFF;

--secondary-accent-color-faded: #FFFFFFD9;

--secondary-accent-color-muted: #FFFFFFA6;

--tertiary-accent-color: #FFFFFF;

--tertiary-accent-color-faded: #FFFFFFD9;

--tertiary-accent-color-muted: #FFFFFFA6;

}

RE: Color coded guide "Global Complete Theme Customization" - Rem - 5/5/2024

This next bit is just a fun little theme you can use if you want! It's a cherry blossom palette (:

Code:
/* DARK MODE */

:root {

    --banner-image: url('https://i.ibb.co/WxVPS0j/pexels-suju-2099737-1.jpg');

    --banner-image-no-subject: url('/wcc_assets/themes/Vivarium/sonia4kres_dark_nosubject.png'); / basically mimics banner but no subject for pattern purposes */

--banner-image-position: center center;

--texture-image: url('https://i.ibb.co/bBLHcHB/2yq-T-ezgif-com-effects-2.gif');

--banner-sname-color: ##764045;

--banner-sname-hov-color: #FFFFFF;

--banner-sname-shadow-color: #FFFFFF;

--base-bg-color: #FFFFFF;

--base-bg-color-body-overlay: #fdf3f4F2;

--base-bg-color-faded: #eed7d599;

--base-bg-color-muted: #ebb1afCC;

--base-txt-color: #704848;

--base-txt-color-faded: #764045D9;

--base-txt-color-muted: #764045;

--base-lnk-color: #4e3232;

--base-lnk-hov-color: #a99191;

--base-border-color: #7640454D;

--main-nav-bg-color: #ebb1afCC;

--main-nav-bg-color-faded: #ebb1afCC;

--main-nav-bg-color-muted: #e8c9c7A6;

--main-nav-txt-color: #704848;

--main-nav-lnk-color: #704848;

--main-nav-lnk-hov-color: #FFFFFF;

--box-bg-color: #eed7d580;

--box-alt-bg-color: #ebb1afCC;

--primary-accent-color: #7e5a5a;

--primary-accent-color-faded: #c78990D9;

--primary-accent-color-muted: #c78990A6;

--secondary-accent-color: #FFFFFF;

--secondary-accent-color-faded: #FFFFFFD9;

--secondary-accent-color-muted: #FFFFFFA6;

--tertiary-accent-color: #FFFFFF;

--tertiary-accent-color-faded: #FFFFFFD9;

--tertiary-accent-color-muted: #FFFFFFA6;

}

Also! Feel free to share any of your custom made color codes here!!

RE: Color coded guide "Global Complete Theme Customization" - Rem - 5/25/2024

new rainy theme code

Code:
/* DARK MODE */

:root {

    --banner-image: url('https://i.ibb.co/SfdsmQm/046d460f0700bfbc14e98acfd8734651-1.gif');

    --banner-image-no-subject: url('/wcc_assets/themes/Vivarium/sonia4kres_dark_nosubject.png'); / basically mimics banner but no subject for pattern purposes */

--banner-image-position: center center;

--texture-image: url('https://i.ibb.co/hg8P7NJ/Etsy-Item-Listing-Photo-3.gif');

--banner-sname-color: #293139;

--banner-sname-hov-color: #FFFFFF;

--banner-sname-shadow-color: #FFFFFF;

--base-bg-color: #FFFFFF;

--base-bg-color-body-overlay: #3e3e46F2;

--base-bg-color-faded: #55566799;

--base-bg-color-muted: #212129CC;

--base-txt-color: #aeadb1;

--base-txt-color-faded: #292939D9;

--base-txt-color-muted: #292939;

--base-lnk-color: #ffffff;

--base-lnk-hov-color: #898990;

--base-border-color: #8989904D;

--main-nav-bg-color: #292931CC;

--main-nav-bg-color-faded: #292931CC;

--main-nav-bg-color-muted: #292931A6;

--main-nav-txt-color: #666963;

--main-nav-lnk-color: #8c9597;

--main-nav-lnk-hov-color: #FFFFFF;

--box-bg-color: #29293980;

--box-alt-bg-color: #292939CC;

--primary-accent-color: #ffffff;

--primary-accent-color-faded: #ffffffD9;

--primary-accent-color-muted: #ffffffA6;

--secondary-accent-color: #FFFFFF;

--secondary-accent-color-faded: #FFFFFFD9;

--secondary-accent-color-muted: #FFFFFFA6;

--tertiary-accent-color: #FFFFFF;

--tertiary-accent-color-faded: #FFFFFFD9;

--tertiary-accent-color-muted: #FFFFFFA6;

}

RE: Color coded guide "Global Complete Theme Customization" - Devi - 6/28/2024

a couple profile codes I'm particularly happy with and willing to share with everyone <3

Wish Upon a Falling Star - deep blues and purples with lighter purple/pink highlights

Code:
/* DARK MODE */

:root {

    --banner-image: url('https://i.ibb.co/M8BtmKs/2-2.jpg');

    --banner-image-no-subject: url('/wcc_assets/themes/Vivarium/sonia4kres_dark_nosubject.png'); /* basically mimics banner but no subject for pattern purposes */

--banner-image-position: center center;

--texture-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');

--banner-sname-color: #67455d;

--banner-sname-hov-color: #be5565;

--banner-sname-shadow-color: #1b3653;

--base-bg-color: #d2879a;

--base-bg-color-body-overlay: #1b3450F2;

--base-bg-color-faded: #151821D9;

--base-bg-color-muted: #233148A6;

--base-txt-color: #796a8b;

--base-txt-color-faded: #9f9eaaD9;

--base-txt-color-muted: #9f9eaa66;

--base-lnk-color: #796a8b;

--base-lnk-hov-color: #be5565;

--base-border-color: #9f9eaa4D;

--main-nav-bg-color: #233148;

--main-nav-bg-color-faded: #233148D9;

--main-nav-bg-color-muted: #233148A6;

--main-nav-txt-color: #aa93a6;

--main-nav-lnk-color: #796a8b;

--main-nav-lnk-hov-color: #bb9dab;

--box-bg-color: #91617a1A;

--box-alt-bg-color: #91617a1A;

--primary-accent-color: #b46175;

--primary-accent-color-faded: #796a8bD9;

--primary-accent-color-muted: #796a8bA6;

--secondary-accent-color: #A35154;

--secondary-accent-color-faded: #A35154D9;

--secondary-accent-color-muted: #A35154A6;

--tertiary-accent-color: #79ACB0;

--tertiary-accent-color-faded: #79ACB0D9;

--tertiary-accent-color-muted: #79ACB0A6;

}

Bramble King - deep greens with bronze highlights

Code:
/* DARK MODE */

:root {

    --banner-image: url('https://i.ibb.co/28rKQZn/pexels-yuraforrat-8987110.jpg');

    --banner-image-no-subject: url('/wcc_assets/themes/Vivarium/sonia4kres_dark_nosubject.png'); /* basically mimics banner but no subject for pattern purposes */

--banner-image-position: center center;

--texture-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');

--banner-sname-color: #584530;

--banner-sname-hov-color: #AD875D;

--banner-sname-shadow-color: #584530;

--base-bg-color: #0f1717;

--base-bg-color-body-overlay: #0b1415F2;

--base-bg-color-faded: #0f1717D9;

--base-bg-color-muted: #0f1717A6;

--base-txt-color: #48484c;

--base-txt-color-faded: #48484cD9;

--base-txt-color-muted: #48484c66;

--base-lnk-color: #A07344;

--base-lnk-hov-color: #A05F44;

--base-border-color: #263B2E4D;

--main-nav-bg-color: #0f1717;

--main-nav-bg-color-faded: #0f1717D9;

--main-nav-bg-color-muted: #62786EA6;

--main-nav-txt-color: #48484c;

--main-nav-lnk-color: #584530;

--main-nav-lnk-hov-color: #AD875D;

--box-bg-color: #53798b1A;

--box-alt-bg-color: #548BA51A;

--primary-accent-color: #AD875D;

--primary-accent-color-faded: #584530D9;

--primary-accent-color-muted: #21321FA6;

--secondary-accent-color: #A35154;

--secondary-accent-color-faded: #A35154D9;

--secondary-accent-color-muted: #A35154A6;

--tertiary-accent-color: #79ACB0;

--tertiary-accent-color-faded: #79ACB0D9;

--tertiary-accent-color-muted: #79ACB0A6;

}

RE: Color coded guide "Global Complete Theme Customization" - latrodectus - 6/28/2024

(5/5/2024, 5:11 AM)Rem Wrote: I’m also not sure what --base-bg-color: is, I’ve messed with it and haven't noticed anything.

--base-bg-color is a fallback variable. Its the same as --base-bg-color-body-overlay without the opacity. For users with slower loading internet typically the first thing they see will be the very base background color before anything else. This variable is in place to ensure they don't get blinded by a white screen while the site loads lol.