CSS - Left Navigation Bar


The code contained here will affect the navigation bar to the left of your wiki content.

Use this code if you want to remove the background color/tint from the text and icons. This would be useful if you are going to use a background image for the nav bar.
/*Removes Text Background color*/
.campaign-public-layout #campaign-nav {top:20px; background-color:transparent;}

Changing what the links say is a two step process. The first bit of code removes all of the old text by making it 0 pixels tall and wide. The second part adds a new text string to the end of the existing one which essentially doesn’t exist thanks to the first bit of code. Type the text that you want showing up in the content:" " section, between the quotation marks. See the section of this code that deals with the settings link for an example.
/*Change Link Names*/
/*removes default text*/
#campaign-nav .nav-text {font-size:0;}

/*adds customized text*/
#campaign-nav .dashboard a:after {content:" ";}
#campaign-nav .adventure-log a:after {content:" ";}
#campaign-nav .wiki a:after {content:" ";}
#campaign-nav .characters a:after {content:" ";}
#campaign-nav .forum a:after {content:" ";}
#campaign-nav .calendar a:after {content:" ";}
#campaign-nav .settings a:after {content:"Settings";}
#campaign-nav .front-page a:after {content:" ";}
#campaign-nav .maps a:after {content:" ";}
#campaign-nav .items a:after {content:" ";}
#campaign-nav .file-docker a:after {content:" ";}

Looking to change the icons instead? The content:url field is what points at the new icon, that’s the part to change. Here you go, though I’d try to keep them 33px to a side or smaller otherwise things might get crowded:
/* changes the default icons */
span.nav-icon.icon.op-icon-dash.op-icon {content: url("https://db4sgosdfgwjqfwig.cloudfront.net/campaigns/191667/assets/945803/round-table.png?1550338138");}
span.nav-icon.icon.icon-home {content: url("https://db4sgowjsfqfwig.cloudfront.net/campaigns/191667/assets/945804/wooden-door.png?1550338367");}
span.nav-icon.icon.op-icon-forum.op-icon {content: url("https://db4sgowjsdfqfwig.cloudfront.net/campaigns/191667/assets/945790/trumpet-flag.png?1550335016");}
span.nav-icon.icon.icon-calendar-empty {content: url("https://db4sgsdfowjqfwig.cloudfront.net/campaigns/191667/assets/945792/sands-of-time.png?1550335532");}
span.nav-icon.icon.op-icon-page.op-icon {content: url("https://db4sgowjqsffsfwig.cloudfront.net/campaigns/191667/assets/945811/quill-ink.png?1550339899");}
span.nav-icon.icon.op-icon-image-embed.op-icon {content: url("https://db4sgosdgfwjqfwig.cloudfront.net/campaigns/191667/assets/945812/closed-doors.png?1550340292");}
span.nav-icon.icon.op-icon-book-wiki.op-icon {content: url("https://db4sgowjsdgqfwig.cloudfront.net/campaigns/191667/assets/945808/read.png?1550339632");}
span.nav-icon.icon.op-icon-characters.op-icon {content: url("https://db4sgasfowjqfwig.cloudfront.net/campaigns/191667/assets/945807/hooded-figure.png?1550338986");}
span.nav-icon.icon.op-icon-backpack.op-icon {content: url("https://db4sgowrfgcjqfwig.cloudfront.net/campaigns/191667/assets/945805/locked-chest.png?1550338587");}
span.nav-icon.icon.op-icon-map.op-icon {content: url("https://db4sgfghowjqfwig.cloudfront.net/campaigns/191667/assets/945800/castle.png?1550337544");}

This next chunk of code is used to insert a background image and to manipulate the image’s proportions. You will need to adjust the height and possibly the width for best results but the values I’ve given here should be fairly close to what you will need. The background image that you want to use go in between the parenthesis of the background-image:url line.
/* Custom Background Image and Size Settings */
/* sidebar navigation banner background */
.collapsable-nav-row .front-nav-container {

Use this to round off the corners, add a border color, and add a gradient background color
/*left sidebar boxes gradient background - courtesy of CamarillaDee*/
.campaign-public-layout #campaign-nav {background-image: linear-gradient(to bottom, #181818 , #002A50); border: 3px solid #489ebe; border-radius: 10px;}

CSS - Left Navigation Bar

Testbed Abersade Abersade