Nyílt Web Alapítvány > WordPress Magyarország > Sablonok - grafika > Twenty Fourteen sablon: Legyen fekete!
Sablonok - grafika

Twenty Fourteen sablon: Legyen fekete!

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!

wordpress2014-alap wordpress2014-fekete

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.

A szerzőről

Rottenbacher Tamás

Rottenbacher Tamás a nevem és egy WordPress kedvelő, honlapkészítő informatikus lennék, megszórva marketing és 2007 óta növekvő SEO, keresőoptimalizálás tapasztalattal.

Hozzászólás a fórumban:

Kezdőlap Fórumok Twenty Fourteen sablon: Legyen fekete!

Ennek a témakörnek tartalma 0 hozzászólás, 1 résztvevő. Utolsó frissítés:  Rottenbacher Tamás 1 év, 8 hónapja telt el.

1 / 1 bejegyzés megtekintése
  • Szerző
    Bejegyzés
  • #258004

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 63
    • Hozzászólás: 2875
    • Fórum rajongó

    Kérdésed, vagy véleményed van a(z) Twenty Fourteen sablon: Legyen fekete! című tartalommal kapcsolatban?
    [A teljes cikk itt olvasható: Twenty Fourteen sablon: Legyen fekete!]

1 / 1 bejegyzés megtekintése

‘Twenty Fourteen sablon: Legyen fekete!’ témakör lezárásra került, így a hozzászólás nem lehetséges.

Tovább az eszköztárra

A honlap további használatához a sütik használatát el kell fogadni. További információ

A süti beállítások ennél a honlapnál engedélyezett a legjobb felhasználói élmény érdekében. Amennyiben a beállítás változtatása nélkül kerül sor a honlap használatára, vagy az "Elfogadás" gombra történik kattintás, azzal a felhasználó elfogadja a sütik használatát.

Bezárás