Színes és betűtípusok joomla template - joomla sablonok 3

Megvan az alapvető szerkezetét az oldal elrendezését. Most szeretnénk, hogy győződjön meg arról, hogy az elrendezés megfelel a tervezési által feltalált bennünket, de nem kizárólag a szín és az alapértelmezett betűtípus. A Twitter Bootstrap, hogy átfogó CSS ​​segítségével változata az úgynevezett kevesebb. Azonban a mi egyszerű sablon fogjuk használni CSS-kódot.

Hozzon létre egy üres fájlt nevű custom.css, és mentse el a sablon mappában ess. Ezután adjunk hozzá egy új stílust lap index.php után template.css asztalra.

Link egy új fájlt kell hozzáadni való hivatkozás után templat fájlt, mert az egyik az elvek a CSS kimondja, hogy „mi van az alábbi kódot, újradefiniálja felett” (ez a szakasz).

Azért választottuk a kép egy oldalon fejléc, és egy hálózati eszköz Adobe Kuler elemezte a színek ezen a képen. Az eredmények alapján kapott, úgy döntöttünk, a háttér színét (# 5E7339), amely egy árnyalatú zöld, és vett két szomszédos árnyalatú zöld, # A3BF72 és # 95BF4C. Ezen kívül találunk egy kiegészítő szín # 663973.






Elkezdtük a legegyszerűbb. Hozzáadott stílus a háttér színe és az alapszín a szöveg, valamint meghatározzák a tartály szélessége, ami mindig használható, függetlenül attól, hogy mi vagyunk hozzá az oldalhoz:

Ezt követően, van hozzá egy képet fejlécet, valamint színek és betűtípusok fejezetek és linkek:

A következő lépésben már megváltozott néhány egyéb részleteket külön stíluselemeket, újradefiniálása ez a stílus a Bootstrap fájlt. Ehhez felhasználtuk a böngésző-alapú eszköz. A legismertebb ilyen eszköz - ez Firebug, fut a böngésző a Firefox és a Chrome Developer Tools for. Ezek az eszközök lehetővé teszik, hogy részletesen megvizsgálják a szerkezetet érdekli az oldal bizonyos részeit, hogy melyik stílus irányítják a kijelzőn.

A felső menü által vezérelt navigációs osztály, ezért módosítani azt egy kis dobozt a bal oldalon. Azt is hozzá egy stílust a linkeket a menüben (. Nav> li> a). Ennek eredményeként az oldalon saját színek kifejezetten a menü linkek:

Aztán szerkesztette a modul konfigurációs Intelligens keresés (Smart Search), kapcsoló beállítás Cím keresőmezőben (Search Field Label) fülön Dopoltelnye Options (Speciális beállítások) pozíció elrejtése (Hide). Szeretnénk nevezni honlapunkon jelennek fehér betűkkel a tetején a fejléc képet. Ehhez újra kell hozzá egy MULTI] sornyi PHP és CSS kódot. PHP-kód mondatokat a fájl index.php adunk az alábbi sorokat, mi lesz:

Azt mondja, hogy a neve a helyén kell távolítani a metaadatokat, amit teremtett az Általános beállítások (Global Configuration) webhelyen. Ezt követően, néhány változtatást hajtott végre a blokk