About the Mosaic

The Mosaic Widget displays visual content and text in a responsive and dynamic masonry layout. Users declare the importance of each story by assigning one of the various sizes to each item; all items are then automatically arranged for the best fit. The Mosaic Widget has different style options and customizable features to best match your community’s visual identity and brand. 

Key features:

• Choose from 3 display styles for stories

• Select colors for elements such as backgrounds, titles, and fonts

Open

Setup and Configuration

Add the Mosaic Widget to a Page

In the top right of your page click on edit

Open

Click the plus button where you would like to add another section where you can add more widgets.

Please select the mosaic widget and click add. 

A menu will appear on the left-hand side of the page, click the settings button to configure the mosaic. 

A menu will open on the screen where you can configure the widget.

Configure the Mosaic

While configuring the Widget, DO NOT click off the white popup box or you will lose your configurations and will need to start again.

Configuring Mosaic Stories

Stories are the main components of your Mosaic Widget. Stories are the items you want to highlight on your landing page with images, copies, and links. The Mosaic Widget 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. 

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.). Categories will display either in a bubble or bar view - depending on what mosaic story style is selected.

• 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 story 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.

   • Note: The text color for fade stories will default to white - regardless of what theme is applied to that story.

7. Add the link for your story

   • Manually add a url to link to a piece of internal and/or external content

   • 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

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

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

11. Click Save Story

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.

Mosaic Story Styles

Fade

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

• Category appears in a separate color and bar view, as defined in the palette

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

• No color

Fade Style Example

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 bar view and separate color, as defined in palette

Classic Style Example

Flat

• No image displayed

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

• Category appears in a bubble shadow

Flat Style Example

• NOTE: When using a flat style and a manual entry, the text will automatically be displayed in the top left of the box:

Otherwise when using the flat style and automatically linking to a piece of content within your community it will center the text and push it towards the bottom:

Configure the Theme 

Color Theme Configuration Menu

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 Story Border Color  - set a color to wrap around your story box - if no color is entered the border will be empty. 

5. Set your Title/subtitle color

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

6. Set your Category band Color

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

7. Set your Category text Color

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

*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

Category Configuration Menu

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. 

*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. 

NOTE: Categories on flat stories display as a bubble view whereas categories on fade and classic stories display in a bar view.

Configure the Advanced Settings

Advanced Settings Configuration Menu (default selections displayed)

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

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

Example sizing calculations

Set your Hover effect

• Focus (default): When you mouse over one story, it will remain in focus while the other stories in the widget 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:

(Acceptable range: the value that the user can specify in the configuration using the slider)

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

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

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

Set Mobile/ Narrow Column Display. Choose between a slider view or a list view. 

Set Slider Interval. If you select a slider view for a mobile/ narrow column display please enter an interval time (in seconds). This will be the time each story is displayed before automatically sliding to the next. 

Set Slider Transition. If you select a slider view for a mobile/ narrow column display please enter a slider transition time (in seconds). This is the amount of time it will take to switch between stories in the slider. 

Set Title/ Subtitle Alignment. Set an alignment for the title and subtitles in all stories of your mosaic.  Select between left, right, or center. 

Enable Allow Custom Widget Background Color. Please enable this if you would like your mosaic widget to have a custom background color different from the page background color and/or section background color. 

Set Custom Background Color. If you enable the allow custom widget background color please enter a hexadecimal value for a certain color or select one. 

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

Configure Fonts

1. Select Fonts from the widget menu.

2. Select a Font method from these options:

   • Basic

   • Google

   • Custom

   • Note: Default is “relative sizing” We recommend setting up a widget as a template with the desired settings, colors, etc. so that you can copy that configuration if you plan to reuse the across the community or share with your community management (place owners) team.

   • Depending on what widget you are configuring there may be different sections for setting your fonts such as title, heading, sub-heading, tabs, category etc.

Font selection

Basic Font: Choose from the browser default fonts (serif, sans-serif, cursive, and monotype) and global web-safe fonts used in your SharePoint community. If you select a Basic font, you can also configure the script type (Bold, Italic, etc.).

Google Font: you can select a font from those provided by Google. Begin typing to search for a specific Google font. Browse and preview the Google Fonts database here: Google Fonts.

Custom Font: you can import your own custom font by supplying hosted links to your font files. For cross-browser compatibility, please specify at least a woff or ttf font file.

Note: You are responsible for licensing and paying for that font

Migrate Configuration

To migrate an existing mosaic, that is already configured, navigate to that mosaic’s configuration and click on the Migrate Configuration tab.

To paste in mosaic code, please paste it in the box under ADD NEW CONFIG and then click apply. You can then go ahead and make any further changes from there.

To migrate an existing mosaic configuration, navigate to the migrate configuration tab and click on the COPY CURRENT CONFIG tab. Then click copy to clipboard. You can then navigate to any other mosaic within your site and paste that code in.

Publish the Page

When you are done making all changes scroll down and click save within the widget configuration. 

In the top left corner of your page you will then click publish and save (if your page has not been published yet). 

Support

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

support@socialedgeoncuslting.com