Custom Theming in Jive

Version 19

    Take a deeper dive into the various components of the Jive User Experience, including theme, configuration, content, and strategy.

    What is a Custom Theme?

     

    When we talk about customizing the Jive platform through theming, we’re talking about skinning, or branding, the native User Interface (UI) of the application, or “the front end.”

     

    As of Jive 6, there are two ways to theme a Jive community, either using the built-in Theming Tool or a Custom Theme.

     

    The Theming Tool feature was introduced as a way to quickly and easily brand a community, while maintaining compliance with future releases of Jive. On the other hand, a Custom Theme can allow you to go beyond the Theming Tool and control much more detailed, specific, or complex customizations.

     

     

     

    Examples of customizations

     

    Visuals:

    Scripts:

    Changes to the OOTB UI

    • Phrase substitution
    • Text size, custom web fonts or colors
    • Backgrounds
    • Border color, width, or style
    • CSS3 styles (in supported browsers) including:
      • Rounded corners
      • Drop-shadows
      • Text-shadows
      • Multi-column content

     

    New custom styles

    • Classes, or style rules, that can be re-used throughout the community such as buttons, lists, or other types of content formatting.
    • jQuery plugins including:
      • Carousel content/image sliders
      • Mosaic “Pinterest”-like content tiles

     

    • Other types of jQuery custom scripts that :
      • Add or move elements around the page
      • Adjust DOM to aid in styling widgets through theme CSS
      • Create custom navigation

     

    Customizations like functional changes to the application, exposing dynamic data, or secure login are considered to be application changes. There are a few more kinds of changes which, while they still show up on the front end, are actually application changes. Some examples include:

     

    • Icon customization (does not include icons used only in the UI such as What Matters or pagination)
    • Customization of default email templates
    • Changes to the Rich Text Editor (RTE)

     

     


     

     

    How does Custom Theming work in Jive?

     

    Unlike some other applications (WordPress for example), Jive's unique and robust UI is powerful, extensible and built into the core application.

     

     

    theming-in-jive-01-whitebg.png

     

    This means that when you apply a Custom Theme, it sits on top of the existing UI and merely modifies it. Custom Themes may also be mapped to specific Spaces or URLs, these again sit on top of the core UI in addition to the global theme UI, only changing those elements you’ve described in the mapped theme.

     

    Each template that is modified in the theme is a copy of the original core template. For this reason, when the core application is upgraded, your theme will also need to be upgraded. Without upgrading the theme, it’s possible to backport bugs or run into incompatibility issues, because the theme templates would be from an older version of the application. In order to make upgrades easier, we highly recommend doing as little template modification as possible. Instead, you should rely on CSS and jQuery to make customizations.

     

    Example: You want to hide the “Projects and Spaces” tab on all spaces. Instead of editing the template and removing the link, use CSS to hide the element #myElement {display:none;}.

                                

     

    Because the theme merely modifies the core UI, we do not suggest drastic layout adjustments such as adding a global left-hand column or resizing all the icons. Global header and footer elements can more easily be modified without affecting the rest of the structure.

     

    During major upgrades, there are often changes that occur within the Jive UI. Customizations that have been made via a Custom Theme need to be evaluated and considered within the context of the application updates. Some customizations may not be compatible between major releases. For example, the new user registration process was improved and simplified between Jive 5 and Jive 6. If there was a customization to alter the last step in the process, the step to invite others, within a Custom Theme for Jive 5, this customization cannot be created in Jive 6 as this page does not exist in Jive 6.

     

     


     

     

    Designing for Jive

     

    process-01.png

    Before the design process can begin, the design team will need access to an un-themed out-of-the-box (OOTB) instance of the Jive platform. A good designer will need a deep understanding of the details of what they're designing — a web designer might not have the depth of knowledge to design a product packaging line for a new line of soda. Understanding how Jive works will allow the designers to design to the product, using real world examples, rather than re-inventing the entire UI/UX, which can lead to costly customizations that provide little return on the investment.

     

    Once the design team has access, the first place to start is using the Theming Tool to get the basic branding options dialed in. This will allow the design team to be prescriptive around the customizations that drive business value. Knowing what to customize based on how the product works can streamline the development process and help to communicate the customization goals. For example, unlike with a product that is built from the ground up from scratch, there is no need to mock up every possible page if you only plan to customize the global header. In this case, only a mock-up of a single page with the desired header is necessary.

     

    The next step is creating a list of customization requirements. An example of this type of communication, the Design Guide, has been appended to this document. After the to-do list is created, we can then estimate the development work effort needed to accomplish the requested changes. A theme with a small list of changes will of course require less time than a very long list of changes — we categorize these levels of customization into Basic, Medium, and Complex theme types. The “Design guide” example shows a Basic theme, because of the small number customizations being requested.

     

    Web designers who are familiar with CSS can use browser plugins such as Firebug or Web Developer (for Firefox) to quickly edit the colors, fonts, and styles of elements while they are designing. These methods can allow the designer(s) to quickly change colors, fonts, and other styles.

     

    We see this type of process iterated many times throughout the lifetime of a community, from the initial phases of strategy, to design and development, to the continued nurturing, management, and improvement of an active community.