On this page

Configure Mosaic Tile

Open

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

2. You are ready to configure the tile.

Configure Stories

Stories are the main components of your Mosaic Tile. Stories are the items you want to highlight on your landing page with images, copy and links. The Mosaic Tile offers a variety of options for displaying your stories and calls to action in your community. Every story can have a unique layout and configuration options. Below is a quick overview of what a story is and the main components involved.  

Open

Elements of a Story

• Categories. Call out specific types of stories with pre-set categories. Categories may include an icon (examples: video, announcement, HR update, Urgent etc.)

• Likes & Comments.  For Jive content, display social data by showing the  current number of likes & comments 

• Title and Subtitle.  Introduce your story & provide context for your users. 

Story Configuration

Story Configuration Menu

1. Click Add

2. Name your Story

3. Select your Style. Choose from Fade, Classic or Flat. See “Mosaic Styles” below for descriptions of each.

4. Select your image size. Choose from the following sizes:

   • Small

   • Tall

   • Wide

   • Large

5. Select your category if desired

6. Select your color if desired

   • Note: Story color is only displayed if you are using Flat or Classic styles.

7. Add the link for your story

   • Select Jive Content to search for content within your community. If you select this option the configuration options to include “Likes” and “Comments” will appear below

   • Manually add a url if using a link external to your Jive community, or you are linking to Jive urls that do not include images (e.g. a Jive place, person, discussion etc.)

   • Check the box if you want the url to open in a new window

8. Enter your Title

9. Enter your Subtitle

10. Paste your Image URL if desired

    • If you chose to link to Jive Content in the link section above, the image will automatically pull from the image used in that content.  To override this (and select a new image) click the Auto button and paste in the url of the desired image.

    • Note: If you do not select an image for the story, choose the Flat style to have your copy displayed over your background Color

    • Note: You must use an image address - this can be found by right clicking on your desired image and clicking copy image address

11. Click Save Story

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

Additional Story Features

Preview: as you add in your stories they will populate the Preview section at the top of the configuration screen.

Reorder Stories: You can drag your stories to adjust how they appear on the screen.  The Preview above will update as you reorder your stories, add new stories or edit story styles. 

Mosaic Story Styles

Fade

• A smooth, shaded overlay is added over the bottom of the image

• White text is displayed on the faded darkened area, and the opacity can be adjusted in Settings

• No color

Classic

• A solid color block is overlaid at the bottom of image

• The color block opacity is configurable opacity under Settings

• Color is configurable

• Category appears in a separate color, as defined in palette

Flat

• No image displayed

• Background of story is solid color, as defined in palette and specified in story settings

• Category appears in a bubble shadow

Configure the Theme

1. Click Add Color Theme

2. Name your Theme

3. Set Story Color 

   • If you are using the Flat style and do not add an image to your story this color will display as the background of that story. 

   • Note: Fade Style does not use the colors from your theme 

   • Note: If you don’t know the hexadecimal value, convert your colors at http://rgb.to

4. Set your Title/subtitle color

   • Note: Choose a color that will display on top of the Story Color set above. 

5. Set your Category band Color

   • this is the color that will be behind the Category text/icon

6. Set your Category text Color

   • Note: this will also be the Color of the category icon if used. 

7. Save your changes. Scroll to the bottom of the tile and click the Save All button. 

*Repeat the steps above to add multiple Color themes.  We recommend setting your color themes when you first set up your Mosaic, this way you can simply select from the available themes when creating your stories. 

Configure the Categories

1. Click Add Category 

2. Name your Category 

3. Set Icons

   • Preset icons

     • Type in the icon name 

     • Click to see the icon guide if you want to browse all preset icons: http://fontawesome.io/icons/

     • A preview of your selected icon will appear below

     • Note: the color of the icon will be same color that was set in the Colors section.

   • Custom icons

     • Paste the icon url into the field for any icons you have uploaded to your community

     • Note: You must use an image address - this can be found by right clicking on your desired image and clicking copy image address

   • SVG

     • Paste in full SVG document. 

4. Save your changes. Scroll to the bottom of the tile and click the Save All button. 

* Repeat the steps above to add multiple categories.  We recommend setting your categories when you first set up your Mosaic, this way you can simply select from the available categories when creating your stories. 

Configure HTML

Adding Images

1. To add images to your 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. (Depending on the version of Jive you have, this may say Image Files instead of Static resources)

2. In the popup, click Upload a File and select the image(s) you want to use in the slider. 

   • 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. Once you upload your images, copy the URL to your clipboard and paste each URL into a notepad to have handy when working in the Slider configuration panel.

Configuring the Fonts

Configure the Advanced Settings

1. Set your Column Count. The column count is the number of small tiles that can span the full width of Mosaic.

2. Set your Height. The height is equal to the height of a small tile. The height of the taller tiles is calculated as a multiple of the small tile.

3. Set your Hover effect

• Focus (default): When you mouse over one story, it will remain in focus while the other stories in the tile will go out of focus

• Shadow: When you mouse over one story, a faint shadow around that story will appear

• Opaque: When you mouse over a story, the opaque color under the story caption will change 

Details on the Hover Effect Rules:

4. Set Rounded corners.  To give your stories rounded corners, simply set the border radius from the options in the drop down: 

• None (will not have rounded corners)

• Small

• Medium 

• Large

5. Set Gutter. The gutter is the gap between the stories. If you set this to “0” the stories will be flush against each other.  

6. Font Smoothing. This is an advanced setting that smooths type at the pixel level. Text may appear thinner on some browsers.

7. Set Caption Opacity. Set the opacity on the caption background for your stories by dragging the slider to the desired opacity percentage. 

• Note: You can set this for the Classic and Fade styles only

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

9. Save your changes. Scroll to the bottom of the tile and click the Save All button. 

Configure Analytics

Copying your Tile Settings

Best Practices and Tips

Support

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

support@socialedgeconsulting.com