The Social wall consists of the comments console and the polls console, both of which have customisable elements which you can update to be more inline with your own branding.

Please see the design guidelines below for when you are creating the custom CSS. Please get in touch with ops@grabyo.com if you would like the Photoshop/Sketch files for these guidelines.


Guidelines

20px Recommended minimum font size


Common CSS background styling

All sections have backgrounds that can be customised using CSS:

  • Fill - solid, gradient, radial and opacity
  • Stroke - width and fill
  • Border radius- rounding per corner
  • Shadows - inner / outer

Common text styling

  • Font
  • Font size
  • Font weight
  • All uppercase
  • Color


Preview on mobile

To ensure the designs are mobile friendly, preview your image on a mobile device:

  1. Turn on 'Generate image assets' (File > Generate image assets)
  2. The image will now be saved to / Web Source Guidelines / Photoshop / social-wall-guidelines-assets / Social-Poll.png or Social-Wall.png
  3. Transfer the image to your phone to preview the image. Check in both landscape and portrait


Social Wall - Comments console


1. Hero section

  • Width is restricted to allow space for social feed
  • Social comment could wrap to more than 2 lines
  • Hero section can be moved to the bottom right. Social feed moves to the left

2. User profile image

  • Customizable elements
  • Image can be placed anywhere within the hero comment area
  • Stroke width / colour
  • Size
  • Square, square with rounded corners or circular

3. Hero comment

  • Section can be moved above info

4. Hero comment info

  • Section can be moved below comment
  • Social icon can be changed
  • Social icon, name and recency of comment can be re-ordered

5. Social feed comment info

  • Section can be moved above comment
  • Social icon can be changed
  • Social icon, name and recency of comment can be re-ordered

6. Social feed comment

  • Section can be moved below info

7. Social feed title

  • Section can be removed

8. Social feed section

  • Width is restricted
  • Social feed can be moved to the left. Hero comment moves to bottom right



Social Wall - Polls


1. Poll section

  • Width is restricted
  • Background can be hidden (see CSSbackground styling)
  • Section can be moved to the right

2. Poll title

3. Option image

  • Image can be removed, width of other elements increase
  • Customizable elements
  • Stroke width / colour
  • Size
  • Square, square with rounded corners or circular

4. Voting bar

  • The voting bar has the same customizable properties as a background (see panel on the left)

5. Voting details

6. Facebook reaction icons

  • Icons can not be changed (matches Facebook)




Once you have your custom CSS ready, please select the 'cog' icon on the top right hand corner of each respective element you would like to customise. You can now add the URL link of where your custom CSS is hosted and update. You can always revert back to the original CSS we provide by selecting 'Reset CSS to default'.



Once you have updated the custom CSS, please select 'View Playout' and copy the URL form there to place into Producer as a web source.