<![CDATA[Vivarium - Documentation Center]]>

<![CDATA[[PROFILE FIELD] Global Complete Theme Customization]]> https://vivariumrpg.com/showthread.php?tid=4271 Mon, 29 Apr 2024 14:32:11 -0400 Vivarium]]> https://vivariumrpg.com/showthread.php?tid=4271
config.css
The configuration CSS file holds fonts, sizes, widths, and heights. These belong in the main :root section but you can change this on light mode as well if you wanted to for some reason.

Code:
:root {

 /* FONT FAMILIES */

 --base-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --accent-font-family: 'Natural Precision', sans-serif;

 --header-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --serif-font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

 --sans-serif-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --monospace-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

 /* FONT CALCS & SETTINGS */

 --base-font-size: calc(14px + 0.090625vw); /* i do not suggest changing the vw specs, only the px */

 --base-line-height: 1.4;

 /* WIDTHS */

 --forum-wrap-max-width: 1500px; 

 /* HEIGHTS */

 --banner-index-height: 55vh;

 --banner-index-guest-height: 91vh;

}

theme.css
Holds colors and imagery. AKA the "pretty" parts.

Code:
/* DARK MODE */

:root {

    --banner-image: url('/wcc_assets/themes/Vivarium/sonia4kres_dark.png');

    --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: #faf5f1;

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

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

 --base-bg-color: #151821;

 --base-bg-color-body-overlay: #151821F2;

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

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

 --base-txt-color: #9f9eaa;

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

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

 --base-lnk-color: #617fa4;

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

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

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

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

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

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

 --main-nav-lnk-color: #33537B;

 --main-nav-lnk-hov-color: #548BA5;

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

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

 --primary-accent-color: #548BA5;

 --primary-accent-color-faded: #548BA5D9;

 --primary-accent-color-muted: #548BA5A6;

 --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;

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

    --banner-image: url('/wcc_assets/themes/Vivarium/sonia4kres.png');

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

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

 --base-bg-color: #eeeae5;

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

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

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

 --base-txt-color: #252e3c;

 --base-txt-color-faded: #252e3cD9;

 --base-txt-color-muted: #252e3c66;

 --base-lnk-color: #894C45;

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

 --base-border-color: #252e3c4D;

 --main-nav-bg-color: #2e3a4b;

 --main-nav-bg-color-faded: #2e3a4bD9;

 --main-nav-bg-color-muted: #2e3a4bA6;

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

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

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

 --box-bg-color: #778EA01A;

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

}

Usage
1. Within your "Global Complete Theme Customization" profile field insert the following:

Code:
/* DARK MODE */

:root {

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

}

2. From here implement the variables you wish to change: As an example I'm going to change the font family of accent titles (and import a new one), font size, line height, forum max width, and the navigation colors.
Note: This theme was made with hexcodes only in mind. You may attempt to use an alternative but it may not work properly on some functions. If you are unfamiliar with how to create opacity variants on hexcodes check out this guide (you'll use the opacity's Hex Code value after the 6 digit hex.

Code:
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

/* DARK MODE */

:root {

 --base-font-size: calc(16px + 0.090625vw); /* i do not suggest changing the vw specs, only the px */

 --base-line-height: 1.5;

 --forum-wrap-max-width: 1200px; 

 --accent-font-family: "Jersey 15", sans-serif;

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

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

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

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

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

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

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

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

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

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

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

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

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

}

]]>
config.css
The configuration CSS file holds fonts, sizes, widths, and heights. These belong in the main :root section but you can change this on light mode as well if you wanted to for some reason.

Code:
:root {

 /* FONT FAMILIES */

 --base-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --accent-font-family: 'Natural Precision', sans-serif;

 --header-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --serif-font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

 --sans-serif-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --monospace-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

 /* FONT CALCS & SETTINGS */

 --base-font-size: calc(14px + 0.090625vw); /* i do not suggest changing the vw specs, only the px */

 --base-line-height: 1.4;

 /* WIDTHS */

 --forum-wrap-max-width: 1500px; 

 /* HEIGHTS */

 --banner-index-height: 55vh;

 --banner-index-guest-height: 91vh;

}

theme.css
Holds colors and imagery. AKA the "pretty" parts.

Code:
/* DARK MODE */

:root {

    --banner-image: url('/wcc_assets/themes/Vivarium/sonia4kres_dark.png');

    --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: #faf5f1;

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

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

 --base-bg-color: #151821;

 --base-bg-color-body-overlay: #151821F2;

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

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

 --base-txt-color: #9f9eaa;

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

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

 --base-lnk-color: #617fa4;

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

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

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

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

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

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

 --main-nav-lnk-color: #33537B;

 --main-nav-lnk-hov-color: #548BA5;

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

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

 --primary-accent-color: #548BA5;

 --primary-accent-color-faded: #548BA5D9;

 --primary-accent-color-muted: #548BA5A6;

 --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;

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

    --banner-image: url('/wcc_assets/themes/Vivarium/sonia4kres.png');

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

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

 --base-bg-color: #eeeae5;

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

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

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

 --base-txt-color: #252e3c;

 --base-txt-color-faded: #252e3cD9;

 --base-txt-color-muted: #252e3c66;

 --base-lnk-color: #894C45;

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

 --base-border-color: #252e3c4D;

 --main-nav-bg-color: #2e3a4b;

 --main-nav-bg-color-faded: #2e3a4bD9;

 --main-nav-bg-color-muted: #2e3a4bA6;

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

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

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

 --box-bg-color: #778EA01A;

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

}

Usage
1. Within your "Global Complete Theme Customization" profile field insert the following:

Code:
/* DARK MODE */

:root {

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

}

Code:
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

/* DARK MODE */

:root {

 --base-font-size: calc(16px + 0.090625vw); /* i do not suggest changing the vw specs, only the px */

 --base-line-height: 1.5;

 --forum-wrap-max-width: 1200px; 

 --accent-font-family: "Jersey 15", sans-serif;

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

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

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

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

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

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

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

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

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

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

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

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

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

}

]]>