Veelgebruikte CSS codes
Support van Voluit Suite geeft geen support op CSS hulp. Gebruik hiervoor bijvoorbeeld ChatGPT.
Hieronder wat CSS codes die je kwijt kunt in de CSS box op verschillende plekken in Voluit Suite.
CSS codes checkout component in website en funnel pagina's
Kassakoopje vormgeven
/* Achtergrondkleur zwart behouden */
.product-bump-divider,
.order-bump-container,
.main-section {
background-color: #000000 !important;
/* Zwart */
padding: 20px;
border-radius: 5px;
/* Optioneel: afgeronde hoeken */
}
/* Koppen, links en tekst binnen main-section geel */
.main-section .headline,
.main-section span,
.main-section p,
.main-section a {
color: #fdeb22 !important;
}
/* maakt de knipperende pijl iets minder rood */
.bump--flashing-arrow {
animation: none !important;
filter: invert(60%) sepia(20%) saturate(600%) hue-rotate(230deg) brightness(100%) contrast(90%);
}
Helaas is de knipperende pijl rood en ingebed. Waardoor je hem niet heel erg kunt veranderen. Experimenteer met onderstaande opdracht aan ChatGPT en kopieer de code die ChatGPT geeft in je CSS blok.
ChatGPT opdracht:
Heb je voor mij onderstaande code zodat de pijl in mijn brandkleur #jouw-hex-code komt te staan? De knipperende pijl is nu rood.
/* maakt de knipperende pijl zwart */
.bump--flashing-arrow {
animation: none !important;
filter: brightness(0) saturate(100%);
}
/* Stijlen voor checkboxes, onderstaande code maakt ze groen */
.bump--checkbox,
#cone-step-order-jRQFLTomMO input[type="checkbox"] {
width: 20px;
height: 20px;
appearance: none;
/* Verwijdert standaardstijl */
border: 2px solid #47b06c;
/* zwarte rand */
border-radius: 4px;
/* Optioneel: afgeronde hoeken */
cursor: pointer;
background-color: black;
position: relative;
}
/* checkbox als je hem aanvinkt, onderstaande code maakt hem helemaal lila */
.bump--checkbox:checked,
#cone-step-order-jRQFLTomMO input[type="checkbox"]:checked {
background-color: #9e84bc;
/* lila achtergrond */
border: 2px solid #9e84bc;
}
/* Wit vinkje in de gekleurde checkbox */
.bump--checkbox:checked::after,
#cone-step-order-jRQFLTomMO input[type="checkbox"]:checked::after {
content: '✔';
font-size: 16px;
color: #ffffff;
position: absolute;
left: 3px;
top: 0px;
}
kassakoopje zonder CSS
Kassakoopje met CSS
Gevinkte checkbox met lila box, lila achtergrond en witte vink. Let op: deze zie je alleen als je je checkout publiceert en je ziet het niet in de preview in de builder.
Kop van checkout component in funnel of website pagina
/* Zorgt ervoor dat de heading paars wordt */
.form-step .form-heading.active {
color: #5D378C !important;
font-weight: bold;
}
/* Prijzen in .product-cost-total en gerelateerde secties paars maken */
.product-cost-total .item-price,
.product-cost-total .item-total,
.product-cost-total .product-description .item,
.product-cost-total .order-total .item-total,
.product-description .item-price,
.order-total .item-price,
.item-price {
color: #5D378C !important;
font-weight: bold;
/* Optioneel: maakt de prijs dikgedrukt */
}
Kop van checkout zonder CSS
Kop van checkout met CSS
