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

    Jive 6.0 - Theme the Menu

    NathanielElliott Advanced

      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 Advanced

          PS - Is this the best area for this question?

            • Re: Jive 6.0 - Theme the Menu
              Ryan Rutan Guru

              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:



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



              Does that help?

            • Re: Jive 6.0 - Theme the Menu

              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)