UGC Customization
Override default class values and hide elements to perfect your branded UGC.
class | description |
.stream-wrap | Entire body of the page excluding navigation |
.navbar-stream | Navigation Bar |
.filter-network | Network filter buttons in the navigation |
.item-wrap | Container for each post |
.modal-wrapper | Wrapper for the modal (new post and post details) |
Widget Visual most commonly overridden classes
class | description |
.widget-body | Entire body of the widget visual |
.player-body | Entire body of the single player visual |
.record-tile | Each of the tiles in the widget display |
Background for UGC
Example: Changes UGC background to red
.stream-wrapper {
background-color: red;
}
Default Posts Colours
Example: Changes UGC posts to green, text to white
.item-wrap {
background-color: green;
color: white;
}
Custom Posts
Custom Posts can be configured directly from UGC Moderate (under the Custom Posts
tab). They do not
display author info or timestamp, and can include HTML inside the post.
Example: Changes Custom Posts to a blue background with white text
.custom-item .item-wrap {
background: blue;
color: white;
}
Labelled Posts
Example: Changes posts with a specific label to light green background
.label-[YOUR-LABEL-NAME] .item-wrap { /*change [YOUR-LABEL NAME] to the specific label */
background: lightgreen;
}
Pinned Posts
Posts can be pinned from UGC Moderate by clicking on the pin icon on hover over an image or text post.Example: Changes Custom Posts to a gray background
.pinned .item-wrap {
background: #999;
}
UGC Navigation
Example: Changes UGC top navigation bar to a white background
.navbar {
background: #fff;
}
Social Icon Colour
Example: Changes UGC social icons to yellow icons in black box
.navbar-stream a.pressable {
color: yellow;
background-color: black;
}
Looking for more? Please contact us and we'll be happy to help you to
customize your UGC.