# Saját sáv létrehozása a nulláról

> Három út: CSS hozzáadása hookkal, az alap CSS teljes felülírása, vagy saját HTML-sablon és CSS.

A 6.0-s kiadástól HTML- és CSS-tudással bármilyen sávot létrehozhatsz. A beépített sávot háromféleképpen formálhatod át:

1. egy WordPress-hookkal CSS-t adsz az alap CSS-hez,
2. eltávolítod az összes alap CSS-t, és sajátot írsz,
3. a teljes sávot saját HTML-sablonból és CSS-ből építed.

A PHP-kódot a téma `functions.php` fájljába, vagy jobb helyen: egy must-use bővítménybe (`wp-content/mu-plugins/`) írd.

## 1. CSS hozzáadása hookkal

Ha az egyéni CSS-mező helyett inkább action hookot használnál, a `cmplz_banner_css` hookra csatlakozz:

```php
/**
 * CSS hozzáadása a sáv CSS-fájljához
 */
function add_my_custom_banner_css() {
	?>
	.cmplz-cookiebanner {

	}
	<?php
}
add_action( 'cmplz_banner_css', 'add_my_custom_banner_css' );
```

## 2. Az összes alap CSS eltávolítása

Ha a Complianz által generált teljes CSS-t felül akarod írni, és tiszta lappal indulnál, a `cmplz_cookiebanner_css` szűrőt használd:

```php
/**
 * A Complianz által generált CSS teljes felülírása
 *
 * @param string $css
 * @return string
 */
function my_custom_banner_css( $css ) {
	ob_start();
	// ide jön a saját CSS
	?>
	.cmplz-cookiebanner {

	}
	<?php
	return ob_get_clean();
}
add_filter( 'cmplz_cookiebanner_css', 'my_custom_banner_css' );
```

## 3. Saját HTML-sablon és CSS

A teljes sávot HTML-ből és CSS-ből is megírhatod. Az alap `cookiebanner.php` sablonból érdemes kiindulni, hogy a JavaScript és a sáv rendben együtt tudjon működni.

### 3.1. Szűrő a sáv felülírásához

A szűrő a beépített sávsablont a saját HTML-sablonodra cseréli. Mentsd egy `.php` fájlba a `/wp-content/mu-plugins/` mappában (a példában `banner.php`):

```php
<?php
/**
 * A sávsablon felülírása
 */
function cmplz_custom_banner_file( $path, $filename ) {
  if ( $filename === 'cookiebanner.php' ) {
    return trailingslashit( WPMU_PLUGIN_DIR ) . 'cookiebanner/cookiebanner.php';
  }
  return $path;
}

add_filter( 'cmplz_template_file', 'cmplz_custom_banner_file', 10, 2 );
```

### 3.2. (Nem kötelező) Az alap CSS felülírása

Ha a Complianz alap CSS-ét is le akarod cserélni, a `banner.php`-hoz add hozzá a 2. pontban látott `cmplz_cookiebanner_css` szűrőt, és írd bele a saját CSS-edet.

### 3.3. A HTML-sablon

Hozz létre az `mu-plugins` mappában egy `cookiebanner` mappát, és töltsd fel bele a saját `cookiebanner.php` sablonodat. Ajánlott az alap sablonból kiindulni, mert egyes osztályokra a konfigurációd szüksége lehet. Ha biztos vagy benne, hogy a beállításaid nem használják őket, törölheted. Néhány dinamikusan kitöltött attribútumot viszont meg kell tartani a teljes működéshez, például a `aria-describedby="cmplz-message-{id}-{consent_type}"` értéket.

Az alap sablon felépítése:

- **fejléc** (`.cmplz-header`): logó, cím, bezáró gomb (`.cmplz-close`),
- **törzs** (`.cmplz-body`): üzenet (`.cmplz-message`) és a négy kategória (`.cmplz-category`: funkcionális, beállítások, statisztika, marketing), mindegyik `details` elemben, jelölőnégyzettel és leírással,
- **hivatkozások** a TCF-hez (`.cmplz-links.cmplz-information`),
- **lábléc**: elválasztó, a gombok (`.cmplz-buttons`: `.cmplz-accept`, `.cmplz-deny`, `.cmplz-view-preferences`, `.cmplz-save-preferences`) és a jogi dokumentumok hivatkozásai (`.cmplz-links.cmplz-documents`).

Végül az `mu-plugins` mappádban ott kell lennie a felülíró `banner.php` fájlnak és a `cookiebanner` mappának a `cookiebanner.php` sablonnal.