Call or WhatsApp +923000113866
Email us: info@vamatters.com
“Dive into the Future of CRM Excellence with These Game-Changing CSS and JavaScript Snippets!”
“Dive into the Future of CRM Excellence with These Game-Changing CSS and JavaScript Snippets!”
CSS and JavaScript Snippets!
Introduction
Welcome to our latest blog post where we'll be sharing some invaluable CSS and JavaScript snippets to help you customize and optimize your CRM forms. Whether you want to hide specific menu items, showcase different logos for sub-accounts, or tweak the appearance of radio images and buttons, we've got you covered. Let's dive into the code snippets that will elevate your CRM experience.
"Elevate Your CRM Forms with These Must-Try CSS and JavaScript Snippets!"
Welcome to our latest blog post where we'll be sharing some invaluable CSS and JavaScript snippets to help you customize and optimize your CRM forms. Whether you want to hide specific menu items, showcase different logos for sub-accounts, or tweak the appearance of radio images and buttons, we've got you covered. Let's dive into the code snippets that will elevate your CRM experience.
"Elevate Your CRM Forms with These Must-Try CSS and JavaScript Snippets!"
To hide a certain crm nav menu item
To hide a certain crm nav menu item
.YNie1ivMYV213gjcAcl0 #sb_launchpad {
display: none !important;
}
Replace YNie1ivMYV213gjcAcl0 with your sub-account ID
.YNie1ivMYV213gjcAcl0 #sb_launchpad {
display: none !important;
}
Replace YNie1ivMYV213gjcAcl0 with your sub-account ID
To have a different logo for each sub-account
To have a different logo for each sub-account
.YNie1ivMYV9a8gjcAcl0 .agency-logo {
max-width: 100% !important;
height: 100px !important;
content: url("https://storage.googleapis.com/msgsndr/YNie1ivMYV9a8gjcAcl0/media/65955b5e44a01534323a24d1.png");
}
Replace YNie1ivMYV9a8gjcAcl0 with the sub-account ID and replace content URL with your sub-account logo URL after uploading it in the media library.
.YNie1ivMYV9a8gjcAcl0 .agency-logo {
max-width: 100% !important;
height: 100px !important;
content: url("https://storage.googleapis.com/msgsndr/YNie1ivMYV9a8gjcAcl0/media/65955b5e44a01534323a24d1.png");
}
Replace YNie1ivMYV9a8gjcAcl0 with the sub-account ID and replace content URL with your sub-account logo URL after uploading it in the media library.
To make radio images centered and horizontally aligned with border use following CSS within survey
To make radio images centered and horizontally aligned with border use following CSS within survey
<style>
/* Incorporating additional CSS snippet */
.hl-app .container-group-image .img-opt-title {
background: #6f00ff;
border-radius: 4px 4px 0 0;
color: #fff;
font-weight: 500;
text-align: center;
text-transform: capitalize;
}
/* Centering the images and text */
.hl-app #_builder-form .option-radio-image .container-group-image {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
margin: 0 auto !important;
flex-wrap: wrap !important;
}
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio {
width: var(--img-radio-container-width) !important;
min-height: var(--img-radio-container-min-height) !important;
max-width: var(--img-radio-container-max-width) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio > div {
width: var(--img-radio-container-width) !important;
min-height: var(--img-radio-container-min-height) !important;
max-width: var(--img-radio-container-max-width) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio > div .radio-image-option-set {
width: 100% !important;
min-height: var(--img-radio-container-min-height) !important;
max-height: var(--img-radion-container-max-height) !important;
margin: 0 auto !important;
padding: 3px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
transition: var(--transition-all) !important;
background: #ffffff !important;
border: 2px solid #6f00ff !important;
border-radius: 6px !important;
box-sizing: border-box;
}
/* Adjusting the image alignment */
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio > div .radio-image-option-set img {
display: block;
margin: 0 auto;
}
</style>
<style>
/* Incorporating additional CSS snippet */
.hl-app .container-group-image .img-opt-title {
background: #6f00ff;
border-radius: 4px 4px 0 0;
color: #fff;
font-weight: 500;
text-align: center;
text-transform: capitalize;
}
/* Centering the images and text */
.hl-app #_builder-form .option-radio-image .container-group-image {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
margin: 0 auto !important;
flex-wrap: wrap !important;
}
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio {
width: var(--img-radio-container-width) !important;
min-height: var(--img-radio-container-min-height) !important;
max-width: var(--img-radio-container-max-width) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio > div {
width: var(--img-radio-container-width) !important;
min-height: var(--img-radio-container-min-height) !important;
max-width: var(--img-radio-container-max-width) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio > div .radio-image-option-set {
width: 100% !important;
min-height: var(--img-radio-container-min-height) !important;
max-height: var(--img-radion-container-max-height) !important;
margin: 0 auto !important;
padding: 3px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
transition: var(--transition-all) !important;
background: #ffffff !important;
border: 2px solid #6f00ff !important;
border-radius: 6px !important;
box-sizing: border-box;
}
/* Adjusting the image alignment */
.hl-app #_builder-form .option-radio-image .container-group-image .option-radio > div .radio-image-option-set img {
display: block;
margin: 0 auto;
}
</style>
To make radio images banner colored background and aligned in surveys/forms paste it in footer of survey/form
To make radio images banner colored background and aligned in surveys/forms paste it in footer of survey/form
<style>
.hl-app .container-group-image .img-opt-title {
background: #6f00ff !important;
border-radius: 0 0 4px 4px;
color: #fff;
font-weight: 500 !important;
text-align: center;
text-transform: capitalize;
}
</style>
<style>
.hl-app .container-group-image .img-opt-title {
background: #6f00ff !important;
border-radius: 0 0 4px 4px;
color: #fff;
font-weight: 500 !important;
text-align: center;
text-transform: capitalize;
}
</style>
To add a button with pop up effect, colored font, center aligned in the survey
To add a button with pop up effect, colored font, center aligned in the survey
<style>
@keyframes popUp {
0% {
transform: scale(1);
} 50% {
transform: scale(1.1);
} 100% {
transform: scale(1);
}
}
</style>
<div style="text-align: center;">
<a href="google.com" target="_blank" style="display: inline-block;
background-color: #121e37;
color: #e3b756;
padding: 10px 20px;
text-decoration: none; border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 16px;
animation: popUp 1s ease-in-out infinite;
">Online Payment Form</a>
</div>
<style>
@keyframes popUp {
0% {
transform: scale(1);
} 50% {
transform: scale(1.1);
} 100% {
transform: scale(1);
}
}
</style>
<div style="text-align: center;">
<a href="google.com" target="_blank" style="display: inline-block;
background-color: #121e37;
color: #e3b756;
padding: 10px 20px;
text-decoration: none; border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 16px;
animation: popUp 1s ease-in-out infinite;
">Online Payment Form</a>
</div>
To Target Nth question on form/survey and adjust its CSS
To Target Nth question on form/survey and adjust its CSS
<style>
.hl-app .ghl-question:nth-of-type(4) .fields-container.row .menu-field-wrap {
width: 50% !important;
margin: 0 auto !important;
padding: 0 !important;
}
</style>
<style>
.hl-app .ghl-question:nth-of-type(4) .fields-container.row .menu-field-wrap {
width: 50% !important;
margin: 0 auto !important;
padding: 0 !important;
}
</style>
To Target Nth slide on survey and hide the next button
To Target Nth slide on survey and hide the next button
<style>
/* Hide the next button when currentslide="3" */
div[currentslide="3"] .ghl-footer-next {
display: none;
}
</style>
<style>
/* Hide the next button when currentslide="3" */
div[currentslide="3"] .ghl-footer-next {
display: none;
}
</style>
Reach Out to Us for an Exclusive Collection of CSS and JavaScript Snippets!
+923000113866
info@vamatters.com
Subscribe to our social
Subscribe to our social
We’re on a mission to build a better future where technology creates good jobs for everyone.
© Copyright 2024. VA Matters (SMC-PRIVATE) Limited. All rights reserved.