Navigation Tile Configuration

Current version: 3.0.1

 

What’s New

  • Icons: Icons have now been updated to FontAwesome 5.

  • Language preferences: Content can now be customized to display personalized content based on user's language (site administrator must set display option for language preferences in the configuration panel).

  • Improvements to layout and usability including: bug fixes with display of images, ability to configure the fonts and colors for the text, custom HTML in header and footer, and accessibility compliance.

Configuring the Navigation Tile

https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522

If you have more than one language available for set up in your tile, choose which language that the Search Header and any other Customizable Tabs or Search Results Calls to Action this will be displayed in. The default preference is English. After you’ve configured in one language, if you pick another language, you’ll be asked if you want to display the same features for the second language (by copying the settings) or “create from scratch”. Refer to https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522 for more details on the multi-language set up.

  1. To display the tile’s configuration panel, click the gear icon in the upper right corner of the tile.

  2. You are now ready to configure the appearance of the tile.

    • Note:  You must configure some aspect of the Tile's appearance and save your work before adding it to the Place page.

  3. Select Links in the configuration panel and click on New Section




Note: if you have enabled multilanguage options, then you’ll see a slightly different version of the Links section where you can toggle between language displays as show in this screenshot

 

4. Enter text for the Section Title.

5. Click Add Link to begin to add your links.

6. Choose if you want to link to Jive content within your community or Enter another destination URL

7. For Jive Content:

8. Click to Search for your content

  • Note: The visibility of these links is related to your user’s permissions. If a space or linked content from place is not available to the user, that link will be hidden from their personal view. 

9. For other URLS:

  • This URL will direct the user to a specific page, website, topic, document, etc. inside or outside of the Jive 

10. Check the Open in new window box to have a new browser window open for the end user when they click the link. 

11. Select either a Preset or Custom icon. This icon will display with the link. If no icon is specified for a link the Link title, will be aligned to the left.

12. Type a descriptive term to choose the Preset icon you would like to use. For example, “money” or “Facebook”. You can learn more about Preset icons by clicking on the Icon guide below the drop down menu. 

13. If you are using a Custom icon, enter the URL for the custom icon’s image (see below).

Enter the desired hexadecimal code for the Icon color. If you don’t know the hexadecimal value, convert your colors at http://rgb.to

14. When you finish all Link item entries for a slide, select Save Link.

15. As needed, Select New Link and repeat Steps 5 through 11 for each link required for your user experience.  

Click Save Section when complete, and repeat steps 4-13 to add additional sections.

Save All now before moving on to the next section. Scroll to the bottom of the tile and click the Save All button.

You are not required to save after editing each section, but we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.

 

Adding Images

  1. To add custom icon images for the tile, you will first need to upload them in the community. Simply click the gear icon in the upper right corner of the place you are working and select Static resources. If your site is on  Jive Hosted or On Premise (e.g. Jive 9), select Image Files.

  2. Click Upload a File and select the image(s) you want to use in the navigation tile.

    • When using a custom icon, we suggest uploading a 40x40px icon. If your icon is a bit larger, don't worry; it will be resized.

  3. You will need image URLs generated by Jive to add custom icon images to the navigation tile. Once you upload all images, copy the URL to your clipboard and then paste into the custom icon URL field in the slide’s configuration view.

 

Configuring the Theme

 



 

  1. Select your colors for the following components of the tile display:

    • Links

      • normal and hover state

    • Divider

      • color and thickness (pixels)

    • Section title 

  2. Save All now before moving on to the next section. Scroll to the bottom of the tile and click the Save All button.

Configuring the Fonts

 

Configure Google Analytics

 

Configure Advanced Settings

 

  1. Convert your tile from using FontAwesome 4 to FontAwesome 5 by using the drop down menu here.

  2. Customize Margins. Set extra padding between the Mosaic and other tiles if desired.

Copying your Tile Settings

Best Practices and Tips

Best Practice/Tip

How To…

Static Image URLs

Upload all your images and copy the Jive generated URLs for each uploaded image to a notepad before you begin configuring your slider. You will need to paste these image URLs into the image URL field.

Icon Imagery

Need custom icons? Check out nounproject.com or icons8.com. For a clean look, use icons from the same library or style.

Icon Colors

Since each icon can be a different color, you may find it useful to differentiate links by icon color. For example, restricted content could use a red icon.

Icon Image sizing

If you’d like the icon for your link to be sharper on high resolution screens, upload the icon as a 36px x 36px.

Fonts

Don't have a web license for your brand's custom font? Check out the options on Google Fonts (fonts.google.com), and use a close alternative instead. For example, brands that use Proxima Nova or Gotham may instead try Google's Montserrat.

Link Titles

Keep your link titles simple and short. Not only is it easier to browse, but it will also display better in mobile view. 

External Links

If you are linking to content, places or resources outside of the community, check the “open in new window” tick box for a better user experience.


Support

Need support or want to talk to us?  Please send an email to:

support@socialedgeconsulting.com