Base Setup

You should be able to download the OBS scene from the overlay admin page and have all the sources be automatically put into place. If not the placement should be as follows:

• Game Source: 1440x810, x: 240, y: 56
• Blue Cam: 700x220, x: 0 y: 860
• Gold Cam: 700x220, x: 1220 y: 860
• Commenter Cam: 240 x Your choice, x: 240, y: 0

The overlay should sit on top of all of these sources. To customize the background, add a new OBS color or image sources and place that on the bottom.

CSS Customizing

The Manuka overlay comes ready to use out of the box but there are opportunities for customization from very easy color defaults to full css overrides.

The theme uses a single class, .custom-color to customize the primary color of the overlay including the frame color, the post-game background shadow (on the Default/Clover overlay), the match-preview title box, and match summary background-shadow.

.custom-color {
  color: mediumvioletred;
}

If you want to fully customize the theme, the following classes and IDs are available. Generally speaking, IDs are used for singular elements and classes when there are multiple. In order to override the styles in the app, you'll need to increase the specificity of the css selectors. This can be achieved simply buy repeating the classname in sequence such as .classname.classname.classname {}. Each time you repeat the class, it will increase the power of the override. Alternatively you may need to use the !important keyword on each css property instead. The !important keyword is the most powerful override.

.classname.classname.classname {
  border: 1px solid red;
}
.classname {
  border: none !important;
}

Component IDs/Classes

#clock-time-container {}
#clock-time {}
#event-cable-title {}
#event-title {}
#event-cab-divider {}
#cab-name {}
#customFrameContainer {}
#customFrame {}
.custom-frame-bottom {}
.custom-frame-top {}
#customFrameVideoWindow {
  /*
    This div uses both before & after psuedo children to create a gradiated border effect.
    You only need to use the `color` property to change the frame's color.
    This color is also able to be set by the .custom-color class mentioned above.
  */
}

#stats-container {}
#stats-legend {}
#team-players-container {}
#team-players-block-blue {}
#team-players-block-gold {}
.team-players-block {}

.player-block {}
.player-block-name-row {}
.player-block-sprite {}
.player-block-stats {}
.player-name {}
.queen-kills-container {}
.queen-kills {}
.hat-trick {}

#kill-feed-container {}
#kill-feed {}
.kill-feed-left {}
.kill-feed-right {}


.team-info-container, .team-info-container-blue, .team-info-container-gold {}
.team-name-container, .team-name-container-blue, .team-name-container-gold {}
.team-name, .team-name-blue, .team-name-gold {}
.team-score-container, .team-score-container-blue, .team-score-container-gold {}
.blue-score-marker-filled, .gold-score-marker-filled {}
.blue-score-marker-empty, .gold-score-marker-empty {}
.webcam-player-icons {}



/* Manuka Match Preview Only */
#matchPreviewOverlay
#previewEventNameContainer
#previewEventName
#previewEventNameBgFrame, .custom-color {}
#previewTeamBoxesContainer
.preview-team-container, .preview-team-container-blue, .preview-team-container-gold,
.preview-team-name
.preview-player-names
.preview-player-name