Wygląd swojego widżetu możesz edytować w panelu w ustawieniach. Jeśli jednak chcesz bardziej spersonalizować jegowygląd – np. użyć własnych fontów, dopasować rozmiary, marginesy lub zaokrąglenia przycisków – możesz to zrobić, nadpisując style CSS.
Widżet tip.BOX jest renderowany w technologii Shadow DOM, co oznacza, że jego wewnętrzne style są izolowane od reszty strony. Dzięki temu wygląd widżetu nie koliduje ze stylem Twojej witryny – ale ma też to efekt uboczny: nie można nadpisywać stylów standardową metodą CSS (np. przez style.css czy <style> w <head> strony).
Aby umożliwić większą elastyczność, wprowadziliśmy specjalny atrybut bb-override-css, który pozwala wstrzyknąć własne style bezpośrednio do Shadow DOM widżetu.
Każdy widżet tip.BOX możesz skonfigurować, dodając atrybut bb-override-css do jego głównego elementu <div>.
Wartość tego atrybutu to czysty kod CSS – dokładnie taki, jaki napisałbyś w arkuszu stylów.
<div id="tipbox-gg9s"
class="bb-widget"
data-bb-type="tipbox"
data-bb-space-id="3"
bb-override-css="
.buybox-tipbox {
max-width: 300px !important;
margin: 20px auto !important;
font-family: 'Roboto', sans-serif !important;
}
.buybox-tipbox-header h3 {
color: #0070f3 !important;
text-transform: uppercase !important;
}
.buybox-tipbox-button {
background: #0070f3 !important;
color: #fff !important;
border-radius: 999px !important;
padding: 12px 20px !important;
}
.buybox-tipbox-footer {
text-align: center !important;
}
"></div>Uwaga! Aby nadpisać style musisz zawsze używać !important przy każdej właściwości, którą chcesz nadpisać. Bez tego Twoje style nie zostaną zastosowane, ponieważ domyślne style widżetu mają wyższy priorytet.
Poprawnie:
.buybox-tipbox-button {background: #0070f3 !important;} 
Niepoprawnie:
.buybox-tipbox-button {background: #0070f3;}