Navigation menu

Lance_S
Lance_S
edited December 2013 in Campaign Portal Building
Now that my site went very sideways after the reforge, I gutted 98% of my customization and am starting over. I've been trying to go through these forums but it's hard to sort through all the old/pre-reforge CSS help and the more recent and applicable CSS help.

For the left hand Navigation bar...
1. Can we turn the left hand vertical bar off an move it back to the top horizontal row of menus?
2. Can we hide certain menu items (I want to remove Adventure-log and Forums)
3. Can we rename certain menu items (Change Characters to Cast)
4. And finally can we add custom links. (Like say add a link that takes you to a certain wiki page)

Thanks in advanced for any assistance.
-L

Comments

  • madartiste
    madartiste
    Posts: 328 edited December 2013
    You can do the top three, but not the last one.

    For number 1: @/*Horizontal Navigation Bar*/
    /*Extra space for Links*/
    .nav-links li a {margin: 0 8px 0 0;}
    /*Change Dimensions and Position of Nav Bar*/
    #campaign-nav {width:100%;
    position:relative;
    }
    /*Remove Background Color from Nav Bar*/
    .campaign-public-layout #campaign-nav {
    background-color:transparent;
    }
    /*Move Nav Bar Up*/
    .collapsable-nav-row .front-nav-container {
    width:100%;
    top:-30px;
    background-repeat:no-repeat;}
    /*Float Nav Bar to Make it Horizontal*/
    #campaign-nav ul li {display:inline;float:left;}
    /*Remove Triangle after Active Page Link*/
    .campaign-public-layout #campaign-nav li.active:after {
    content: none;}
    @
    Just make sure you don't have the "collapse front page menu* box checked on the Style page in the dashboard.

    For number 2: @/*Remove Link*/
    #campaign-nav .adventure-log {display:none;}
    @
    Each of the links has it's own class name, so you'll need to take a look at the code for the other ones.

    For number 3: @/*Change Link Names*/
    /*remove current text*/
    #campaign-nav .adventure-log .nav-text {font-size:0;}
    #campaign-nav .wiki .nav-text {font-size:0;}
    #campaign-nav .characters .nav-text {font-size:0;}
    /*add new text*/
    #campaign-nav .adventure-log a:after {content:"Adventure Tales";}
    #campaign-nav .wiki a:after {content:"Watch Reports";}
    #campaign-nav .characters a:after {content:"Heroes & Villains";}
    @
    Again, each of the links has it's own class name, so you'll need to take a look at the code for the other ones. If the new text isn't showing properly, make sure to delete and retype the quotation marks since sometimes copying from the forums can switch the quote marks to a different type. Alternately, you can use "Paste as Plain Text" from the right click menu or Ctrl+Shift+V as a keyboard shortcut.
    Post edited by madartiste on
  • Lance_S
    Lance_S
    Posts: 6
    Thank you madartiste. Those all worked just as I wanted.
  • Lance_S
    Lance_S
    Posts: 6
    Follow up to question #4 above...
    4. And finally can we add custom links. (Like say add a link that takes you to a certain wiki page)

    I've seen a few folks pull this off, but I'm not sure how exactly.
    The Rules Tab on the top here: https://shadows-over-new-york.obsidianportal.com/
    Most all of the side nav bar: https://campaign-52444.obsidianportal.com/

    I'm trying to figure out the trick to what these folks are doing.

    Thanks.
  • madartiste
    madartiste
    Posts: 328 edited December 2013
    You'd have to replace pieces of the navigation bar with absolutely position elements hard coded into your pages' content -- and you have to put it on each and every page that you want it to appear on. It looks amazing, but it does require some work and definitely careful planning. If you're using firefox or chrome, you can right click on an element on a webpage and choose "inspect element." It'll show you what they did.
    Post edited by madartiste on
  • Lance_S
    Lance_S
    Posts: 6 edited December 2013
    Ahh... so the same old way as before... Thanks for the info...

    Things like these were what I was really wanting from the reforging...

    -Lance
    Post edited by Lance_S on
  • Pils
    Pils
    Posts: 149
    Hi,

    The third code (change link names) don't work for me, the text just disappear... ("example":https://aq-golden-voyages.obsidianportal.com/)

    -Pils
    "Dark Sun -- La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!

    -Pils

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • Lance_S
    Lance_S
    Posts: 6
    Pils: whenever you copy/paste from the forums always recheck change the single and double quotes (') (") in the text you paste... They often are messed up...
  • Pils
    Pils
    Posts: 149
    So many years on OP, and I do not know that!

    Thanks Lance_S!

    -Pils

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • Keryth987
    Keryth987
    Posts: 1,047
    @Lance_s

    I cheated. My Navigation bar is a set of DIV statements on every page writing along the top. If you look on the left, the new, condensed, OP menu is still there.

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "Campaign of the Month - July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • madartiste
    madartiste
    Posts: 328
    Whoops! Sorry, Pils, I forgot to make a note of the quotation marks thing! I'll do that now.
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