On this page

Before You Start

If you plan to use your own images to the Accordion Tile you may want to upload those to your community before you get started. 

Open

1. To add custom icon images for the tile, click the gear icon in the upper right corner of the place you are working.

2. Click Static resources or Image Files (depending on your Jive version)

3. Click Upload a File and select the image(s) you want to use in the accordion. 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.

4. You will need image URLs generated by Jive to add custom icon images to the accordion 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 Accordion Tile

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

   Open

   

    

2. You are now ready to configure the tile.

Configuring the Sections

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, Select Sections in the configuration panel and click on New Section.  

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

1. Enter text for the Section title. This text is the large headline for a section or band of the accordion. For example, Employee Forms or Discounts.

2. Select either a Preset or Custom icon. This icon will display with the Section title. 

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

   • You will also see a preview of the icon chosen 

   • If you are using a Custom icon enter the URL for the custom icon’s image (see step 4 in “Before You Start”).

3. Next, add Section items to display links under each accordion section or band.
   
   
   

1. Select Add Item and enter the Item title you want to display under the item’s icon. For example, New Hire Forms or Movie Tickets.

2. Enter the Action URL for the Section item. This URL will direct the user to a specific place, topic, document, etc. in Jive or outside the community when clicking on the Section item’s icon. 

3. Select whether or not you want the link to open in a new window.

4. Select either a Preset or Custom icon. This icon will display with the Section item (see step 4 above for details). 

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

6. When you finish all Section item entries for a slide, select Save Section.

As needed, Select New Section and repeat the steps above for each accordion section or band required for your user experience.

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

Note: You are not required to save after editing each section; however, 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.

Configuring the Theme

1. Select Theme to open the configuration options.

2. Enter the hexadecimal code for the Section item text color. This text color applies to the Section item titles in the tile. 

3. Enter the hexadecimal code for the Band background color for the Odd bands in the accordion. For example, the first and third sections in the accordion. 

4. Enter the hexadecimal code for the Text color for the Odd bands in the accordion. 

5. Enter the hexadecimal code for the Icon color for the Odd bands in the accordion.
   
   

    

6. As needed, repeat Steps 3 through 5 for the Even bands or sections of the tile.

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

Note: As you enter various hexadecimal codes for these elements a color preview is generated for you.

Configure the Advanced Settings

1. Set the default section to be expanded by default when a user visits the page. 

   1. The drop down menu will display the sections you have already configured (see Configuring the Sections above) or select None to have all collapsed by default.

2. Set the Header band height. Adjust the band height if needed to accommodate font/image sizes.

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

Configure Fonts

Configure Google Analytics

Adding Custom HTML