Sopstveni CSS

Uskoro

Sopstveni CSS još nije dostupan. Kontrola u sekciji Napredno u podešavanjima banera označena je sa Uskoro. Ova stranica opisuje kako će funkcija raditi kada bude objavljena. Do tada koristite kontrole za temu, boje i font u editoru banera.

Baner se prikazuje unutar Shadow DOM-a, u host elementu sa id-jem optsens-consent-root. Shadow DOM izoluje baner od stilova vašeg sajta. Stilski list vašeg sajta ne može da dosegne unutrašnje elemente banera, a baner ne može slučajno da nasledi stilove vaše stranice.

Zbog te izolacije, sopstveni stilovi će ići kroz polje Sopstveni CSS u editoru banera. Sve što tu unesete ubacuje se unutar Shadow DOM-a, nakon stilova teme, pa vaša pravila imaju prednost u odnosu na podrazumevane vrednosti.

upozorenje

Duboke izmene mogu narušiti pristupačnost i usklađenost. Nemojte sakrivati niti smanjivati dugme za odbijanje i držite dugmad za prihvatanje i odbijanje jednako istaknutim. Sakrivanje kontrola saglasnosti može učiniti baner neusklađenim.

Gde će se nalaziti

Polje je planirano za sekciju Napredno u podešavanjima banera, gde danas stoji kartica Uskoro. Planirana pravila:

• Primenjuje se nakon stilova teme, pa vaša pravila nadjačavaju podrazumevane vrednosti.
• Nisu dozvoljeni @import ni <script> tagovi.
• Maksimalna veličina je 10 KB.

Za boje, fontove, raspored i tamni režim koristite vizuelne kontrole u editoru banera. Sopstveni CSS je namenjen samo izmenama koje editor ne pokriva.

Ciljanje elemenata

Vaš CSS se izvršava unutar Shadow DOM-a i direktno cilja sopstvene klase banera. Ovi nazivi klasa su stabilni.

Selektor	Element
:host	Shadow host. Ovde postavite CSS promenljive ili osnovni font
.os-first-layer	Kontejner banera (sloj 1)
.os-fl-title	Naslov banera
.os-fl-body	Telo teksta banera
.os-fl-logo	Prostor za logo
.os-fl-buttons	Red sa dugmadima
.os-btn-primary	Dugme „Prihvati sve" (i „Potvrdi")
.os-btn-secondary	Dugme „Upravljaj podešavanjima"
.os-btn-alternate	Dugme za odbijanje
.os-fl-footer	Podnožje „Omogućava OptSens"
.os-overlay	Tamna pozadina iza centriranog iskačućeg prozora
.os-modal	Kontejner centra za podešavanja (sloj 2)
.os-modal-content	Unutrašnji panel centra za podešavanja
.os-widget	Plutajuće dugme

Dublji unutrašnji elementi centra za podešavanja, kao što su redovi kategorija i liste vendora, još nisu deo stabilnog skupa selektora.

Primer

/* Larger, bolder title */
.os-fl-title {
  font-size: 20px;
  font-weight: 700;
}

/* Round the accept button more */
.os-btn-primary {
  border-radius: 24px;
}

Veličina fonta i nasleđivanje

Baner postavlja veličine svojih fontova u fiksnim pikselima. Promena font-size na html ili body vaše stranice ne smanjuje niti povećava baner. Da biste promenili veličinu teksta, ciljajte određenu klasu banera, kao što je prikazano iznad.

Za promenu porodice fonta koristite kontrolu fonta u editoru banera, a ne Sopstveni CSS. Postavite je na određeni font ili je ostavite na nasleđivanju da se uklopi sa vašim sajtom.

Šta se prikazuje u stranici, a ne u Shadow DOM-u

Dve stvari se prikazuju kao obični elementi stranice i vaš sopstveni stilski list može da ih stilizuje već danas, bez Sopstvenog CSS-a:

• Placeholderi blokiranog sadržaja koriste klasu .os-placeholder, a njihovo dugme za dozvolu .os-ph-accept. Pogledajte iframe pravila.
• Automatski ubačeni linkovi u futeru koriste atribute [data-os-dns-link] i [data-os-manage-link]. Stranica centar za podešavanja opisuje kada se koji link prikazuje.

Šta ne možete iz stilskog lista stranice

Pravila iz uobičajenog stilskog lista vašeg sajta ne utiču na baner, jer ih Shadow DOM blokira. Host element takođe koristi all: initial, pa ne nasleđuje stilove stranice. Stilizovanje unutrašnjosti banera iz sopstvenog stilskog lista nije moguće, sa ovom funkcijom ili bez nje.

Ako stilizovanje izgleda pogrešno na živom sajtu, pogledajte konflikte stilizovanja.