3 Replies Latest reply on Feb 3, 2013 3:33 PM by Michaelr

    Jive 6.0 - Theme the Menu

    NathanielElliott
    NathanielElliott Jan 8, 2013 1:24 PM

      I am trying to find a way to do two things and at a loss. Here are the two things I am trying to do:

      1. Add a logo next to the home page button in the navigation bar
      2. Include the <username> after the search field so the search field floats="right" against the name (width changes)

       

      Screen Shot 2013-01-08 at 4.22.48 PM.png

       

      I've tried to do both of these things and in Jive 6.0 it seems to be more difficult and/or I've lost quick finding tools. Any ideas on how to accomplish these things? Thanks so much.

        • Re: Jive 6.0 - Theme the Menu
          NathanielElliott
          NathanielElliott Jan 9, 2013 5:19 AM (in response to NathanielElliott)

          PS - Is this the best area for this question?

            • Re: Jive 6.0 - Theme the Menu
              Ryan Rutan
              Ryan Rutan Jan 25, 2013 7:16 AM (in response to NathanielElliott)

              This is the best area for the question, sorry I was out of the office when this was posted and this fell through my radar.  My goto person for stuff like this is Amber Orenstein; however, I've been punting to her quite a bit.  Can you share how you are trying to do this.

               

              In JS, it would be as simple as doing something similar:

              $j('#j-globalNav').prepend('<li class="j-ui-elem" role="menitem"><img src="" /></li>');

              If you are looking to do this via a theme, you can do this via:

              /soy/nav/navbar.soy

               

              As for the header, I'd try this soy file:

              /soy/nav/satelliteNav.soy

               

              Does that help?

            • Re: Jive 6.0 - Theme the Menu
              Michaelr Feb 3, 2013 3:33 PM (in response to NathanielElliott)

              Hi Nathaniel

               

              I have done pretty much what you are saying by changing the css.

               

              my nav looks like this.

              Screen Shot 2013-02-04 at 12.29.10 PM.png

              I did this by putting this into /template/global/custom-css.ftl

              #j-satNav-wrap{position:absolute;left: 160px;top:5px;font-size:11px}

               

              #j-globalNav-bg{height:38px;padding: 0 20px 0 15px;position: absolute;top: 9px;right: 5px;}

               

              #j-links{float:right;white-space:nowrap;margin: 5px;position:relative}

               

              Hope this helps you. (ps i had to change the arrow position for the getting started walkthrough)