# A puha sütifal

> Mi a különbség a puha és a hagyományos sütifal között, hogyan kapcsolod be, és hogyan módosíthatod a háttér színét és átlátszóságát CSS-sel.

## Puha és hagyományos sütifal

A hagyományos sütifal csak két lehetőséget ad a látogatónak: elhagyja a webhelyet, vagy elfogadja a harmadik féltől származó sütiket. A GDPR és több más adatvédelmi szabály ezt tiltja.

A **puha sütifal** egy harmadik lehetőséget ad: a látogató elutasíthatja a sütiket, és úgy folytathatja a böngészést. Mindkét fajta fal elfedi az oldalt, amíg a látogató nem választ. A legtöbb sütifal a sütiszabályzat elolvasását is megakadályozza a hozzájárulás előtt. A Complianz fala ezt nem teszi: a sütiszabályzat oldalán másként viselkedik, hogy a szabályzatot rendesen el lehessen olvasni.

## Bekapcsolás

1. Nyisd meg a **Complianz → Consent Banner** oldalt.
2. Lépj az **Appearance** fülre.
3. Kapcsold be a **Show as soft cookie wall** beállítást.
4. Mentsd a változtatást.

A beállítás minden sablonnal elérhető. A Consent Banner oldal Értesítések paneljében is megjelenik egy **Soft cookie wall** tájékoztató, amely a témáról szól.

![A Consent Banner Appearance füle, jobbra a Soft cookie wall értesítéssel](./kepek/sutisav-puha-fal-beallitas.webp)

*A Consent Banner Appearance füle, jobbra a Soft cookie wall értesítéssel* (https://minta-bolt.hu/wp-admin/admin.php?page=complianz)

A képen az **Appearance** fül látszik, a jobb oldali panelben a **Soft cookie wall** értesítéssel.

## A fal hátterének módosítása

A sütifal háttérszínét és átlátszóságát egyéni CSS-sel állíthatod, a **Custom CSS** fülön (lásd [Hozzájárulási sáv](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/hozzajarulasi-sav/)). A háttér színét `rgba()` értékkel adod meg: az első három szám a piros, a zöld és a kék összetevő, a negyedik (`a`, alfa) az átlátszóság. Az 1 teljesen fedő, a 0 teljesen átlátszó szín. Az `rgba` a HEX-színkódhoz (például `#2daee1`) hasonló, de a színt kiegészíti egy átlátszósági értékkel is.

Az alapértelmezett átlátszóság 0,7. A gyártó példájában ezt 0,5-re csökkentették, a színt pedig lilára (`#693187`) cserélték, így a fal halványabb és színes lett.

A sablon további formázásához használd az egyéni CSS-t is a [Hozzájárulási sáv](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/hozzajarulasi-sav/) fejezet szerint.

## Elmosás a sötét réteg helyett

Az alap puha sütifal sötét réteget tesz az oldal fölé, hogy a sávra irányítsa a figyelmet. Ha ennek helyett az oldal tartalmát szeretnéd elmosni, amíg a látogató nem választ, egyetlen CSS-szabály elég a **Custom CSS** fülön:

```css
.cmplz-soft-cookiewall {
  backdrop-filter: blur(10px);
}
```

A `10px` az elmosás erőssége; nagyobb érték erősebb elmosást ad.

## Görgetés tiltása a sáv megjelenése alatt

A görgetést is letilthatod, amíg a látogató a sávot el nem fogadja vagy el nem utasítja. Ehhez PHP-kód kell, amely egy osztályt tesz a `body` elemre, és CSS, ami ezzel az osztállyal letiltja a görgetést. Javasolt MU-pluginba tenni (lásd [Kész sávváltozatok és kapcsolók MU-pluginnal](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/stilus-css-mu-plugin-peldak/)):

```php
<?php
// A sáv állapotának figyelése: amíg nincs döntés, a body kapja a cmplz-noscroll osztályt.
function cmplz_noscroll_js() {
	ob_start(); ?>
	<script>
		document.addEventListener("cmplz_banner_status", function(consentData) {
			var status = consentData.detail;
			if ( status === 'dismissed' ) {
				document.querySelector('body').classList.remove('cmplz-noscroll');
			} else {
				document.querySelector('body').classList.add('cmplz-noscroll');
			}
		});

		document.addEventListener("cmplz_cookie_warning_loaded", function() {
			if ( cmplz_get_banner_status()!=='dismissed' ) {
				document.querySelector('body').classList.add('cmplz-noscroll');
			}
		});
	</script>
	<?php
	$script = ob_get_clean();
	$script = str_replace(array('<script>', '</script>'), '', $script);
	wp_add_inline_script( 'cmplz-cookiebanner', $script);
}
add_action( 'wp_enqueue_scripts', 'cmplz_noscroll_js', PHP_INT_MAX );

// A görgetés tiltása a sáv CSS-ébe írva.
function cmplz_noscroll_css() {
	?>
	.cmplz-noscroll {
		margin: 0;
		height: 100vh;
		overflow-y: hidden;
	}
	<?php
}
add_action( 'cmplz_banner_css', 'cmplz_noscroll_css' );
```

A kód a `cmplz_banner_status` és a `cmplz_cookie_warning_loaded` eseményre figyel: ha a sáv betöltődött és még nincs döntés, a `body` megkapja a `cmplz-noscroll` osztályt, a döntés után az osztály lekerül. A sáv CSS-ének újragenerálásához futtasd le a **Wizard → Finish → Finish** lépést, és ürítsd a gyorsítótárat.