SSveter
I am looking for a template or just plaing tips on ccs for the standard OP sidebar. I've scoured the forums but nothing up to date or relavent.
I'd like to change the text to match the rest of my campaign color scheme. Later maybe even set up cool buttons or something.
https://edge-of-the-night.obsidianportal.com/
Comments
The code I use, essentially makes the current text size 0, and then adds a small bit of custom stylized text after each item.
@#campaign-nav .front-page .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .front-page a:after {content:"Base Camp"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .adventure-log .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .adventure-log a:after {content:"Journals"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .wiki .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .wiki a:after {content:"Encyclopedia"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .characters .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .characters a:after {content:"Personalities"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .items .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .items a:after {content:"Wonders"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .maps .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .maps a:after {content:"Cartography"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .settings .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .settings a:after {content:"GM Tools"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}@
-bort
"Morwindl":https://morwindl.obsidianportal.com
Campaign of the Year - 2018
The solution is to add HTML, and the only place you can do that is in the main body of a post. Many many many people have chosen to add the html (and the css to style it) to each and every page. I can't bring myself to do it though - if I ever want to make a tiny change, I have to change hundreds of pages.
-bort
"Morwindl":https://morwindl.obsidianportal.com
Campaign of the Year - 2018
I like having my HTML separate from my CSS.
I smashing as much css onto the advanced custom page as I can.
I just don't have any real knowledge on how to do it...learning as much HTML and CSS as I can however.
-bort
"Morwindl":https://morwindl.obsidianportal.com
@/* BEGIN - NAVIGATION: Left Sidebar Menu */
.campaign-public-layout #campaign-nav {
top:20px;
left:0px;
background-color:transparent;
} /* Removes old background, positioning */
.collapsable-nav-row .front-nav-container {
background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326436/NavBG.png);
width:100%;
background-repeat:no-repeat;
top:-5px;
left:10px;
width:175px;
height:275px;
} /* New custom background, positioning */
/* #campaign-nav .icon {display:none !important;} Blocks obsidian portal navigation icons from showing */
.campaign-public-layout #campaign-nav .icon {
background-color: transparent !important;
} /* Removes background behind navigation icons */
#campaign-nav .dashboard, #campaign-nav .calendar, #campaign-nav .forum {display:none;} /* Removes unused menu items */
#campaign-nav .front-page .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .front-page a:after {content:"Base Camp"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .adventure-log .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .adventure-log a:after {content:"Journals"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .wiki .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .wiki a:after {content:"Encyclopedia"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .characters .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .characters a:after {content:"Personalities"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .items .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .items a:after {content:"Wonders"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .maps .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .maps a:after {content:"Cartography"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
#campaign-nav .settings .nav-text {font-size:0;}/* Remove current text and replace it with next line */
#campaign-nav .settings a:after {content:"GM Tools"; color:#6d0808 !important; font-family:Gabriela !important; font-size:12pt !important;}
/* END - NAVIGATION: Left Sidebar Menu */@
Campaign of the Year - 2018
I tried to add this in as a block of code but as you can see none of the tags are working for me.
/* LEFT NAV SIDEBAR MENU */
/*Change Link Names*/
/*removes default text*/
#campaign-nav .nav-text {font-size:0;}
/*adds customized text*/
#campaign-nav .dashboard a:after {content:" Dashboard";}
#campaign-nav .adventure-log a:after {content:" A Lost Journal";}
#campaign-nav .wiki a:after {content:" A Dusty Tome";}
#campaign-nav .characters a:after {content:" The Cast";}
#campaign-nav .forum a:after {content:" The Podium";}
#campaign-nav .calendar a:after {content:" The Hourglass";}
#campaign-nav .settings a:after {content:" Settings";}
#campaign-nav .front-page a:after {content:" The Hearthfire";}
#campaign-nav .maps a:after {content:" Cartography";}
#campaign-nav .items a:after {content:" Bits and Baubles";}
/* Custom Background Image and Size Settings */
/* sidebar navigation banner background */
.collapsable-nav-row .front-nav-container {
width:100%;
background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/62189/assets/388589/SideNavBarBanner.png?1415216645);
background-repeat:no-repeat;
top:-1px;
left:15px;
width:170px;
height:400px;}
-Abersade
DM of "Rise of the Durnskald - Wrath of the Fallen Goddess":https://rise-of-the-durnskald.obsidianportal.com/
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub