The Druid en

Installations 10 Likes 9

Very earthy, and woodland themed... theme! This theme is designed around the Dark Mode theme and doe snot change the background color and only makes minor adjustments to some colors, font changes, and other minor adjustments to the overall look and feel of your campaign page.

This theme will be the basis for other things such as Attribute Templates as Content Packs since this is my own personal CSS spreadsheet for my campaign.

Please remember to add "@import" to the top of your CSS, if multiple themes have them you'll need to move any additional "@import" references manually.

Latest version 1.1 View content

Released 2 years ago

Cleaned up CSS so it's more readable for anyone wishing to take snippets for their own use.
Changed how entity images are displayed, aspect ratio is set to 2:3 or 1.5.
Added background image root element in case anyone is using my theme in conjunction with another that displays a custom background image.

Plugin CSS for 1.1


@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;500;600;700;800;900&family=Charm:wght@400;700&family=Libre+Baskerville&family=Long+Cang&family=Sacramento&family=Homemade+Apple&display=swap');

/* GLOBAL ELEMENTS */
:root {
	--background-image: none!important; /* add "url ()" to customize background */
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}

/* GLOBAL PAGES */
body, a {font-family: 'Libre Baskerville', serif; font-size: 10pt; text-align: left;}
h1 {font-weight: 700;}
h1, h2, .panel-title a, .title a, .campaign-name {font-family: 'Cinzel Decorative', cursive;}
h3, h4, h5, h6 {font-weight: 500; font-family: 'Cinzel', serif;}

/* DASHBOARD */
.campaign-name {font-size: 18px;}
	/* MAP */ .widget-map .panel-body {height: 415px; padding: 0;}
	/* CALENDAR */ .widget-calendar .panel-body {height: 360px; padding: 50px 15px;}
	/* ENTITY PREVIEW WIP */
.pinned-entity .preview {max-height: 350px !important; }
/* position: relative; overflow: hidden; padding-top: 0; */
/* .widget-preview .panel .panel-body .preview {max-height: 350px !important;} */
/* .hidden {min-height: 351px; display: none !important;} .widget-preview .panel .panel-body .preview {max-height: unset; height: 350px;} */

/* SIDEBAR */
.main-sidebar .sidebar li.subsection a {text-transform: capitalize;}
.main-sidebar .sidebar li.subsection {padding-left: 30px;}
.main-sidebar .sidebar li .sidebar-text, .main-sidebar .sidebar li a {font-size: 0.9em;}
.sidebar-submenu {font-variant: normal!important;}

/* PAGE CONTENT */
.wrapper {background: var(--background-image)!important;}
.content-wrapper a {color: #00b386} /* #a06fb7 */

/* READBILITY & CONSTRAST */
.skin-black .main-header .navbar, .skin-black .main-header .logo {background-color: #f5f7fa;} 
.help-block, .text-muted, body, .breadcrumb>li+li:before {color: #e1e1e1;}
.skin-black .sidebar a {color: #dfdfe6;}
.alert {background-color: #464545 !important; color: #eee!important; border-radius: 2px; border: 0;}
.btn-primary {background-color: #1c1c1c !important; color: #eee!important;}
.btn-danger a {color: #ffffff!important;}
.panel-title a {font-size: 2em; margin-top: 2em;}
.panel-title .ra, .panel-title .fa, .panel-title .fab, .panel-title .fad, .panel-title .fal, .panel-title .far, .panel-title .fas {line-height: 0;}

/* ENTITY STYLES */
.entity-header .bottom .texts {-webkit-text-fill-color: #000; -webkit-text-stroke: 0.5px #ada494;}
div.entity-image {background-image: var(--entity-image-url)!important; background-repeat: no-repeat; background-size: cover; aspect-ratio: 1.5;}
.entity-header .entity-image {width: 250px; height: 375px;}
.entity-header-text {margin-left: 5%;}


/* CUSTOM ENTITY STYLES */
.cust-title {font-family: 'Cinzel Decorative', cursive; text-decoration: underline;}
.cust-title:after {content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";}
.cust-note {font-family: 'Long Cang', cursive;}
.cust-letter {background: url("https://i.imgur.com/8RUj91u.jpg") repeat-y center; background-size: 100%; background-attachment: fixed; color: black; font-family: 'Homemade Apple', cursive; font-size: 2em; line-height: 2em; padding: 15px; min-width: 500px; min-height: 500px;}