6 Replies Latest reply on Apr 3, 2013 2:53 PM by jrenaud

    Jive 6 Theming Question--Creating a Custom Header with Links, etc.

    cservilio

      Has anyone created a custom header in Jive 6?  It seems pretty straightforward by going into "Customize your site," then using the Advanced option to edit the HTML & CSS of the header.  The problem is that when I click on that option, the link to the profile is automatically moved down into the global navigation bar.  Also strangely, the "Create" option is moved from the left hand side of the nav bar, where it is right next to the Places link, to the right side next to the profile link.  So these elements are actually being taken out of where they were and moved.

       

      Before clicking on "Advanced"

      beforeadvanced.png

       

      After clicking on "Advanced"

      afteradvanced.png

       

       

      I would like to create a custom header with some links in it, but I would also like the profile link to stay up in the right-hand header where it was before, and for the "Create" option to also be where it was (kind of like on the Jive community site itself).  My questions are, why are these being moved (is this a bug or is it on purpose) and can it be changed somehow, maybe by messing with the templates in the admin console?  And if so, which templates?

        • Re: Jive 6 Theming Question--Creating a Custom Header with Links, etc.
          cservilio

          I had posted this in the Jive Internal Communities forum, but nobody seemed to know the answer, so I thought I'd try my luck here . . . does anybody have any experience customizing the header in Jive 6 but keeping the original settings re: the profile and Create links?

            • Re: Jive 6 Theming Question--Creating a Custom Header with Links, etc.
              jrenaud

              Without having much experience with the Customize your site functionality, I would guess this is on purpose as both the user's name is removed and the Create button moved to its right. I'd presume this is to prevent this menu from being displayed floating over some custom header content made by the user?

               

              I'm also interested to know if there is an easy workaround to this (should I want to menu to float hover my custom header.)

               

              Maybe some Jive UI designer can share some insight on this? I'm taking a chance mentioning here Ryan Vanderzanden, John Lascurettes and Amy Stewart who I remember providing some interesting infos on UI questions in the past?

              1 person found this helpful
                • Re: Jive 6 Theming Question--Creating a Custom Header with Links, etc.

                  Hey all. Yes, the relocation of some of the UI in the 'custom header & footer' mode was done deliberately to accommodate what we've found customers frequently want/need to do. Specifically, to match preexisting branding and navigation (frequently found in customer service solutions, more so than internal company collaboration). In order to allow a customer full control over the header in this theming mode, we made some adjustments to our global UI.

                   

                  That said, it may be possible (John Lascurettes, correct me if I'm wrong) move some of the elements around in the custom header's CSS to replicate the non-custom display.

                  1 person found this helpful
                    • Re: Jive 6 Theming Question--Creating a Custom Header with Links, etc.

                      Unfortunately, it is not possible using the Jive Theming Tool to add this custom CSS that Ryan suggests. All custom CSS is sandboxed, so to speak, by being pre-pended with an ID reference to the custom header or footer container. This prevents any targeting of the standard Jive UI elements and keeps the themes upgrade safe. In other words, custom CSS applies only to your custom HTML and nowhere else.

                       

                      That said, coming in our next cloud release (and therefore our next major on premise or hosted release) we have added a custom link(s) item to the main navigation of theming (either a single custom link, or a single drop down menu with multiple links). This works either with the custom header enabled or not.


                        • Re: Jive 6 Theming Question--Creating a Custom Header with Links, etc.
                          cservilio

                          OK, thank you.  Not to beat a dead horse, but could this change then be made through the templates in the Admin Console, rather than through the Jive Theming Tool?  The feedback I've received from my team is that they prefer the look of having the profile link in the header.   (I get why it makes more sense not to change the templates for safe upgrades, but we have to make certain changes anyway to comply with our guidelines.)  There are so many templates in the admin console and it would be helpful to know which ones, including CSS, to modify.

                            • Re: Jive 6 Theming Question--Creating a Custom Header with Links, etc.
                              jrenaud

                              Hi,

                               

                              It's indeed not so easy navigating the template files inside a theme unless you're already familiar with the structure.

                               

                              Depending on what you want to customize in your header, I'd maybe start looking at template files such as /soy/nav/header.soy.

                              I also remember noting Jive seemed to import some of their css stylesheets from templates such as /template/decorator/default/header-css.ftl

                               

                              There may be better locations to make your customizations to the interface, but it would be among the first places I'd look into. I'd also keep in mind changes could be lost and need to be remade in the files should some future updates modifies them.

                               

                              I hope that helps.

                              1 person found this helpful