10 Replies Latest reply on Jul 28, 2014 7:07 AM by Charu10

    Changing how the search poup up looks.

    shipra

      Hello,

       

      When we click on the jive search whcih is in the header to the right,we get a serch result popup. There are three sections to it:Content/People/Places. All of them are one below the other in a vertical column.

      I want to display these sub headings in a horizontal row i.e now content/people/place will be placed beside each other.

       

      I was looking into the code and i saw popup.js which adds the styling for the popup in run time.

      Can anyone sugegst me a good approch for it and can it be done via a theme change?

        • Re: Changing how the search poup up looks.
          mcollinge

          Not purely by a theme change, no. We ended up customising it to shift Places to the top of the list. We've also loaded in Featured Search Results (which appear for certain terms), and Product Results which show product hits from our store websites.

            • Re: Changing how the search poup up looks.
              ismrao

              Hi Matt Collinge,

               

              I see that you have moved the search to the header section in your jive site. We tried something similar - we moved the position of the search box using CSS only. The div that holds the search is still part of the navbar. This is causing a problem when the username is quite large - search bar moves in the header.

               

              Is there any better way to handle this so it works across different resolutions?

               

              thanks

              Shwetha

                • Re: Changing how the search poup up looks.
                  mcollinge

                  We did it via a custom theme, so I guess that's why we're not hitting problems. I guess you could use CSS to hide the person's username, like they've done in Jive 7 which just shows the user's avatar?

                    • Re: Changing how the search poup up looks.
                      kirthisekhar

                      Hi Matt Collinge,

                       

                      As part of the business requirement, we need to maintain username as well. Just wanted to know if there is any new possibility to separate the search bar from navigation bar using templates.

                        • Re: Changing how the search poup up looks.
                          Charu10

                          Hi everyone ...

                           

                          Our business requirement is also to display the username with the avatar in Jive 7.0.2.

                          I am stuck that which template or method or any function call will solve it , only with theme customization no class level changes.

                          Any help would be appreciated.

                           

                          Thanks

                          Charu

                            • Re: Changing how the search poup up looks.
                              kirthisekhar

                              Hi Charu Gulati

                               

                              Are you looking for separating the search box from navigation and by retaining the user name, avatar and create links?

                               

                              Regards,

                              Kirthi.

                              • Re: Changing how the search poup up looks.
                                kirthisekhar

                                Hi Charu Gulati,


                                For moving the search bar to the header from the Navigation bar, you can do the following:


                                1. Comment out the current code under the .searchArea template on navbar.soy.  It will complain if you actually delete it.
                                  Voila_Capture 2014-07-11_09-30-31_AM.png

                                2. Add this code where you want it to display in header.soy:

                                         {if $customizeSite and $mode == 'basic'}

                                             {call jive.theme.controls.searchBasicControl /}

                                         {elseif $customizeSite and $mode == 'simple'}

                                             {call jive.theme.controls.searchControl /}

                                         {/if}

                                 

                                         <div id="j-spotlight-search" role="search" data-mode="{$mode}">

                                             {call .searchForm}

                                                {param spotlightSearchEnabled: true /}

                                                {param spotlightSearchDefaultEnabled: $user.prop.search.defaultEnabled /}

                                                 {param bookmarksVisible : true/}

                                                 {param historyVisible : true/}

                                                 {param communityName: $communityName/}

                                                 {param fieldId: 'autosearch' /}

                                                 {param anchorId: 'searchpopupanchor' /}

                                             {/call}

                                         </div>