Ideas Tile Configuration

Current Version: 1.0.3

Configuring the Ideas Tile

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

  1. Now that you added the tile, it will be automatically in edit mode. 

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

 

Configuring the Setup

 

  • Add the  Tile header

  • Add a tab. There is no limit to the number of tabs you can add, however they will collapse to a drop down depending on the number and column size. 

  • Add your Tab title

  • Add your Tab description

    • Note: you can add HTML to the tab description section

    • Note: a large amount of tabs will turn into a drop-down list

  • Select the idea source. You can select a place in your community from which you want the ideas to display.  Choose from:

    • Search for a place

    • Current place (place where you are adding the tile)

    • All ideas

  • Filter by Stage to display ideas in a particular stage.

  • Select how you want to sort the ideas. Choose from:

    • Last activity date

    • Date created

    • Ideas score

  • Filter by tag to display ideas containing a particular tag. 

Note: The Tag filter logic has a strict condition: OR. If the idea contains at least one configured tag, it will be displayed. Please note that tag names are case-sensitive. "DEMO TAG" not equal "demo tag".

  • Repeat steps 2- 8 above to add additional tabs to the tile. 

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


Configuring the Theme

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

    • Tile header

    • Score count

      • normal and hover state

    • Score background

      • normal and hover state

    • Idea title

      • normal and hover state

    • Divider

      • normal and hover state

    • Description

      • background and text

    • Active tab

      • underline and text

    • Score border thickness

      • adjust the thickness (in pixels)

  2. Select your desired colors for the stages. First check the box next to Show stages if you want to display the stages.

    • Note: Stages are configured in the Admin Console > Ideas

    • Configure the Background color and Label color for each stage

    • Note: You can type the basic colors into each color field. For example, red, blue, green, brown, black, white, yellow, purple, orange. For other colors, you can enter hexadecimal values. If you don’t know the hexadecimal value, convert your colors at http://rgb.to.



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

Configure Fonts

 


Configure Advanced Settings

Further customize how your tile looks and displays information under Advanced settings. You can adjust the following settings:

  • Initial results to load

    • decide how many ideas you want to display in the tile

  • Results to load on “load more” - decide how many ideas will display when a user clicks to “load more” 

  • Customize margins - adjust the padding around the edges of the tile (in pixels).


Migrate Configuration

 


Best Practices and Tips

Best Practice/Tip

How To…

Backup

Copy all CSS and HTML, including the code in the Migrate Configuration options to a text editor. Save this file locally or to a cloud storage system.  

Keep it clear

Use clear, brief titles for your ideas so that they appear in the Idea Tile cleanly and don’t overwhelm the user/page. Too many tabs or long titles in tabs will turn into a drop-down list even in the large column.

Add a little style and color with HTML

The Tab description field allows you to add HTML to help the description stand out.  Here is a simple example: 

<style>

#test {background:#fff;

color:#0d78bb;

font-family: 'Roboto', sans-serif; 

font-size:25px;

padding:22px;

}

</style>

<div id="test">

Check out our Active Ideas. Please Vote! 

</div>

Tag filter Logic

The Tag filter logic has a strict condition: OR. If the idea contains at least one configured tag, it will be displayed. Please note that tag names are case-sensitive. "DEMO TAG" not equal "demo tag".

Save time with the new Inherit font feature.  



You can copy your font settings to other tabs for the tile. Note:

  • If you choose to Inherit fonts you will only have the option to change the weight and size on the tabs, and when changes are made to the tab you are inheriting from.

  • If you change the font on the original tab, all tabs that are inheriting will update as well. 

Tile loading 

For communities with a large amount of ideas the following loading image will appear:


Support

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

support@socialedgeconsulting.com