Heldencoast - Comic Theme en

Installations 5 Likes 8

This plugin was made for a Masks: A New Generation campaign called Heldencoast (click for a live example!), but the whole crew were so happy with what I threw together I decided to add it here for anyone's use!

This is a complete overhaul. It is basically incompatible with everything else. It changes absolutely everything. Unfortunately releasing it in pieces is all but impossible because so many things are so entwined with each other. If you want something specific you'll have to ask me on discord.

Features:

Incredible Icons! - (Outdated! See below!)
Fantastic Fonts! - Changes the fonts across the entire site to fit a lighthearted, but action packed, comic book feel. (No, not comic sans)
Breathtaking Borders! - In an attempt to mimic old comic book windows being a little shaky and a little rugged, I modified all sorts of elements. Might have gone a bit exaggerated but it looks great in context!
Beautiful Backgrounds! - A sun over a silhouetted city, showing a beautiful day to save civilians.
- Different for the Dead! - Or a dark eclipse looming over graves, for those dead character entities NOTE: the eclipse will also go over anything tagged with 'villain'. You will need to add a villain tag to take advantage of this. You can hide this tag as admin-only in case you want to give a character a spooky look with none the wiser.
Dazzling Dashboard! - Items are slanted, borders above are brought through
Slanted Subitems! - Everything is just a liiiittle rotated to give a really casual, loosy-goosey feel.
Luxurious Labels! - Squares? BORING! Now your tags, items, and all other labels have interesting shapes!
Quixotic Quotes! - Standard blockquotes are just... a little line to the left with some text. LAME! These new quote blocks look snazzy!
Heavenly Headers! - Okay this belongs under the dashboard. But the headers really pop and add to the tone.

uh... *checks thesaurus*

Distinctive Dropcaps! - The first paragraph now has a snazzy looking dropcap to really stand out!
Maybe Mobile! - Tested on mobile and works for most things. However this was designed on desktop and there may be issues.

I think that's about most of the major features. Overall as said above it's a massive list of sweeping changes that changes your campaign from regular ol kanka to something resembling a fun, lighthearted comic.

Required CSS (seriously):

Like many of these themes this one requires you to add a bit of CSS to the top of your custom theming. These are to import the custom fonts, and to declare them as variables for use throughout the site. This means you can change the header and main body font if you would like. Note: there are 2 other fonts in use that aren't changeable as of yet: the title of your campaign in the sidebar, and the font under titles.

/* Import the fonts. Must be at the top of CSS */

@import url("https://fonts.googleapis.com/css2?family=Acme&family=Bangers&family=Special+Elite&family=McLaren&family=Luckiest+Guy&family=Road+Rage&display=swap");

/*Create font variables*/
:root {
	--header-font: "Bangers";
	--body-font: "Mclaren";
}

Icons:

With icons being customizable now by default Kanka, the 0.98 update will remove the brute force changing. Here are the list of suggested icons to modernize and make heroic your icons!

Locations: fas fa-map-marker-alt
Organizations: fas fa-sitemap
Timelines: fa-solid fa-timeline
Races: fas fa-dna
Quests: fa-solid fa-question
Journals: fa-solid fa-book
Items: fa-solid fa-box-open
Events: fas fa-calendar-check
Abilities: fad fa-atom
Notes: fas fa-database

Known Issues:

Sometimes the tags half-load and are cut off, just refresh the page
Titles in mobile have the last little bit of them cut off. You can still read them but it can be a little sad.
Too good looking. I should make it ugly so people aren't so sad at their default looking campaigns :^)

Roadmap:

v0.9 - This release
v1.0 - Introduce more variables for customization
As is there are only variables for two fonts, in case you want to change them. The way the background is set up is very involved and takes 4(!!) images to make work. I would like to change it so that you can change these elements if you so choose, along with other minor tweaks.

Special Thanks:

Waldue - I stole her font overhaul and fiddled with it. You can see the remnants of it in the code.
Salvatos - Helped me a ton with silly little problems I ran into, along with suggestions for improvement
Jay - Not only for making Kanka, and some help on themes, but I also took a look at his dead characters theme and adapted it to this
Guardian - Used their futuristic icons as a jumping off point for my own overhaul (but completely redid it)

Suggested Plug-ins:

These are optional add-ons that I think might improve the look, feel, and functionality of your campaign.

Scrollable Main Sidebar by Salvatos
Sidebar Tweaks by Guardian
Scrollable Map Sidebar by Salvatos
Stub Banner by me. Because I think its useful. :^)
Masks: A New Generation attribute template... Coming Soon™

Latest version 0.97 View content

Released 1 year ago

Guess who tried to use their theme on their phone for the first time and cried? That's right. Not me. I am too cool to cry (don't tell anyone but it really was me).

Various fixes for mobile ease-of-use
Font changes for the latest Kanka update
Added padding to locks on dashboard because it was too crowded

Plugin CSS for 0.97


/***************/
 /***Dashboard***/
/***************/
/*Giving the header a background, and removing the ugly margin replacing it with padding*/
.campaign-header.no-header {
    background-color:white;
    margin-bottom:0px;
    padding-bottom:30px;
}

/* Lock padding */
.dashboard-widgets .fa-lock {
    margin-left:5px;
}

/*Messing with the entity grid real quick, making the pinned sections a bit wider as they were too small and made the page REALLY tall just for them.*/
.entity-grid {
    grid-template-columns: 200px minmax(auto,calc(100% - 450px)) 250px!important;
}
/* Fixing how bad above makes it look on mobile*/
@media (max-width: 991px) {
.entity-grid {
    grid-template-columns: 120px minmax(auto,calc(100% - 320px)) 200px!important;
}
}

/*This changes the header/titles of the dashboard to be slanted with the comic burst image*/
.widget-header-text {
    /*NOTE: this background has a pngtree watermark on it... shouldn't be used for anything else. Should be replaced buuuut I'm lazy and it looks good as is*/
    background-image:url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/hCEeuKdZ6StKL0rPeSIa4BFeWyiFebFq7MLi2X62.jpg");
    background-size: 100% 300%;
    color: #222222;
    width:98%;
    height:94%;
    margin:auto;
    padding:0.4ch;
    display: table;
    vertical-align: center;
    text-align: center;
    transform: rotate(-0.3deg);
    clip-path: polygon(3.99% 2.75%, 98.25% 2.75%, 93.76% 100%, 0% 100%);
}
/* Adds an exclamation point after all titles for extra comic book snazziness*/
.widget-header-text:after {
    content: "!";
}
/*Change header defaults*/
.widget-header {
    background-color:#222222;
    width: 33%;
    min-width: 40ch;
    padding: 0.5ch;
    margin:auto;
    margin-bottom:1%;
    transform: rotate(0.3deg);
    clip-path: polygon(3.99% 2.75%, 98.25% 2.75%, 93.76% 100%, 0% 100%);
}

/*Increases the size of the first letter by a bit*/
.widget-header:first-letter {
    font-size: 3ch;
    top: 2ch;
}

/*This adds the tilts to 1/3 and 1/4-width entities*/
.dashboard-widgets .col-md-3:nth-child(odd), .dashboard-widgets .col-md-4:nth-child(odd) {
    transform:rotate(0.5deg);
}
.dashboard-widgets .col-md-3:nth-child(even), .dashboard-widgets .col-md-4:nth-child(even) {
    transform:rotate(-0.5deg);
}

/*Changes the preview widget to have the funky borders*/
/*NOTE: moving the title to the bottom and increasing image size is in the DASHBOARD ENTITY HEADER section. It was like that before I edited the CSS*/
div.panel.panel-default:nth-child(1), .widget-recent {
    border: solid;
    border-color: #222222;
    border-width: 4px 5px 3px 4px;
    border-radius: 3ch 0.3ch 3ch 0.6ch / 0.5ch 3ch 0.1ch 5ch;
    box-shadow: 1px 1px 5px #222222;
}

/*Recent has an extra empty area. Remove the bottom border*/
.widget-recent {
    border-bottom:0px;
}

/*Add it to a child part so it looks like one seamless border*/
.widget-recent .widget-recent-list {
    border-bottom: 3px solid black;
}

/*Changes the titles of widgets to have the fancy comic book title font*/
h3.panel-title a:link, h3.panel-title a:hover, h3.panel-title a:visited, h3.panel-title a:active{
    color: white!important;
    text-shadow: 2px 2px 1px #6B2D22!important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #6B2D22;
    font-size:4ch!important;
}

/* Get rid of the grey background otherwise it will mute the colours*/
.panel-title {
    background-color: transparent!important;
}

/*Adds padding to increase image size and move the title to the bottom. Not my code.*/
.panel .panel-heading-entity h3 a {
    padding: 300px 10px 10px 10px;
        padding-top: 300px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    display: inline-block;
    width: 100%;
    color: #fff !important;
    text-shadow: rgba(0,0,0,.9) 0 1px 4px;
    font-size: 18px;
}

  /*******************/
 /**General Changes**/
/*******************/
/*Pinned & profile sidebar border fix*/
 div.sidebar-section-title.cursor {
     border-color: darkgrey;
 }

/*Removing that weird blank box at the top. Is that where alerts go? Who knows. But it gets in the way of the background. I'll get rid of this and make the background on the body tag later */
section.content-header {
    display:none;
}

body {
    background-color: #f7f6f6;
}

/*Drop Cap for first paragraph of main entity entry*/
.entity-content>p:nth-of-type(1):first-letter{
    float: left;
    font-family: var(--header-font);
    color: #FEA200 !important;
    text-shadow: 2px 2px 1px #6B2D22 !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #6B2D22;
    font-size: 6rem;
    line-height: 0.65;
    margin: 0.1em 0.2em 0em 0em;
}

/*Give locations, and parent items, a background */
.entity-header-sub, .header-buttons {
    margin-top: 10px;
}
/*Adds a narrator box to assets and the sub (location/parent)*/
.entity-header-sub, .entity-asset {
    background-color: #FFD875!important;
    padding:0.3em;
    padding-top:5px!important;
    border-radius:3px;
    outline:1px solid #222222;
    box-shadow: 2px 2px 2px 1px #222222;
	color:var(--body-text)!important;
}
/*Keeps links blue*/

.entity-grid>.entity-header.with-entity-banner .entity-header-sub a {
	color:var(--link-text)!important;
}

/* This hides the entity type because it shows up in the sidebar anyway and screws up formatting elsewhere*/
.entity-type.entity-header-line
{
    display:none!important;
}

/* Entity notes and bodies, comic booky feel [sticky notes] */
div.box.box-solid.box-entity-entry, div.box.box-solid.entity-note {
    background: rgba(248,248,245,0.8);
    border: solid black;
    border-color: black;
    border-width: 2px 4px 2px 5px;
    border-radius: 1ch 1ch 1ch 5ch/5ch 2ch 7ch 2ch;
    transform: rotate(0.1deg);
    box-shadow: none;
}
/* Remove border from headers */
div.box-header.with-border {
    border: 0px;
}

/*Change HR color*/
.entity-story-block hr {
    border-color: darkgrey;
}

/* tbh I don't remember */
.wrapper {
    background-color: #FCF8F4;
}

/* I am very tired filling this out, don't remember either.*/
.content-wrapper {
    background:transparent;
}

/* Makes the footer transparent because it ugly. I'll make it a semi-transparent thing later -- NOTE: pretty sure this is done elsewhere, and changed it to a solid grey*/
footer#footer.main-footer {
    background:transparent;
}

/* Fancy border for the entity image, tilted a bit*/
.entity-header .entity-image {
  border: solid black;
  border-color: black;
  border-width: 5px 3px 3px 5px;
  border-radius:95% 4% 97% 5%/4% 94% 3% 95% !important;
  transform: rotate(-0.3deg);
}

/*Sidebar adjustments for both profile & pins*/
div.sidebar-section-box {
  padding-bottom: 0.5em;
  z-index: -1;
  background: #FFD875;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
}
/*Rotates the sidebars left and right depending on their position, so that they always alternate no matter the number*/
.sidebar-section-box:nth-child(odd) { transform:rotate(0.5deg);}
.sidebar-section-box:nth-child(even) { transform:rotate(-0.5deg);}

li.list-group-item {
    border-color: darkgrey;
}

/* breadcrumb link colours */
.entity-breadcrumb li>a {
    color:black !important;
}
/* This is to make it so the breadcrumbs are visible on the background. Gives them a blue border. WIP.*/
.entity-breadcrumb {
    font-size: 1.2em;
    font-weight: bold;
    color:black !important;
    text-shadow: 
    -1px -1px 0 #5083c7,
    1px -1px 0 #5083c7,
    -1px 1px 0 #5083c7,
    1px 1px 0 #5083c7;
}

/*Changes the colour of the 'warning' buttons from red (I believe) to comic orange */
a.btn.btn-warning.btn-sm {
    color: #6B2D22;
    background-color: #FEA200;
}

/*Tooltip changes, ignoring tooltips on any icons*/
a:not(.icon) + .tooltip .tooltip-inner, .calendar-event-block .tooltip .tooltip-inner{
    color:black;
    z-index: 5;
    background-color:white;
     border: solid black;
     padding:2ch;
    border-color: black;
    border-width: 3px 3px 5px 5px;
    border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
    transform: rotate(0.1deg);
}

  /*********/
 /**Icons**/
/*********/

/* Changing sidebar, location, and parent icons */
.sidebar .section-locations i:before, .kanka-entity-character div.entity-header-sub-element i:before, .kanka-entity-location div.entity-header-sub i:before  { content: "\f3c5"; font-family: FontAwesome; font-weight: 400; }  
.sidebar .section-items i:before { content: "\f49e"; font-family: FontAwesome; font-weight: 400; } 
.sidebar .section-abilities i:before, .kanka-entity-ability .entity-header-sub i:before { content: "\f5d2"; font-family: FontAwesome; font-weight: 400; } 
.sidebar .section-races i:before, .kanka-entity-race .entity-header-sub i:before { content: "\f471"; font-family: FontAwesome; font-weight: 400; }
.sidebar .section-quests i:before, .kanka-entity-quest .entity-header-sub i:before  { content: "\3f"; font-family: FontAwesome; font-weight: 400; }
.sidebar .section-journals i:before, .kanka-entity-journal .entity-header-sub>.margin-r-5 i:before { content: "\f02d"; font-family: FontAwesome; font-weight: 400; }
.sidebar .section-organisations i:before, .kanka-entity-organisation .entity-header-sub i:before { content: "\f0e8"; font-family: FontAwesome; font-weight: 400; } 
.sidebar .section-events i:before, .kanka-entity-event .entity-header-sub>.margin-r-5 i:before { content: "\f274"; font-family: FontAwesome; font-weight: 400; }
.sidebar .section-timelines i:before, .kanka-entity-timeline .entity-header-sub i:before  { content: "\f550"; font-family: FontAwesome; font-weight: 400; }
.sidebar .section-notes i:before, .kanka-entity-note .entity-header-sub i:before { content: "\f1c0"; font-family: FontAwesome; font-weight: 400; }
.kanka-entity-calendar .entity-header-sub i:before { content: "\f783"; font-family: FontAwesome; font-weight: 400; } 

/*Quick Creator*/
div.modal-body a[data-url*="locations"] i:before { content: "\f3c5"; font-family: FontAwesome; font-weight: 400; }  
div.modal-body a[data-url*="items"] i:before { content: "\f49e"; font-family: FontAwesome; font-weight: 400; } 
div.modal-body a[data-url*="abilities"] i:before, .dropdown-menu a[href*="abilities"] i:before { content: "\f5d2"; font-family: FontAwesome; font-weight: 400; } 
div.modal-body a[data-url*="races"] i:before { content: "\f471"; font-family: FontAwesome; font-weight: 400; }
div.modal-body a[data-url*="quests"] i:before { content: "\3f"; font-family: FontAwesome; font-weight: 400; }
div.modal-body a[data-url*="journals"] i:before { content: "\f02d"; font-family: FontAwesome; font-weight: 400; }
div.modal-body a[data-url*="organisations"] i:before { content: "\f0e8"; font-family: FontAwesome; font-weight: 400; } 
div.modal-body a[data-url*="events"] i:before { content: "\f274"; font-family: FontAwesome; font-weight: 400; }
div.modal-body a[data-url*="timelines"] i:before { content: "\f550"; font-family: FontAwesome; font-weight: 400; }
div.modal-body a[data-url*="notes"] i:before { content: "\f1c0"; font-family: FontAwesome; font-weight: 400; }

  /*****************************/
 /**Blockquotes, tags, labels**/
/*****************************/

/*Background and shape of blockquote*/
blockquote {
    background: rgba(255,255,255,0.8);
    clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
    border: none;
  	display:flex;
  	margin:auto;
  	margin-bottom:15px;
  	justify-content:space-between;
}
/*styling for the quotation marks*/
blockquote::before, blockquote::after {
    font-family: FontAwesome; 
    font-weight: 400;
    color: #FEA200 !important;
    text-shadow: 2px 2px 1px #6B2D22 !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #6B2D22;
    font-size: 2em;
    line-height: 0.65;
    margin: 0.1em 0.2em 0em 0em;    
}
/*content for quotation marks -- flex, now, thanks Salvatos! -- should keep them always to the left or right and formatting box size*/
blockquote::before {
     align-self:flex-start;
     content:"\f10d ";
}
blockquote::after {
    content:"\f10e ";
  	align-self: flex-end;
}

/* General label changes to be a starburst */
.label {
    clip-path: polygon(30.29% 5.19%, 42.54% 13.97%, 50.22% 0.95%, 57.79% 13.97%, 70.15% 5.19%, 71.71% 20.17%, 86.63% 17.17%, 81.91% 31.50%, 96.82% 34.81%, 86.63% 46.00%, 98.95% 55.08%, 85.03% 61.16%, 92.65% 74.45%, 77.41% 74.36%, 79.02% 89.60%, 65.08% 83.33%, 60.41% 97.88%, 50.16% 86.49%, 40.03% 97.88%, 35.25% 83.33%, 21.42% 89.60%, 22.92% 74.36%, 7.78% 74.45%, 15.30% 61.16%, 1.49% 55.08%, 13.70% 46.00%, 3.62% 34.81%, 18.41% 31.50%, 13.80% 17.17%, 28.61% 20.17%);
    padding: 0.8ch!important;
}

/* Removes the clip path from certain labels*/
.label-danger{
    clip-path: none;
}

/* These should be tags */
.entity-tags a {
    margin-right:0.3%;
}
/*Change display so the tags don't group up and fuck up all the header formatting*/
div.entity-tags {
    display:block!important;
}

/*Clips certain tags. Odd (1, 3, 5 etc) and calendar seasons */
.entity-tags a:nth-child(odd) .label, .calendar-season, .tooltip-inner .label:nth-child(odd) {
        margin-left:0.2%;
        padding: 0.5ch;
        padding-right:1.5ch!important;
        padding-left:1.5ch!important;
        clip-path: polygon(15% 10%, 98% 8%, 88% 90%, 5% 90%);
}

/*Clips the even tags*/
.entity-tags a:nth-child(even) .label, .tooltip-inner .label:nth-child(even){
        padding: 0.5ch;
        padding-right:1.5ch!important;
        padding-left:1.5ch!important;
        clip-path: polygon(15% 6%, 95% 9%, 84% 95%, 5% 90%);
}

/*Removes clipping path from event blocks, help blocks, and overlay tags. These ones needed to be square for clarity. Can be changed to some like above, but honestly? Not worth. */
.calendar-event-block, .help-block .label-warning, .widget-overlay .tags .label, .box-title .label-info {
    clip-path:none;
}
/*Rotate calendar events left and right*/
.text-center:nth-child(odd) .calendar-event-block:nth-child(odd), .text-center:nth-child(even) .calendar-event-block:nth-child(even) 
{
        transform:rotate(0.8deg);
}
.text-center:nth-child(odd) .calendar-event-block:nth-child(even), .text-center:nth-child(even) .calendar-event-block:nth-child(odd) 
{
        transform:rotate(-0.8deg);
}

  /***************/
 /**Backgrounds**/
/***************/

/* Background image(s) for the whole site. This is overwritten by the DEAD CHARACTERS section to make the city a graveyard and desaturate */
.content {
    background-image: url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/ooxo7xG63GHuoPBGDC2lkxQ6OFwnWjAoR7expfa1.png"), url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/70hnMc2FSsWLWAcRCbrKdGO8FxsEW35egjiObXSb.png"), url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/PxlTgRji7VQzOFeX3heunvB5zfZZAgC1SLXhWzia.png");
    background-repeat: repeat-x, no-repeat, no-repeat;
    background-position: bottom, top, bottom;
    background-size: 70%, 100%, 100%;
}

/*Adding a sun behind the other background. NOTE: this is overwritten in the DEAD CHARACTERS section to replace the sun with an eclipse on dead characters and villains*/
.wrapper {
    background-image:url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/UonvzebolGzX6Q1liwKcIjDVlGomkNT48Vj62koO.png")!important;
    background-size: 500px!important;
    background-repeat:no-repeat!important;
    background-attachment: fixed!important;
    background-position-x:85%!important;
    background-position-y:-35%!important;
}


/* Easter egg! For a quest complete you get confetti */
.quest-completed .wrapper {
    background-image:url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/UonvzebolGzX6Q1liwKcIjDVlGomkNT48Vj62koO.png"), url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/vkacY3nhcxzXib0GQMVQIo4nNtqwMRYB6qf5UhqP.png")!important;
    background-size: 500px, auto!important;
    background-repeat:no-repeat, repeat-x!important;
    background-attachment: fixed, scroll!important;
    background-position-x:85%, 0!important;
    background-position-y:-35%, 0!important;
}

/*Fixing footer to blend in with the background*/
footer#footer.main-footer {
    background-color: #424143;
    
    
}
.main-footer .text-muted, .footer-links span, .footer-links .email, .footer-links .footer-copyright {
        color:lightgrey!important;
}

div.footer-links
{
    background-color: #59595C;
}


  /*******************/
 /**Dead Characters**/
/*******************/

/*Mute them colours*/
.character-dead .entity-image, .character-dead .entity-name-header .entity-name, .character-dead blockquote, .character-dead .entity-sidebar {
  filter: grayscale(50%);
}

/*Change the city background (forebackground?)*/
.character-dead .content {
  	background-image: url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/hshFbUHuw91bhIXJSuxHxpKpyMLIWx8vb9ERIuDU.png"), url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/nEQGqdv56zNv8qnpgmjUFlAywZS6hi5eOOmzrmdg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: bottom, top;
    background-size: 100%, 100%;
}


/* Add an eclipse; this is added to the villains as well */
.character-dead .wrapper, .kanka-tag-villain .wrapper {
    background-image:url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/5jwUXqUOHDslGgaIHIQb1VfC5Y8Q6FnWxc8qunHp.png")!important;
    background-size: 500px!important;
    background-repeat:no-repeat!important;
    background-attachment: fixed!important;
    background-position-x:85%!important;
    background-position-y:-35%!important;
}


  /*******************/
 /***Entity Titles***/
/*******************/

/*Give entity titles a snazzy look - a brush in the background with a custom font*/
.entity-grid div.entity-title {
    display:inline-block;
    background: url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/Rl3PqUkzueI08u0TQawUcWnhKWEctlpWkJwOBrzA.png")!important;
    background-size:100% 100%!important;
    padding-left:20px;
    padding-right:15px;
    background-repeat:no-repeat!important;
    color: #6b2d22;
    font-family: "Road Rage",cursive;
    font-size: 1.6em;
    height:auto!important;
    width:auto!important;
    //text-align:center;
    //float:left;
}

/* Changing entity titles on maps */
.marker-details .entity-title .entity-name{
    font-family:var(--header-font)!important;
    font-size:2em;
}


  /********************/
 /*** ENTITY LISTS ***/
/********************/
/*Set font to the 3rd element of TD (first name) to Bangers font. All links use the class name so this is a way to target.*/
.table-responsive td:nth-child(3) a.name {
    font-family:"Bangers";
}
/* Adding folder to nexted items */
.table-nested tr:not([data-children="0"]) td:nth-child(1):after {
    display:inline;
content: "\f07c";
font-family: FontAwesome;
font-size: 2rem;
padding-left: 13px;
margin-right: -25px;
}

/*removing bolding*/
.table-nested tr:not([data-children="0"]) {
    font-weight:1;
}

/*Change all the images of the tables*/
.table-responsive .entity-image {
  border: solid black;
  border-color: black;
  float:left;
}
/*Odd images specific styling*/
.table-responsive tr:nth-child(odd) .entity-image{
    border-width: 1px 2px 1px 2px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(3deg);
    
}

/*Even image specific styling*/
.table-responsive tr:nth-child(even) .entity-image{
  border-width: 1px 2px 2px 1px;
  border-radius:4% 5% 6% 95%/95% 4% 92% 5%;
  transform: rotate(-3deg);
}

/*I think this adds a shadow to the 'Last edited by' for visual clarity*/
p.help-block.text-right
{
	color: #dddddd!important;
    text-shadow:0 0 2px black!important;
}

  /*************/
 /*** Fonts ***/
/*************/

/*Sidebar campaign tile*/
section.sidebar-campaign .campaign-block .campaign-head .campaign-name{
font-family: "Luckiest Guy"; /* Unique font. Not used anywhere else... Yes its the fornite font */
text-transform: uppercase;
font-size: 2ch!important;
font-weight: inherit;
margin-bottom: 4px;
line-height: normal;
max-height: 35px; 
color: #FEA200 !important;
    text-shadow: 2px 2px 1px #6B2D22 !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #6B2D22;
    font-size: 6rem;
    line-height: 0.65;
    margin: 0.1em 0.2em 0em 0em;    
}

/* Campaign selector dropdown back to a normal colour*/
.campaign-name>i {
    font-size:1.5ch;
    color:white;
    text-shadow:0px 0px 0px;
  -webkit-text-stroke-width: 0px;
}

/* Pinned attribute section font change */
li.list-group-item.pinned-attribute.pinned-attribute-section.text-center {
    font-family:var(--header-font);
    font-size: 1.3em;
} 

/* Pretty sure below was taken from Waldue's font overhaul. I'll clean it up later. */

/* Entity-Name with shadow */
.entity-name {
display: inline-block;
font-size: 42px;
color: #FEA200 !important;
text-shadow: 2px 2px 1px #6B2D22 !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #6B2D22;
}
div.entity-name-icons.entity-name-icons-2 {
    margin-left:5px;
}
/*end section*/

/*Font-size Entities */
.box-body {

padding: 10px;
font-size: 16px;
}
/*end section*/

/*Entity-Icon*/
.entity-header .entity-name-header i.entity-icons {
margin-left: 10px;
font-size: 18px;
cursor: pointer;
color: #fff;
}
/*end section*/

/*Entity-Icon below*/
.entity-header .entity-header-col .entity-header-sub {
padding-top: 12px;
color: #fff;
}
/*end section*/

/*ENTITY PAGE NAMES*/
.entity-actions h1 {
margin: 0;
padding: 1px 0px 4px 4px;
font-size: 1.8em;
letter-spacing: 0.40px;
display: inline-block;
text-align: center;
font-weight: 400;
font-family: var(--header-font), cursive; }
/*END SECTION*/

/*THE FONT EVERYWHERE ELSE*/
body {
letter-spacing: .5px;
font-size: 1em;
font-family: var(--body-font);
line-height: 1.3; }

body a, a, h4, h5, h6 { font-family: var(--body-font);}
/*END SECTION*/

/*Sidebar Tweak*/
.main-sidebar .sidebar li .fa, .main-sidebar .sidebar li .far, .main-sidebar .sidebar li .fas, .main-sidebar .sidebar li .ra {
vertical-align: middle;
}
.main-sidebar .sidebar li span {
vertical-align: bottom;
}
/*end section*/

/*HEADERS IN ENTITY ARTICLES*/
h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a, #campaign-dashboard body a, #campaign-dashboard a { font-family: var(--header-font); }
/*END SECTION*/

/*Small dashboard widget fix*/

#campaign-dashboard .panel-body a, #campaign-dashboard .more a {
font-family: var(--body-font);
}
/*end section*/

/*Placeholder, campaign name on main page*/
div.campaign-head > a.campaign-title {
    font-family:"Luckiest Guy";
}

/*Change the fonts & colours on the buttons*/
a.btn {
    font-style: bold;
    font-family: var(--header-font), cursive;
    font-size: 1.3ch;
}

/*Changes the font of entity names INSIDE tooltips*/
.tooltip-inner .entity-name {
    font-family:var(--header-font);
}

/*Changes the section title to be the header font*/
div.sidebar-section-title {
    font-family: var(--header-font),cursive;
}

/*Tooltip overflow fix (thanks Salvatos!)*/
/** Change positioning of various elements so tooltips can extend beyond overflow:hidden containers **/
.calendar tbody td .calendar-event-block {
    overflow: unset;
}

/* This should fix the text going off the events, and being cut off vertically. Key word should.*/
.calendar-event-comment, .reminder-entity {
overflow:hidden;
}
.reminder-entity {
    height:15px;
}
.calendar-event-comment {
    height:18px;
}

/* Entity sidebar */
.sidebar-section-box {
    overflow: unset;
}
.entity-sidebar {
    position: relative;
}
.list-group-item {
    position: unset;
}

/* Dashboard widgets */
.panel .panel-body .preview {
    position: unset;
}

/*Remove gradient otherwise it overflows*/
.dashboard-widgets .preview:before {
    content:none!important;
}

/* TABLE OF CONTENTS */
/*Auto table of content formatting*/
.toc {
    border: 1px black solid;
    padding:10px;
    max-width:40%;
    float:right;
    margin:10px;
    border-width: 3px 4px 3px 5px;
    border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
    transform: rotate(1deg);
}
/*Adds a title to the toc*/
.toc ul:nth-child(1)::before {
    font-size:1.2em;
    content: "Table of Contents";
    font-family:"Bangers";
}

/* Gallery text fix */
.campaign-gallery .uploader {
    color:white;
}

/* Timeline fix */
.timeline::before {
    background: #fea200;
}