A simple request...

CraigSteinhoff
CraigSteinhoff

So I am new but I have jumped right in...One thing I would love to do is change the "Left Nav" titles...I found a page on how to change the images..but I am not connecting the dots on how to change the the verbiage. So any help would be great!

Also is there a way to add things to the left nav? my reading is telling me no (looks like peope reuse "Items" maybe) but I thought I would ask :)

Thanks in advance for all your help

Comments

  • Kallak
    Kallak
    Posts: 1,090

    There are those who replace the default left nav with one of their own making (I used to do it myself). The issue with this methodology is that you have to put said replacement nav on every page,  which makes updating it a huge chore.

    In terms of updating the text, I believe the standard method is to set the font size of the current text to 0px, and then add 'content' after it with the former text size and the desired wording. 

    Adding tabs without replacing the whole nav isn't possible at this time (but I've got it on the dev board, so we'll have to see if we get it).

    All the best,
    - Kallak
  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    @kallak is right that you need to 0 the text. This is what I've used for Cold Truce and my other campaigns. Just change the quoted text to that you want each to say, and it's the same throughout the campaign portal for you. I can share the "back end" code if you want to see the same thing when in settings or the forum too. Just let me know!

    #dashboard-main-nav .nav-text {font-size:0;}

    #dashboard-main-nav .dashboard a:after {content:"Dashboard";} 

    #dashboard-main-nav .adventure-log a:after {content:"Journals";} 

    #dashboard-main-nav .wiki a:after {content:"Intelligence";} 

    #dashboard-main-nav .characters a:after {content:"Agents";}

    #dashboard-main-nav .forum a:after {content:"The Forum";}

    #dashboard-main-nav .calendar a:after {content:"The Sundial";}

    #dashboard-main-nav .settings a:after {content:"Settings";}

    #dashboard-main-nav .front-page a:after {content:"The Wall";}

    #dashboard-main-nav .maps a:after {content:"Cartography";}

    #dashboard-main-nav .items a:after {content:"Supplies";}

    #dashboard-main-nav .file-docker a:after {content:"Files";}

  • CraigSteinhoff
    CraigSteinhoff
    Posts: 23

    Ok cool thanks! Well it almost worked....it seems I have another issue....on certain pages I end with a floating left nav? not sure why? Those pages seem to have the old menu, if look at the dashboard and then look at the front page you will see what I mean? hmmmmm the only common CSS I have is what you gave me...

    https://deadlands-theflood.obsidianportal.com/dashboard

  • CraigSteinhoff
    CraigSteinhoff
    Posts: 23

    I think I got it....I had to use F12 to look but I think this seems to be working..setting both the dashboard-main-nav and the campaign-nav seems to switch all the menus. Thanks for the head start!

    #dashboard-main-nav .nav-text {font-size:0;}

    #dashboard-main-nav .dashboard a:after {content:"Dashboard";} 

    #dashboard-main-nav .adventure-log a:after {content:"Journals";} 

    #dashboard-main-nav .wiki a:after {content:"Lore";} 

    #dashboard-main-nav .characters a:after {content:"Cowpokes";}

    #dashboard-main-nav .forum a:after {content:"Lost Angels Saloon";}

    #dashboard-main-nav .calendar a:after {content:"The Sundial";}

    #dashboard-main-nav .settings a:after {content:"Settings";}

    #dashboard-main-nav .front-page a:after {content:"The Wall";}

    #dashboard-main-nav .maps a:after {content:"Cartography";}

    #dashboard-main-nav .items a:after {content:"Supplies";}

    #dashboard-main-nav .file-docker a:after {content:"Library";}

    #campaign-nav .nav-text {font-size:0;}

    #campaign-nav .dashboard a:after {content:"Dashboard";} 

    #campaign-nav .adventure-log a:after {content:"Journals";} 

    #campaign-nav .wiki a:after {content:"Lore";} 

    #campaign-nav .characters a:after {content:"Cowpokes";}

    #campaign-nav .forum a:after {content:"Lost Angels Saloon";}

    #campaign-nav .calendar a:after {content:"The Sundial";}

    #campaign-nav .settings a:after {content:"Settings";}

    #campaign-nav .front-page a:after {content:"The Wall";}

    #campaign-nav .maps a:after {content:"Cartography";}

    #campaign-nav .items a:after {content:"Supplies";}

    #campaign-nav .file-docker a:after {content:"Library";}

  • Almagesto
    Almagesto
    Posts: 7

    So, I edited mine to look like this:

    #campaign-nav .wiki a:after {content:"A very long title";} 

    The line "A very long title" extends to a second line. Is there any way I can adjust the space to wrap the text?

  • Almagesto
    Almagesto
    Posts: 7

    Also, how can I make the Forum to have a different name inside the forum? You know, by the icon. Right now I have the name I want in the navbar but the forum still says "Forum".

  • gastoff
    gastoff
    Posts: 136

    @CraigSteinhoff

    The approach I took to creating my Lef-Nav bar was to "hide" the default nav bar and create my own custom icons to replace them. My CSS took a different approach to @Conan_Lybarian. Instead of using :before or :after, I used a photo editor to add my custom text over the icon background, replaced the existing icon with my custom one, and then just shrunk the existing text to font-size:0. 

    As for adding your own custom nav icons, maybe it can be done by using both the :before and :after elements? Im not great with pseudo-elements and what all can be done with them, but maybe one of the CSS guru's out there can figure out a way to embed a custom link in a :before or :after.

    image

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