Sidebar

SSveter
SSveter
edited April 2015 in Campaign Portal Building
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

  • SSveter
    SSveter
    Posts: 37
    This post was supposed to be in CSS discussion...
  • Bortas
    Bortas
    Posts: 645
    It's actually not as easy as it sounds - CSS is designed to change the way existing things look, not recode with different HTML. I believe I stole this from Thorvaldr...

    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
  • SSveter
    SSveter
    Posts: 37
    Ok so the next question is setting links to other things like in my case "Equipment" or "Timeline"
  • Bortas
    Bortas
    Posts: 645
    That's exactly what I mean: you are wanting to add extra HTML, and CSS doesn't do that, it only changes the appearance of what already exists, it does not add new html things entirely (although it can make existing things disappear).

    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
  • SSveter
    SSveter
    Posts: 37
    Yea exactly.

    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.
  • SSveter
    SSveter
    Posts: 37
    However I appreciate the info on changing the text color for the side bar.
  • SSveter
    SSveter
    Posts: 37
    now to fix the sidebar background
  • Bortas
    Bortas
    Posts: 645
    Check out my CSS page, it may help you ;-)

    -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 */@
  • Abersade
    Abersade
    Posts: 417 edited April 2015
    This is what I use for my campaign.

    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/
    Post edited by Abersade on

    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

  • SSveter
    SSveter
    Posts: 37
    I am pretty happy with the standard left side bar. I was looking to change the color, which I have managed to figure out. Thanks though.
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions