Customizing the Style of an In-Page Experience
In this topic you will learn how to customize the style of an in-page experience.
The style controls the fonts, font sizes and colors used in an in-page experience. To customize the style, edit the experience and then click STYLE in the left navigation.
This topic contains the following sections:
- Switching device states
- Switching experience states
- Selecting a theme
- Determining which object to style
- Changing styles
- Adding custom fonts
- Using a custom CSS file
Note: After making any changes to an in-page experience, make sure you republish the experience so the changes appear on sites that display the experience.
Switching device states
Links across the top of the page can be used to customize the styles in different device states including desktop, tablet or mobile.
By default, the Desktop mode is displayed when customizing styles. The device states can be used to preview what an experience will look like on the selected device type.
Switching experience states
In-page experiences have different visual states that will change as the viewer interacts with the experience. The style of each of these states can be customized by clicking the links at the top of the page.
The following states are available to customize:
- BEFORE PLAY - How the experience will appear when first rendered, before any video playback has started
- PLAYING - How the experience will appear when a video is being played
- AFTER PLAY - How the experience will appear after a video plays (assuming autoplay next video is disabled)
To style each of these states, click a state and then customize the styles as needed.
Selecting a theme
Themes provide a pre-defined set of colors and fonts which can be used to quickly style an in-page experience. Gallery provides a set of default themes but you can also create your own custom themes that are shared across an account. Once a theme is applied to an experience, you can then use the styling options to further customize the appearance. The current theme is displayed at the top of the styling menu. In this example, the Light theme is selected.
To apply a theme to an in-page experience, follow these steps:
- Click on the current theme in the left navigation to open the theme selector.
- Click on a theme to select it. The preview will update to display the theme colors.
- When done, click the < Back to Styles link at the top of the page.
Clicking the Reset default theme link will apply the default theme to the experience.
Determining which object to style
To determine which object to style, try hovering over an object on the experience. Most times, a green box will surround the object. The style for that object will become enabled and all other styles that do not apply will be greyed out. For example, hovering over the overlay description highlights both the OVERLAY and OVERLAY DESCRIPTION styles. The OVERLAY style controls the appearance of the overlay, including the overlay title and overlay description. The OVERLAY DESCRIPTION controls the appearance of the just the video description object. With overlays, the entire overlay can be styled or the styles for the title and description can be styled individually.
If no green box is present when hovering over an object, this indicates that the object is considered part of the GLOBAL style and can be styled using the GLOBAL styles. Text objects that have been added to the experience can be styled using the GLOBAL style unless any styles were changed using the text editor when the text was placed on the experience.
The styling panel is used to customize the style of objects on an experience. The styling panel can be used to customize:
A custom CSS file can also be specified.
Changing text and background color values
To select a color value, follow these steps:
- Click on the color circle to open the color picker.
- Use the color slider to set a color range.
- Use the opacity slider to set the opacity for the color.
- Click in the color square to select a color.
- Click the X to close the color picker.
Colors can also be specified by entering color codes:
- HEX - HEX color values are specified with: #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
- RGBA - RGBA color values are specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
- HSLA - HSLA color values are specified with: hsla(hue, saturation, lightness, alpha).
Click the up/down icon () to switch between the color modes.
Selecting a font
The current font will be displayed in the styling panel. Use the dropdown list to select a new font. Click the X to close the font picker.
Selecting a font size
The current font size will be displayed in the styling panel. Use the dropdown list to select a new font size. Click the X to close the font size picker.
Any styles that have been changed will display an undo arrow.
Click the undo arrow ()to reset the style to the original value. You can also reset all the styles by clicking Reset all defaults at the bottom of the style panel.
Adding custom fonts
To add a custom font to the font picker:
- Click any of the font dropdown lists in the left navigation.
- Click on the Add a custom font link.
- Enter the URL of your CSS file.
- Verify that the font has been added to the top of the font selector.
Note: A collection of open source fonts is available at https://fonts.google.com.
Note: If the CSS file is located behind CORs or has some other type of file restriction, the font will not show up correctly on the authoring experience, preview pages, or sharable links as that URL has not been whitelisted to allow use of the font. If you are using a custom font, make sure the font is accessible by the experience.
Note: In-Page Experiences does not currently support base64 inline fonts. The workaround for this is to add a custom CSS file via CSS URL that overrides the font on the experience instead.
Using a custom CSS file
To use the styles from a custom CSS file:
- Click Custom CSS in the left navigation.
- Enter the URL of your CSS file or paste in the CSS code.
- Click Save.