# Style editor

In order to customize the appearance of the ParOne video components, we have built a Style Editor that lives in our partner interface as well as our plugins. This editor automatically generates the tag - in the case of our plugins, simply customizing is enough. For our partner interface, usage requires copy/pasting the generated tag to where you need it. The partner interface will automatically fill in the feed ID, but if you require additional feature toggles or specific campaign IDs you must provide these yourself. Our style editor displays the default CSS we have implemented for reference for each property, as well as a toggle for whether or not to merge your settings into ours or completely replace our defaults with your settings.

# Custom styling

To deal with large changes in available width, we provide breakpoint and narrow attributes for all properties that deal with overall layout of an element. The narrow version of an element style will act as an override. All of the elements in our components have their styling accessible via the styles prop. This takes a JSON encoded style object, using camel case. A table of available properties for each block and which element of the component they correspond to follows. All of the properties have the following format: {merge: boolean, styles: object}. For example: styles='{"feedStyle": {"merge": true, "styles": {"width": "100%"}}}' will merge the provided custom style object for the feedStyle prop into our default styles, in this specific case overriding our default setting for width.

# All blocks

All blocks carry styling props for the video player itself. This consists of the video element itself, the title and eescription of the current video, and the logo of the video publisher. In the case of the single video block, parone-video-block, these are the only properties available as the block is just a wrapper around the video player itself.

Name Target
playerStyle The overall arrangement of elements in the player itself. Top level element.
playerStyleBreakpoint The player width at which to use the narrow layout.
playerStyleNarrow CSS overrides for when player width is less than playerStyleBreakpoint. Top level element.
layout If set to videoBackground, places the textual elements in an overlay on top of the video element itself instead of arranged around the video element. playerStyle may still be used to customize the layout of the title, description, and logo.
playerTitleStyle Video title
playerDescriptionStyle Video description
playerLogoStyle Publisher logo
videoElementStyle The video tag

# Feed

The parone-video-feed block only has one additional property - the layout of the feed itself.

Property Name Property Target
feedStyle Appearance and layout of the feed. Top level element.

# Playlist

Property Name Property Target
playlistStyle Arrangement of the blocks in the overall layout.
playlistStyleBreakpoint Breakpoint for switching to narrow arrangment
playlistStyleNarrow Alternative arrangement for when width of the whole component is below arrangement breakpoint. This is treated as a set of overriding values, where any values set here will replace the corresonding values in playlistStyle.
distributorInfoStyle Distributor info block - this includes the distributor logo and the name of the feed. This can be used to control the layout of the distributor info block.
distributorInfoStyleNarrow Narrow settings for distributorInfo layout.
distributorLogoStyle Distributor logo.
feedNameStyle Feed name.
videoCardStyle Video cards in the playlist. This can be used to control the layout of the video cards.
videoCardStyleNarrow Narrow settings for video card layout
videoNameStyle Video names in the playlist.
videoDescriptionStyle Video descrptions in the playlist.
videoListStyle Video card list

This applies to both the horizontal and vertical forms.

Property Name Property Target
playlistStyle Arrangement of the blocks in the overall layout. Top level component.
playlistStyleBreakpoint Breakpoint for switching to narrow arrangment
playlistStyleNarrow Alternative arrangement for when width of the whole component is below arrangement breakpoint. Top level component.
distributorInfoStyle Distributor info block - this includes the distributor logo and the name of the feed. This can be used to control the layout of the distributor info block.
distributorInfoStyleNarrow Narrow settings for distributorInfo layout.
distributorLogoStyle Distributor logo.
distributorInfoStyleBreakpoint Breakpoint for switching to narrow arrangment
feedNameStyle Feed name.
videoCardStyle Video cards in the playlist. This can be used to control the layout of the video cards.
videoCardStyleNarrow Narrow settings for video card layout
videoNameStyle Video names in the playlist.
videoDescriptionStyle Video descrptions in the playlist.
videoListStyle Video card list
Property Name Property Target
playlistStyle Overall style of the playlist carousel. Layout can be controlled here via CSS Grid.
playlistStyleBreakpoint Breakpoint for switching to narrow arrangment
playlistStyleNarrow Alternative arrangement for when width of the whole component is below arrangement breakpoint. Top level component.
distributorInfoStyle Distributor info block - this includes the distributor logo and the name of the feed. This can be used to control the layout of the distributor info block.
distributorInfoStyleNarrow Narrow settings for distributorInfo layout.
distributorInfoStyleBreakpoint Breakpoint for switching to narrow arrangment
distributorLogoStyle Distributor logo.
feedNameStyle Feed name.
videoCardStyle Video cards in the playlist. This can be used to control the layout of the video cards.
videoCardStyleNarrow Narrow settings for video card layout
videoCardStyleBreakpoint Breakpoint for switching to narrow arrangment
videoNameStyle Video names in the playlist.
videoDescriptionStyle Video descriptions in the playlist.
videoThumbnailStyle Video thumbnails in the playlist.
videoListStyle Video card list
videoListStyleNarrow Narrow settings for list
videoListStyleBreakpoint Breakpoint for switching to narrow arrangment
carouselContainerStyle Layout of carousel + nav
carouselStyle Styling of the carousel
navStyle Styling of the carousel
navSnavPrevStyletyle Style for 'Prev'
navNextStyle Style for 'Next'
navPagesStyle Styling of page count

# Additional Features

If there are customization options that you require but which we do not provide, please reach out and let us know - we are constantly working to expand the flexibility of our system to better meet the needs of our partners. Reach out to us at support@parone.com.

Last Updated: 7/24/2021, 2:08:52 AM