Design Customisation

Using config.js

Open config.js file which is located under dist/assets/config.js of plugNmeet-client. You'll notice one field window.DESIGN_CUSTOMIZATION which accept JSON value like this:

window.DESIGN_CUSTOMIZATION = `{
  "primary_color": "#004D90",
  "secondary_color": "#24AEF7",
  "background_color": "#0b7db4",
  "background_image": "https:\/\/mydomain.com\/custom_bg.png",
  "header_bg_color": "#45b3ec",
  "footer_bg_color": "#45b3ec",
  "left_side_bg_color": "#04a2f3",
  "right_side_bg_color": "#04a2f3",
  "custom_css_url": "https:\/\/mydomain.com\/plugNmeet_desing.css"
}`;

You can use custom value for any or all of above options. You can also pass the above JSON format by URL too. In that case you'll require to use custom_design as URL parameter.

Design parameters

Field	Description
primary_color	The primary color code in hex format
secondary_color	The secondary color code in hex format
background_color	If you want to change default background color of room then you can supply color code
background_image	You can add custom background image. The link will require to direct https link. If you use value for background_image then background_color value will be ignore.
header_bg_color	Header background color
footer_bg_color	Footer background color
left_side_bg_color	Left side panel's background color
right_side_bg_color	Right side panel's background color
custom_css_url	You also can use your own custom CSS file for further advance customization. The link should be direct https link

Global Changes using CSS

Primary Color

.primaryColor {
    color: #004D90;
}
.text-primaryColor {
    color: #004D90;
}

Secondary Color

.secondaryColor {
    color: #24AEF7;
}
.text-secondaryColor {
    color: #24AEF7;
}

Primary Background

.bg-primaryColor {
    background: #004D90;
}

Secondary Background Color

.bg-secondaryColor {
    background: #24AEF7;
}

Header

For your need, You can change header Background, Logo, Color etc.

To change Header Background Color style use this class: see screenshot below.

header#main-header {
  background-color: azure;
}

Change Logo using this class name:

.header-logo {
    background-image: url(./assets/imgs/app-banner.jpg) !important;
}

Change Header Start and End Shape style using these class:

.header-before-start {
    background-image: url(./assets/imgs/app-banner.jpg) !important;
}
.header-before-end {
    background-image: url(./assets/imgs/app-banner.jpg) !important;
}

Change Header Title style using these class:

h2.header-title {
    color: blue;
    font-size: 20px;
}

Participants

You can change participants Background, width, padding etc. Style Using this class name:

.participants-wrapper {
    background: #fff;
    width: 300px;
    padding: 14px;
}

You can change participants Headline style using this class name:

.participants-wrapper .top p {
    font-size: 20px;
    color: grey;
}

You can change participant name style using this class name:

.all-participants-wrap p {
    font-size: 18px;
    color: grey;
}

You can change participant thumb style using this class name:

.all-participants-wrap .thumb {
    font-size: 14px;
    color: grey;
    background-color: antiquewhite;
}

Messages

You can change Messages Background, width, padding etc. Style Using this class name:

.MessageModule-wrapper {
    background: #fff;
    width: 300px;
    padding: 14px;
}

Start-Up Page

You can change Start-Up page style using this class name:

#startupJoinModal {
    background-color: aqua;
}

Error Page

You can change Error Page style using this class name:

.error-app-bg {
    background-image: url("./assets/imgs/header-before2.png") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Or

.error-app-bg {
    background: aliceblue !important;
}