A fekete nagyon trendi szín. Sőt, volt egy időszak, amikor a környezetvédelemre (fekete weboldal kevesebb energiát fogyaszt picivel) hivatkozva volt népszerű, máskor a gyengén látóknak szánt megjelenések okán. Azonban sokan csak úgy, szimplán egyéni ízlésük alapján szeretnének egy majdnem teljesen fekete sablont. Ezért egy kis, egyszerű leírást készítettem, a Twenty Fourteen sablon átszínezéséhez.
A módosításhoz ftp kapcsolatra, szövegszerkesztőre (Link mögötti NotePad++ tud magyar nyelven is!) lesz szükségünk, továbbá a tárhelyünkön a wp-content/themes/twentyfourteen/style.css fájlra.
Színezzük feketére a Twenty Fourteen sablont!
Bal oldali az alap, gyári, míg jobb oldalon az általunk átszínezett.
1. Adjuk meg az oldal háttérszínét feketének:
111.sor
body {
background: #f5f5f5; <-- Ezt a regi, ezt csereljuk
background: #000; <-- Erre csereljuk, modositsuk
}
2. A tartalmat tartalmazó (szép is a magyar nyelv) részt is sötétítsük
3651. sor
.content-area, .content-sidebar {
padding-top: 72px;
background-color: #000; <-- Ezt adjuk hozza
}
Van egy rész, ami a hozzászólások alatt fehér marad. A style.css végére szúrjuk be az alábbi kódot, hogy az a rész fekete legyen:
.site-main { background-color: #000; }
3. Page/Post rész jön sorra:
Header:
1121. sor
.site-content .entry-header {
background-color: #fff; <-- Irjuk at az fff-et, 000-ra
padding: 0 10px 12px;
}
1179. sor
.site-content .entry-meta {
background-color: #fff; <-- Az fff-t csereld itt is 000-ra
margin-bottom: 8px;
}
Ne feledkezzünk meg a betűk színének átírását, mint például a bejegyzés címének:
1113. sor
.entry-title a {
color: #2b2b2b; <-- Legyen mondjuk ccc, mint vilagosszurke az uj szin
}
Avagy a cím fölötti kategória:
1162. sor
.cat-links a {
color: #2b2b2b; <-- Ezt is ccc-re csereljuk
}
Dátum, szerző, szerkesztés link:
1145. sor
.entry-meta a {
color: #767676;
}
Content rész:
1253. sor
.site-content .entry-content, .site-content .entry-summary, .page-content {
background-color: #fff; <-- Itt is fff csereje 000-ra
padding: 12px 10px 0;
}
Itt is adjuk meg a világos szürke színt a szöveges elemeknek, hogy lássuk is a tartalmat. Az alábbi kódot magunk kell hozzáadjuk, a style.css legvégére.
.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content { color: #ccc; }
4. Űrlap mezők
A háttér fekete, de az űrlapok még vakító fehérek. A megkülönböztethetőség miatt, legyenek sötétszürkék, fehér betűkkel.
483. sor
input, textarea {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 2px;
color: #2b2b2b; <--- Ezt csereljuk le fff-re
padding: 8px 10px 7px;
background-color: #000; <-- Ezt pedig adjuk hozza
}
Nagy vonalakban ennyi is lenne! Azért csak nagyvonalakban, mivel sok apróságot lehetne még idehozni, de egy kis CSS szerkesztő ismerettel (amit bárki akár órák alatt az internetről, ingyenes oldalakról is magára szedhet) elegendő, hogy kedvére változtassa például a színeket. Avagy ha megakad, akkor kérdezhet nyugodtan a fórumunkban.
Gyors megoldás:
Adjuk hozzá a wp-content/themes/sablounkneve/style.css legvégére a következő részt:
body, .content-area, .content-sidebar, .site-content .entry-header, .site-content .entry-meta, .site-content .entry-content, .site-content .entry-summary, .page-content, .site-main { background-color: #000; }
.entry-title a, .cat-links a, .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content, .comment-content { color: #ccc; }
input, textarea { color: #fff; background-color: #666; }
Azt azonban ne feledjük, hogy sablon frissítéskor ezek a módosítások elvesznek, ezért a theme frissítése után újra át kell színeznünk.