47 Replies Latest reply on Sep 4, 2014 11:38 AM by jonnyh

    Advanced theming - what's possible for Jive 6?

    gareth.ferrier

      Is there an example out there of an advanced theme that demonstrates what's possible with more in-depth theming of Jive?

       

      The OOTB themes are all well and good, but they are just changing colors for the most part.  I'm looking for an example there, uploaded via the admin console which can be used to showcase what is possible beyond superficially changing colours.  Can anyone point me in the right direction?

       

      BTW this is for Jive 6.

        • Re: Advanced theming - what's possible for Jive 6?
          jrenaud

          Hi Gareth,

           

          did you find this documentation Jive 6.0 Community Administrator Documentation containing a section about developing themes?

           

          I'm also currently exploring the more advanced aspects of theming in Jive 6 and looking for more advanced examples/documentation on the subject. I'll for sure share my insight if I find anything interesting, and hope others will do so for the benefit of all.

           

          Regards,

          1 person found this helpful
            • Re: Advanced theming - what's possible for Jive 6?

              Amy Stewart,

              Are there any additional insights that you can provide to this conversation??

                • Re: Advanced theming - what's possible for Jive 6?
                  jrenaud

                  Hi,

                  Because I think it's related, I'll share the following here rather than create a new discussion thead:

                  In the /template/global/custom-css.ftl file, I've inserted the following to include a static css file for all my customisations in the header of every page:

                   

                  </style>

                  <link rel="stylesheet" href="/themes/mytheme/styles/global.css?v=1" type="text/css" media="all" />

                  <style>

                   

                  Does someone sees a drawback to this, or a better way of achieving it?

                   

                  Also how do you "easily" navigate & locate stuff through the different template files in order to make modifications? Maybe because I'm new with the structure, but I have to resort to searching + opening some files there and there until I find the part I'm looking for. For example, quickly determining what files serve as "page templates" holding the <html>, <head> and <body> tags, etc...  and what files are used to render only a small part of the pages, either everywhere or only in a very specific place.

                   

                  Maybe Amy Stewart or another Jive UI expert can share tips on this? Do you find some specific IDE plugins useful in this? Do you refer to some graphics about the page structure?

                   

                  Thanks!

                  1 person found this helpful
                    • Re: Advanced theming - what's possible for Jive 6?

                      Hi Julien, unfortunately I'm actually not much of a theming guru - but if this is for Jive 6, I believe you can put the call to the css file in header-css.ftl (or it could be header-css.soy) and it will get picked up sitewide.

                      Also how do you "easily" navigate & locate stuff through the different template files in order to make modifications? Maybe because I'm new with the structure, but I have to resort to searching + opening some files there and there until I find the part I'm looking for. For example, quickly determining what files serve as "page templates" holding the <html>, <head> and <body> tags, etc...  and what files are used to render only a small part of the pages, either everywhere or only in a very specific place.

                      I think we have the advantage in house of using IntelliJ project files to help traverse the massive file structure of the Jive platform. It has some really nice built in indexing tools. However if it's just the global stuff you're looking for, you should be able to hit just about everything (that isn't in an iframe - like the RTE) with one of the global templates: template.ftl or template.soy I believe? There may be two of them and they are both in use.

                       

                      Hope that helps!

                • Re: Advanced theming - what's possible for Jive 6?

                  Gareth Ferrier, to answer your original question, I'd have to say that while we provide the ability to upload themes in the admin console for non-cloud customers, Jive will likely never provide a high-touch sample theme for you to use in this sort of fashion (the way we do for the newer front-end, UI-based theming tool). The problem is that it that you are changing files in the system and rendering your instance's upgradability as more difficult with this method. The deeper the customization, the greater the risk and cost of future upgrades using this method. The same goes for using the Advance Resource Kit that Julien Renaud mentions (which is likely returning in a future update for non-cloud customers). The resource kit, while providing example files, did not go into any deep customizations that required difficult and time-consuming upgrades from release to release. These files were basically, replications of existing templates with some commented code as tips and some extra theme "hooks" for automatically providing paths to your theme directory for image and style assets.

                   

                  Upgradability and ease-of-use is why we created the UI-based Theming Tool for Jive 6 and earlier cloud releases. Behind the  scenes what you can change there are simply values (and some stored binaries for images) that can be safely upgraded from one release to the next. We've already done this over a few cloud releases for existing example themes in the Theming Tool. We realize that this has limits and is why we still provide the ability to overlay files through the admin console for our advanced users.

                  1 person found this helpful
                    • Re: Advanced theming - what's possible for Jive 6?
                      jrenaud

                      Thanks for sharing the idea behind this.

                       

                      Still, in my case, I'm looking towards a migration from Jive 5 to 6 in which major functional modifications were made in the system. Having no choice to maintain a comparable level of functionality and being unable to simply transfer some existing files to obtain a working system, I'm looking at trying to port these modifications in accordance to the best guidelines I can get my hands on right now.

                      • Re: Advanced theming - what's possible for Jive 6?
                        gareth.ferrier

                        Thanks for the reply John.  Is it accurate to say then that 'out of the box' customisation is all that's really supported to avoid difficult upgrades in the future?  And therefore if you do go down the path of deep customisation of the UI that its advised against, for reasons of support and upgradability?

                          • Re: Advanced theming - what's possible for Jive 6?

                            Hello Gareth. It would be accurate to say that we encourage using the Theming Tool provided in 6.0 for support and upgradability, though in a non-Cloud environment the ability to do deeper customizations still exists.

                             

                            As John mentions above, one of the reasons we built the new Theming Tool was that the more of an "overlay" the theme is (previous theming, specifically via the Admin Console or via the advanced page with the downloadable Resource Kit and it's ability to upload a zip file of the theme), the more headaches you'll run into on upgrades.

                             

                            The older theming model worked by having copies of core code files that you could modify and then apply to the application. These would overlay what's delivered via core code. For example, the contents of header-css.ftl would be delivered via core, and then a modified version from a theme would take over and render in page. Since they're copies of core code, upon upgrades the two easily get out of sync and lead to missing (or worse, broken) functionality. While it allows for much deeper customization, the pain involved in syncing up the differences between core code and a theme could be high enough to delay a customer from being able to upgrade in a timely fashion.

                             

                            The new theming route, while being primarily for Cloud customers who can't do that kind of deep theming (since we roll out updates on a regular basis, automatically), is much safer. However the capability still exists for hosted or on prem customers. The previous 'advanced' theming page with the resource kit will return in 6.0.1 (the bugs in it are being actively worked on as I write this), and you can still accomplish the same level of advanced theming via the Admin Console.

                          • Re: Advanced theming - what's possible for Jive 6?
                            cservilio

                            Definitely see the advantages to using the Theming Tool, and most of what we want to do is fully possible using that.  However, one thing the team here really doesn't like in the Jive 6 theming is the fact that the widgets on the homepages of the groups/spaces have no outlines.  Their thought is that it's confusing and looks kind of messy.  Is the only way to change the appearance of widgets to create a custom theme through the admin console, or am I missing something obvious in the theming tool? 

                              • Re: Advanced theming - what's possible for Jive 6?

                                The theming tool does allow for control over widget display to do exactly what you're looking for (borders, header backgrounds, etc).

                                  • Re: Advanced theming - what's possible for Jive 6?
                                    cservilio

                                    Oh good, thanks.  I can see the option now!

                                      • Re: Advanced theming - what's possible for Jive 6?
                                        dishantgniit

                                        Hello,

                                         

                                        Can I customize my UI part with the Theme Resource Kit in Cloud Instance?

                                        I am asking this because I am unable to find any upload Resource Kit option in Cloud instance.

                                         

                                        Best Regards

                                        Dishant

                                          • Re: Advanced theming - what's possible for Jive 6?

                                            You cannot use the Theme Resource Kit with a cloud instance that is automatically updated by Jive. Changes that are not upgrade safe may be introduced through Resource Kit template changes and we cannot control for that. The Cloud Instance can both export and import a proprietary Theming Tool palette file that integrates with the Theming Tool; this file, as are the general Theming Tool changes, is upgrade safe.

                                              • Re: Advanced theming - what's possible for Jive 6?
                                                dishantgniit

                                                Thanks John for the reply

                                                 

                                                Best Regards

                                                Dishant

                                                • Re: Advanced theming - what's possible for Jive 6?
                                                  l9rezn

                                                  Where can I find the Theming Tool pallet file for Jive 7 Cloud?

                                                    • Re: Advanced theming - what's possible for Jive 6?

                                                      The palette file is nowhere that can be accessed directly. "Palette" might be a bit misleading. It's not a just a palette of colors; it's an xml list of all properties and values for the theme set by the Theming Tool interface and stored directly in your database. The file is a proprietary format that can be exported and imported as a binary (which also contains any custom images) so that you can share a theme from one instance to another or simply store it as a backup; but the file cannot edited externally and reused.

                                                       

                                                      Even if you were to hack into the binary and try to edit anything, it would change its checksum and the file would no longer be importable. The reason we went with with this security check was twofold: It makes it impossible to accidentally break a Jive instance by uploading an incorrectly formatted file – and it removes the possibility of using this file as an attack vector for malicious hackers.

                                                        • Re: Advanced theming - what's possible for Jive 6?
                                                          l9rezn

                                                          So is there a way to Advance Theming in Jive 7 or Jive 7 Cloud?  For example rename/move/create two-tier navigation menus for the navigation bar?

                                                            • Re: Re: Advanced theming - what's possible for Jive 6?

                                                              So is there a way to Advance Theming in Jive 7 or Jive 7 Cloud?  For example rename/move/create two-tier navigation menus for the navigation bar?

                                                               

                                                              You can do much of this simply by enabling the Custom Links feature introduced with the upcoming Jive 7 and Jive 7 Cloud (7c4). You can take it even further by enabling the Custom Header & Navigation Style which already exists in current releases of both Jive and Jive Cloud.

                                                               

                                                              Simple Custom Links:

                                                              You enable Custom Links through the Advanced menu for any header and navigation style. Expand the "Custom Links" section and check the checkbox that enables the custom links. This allows you to:

                                                              • Change Content, People, or Places into a custom link or remove any of them
                                                              • Collapse Content, People, or Places into a drop-down "Browse" navigation item
                                                              • Add your own custom Link to the navigation
                                                              • Add your own custom Link menu list to the navigation.
                                                              • Drag to reorder the links in the nav bar.

                                                               

                                                              As stated in the "advanced" warning that comes up when you enable this feature, with great power comes great responsibility. You will need to thoroughly test your theme in Full Preview mode to ensure that you have a viable Navigation area that won't wrap to two lines in narrow windows (this would break the user experience and can greatly affect usability depending on your theme).

                                                               

                                                              Custom HTML/CSS in the header and footer:

                                                              Go to the Advanced menu and choose the Custom Header & Navigation Style. This would allow you to add custom HTML and CSS to designated areas of the header and footer, so you can add any type of custom elements you'd like there. I recommend reading the Developer Guide & Tips link available in the advanced feature alert you expose by turning this on.

                                                               

                                                              custom-header.png

                                                               

                                                              Once you've enabled the Custom header, you can edit the code for this designated area. It is here that it's possible to add anything you can do with HTML and CSS 2.1 (note CSS Draft 3 styles and newer HTML5 DOM elements are not yet supported).

                                                               

                                                              custom-html-css.png

                                                              1 person found this helpful
                                            • Re: Advanced theming - what's possible for Jive 6?
                                              kflannery

                                              Thanks John & Amber - works perfectly!

                                              • Re: Advanced theming - what's possible for Jive 6?
                                                gareth.ferrier

                                                Jonny Heavey check how many views!!  Me thinks that's not quite right