Create customized media with styled content
Create banners, block/announcements, or videos using the styled content type to customize settings such as text color, text alignment, links, background colors, and images on Employee Center Pro.
Before you begin
Role required: sn_cd.content_manager
If you are creating video content, you must first upload the video: Add or modify links to other content sources
About this task
This content type offers three options:
- Banner: appears at the top of the page
Banner containing header, heading, body text, and button content
- Block: appears in a widget on the page
Block content containing heading, body, and a button
- Video: can appear anywhere on a page, including at the top in place of a banner
When creating or editing a banner using styled content, you can view and edit the background image rather than editing your image externally and then importing it.
The Form Context menu (
Form Context menu\) at the top, left of the form provides the ability to quickly accomplish tasks when creating content. Select the icon and the following choices appear:
- Clone: duplicate the content record.
- Delete: remove the content record and associated scheduled content records.
- View content record: access and view the content record.
Note: You must save the underlying content record before the Form Context menu selections are activated.
Procedure
Navigate to Content Publishing > Content Library > Create New.
Select Portal under the Select the Platform column.
Select Styled content under the Choose a content format section.
Select Continue.
Fill in the fields in the New content form.
| Field | Description |
|---|---|
| Content name | The name that describes the content you are creating or editing. |
| Order | The number that indicates the order in which the portal and styled content appears in the Content list. |
| Active | Indicates the content is active and available for use. |
| Content style | Identifies if your content is:- Banner - Block - Video |
| CONTENT | |
| User reference table | Determines the variables you can use to personalize text for the block content.Select HR Profile to select variables from the sn_hr_core_profile table. Note: When the Human Resources Scoped App: Core (com.sn_hr_core) plugin is activated, only HR Profile appears. Select User to select variables from the sys_user table. |
| Headline | A title you want to appear for your content. This field is not required if you want your banner to show only a graphic. Note: This field only appears when the Content Experience widget is used. |
| Heading text | Text that provides additional information or clarity to your headline. |
| Body text | The detailed message you want to appear over the banner. |
| User column | Together with the HR profile [sn_hr_core_profile] table, filters users when evaluating a condition.This field only appears when you select HR Profile from the User reference table field. |
| Text color | Indicates if you want the body text to appear dark or light.Note: For the Banner content style, both dark and light are supported. For Block content style, only light is supported if the Text over background field is active (green). |
| Text alignment | Indicates how you want your text to appear. You can select left, center, or right justified. |
| Icon | Determines if you want an icon to appear. Slide right to choose an icon.Only appears when you select Block from Content style. |
| Pick an icon | Select the icon you want to appear.This field only appears when you turn the Icon field to green. |
| Icon size | Indicates the size of your icon.This field only appears when you turn the Icon field to green. The recommended size for icons are: - Topic icon: 56 x 56px - Sub-topic icon: 28 x28px |
| Call to action | Select if you want a button or link to appear. |
| Button title | The text that appears over the button.This field only appears when you select Button. |
| Button link | The link the user goes to when selecting the button.Select the down arrow to view a list of links. This field only appears when you turn the Icon field to green. |
| Link title | The text that appears for the link.This field only appears when you select Link. |
| Link | The link the user goes to when selecting the link.Select the down arrow to view a list of links. This field only appears when you select Link. |
| Video link | The link to the video you want to appear on your portal.This field only appears when you select Video from Content style. Note: Only YouTube and Vimeo videos are supported at this time. Ensure you use the embedded video link. |
| BACKGROUND | |
| Background Color | The background color of the banner or block text. To define the color, you can use:- Hex color codes Note: For a list of hex color codes see Hex color codes.
Note: For more information, see HTML Color Names (W3CSchools). |
| Background image | Indicates that you want an image to appear as the background. Slide right to display additional image fields. |
| Image file \[Upload an image\] | Select the link to add an image.This field only appears when you activate Background image. The recommended size for banners are:
|
Image omitted: ec-edit-image-button.png Edit image button | Allows you to edit your background image within the Content Library module.This field only appears after you upload a background image. A crop box appears over the image in the Image Editor Mode form. You can use the crop box by dragging the edges in or out to indicate what part of your image you want to display. After opening the image editor, the default mode is crop. When you upload and edit a .svg file, it is saved as a .png file. Note: .gif files are not supported. The following icons and buttons appear to help edit your image: Image omitted: ec-image-editor-icons.png Edit image icons</p> Each icon allows you to edit the image you imported:
Note: After you select Save, you can no longer reset your image. You must upload the image again if you are not satisfied with your edits.
Note: After you select the Save and continue your edits are saved and you cannot back out your edits. |
| Image size | How you want the image to appear.- Fill width: Resize the image to cover the entire container, even if the image must be stretched or cut off on the edges. - Fit width: Resize the image to ensure it is entirely visible. - Original size: Use the original size of the image. This field only appears when you activate Background image. |
| Image position | The location you want your image to appear. Select a box to define the image position.This field only appears when you activate Background image. |
| Text over background | Indicates that you want the text to appear over the background image. If you leave unchecked, the text appears below the image.Slide right to select a gradient for your background. |
| Add gradient | Indicates that you want the text to include color gradient to make your text easier to read.Only appears when you activate the Text over background field. |
Select Save to save the record and remain on the Design tab.
Or, select Save and continue to save the record and move to the Publish tab.
What to do next
(Optional) Translate your content.
Request language translation for your content. For more information, see Multilingual support in the Content Library.
Note: Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.
To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See Audiences
Preview your content from the Publish tab.
Note: Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.
Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: Create a publish plan for your content.