CSS AND STYLING

Resources

SCRIPTS AND HACKS

ghl-experts-logo-light
  • CSS AND STYLING

    RESOURCES

    SCRIPTS AND HACKS

  • Calendar CSS V5

    Add this CSS Into Setting > Calendars > Edit > Confirmation > Custom Code

    <style>
    :root {
    --primaryColor: #005ff7;
    --backgroundColor: rgba(54, 108, 255, 0.08);
    --fontFamily: "poppins" !important;
    }
    .hl-app .hl_widget-body {
    padding: 20px;
    font-family: var(--fontFamily);
    }
    .date-picker-calendar {
    margin-top: 0 !important;
    max-width: 380px !important;
    min-height: 365px !important;
    }
    .selectable:hover .vdpCellContent{
    background: var(--primaryColor) !important;
    color: #fff !important;
    }
    .vdpArrowNext:after {
    border-left-color: var(--primaryColor) !important;
    }
    .vdpArrowPrev:after {
    border-right-color: var(--primaryColor) !important;
    }
    .hl-app .hl_widget-step1 .pick-hours--wrap {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    height: 380px !important;
    overflow-x: auto !important;
    width: 200px !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    }
    .vdpCell .vdpCellContent {
    display: inline-block !important;
    padding: 0 5px !important;
    height: 35px !important;
    line-height: 35px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid transparent !important;
    width: 35px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    }
    .details-item-step2 {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    padding-bottom: 10px !important;
    width: 200px !important;
    text-align: center !important;
    }
    .vdpInnerWrap {
    overflow: hidden !important;
    min-width: 28em !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    padding: 1em !important;
    background: #fff !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    }
    .hl-app .hl_widget-step1 .hl_widget--pick-date-time {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
    border: 1px solid #0000001f !important;
    overflow: hidden;
    }
    .vdpArrowPrev {
    right: 2rem !important;
    }
    .vdpArrowPrev {
    left: inherit !important;
    }
    .vdpPeriodControls {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    }
    .vdpCellContent {
    color: var(--primaryColor) !important;
    border-radius: 50% !important;
    font-weight: 500 !important;
    background: var(--backgroundColor);
    }
    .hl-app .hl_widget-step1 .hour-select input:checked + label {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: #fff;
    }
    .vdpCellContent:hover {
    color: #fff !important;
    background: var(--primaryColor) !important;
    }
    .vdpCell.selected .vdpCellContent {
    color: #fff !important;
    background: var(--primaryColor) !important;
    }
    .hl-app .hl_button.--primary {
    border-color: var(--primaryColor) !important;
    background-color: var(--primaryColor) !important;
    color: #fff;
    }
    .date-picker-calendar td.disabled.vdpCell div.vdpCellContent {
    color: #909090 !important;
    background: #fff !important;
    }
    .hl-app .hl_widget-step1 .hour-select label {
    display: block;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding: 7px 20px;
    border: 1px solid var(--primaryColor) !important;
    border-radius: 4px;
    max-width: 150px;
    margin: 0 auto;
    font-weight: 500;
    width: 150px;
    }
    .hl-app .hl_widget-step1 h3 {
    font-size: 18px;
    color: #2a3135;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0 !important;
    text-align: left;
    padding: 0 15px;
    }
    .hl-app input[type=email],
    .hl-app input[type=number],
    .hl-app input[type=password],
    .hl-app input[type=text],
    .hl-app textarea {
    background-color: #ffffff !important;
    border: 1px solid var(--primaryColor) !important;
    }
    .hl-app .multi_select_calendar .multiselect__input {
    border: 0 !important;
    }
    .hl-app .multiselect__content-wrapper {
    -webkit-box-shadow: 0 8px 16px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 16px 5px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    width: 100% !important;
    margin-top: 1px;
    font-size: 13px !important;
    padding: 1rem !important;
    }
    .vdpHeadCellContent {
    color: #3d3d3d !important;
    text-transform: uppercase;
    }
    .multiselect__content-wrapper::-webkit-scrollbar,
    .pick-hours--wrap::-webkit-scrollbar {
    width: 8px !important;
    border-radius: 10px !important;
    }
    /* Track */
    .multiselect__content-wrapper::-webkit-scrollbar-track,
    .pick-hours--wrap::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px grey !important;
    box-shadow: inset 0 0 5px grey !important;
    border-radius: 10px !important;
    }
    /* Handle */
    .multiselect__content-wrapper::-webkit-scrollbar-thumb,
    .pick-hours--wrap::-webkit-scrollbar-thumb {
    background: grey !important;
    border-radius: 10px !important;
    }
    /* Handle on hover */
    .multiselect__content-wrapper::-webkit-scrollbar-thumb:hover,
    .pick-hours--wrap::-webkit-scrollbar-thumb:hover {
    background: grey !important;
    }
    @media only screen and (max-width: 765px) {
    .hl-app .hl_widget-step1 .pick-hours--wrap,
    .details-item-step2 {
    width: 100% !important;
    }
    .hl-app .hl_widget-step1 .hour-select input:checked + label + button {
    padding: 7px 0px !important;
    height: 100%;
    }
    }
    /*# sourceMappingURL=fahimC.css.map */
    </style>

    Welcome to GHL Expert Tools

    We are still in the process of finalizing all of our trainings and setup instructions. If you need help in the meantime, please join our Facebook Group.

    Join our Facebook Group

    Join our Facebook Group to get support, platform insights, ask questions and receive updates.

    Latest Update

    Visit our changelog page to see our most recent update.

    FOMO

    Capture leads before they leave the page by creating
    entincing offers that create a fear of missing out.

    Affiliate area

    Join our affiliate program to earn commissions when you refer people to GHL Experts

    © 2020 GHL Experts. All Rights Reserved. Made with Love from Montreal

    This site is not a part of the GoHighLevel website or HighLevel, LLC. Additionally, this site is not endorsed by GoHighLevel in any way. GoHighLevel is a trademark of HighLevel, LLC