Here is a display example of the Zoom Integration with CSS code added to spruce it up:
Here are the instructions to make the rounded box and the CSS Code to create this visual eye candy:
- Copy the code in the yellow box below.
- On your website, go to "Themes" in the dark gray bar on the left side of the screen.
- In themes, locate the "Edit Custom CSS" link just below the white "Preview & Customize" button.
- Scroll to the bottom of any (and all) existing CSS Code and start a new line by pressing enter.
- Paste in the copied code and press the blue "Save" button
Call 877-518-0819 if you have any issues.
Here is the code to Copy:
/* START Custom Zoom Intigration CSS */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap');
.media__zoom {
position: relative;
height: 100%;
font-family: 'Montserrat', sans-serif;
border-radius: 25px;
width: 300px;
-webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
-webkit-transform: translateZ(0) scale(1.02) perspective(1000px);
transform: translateZ(0) scale(1.02) perspective(1000px);
float: left;
background: rgb(114,237,242);
background: linear-gradient(135deg, rgba(114,237,242,1) 10%, rgba(81,81,229,1) 90%);
border-radius: 25px;
opacity: 0.8;
padding: 10px;
margin-left: 10px;
}
.media__zoom:hover {
-webkit-transform: scale(1) perspective(1400px) rotateY(10deg);
transform: scale(1) perspective(1400px) rotateY(10deg);
}
.media__zoom--meeting_id {
margin-bottom: 7px !important;
}
.media__zoom--when {
margin-bottom: 0px !important;
}
.media__zoom--duration {
margin-bottom: 5px !important;
}
.media__zoom--join::before {
content: "Click to ";
}
/* END Custom Zoom Intigration CSS */