| Table of Contents |
|---|
About the Mosaic
The Mosaic Web Part 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 Web Part 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
Setup and Configuration
Add the Mosaic Web Part to a Page
In the top right of your page click on edit
Click the plus button where you would like to add another section where you can add more web parts.
Please select either a section or a template to add within the new section.
Hover over the top area of the section until a gray line and plus symbol show and then click on it
Search for and select the Mosaic by Social Edge web part
Click in the section and click on the pencil icon
A menu will open on the right-hand side, please click open config panel.
Configure the Mosaic
Configuring Mosaic Stories
Stories are the main components of your Mosaic web part. Stories are the items you want to highlight on your landing page with images, copies, and links. The Mosaic web part 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
Click Add
Name your Story
Select your Style. Choose from Fade, Classic or Flat. See “Mosaic Styles” below for descriptions of each.
Select your story size. Choose from the following sizes:
Small
Tall
Wide
Large
Select your category if desired
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.
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
Enter your Title
Enter your Subtitle
Paste your Image URL if desired
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
Click Add Color Theme
Name your Theme
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 athttp://rgb.to
Set Story Border Color - set a color to wrap around your story box - if no color is entered the border will be empty.
Set your Title/subtitle color
Note: Choose a color that will display on top of the Story Color set above.
Set your Category band Color
this is the color that will be behind the Category text/icon
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
Click Add Category
Name your Category
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 the same as the 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
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.
Flat | Classic & Fade |
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 web part 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:
Hover Mode | Classic Style | Flat Style | Fade Style |
Focus | Default value: 50% Acceptable range: 0% - 50% Hover effect: no | Hover effect: no | Default value: 50% Acceptable range: 0% - 100% Hover effect: no |
Shadow | Default value: 50% Acceptable range: 0% - 100% Hover effect: no | Hover effect: no | Default value: 50% Acceptable range: 0% - 100% Hover effect: no |
Opaque | Inactive default value: 50% Inactive acceptable range: 0% - 100% Hover effect: from inactive value to 100% | Inactive: background color Hover effect: background color darker by 12% | Inactive default value: 50% Inactive acceptable range: 0% - 80% Hover effect: from inactive value to 80% |
(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 Web Part Background Color. Please enable this if you would like your mosaic web part 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 web part background color please enter a hexadecimal value for a certain color or select one.
Set Margins. Set extra padding between the Mosaic and other web parts if desired. Please note: If you are using a “shadow” focus style - to display properly it is recommended to set margins.
Configure Fonts
Select Fonts from the web part menu.
Select a Font method from these options:
Basic
Google
Custom
Note: Default is “relative sizing” We recommend setting up a web part 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 web part 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 copy an already configured Mosaic and paste it onto another page (to avoid having to reconfigure) - please click on the migrate configuration tab and click on copy to clip board under the copy current config.
To paste in your Mosaic code - navigate to a new page where you would like to add a new Mosaic web part - add it to the page and click to edit the web part. Once you are editing the web part - enter your code within the add new config tab and click apply.
Publish the Page
When you are done making all changes scroll down and click save all within the web part configuration.
In the top right corner of your page, you will then click publish (if your page has not been published yet) or you will click republish (if your page has already been published and you are making changes and want to republish).
Support
Need support or want to talk to us? Please send an email to: