# Stílus- és CSS-hibák javítása

> A nyelvváltó hibakeresése, a használt CSS-osztályok és példák az egyedi stílushoz.

Egyes sablonok, amelyek saját menügenerátort használnak, nem jelenítik meg jól a WPML nyelvváltóit. Ez a fejezet a hibakeresés lépéseit, a nyelvváltó CSS-osztályait és néhány stílus-példát tartalmaz.

## Megjelenítési hibák keresése legördülő és menüs nyelvváltónál

1. Ideiglenesen add hozzá a láblécbe való nyelvváltót: ennek nagyon egyszerű a CSS-e, szinte minden oldalon működik.
2. Ideiglenesen távolítsd el az egyedi CSS-t, és használd a WPML nyelvváltóját az alapbeállításokkal.
3. A böngésző CSS-hibakeresőjével nézd meg, van-e egyértelmű CSS-ütközés. Ha megtaláltad az okot, a stílust felülírhatod a **WPML → Beállítások → Language Switchers** oldalon, a **Language switcher options** résznél az **Additional CSS** hivatkozásra kattintva.

## Az egyes nyelvek CSS-osztályai

| Osztály | Jelentés |
|---|---|
| `wpml-ls-slot-{slug}` | például `wpml-ls-slot-sidebar-1` |
| `wpml-ls-item` | minden nyelvi elem |
| `wpml-ls-item-{nyelvkód}` | például `wpml-ls-item-en` |
| `wpml-ls-current-language` | csak az aktuális nyelv elemén |
| `wpml-ls-menu-item` | csak menüben lévő nyelvváltónál |
| `wpml-ls-first-item` | a lista első nyelve |
| `wpml-ls-last-item` | a lista utolsó nyelve |

Ha minden nyelvi elemhez saját osztályt szeretnél adni, használd a `wpml_ls_model_language_css_classes` szűrőt a sablon `functions.php` fájljában:

```php
add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}
```

## A nyelvváltó tárolójának CSS-osztályai

- `wpml-ls`
- `wpml-ls-{csoport}-{slug}`, például `wpml-ls-statics-footer`
- `wpml-ls-{sablon-slug}`, például `wpml-ls-legacy-dropdown-click`
- `wpml-ls-rtl`: jobbról balra író nyelvekhez
- `wpml-ls-touch-device`: mobilra és táblagépre kerül

A `{csoport}` és a `{slug}` értéke a nyelvváltó helyétől függ:

| Leírás | Csoport | Slug |
|---|---|---|
| Nyelvváltó a láblécben | `statics` | `footer` |
| Nyelvváltó a bejegyzés fordításaihoz | `statics` | `post_translations` |
| Egyedi nyelvváltó | `statics` | `shortcode_actions` |
| Nyelvváltó widgetként | `sidebars` | `{sidebar_slug}` |
| Nyelvváltó menüben | `menus` | `{menu_id}` |

A tároló osztályait a `wpml_ls_model_css_classes` szűrővel bővítheted:

```php
add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}
```

A menüben lévő nyelvváltónál a WPML csak néhány elemet szúr be, ezért ennek nincs tároló-osztálya.

## Stílus-példák CSS-sel

A CSS-t a **WPML → Beállítások → Language Switchers** oldalon, a **Language switcher options** résznél az **Additional CSS** hivatkozás mögé írhatod.

Az aktuális nyelv vastagon:

```css
.wpml-ls-current-language {
  font-weight: bold;
}
```

Csak a láblécben lévő nyelvváltó betűmérete:

```css
.wpml-ls-statics-footer {
  font-size: 18px;
}
```

Jobb oldali margó az utolsó nyelvi elem után:

```css
.wpml-ls-last-item {
  margin-right: 10px;
}
```

A választókat kombinálhatod is a pontosabb célzáshoz. Például a láblécben lévő nyelvváltó aktuális nyelve vastagon:

```css
.wpml-ls-statics-footer .wpml-ls-current-language {
  font-weight: bold;
}
```

A menüben lévő nyelvváltó szélességének rögzítése:

```css
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}
```