Getting Started Guide - Creating A Theme

Version 3

    At this point you are probably ready to get rid of the Jive logo (sigh) and "brand" the site to reflect your own needs, wants and desires. Or rather the needs, wants and desires of your resident design guru (who more than likely has mad skills way beyond what we will be able to provide you in this document).  Oh well, I guess you just get what you pay for. Which at this point, isn't really anything. <smile>

     

    The Theme is the overall "Look and Feel" of the Community. Now you know. Theme-ing and Theme'd are not actual words, nor are they grammatically correct, but I will probably use them throughout this document anyway - just because.

     

    Jive offers a very simple Theme-ing Toolkit to simplify the process by not forcing you to understand the underlying Jive Page Templates (a combination of Freemarker Template Language (FTL) and SOY) or HTML/CSS. A huge benefit of the Toolkit is that any changes that you make through it are guaranteed to be upgrade safe. (Great for Cloud but also useful for Custom and On Prem) Jive (and in particular Jive Pro Services, your trusty Sales Engineer and Jive Support) STRONGLY recommend that you use the Toolkit vs. attempting to manipulate the actual templates because then things could get well, complicated. Just kidding (kinda). If you are purchasing Jive Cloud or making use of the "Try Jive" you can't even see the templates. We did that on purpose.

     

    Theme-ing Your Site:

     

    Navigate to the Theme-ing Toolkit by going to your Photo/Avatar and selecting Themes. (Administrators only)

     

     

    You will be presented with the following. At this point you need to make a decision. Would you like to keep a very narrow horizontal blue bar (with a logo) like you see in the Try Jive currently? If so, skip to the next step. If you would like to (almost) double the height of the blue horizontal bar to fit a larger image, click Advanced.

     

     

    Now in the Advanced menu select Basic. At this point you could also select Custom and then Edit Now to supply your own HTML/CSS to for the Header and Footer. This is usually the option that our Services team will select to create you a Custom Theme but they are way more talented than I am so we will stick with the Basic option for now.

     

     

    Custom Links are enabled (by default) in the trial. This will allow you to edit the Links you see on the Horizontal Navigation (Home - Resources - Directory - Quick Links) if you would like to.

     

    \

    Click (anywhere) to get out of the Advanced popup and then click on the little blue circle to the left of Home. With Branding header highlighted (default), hit the toggle next to Logo or text. Select Image to use a Logo Image for the banner. Click Browse... to locate that image on your Desktop.

     


    Now select the toggle next to Background to set the background for the Header (Horizontal Blue Bar). Choose a Background Color. (I usually use None or White (#ffffff)) then for the Background Image click None or navigate to a new Custom image. You can then play with some of the other settings here which are all way too advanced for me. <smile>

     

     

    Now toggle over to Main Navigation. This will edit the link colors and background colors for those links. It can also edit the color of the Notifications. In the trial these are orange. Click the toggle next to Link Colors, Custom background or Notification Style. There are also other selections you can make on this page.

     

     

    Click anywhere to exit out of Branding Header and Navigation. Now lets edit the Navigation links. Click on the blue circle directly under any Navigational item in the trial to display the Custom Links menu. You can select any element (Resource Center for example) and click Edit or Delete. You can also add additional Custom links with the Add button at the bottom or "Top Level" Navigational items with the + sign.

     

     

    Button colors can also be adjusted by selecting the blue circle next to the Sample Buttons.

     

     

    In the upper right, I also change the User Menu Styles to make sure the the Text colors will show up against whatever color of background I have selected. (White on White = no good.)

     

     

    I will then select Branding and Decoration to change the Favicon, possibly set a Fixed Width or add a Background image.

     

     

    When all is said and done, I will save and publish my masterpiece.

     

    You can store multiple themes at a time but only one is visible. Name your theme and select Publish theme on save if this is the one you want visible.