Client Snapshot v1.0 to v1.01
GHL has updated the form builder to allow more control of columns and spacing via the built-in interface. This has messed up the current CSS in the styling options for the Reputation Management form. The following changes will be made in the next release to remedy this:
Update the column options to match the following for the radio buttons:
CSS Changed to:
body {
background: linear-gradient(70deg, {{ custom_values.branding_color_primary }}, {{ custom_values.branding_color_secondary }}); !important;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
::placeholder {
font-family: {{ custom_values.branding_font__body }} !important;
font-weight: 400 !important;
}
#_builder-form {
border: 0px !important;
background-color: #FFF !important;
margin-top: 5%;
border-radius: 10px !important;
padding: 2%;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
}
.image-container {
text-align: center;
margin-bottom: 20px;
}
.image-container img {
max-width: 100%;
height: 120px;
}
#_builder-form .col-12:nth-child(2),
#_builder-form .col-12:nth-child(3) {
display: block;
}
#_builder-form .col-12:nth-child(3) .option-radio {
text-align: center;
width: auto !important;
}
#_builder-form .col-12:nth-child(3) .option-radio input {
display: none;
}
#_builder-form .col-12:nth-child(3) .form-builder–item {
text-align: center;
direction: rtl;
}
#_builder-form .col-12:nth-child(3) .option-radio label {
margin: 0 10px;
}
#_builder-form .col-12:nth-child(3) .option-radio input + label {
display: inline-block;
white-space: nowrap;
cursor: pointer;
padding-left: 0px;
max-width: 80px;
font-size: 0px;
}
#_builder-form .col-12:nth-child(3) .option-radio label:before {
content: “☆”;
color: #888;
font-size: 4.2rem;
line-height: 70px;
}
#_builder-form .col-12:nth-child(3) .option-radio input:checked ~ label:before,
#_builder-form .col-12:nth-child(3) .option-radio input + label:hover:before,
#_builder-form .col-12:nth-child(3) .option-radio:hover ~ .option-radio label:before {
content: “★”;
color: #ffd75c;
}
#_builder-form .col-12:nth-child(3) .option-radio > .star-cb-clear + label {
text-indent: -9999px;
width: .5em;
margin-left: -.5em;
}
#_builder-form .col-12:nth-child(3) .option-radio:hover > input + label:before {
content: “☆”;
color: #888;
}
#_builder-form .col-12:not(:nth-child(1), :nth-child(2), :nth-child(3)) {
display: none;
}
#_builder-form ul li {
list-style-type: none;
background-color: #fff;
margin-bottom: 20px;
border: 1px solid #CCCCCC;
text-align: center;
transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#_builder-form ul li a {
display: block;
color: #666666;
text-decoration: none;
font-size: 24px;
}
#_builder-form .review_icon {
background-color: #FFFFFF;
padding: 10px;
min-width: 18%;
text-align: center;
margin-right: 15px;
font-size: 36px;
}
#_builder-form .review_icon i {
color: {{ custom_values.branding_color_primary }};
}
#_builder-form ul li a:hover,
#_builder-form ul li a:hover i {
color: {{ custom_values.branding_color_secondary }};
}
#_builder-form .col-12:nth-child(2),
#_builder-form .col-12:nth-child(4),
#_builder-form .col-12:nth-last-child(2) {
text-align: center;
padding-left: 10px !important;
padding-right: 10px !important;
}
#_builder-form p {
font-family: {{ custom_values.branding_font_body }} !important;
color: #000;
font-size: 0.975rem;
}
#_builder-form .col-12 h3 {
font-family: {{ custom_values.branding_font_heading }} !important;
font-weight: 600;
color: #000;
margin-bottom: 20px;
}
#_builder-form .col-12:last-child {
text-align: center;
}
ul {
margin-left: -40px!important;
}
#_builder-form .show_review {
display: block;
}
#_builder-form .hide_review {
display: none;
}
@media only screen and (max-width: 500px) {
#_builder-form ul li {
max-width: 400px;
}
#_builder-form .col-12:nth-child(3) .option-radio input + label {
max-width: 50px;
}
#_builder-form ul li a {
font-size: 18px;
}
#_builder-form .col-12:nth-child(3) .option-radio label:before {
font-size: 1.5rem;
}
}
@media screen and (max-width: 799px) and (min-width: 650px) {
#_builder-form .col-12:nth-child(3) .option-radio input + label {
max-width: 50px !important;
}
#_builder-form .col-12:nth-child(3) .option-radio label:before {
content: “☆”;
color: #888;
font-size: 3.2rem;
line-height: 60px;
}
}
@media screen and (max-width: 649px) and (min-width: 375px) {
#_builder-form .col-12:nth-child(3) .option-radio input + label {
max-width: 50px !important;
}
#_builder-form .col-12:nth-child(3) .option-radio label:before {
content: “☆”;
color: #888;
font-size: 2.8rem;
line-height: 50px;
}
}
@media screen and (max-width: 374px) and (min-width: 200px) {
#_builder-form .col-12:nth-child(3) .option-radio input + label {
max-width: 35px !important;
}
#_builder-form .col-12:nth-child(3) .option-radio label:before {
content: “☆”;
color: #888;
font-size: 2.2rem;
line-height: 50px;
}
}
{{ custom_values.branding_button_css }}
#_builder-form .field-container {
width: 100%;
max-width: 100%;
}
Client Snapshot v1.01 to v1.02
Update Trigger Link Content, Custom Values, and Add Button CSS as required that is not carried across the snapshot import process.
button.btn.btn-dark.button-element { background-color: #f9c447 !important; border-radius: 8px !important; } button.btn.btn-dark.button-element p { font-family: Open Sans !important; color: #000 !important; font-size: 18px !important; font-weight: 600 !important; text-transform: capitalize !important; }
