Help please

falloutmind
falloutmind

So I've been running games on OP for a long time now, and only just now looking into styling the page a little more in depth since my favorite game went public on here and I want it to look good for anyone who wants to see. 

I have two principle questions. 

1. How do I make a background image that will actually be viewable behind the text boxes and stuff of OP, I've found a peice of art through Google Images that I really like, I even have it uploaded in my background areas but when I save the image as background I can't see it, it just stays a flat color background, it shows up as the banner in the corner when I throw it in that media area, but not background. Hopefully someone can help me with that. 

 

2. How do I change the names/ remove any of the buttons on the menu guide. I never use media library, and I want to rename the wiki to something else, as well as the calendar. And I'd like to know how people edit those since I know I've seen games that have them changed. 

Thanks for any help you can give me. 

Comments

  • Jim_Mount
    Jim_Mount
    Posts: 162 edited August 2016

    Hi!

    1. There are two areas to upload custom art on your /settings/style-settings page. One for the banner (which is before or above the selectable OpPortal backgrounds) and one for the background (which is below or after those same images). It kinda sounds like you might be putting the image you wnt for your background in the banner area?

    Edit: I misread what you wrote. Hmm. Do you have the "Default Banner" box checked or unchecked? Make sure it's unchecked.

    Here's my settings page:

    2. That requires some custom CSS. Here's mine:


    #campaign-nav .icon {display:none !important;}

    #campaign-nav .calendar, #campaign-nav .forum {display:none;} /* Removes unused menu items */
    #campaign-nav .dashboard .nav-text {font-size:0;}/* Remove current text and replace it with next line */
    #campaign-nav .dashboard a:after {content:"Backstage"; color:#06540d!important; font-family:Trade Winds !important; font-size:12pt !important;}
    #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:"Prologue"; color:#06540d!important; font-family:Trade Winds !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:"Episodes"; color:#06540d!important; font-family:Trade Winds !important; font-size:12pt !important;}
    #campaign-nav .file-docker .nav-text {font-size:0;}/* Remove current text and replace it with next line */
    #campaign-nav .file-docker a:after {content:"Media"; color:#06540d!important; font-family:Trade Winds !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:"Digest"; color:#06540d!important; font-family:Trade Winds !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:"Cast"; color:#06540d!important; font-family:Trade Winds !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:"Curios"; color:#06540d!important; font-family:Trade Winds !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:"Maps"; color:#06540d!important; font-family:Trade Winds !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:"Direction"; color:#06540d!important; font-family:Trade Winds !important; font-size:12pt !important;}

    Replace the content, colors, fonts to what you prefer.

    Post edited by Jim_Mount on
  • Abersade
    Abersade
    Posts: 421

    For #2 here's what my CSS looks like, hopefully it's helpful.


    /* LEFT NAV SIDEBAR MENU */
    /*Removes Text Background color*/
    .campaign-public-layout #campaign-nav {top:20px; background-color:transparent;}
    /*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:"An Old Journal";}
    #campaign-nav .wiki a:after {content:"The Black Library";}
    #campaign-nav .characters a:after {content:"Heroes & Pawns";}
    #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";}
    #campaign-nav .file-docker a:after {content:"The Gallery";}
    /* 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;}

     

    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

Sign In or Register to comment.

April 2024
Season of Strife

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