# Egyedi CSS: stílusszabály közvetlenül egy elemhez

> Az Egyedi CSS kiterjesztés használata tárolón, szekción, oszlopon és widgeten: a selector szó, a CSS helye, korlátozások és hibaelhárítás.

Az Elementor saját beállításai a stílusozás nagy részét lefedik, de előbb-utóbb kell egy szabály, amit nem kínálnak: például színátmenet egyetlen címsoron, vagy térköz, amely csak egy kártyán belül él. Az **Egyedi CSS** kiterjesztés minden elemhez ad egy CSS-mezőt, így a szabályt ott írhatod meg, ahová tartozik.

CSS-t tehetsz tárolóra, belső tárolóra, szekcióra, belső szekcióra, oszlopra és bármely widgetre. Ha a szabály elé írod a `selector` szót, csak az adott elemre vonatkozik. Ha kihagyod, a szabály az egész oldalra érvényes.

## Előkészületek

- A kiterjesztés csak a bővítmény teljes (Pro) változatában érhető el. Az ingyenes bővítménnyel az **Egyedi CSS** szakasz egyetlen elemen sem jelenik meg.
- Kapcsold be a **Custom CSS** kiterjesztést a **The Plus Addons → Extensions** oldalon, a **Plus Special** csoportban. Alapból ki van kapcsolva.
- Az Elementornak és a bővítménynek is aktívnak kell lennie.
- A beállítás helye: a tároló, szekció, oszlop vagy widget **Haladó** füle.

## CSS hozzáadása egy elemhez

1. Nyisd meg az oldalt az Elementorban, és jelöld ki az elemet: tárolót, szekciót, oszlopot vagy widgetet.
2. Nyisd meg a **Haladó** fület, és bontsd ki az **Egyedi CSS** szakaszt. A fül felső részén van, a bővítmény többi kiterjesztése között.
3. Írd a szabályt az **Egyedi CSS** mezőbe. Ahol az elem saját osztályát írnád, oda a `selector` szót írd. A vászon még mentés előtt, élőben frissül.
4. Frissítsd az oldalt, és nyisd meg a nyilvános oldalt. Csak a szerkesztett elem változik, a hasonló elemek máshol az oldalon érintetlenek maradnak.

```css
selector h2 {
  background-color: #0F2C5C;
  color: #FFFFFF;
  padding: 14px 20px;
  border-radius: 6px;
}
```

![A Haladó fül Egyedi CSS szakasza egy tárolón, a fenti szabállyal](./kepek/kiterjesztesek-4-egyedi-css-panel.webp)

*A Haladó fül Egyedi CSS szakasza egy tárolón, a fenti szabállyal* (https://minta-bolt.hu/wp-admin/post.php?post=375&action=elementor)

A képen a tároló **Haladó** fülén megnyitott **Egyedi CSS** szakasz látszik. A szerkesztőmező a CSS-t színezve mutatja.

![A közzétett oldal: az első tárolóban a címsor sötétkék hátterű és fehér szövegű, a másodikban a téma alapstílusa látszik](./kepek/kiterjesztesek-4-egyedi-css-oldal.webp)

*A közzétett oldal: az első tárolóban a címsor sötétkék hátterű és fehér szövegű, a másodikban a téma alapstílusa látszik* (https://minta-bolt.hu/ke4-egyedi-css/)

A képen az első tárolón belüli címsor kapta a szabályt. A második tárolóban lévő, azonos fajtájú címsor változatlan.

Elementor Pro nélkül az Elementor saját **Egyedi CSS** szakasza is megjelenik a **Haladó** fül alján, de abban csak egy tájékoztató üzenet van a Pro-ról. A használható mező a fül felső részén lévő, a bővítményhez tartozó szakaszban van.

## Használat widgeten

Ugyanez a szakasz minden widgeten ott van a **Haladó** fülön, a The Plus Addons widgetjein is. Ha kijelölsz egy Gomb widgetet, és ezt írod bele, csak annak az egy gombnak változik a betűköze:

```css
selector .elementor-button {
  letter-spacing: 1px;
}
```

## Mivé alakul a selector

A CSS mentése előtt a bővítmény a `selector` szó minden előfordulását az elem saját CSS-választójára cseréli.

| Hol | Mire cseréli |
| --- | --- |
| Nyilvános oldal | `.elementor-<oldalazonosító> .elementor-element.elementor-element-<elemazonosító>` |
| Szerkesztő előnézete | `body.elementor-page-<oldalazonosító> .elementor-element-<elemazonosító>` |

Mindkettő ugyanarra az elemre mutat, ezért ami a szerkesztőben működik, az általában az élő oldalon is. A kettő mégsem azonos, ezért a kész munkát mindig a nyilvános oldalon is nézd meg. Előfordulhat például, hogy egy szabály a szerkesztőben más erősséggel érvényesül, mint az élő oldalon.

## Hol tárolódik a CSS

- Az oldal saját Elementor-stílusfájljának végére kerül (`wp-content/uploads/elementor/css/post-<oldalazonosító>.css`), az Elementor saját szabályai után. Az oldal HTML-jébe semmi nem kerül.
- Mivel az oldal stíluslapjába kerül, a `selector` nélküli szabály az oldal minden elemére hat, de nem a webhely többi oldalára.
- A szerkesztőben ugyanez a CSS közvetlenül az előnézetre kerül, ezért gépelés közben látod az eredményt.

## Korlátozások

- A `selector` szót a bővítmény mindenhol lecseréli, nemcsak a szabály elején. Egy `.my-selector` nevű osztály értelmetlenné válik, és a szabály csendben nem működik. Ugyanez igaz az értékekre és a megjegyzésekre. Ne használd a `selector` szövegrészletet másra a mezőben.
- A `{{WRAPPER}}` nem támogatott. Úgy kerül a stíluslapba, ahogy beírtad, a böngésző pedig kihagyja a hibás részt. Tesztünkben a szabály többi része ilyenkor az egész oldalra érvényesült. Használj helyette `selector` szót.
- A hiányzó záró kapcsos zárójel elnyeli a utána következő szabályokat. Nincs ellenőrzés és figyelmeztetés, a CSS többi része egyszerűen nem érvényesül.
- Semmi nem ellenőrzött: amit beírsz, az kerül a stíluslapba. A böngésző kihagyja az érvénytelen tulajdonságot, a szabály többi része él, de hibaüzenetet nem kapsz.
- Pro funkció. Az ingyenes bővítménnyel a szakasz nem jelenik meg, és a korábban mentett CSS sem érvényesül. A szöveg az oldalban marad, ezért a Pro és a kiterjesztés bekapcsolása után újra működik.
- Nincs webhely-szintű mező: a kiterjesztés elemenként működik. A teljes webhelyre szóló kód a **The Plus Addons → Custom CSS & JS** oldalon van, az egy külön funkció.

## Hibaelhárítás

**Két Egyedi CSS szakaszt látok a Haladó fülön.** Az Elementor is hozzáad egyet. Az Elementor ingyenes változatában az csak egy üzenetet mutat az Elementor Pro-ról. A használható mező a fül felső részén lévő szakasz, nem az alsó.

**Nincs Egyedi CSS szakasz.** Ellenőrizd, hogy a bővítmény Pro kiadása aktív-e, és a **Custom CSS** kiterjesztés be van-e kapcsolva a **The Plus Addons → Extensions** oldalon. Ha bármelyik ki van kapcsolva, a szakasz egyetlen elemhez sem kerül.

**A szerkesztőben jó, az élő oldalon nem.** Frissítsd az oldalt, hogy a stíluslap újra elkészüljön, majd töltsd újra a nyilvános oldalt. Ha egy szabály még mindig nem érvényesül, nézd meg, hiányzik-e előle egy záró zárójel, vagy szerepel-e a `selector` szó egy osztálynévben vagy értékben.

**A szabály olyat is átállított, amit nem jelöltem ki.** A `selector` nélküli szabály az egész oldalra érvényes. Írj elé `selector` szót.

**A korábban írt CSS nem működik.** Valószínűleg a kiterjesztést vagy a Pro bővítményt kapcsoltad ki. Kapcsold vissza mindkettőt: a CSS az elemen megmaradt, és újra érvényesül.