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 */