CSS-kód

/ * Stílusok minden linkhez a Flex Container belsejében * /
A fejléc (
Kijelző: blokk;
Szín: # 212121;
Padding: 12px;
Szöveges dekoráció: nincs; / * Eltávolítja az aláhúzás * /
Betűméret: 100%;
Szöveg-árnyék: 0 1PX 0 #FFF;
Border-RADIUS: 4PX;
}

Itt jelezzük a blokk relatív szélességét a logó alatt, ami azt jelenti, hogy a fennmaradó 70% -ot elfoglalja a navigációt. Érdeklődés beállítását, az anyagok pontosabb elosztása a szülőtartályban.

/ * A gyermekblokk szélessége a logó alatt * /
.Wrap-logó (
Szélesség: 30%;
}

A betűtípus méretének beállítása%, törődünk a Super-ről nagy képernyőkVégtére is, a képpontok kemények, mint a méret.

/ * Logo stilizáció * /
.Wrap-logo #logo (
Font-Család: "Roboto Slab", Serif;
Betűméret: 200%;
Betűtípus: merész;
}

A logó frissnek tűnik, ha kétszínűvé teszed.

/ * Zöld szín a logó részétől * /
.WRAP-LOGO SPAN (
Szín: # b2db41;

Helló kedves barátaid! Rendszerként az újonnan érkezők választanak egy egyszerű sablont a webhelyen, de előbb-utóbb van szükség a fejléc megváltoztatására. A kérdés egyszerű, de sok újonc nem tudja, hogyan kell megváltoztatni a WordPress webhely fejprogramját. Ez a cikk válaszol erre a kérdésre.

Egyszerű weboldal sablon, a helyszíni sapkák cseréje

A webhely létrehozásakor (blog) nem volt tudás. Ezért egy nagyon egyszerű WordPress weboldal sablont választottunk ki, beleértve a webhely sapkáját is. Ugyanakkor két kép volt a fejlécben:

• a felső kép egy egyszerű téglalap volt, amelyet az általános sablon színe alatt festett;
• a sapkák alsó kupakja az óra képét jelezte, és az általános sablon színe alatt is festett, az úgynevezett "fejléc kép".

A minap úgy döntött, hogy kísérletezni a kupak oldalamon, távolítsa el az út a két kép, hogy egy csere a fejléc az oldalon. Ehhez egyszerűen eltávolítaná az alsó képet - semmi bonyolult.

Ezután lehetővé teszi a helyszíni sapkák felső képét, problémával szembesült. A végső kép telepítése után kiderült, hogy alapértelmezés szerint telepítették, és a láblécben (a webhely oldal alsó része).

Megpróbáltam információt találni az interneten, hogyan oldja meg a problémát, de nem találtam semmit. Meg kellett oldanom a próba és hibák módjának problémáját. Egy egyszerű weblap sablon nem volt olyan egyszerű.

Hogyan lehet megváltoztatni a fejét? Tehát rendben. Miután eltávolította a fejléc képét, úgy döntöttek, hogy képet készítenek a fejfejben lévő érmék formájában, és feliratot készítenek. Mint ez megtörtént, nem fogom tükrözni ebben a cikkben, ez egy külön téma. De a folyamat általános megértéséhez röviden leírom.

Mielőtt elkezdené cserélni a webhely címét, tudnunk kell a kép címét. Ha dolgozik a Mozilla böngészője. Firefox, meg kell tenni a jobb egérgombbal a kupakot (tapéta), majd kattintson a jobb egérgombbal, nyomja meg a „nyitott háttérképet” a párbeszédablakban.

Új ablakban megnyílik a webhely sapkák képe. A böngésző (fent) címsorában a webhely sapka (képek) címe regisztrálva van. A fejlécem címe így néz ki: másolja és mentse ezt a címet.

Most látjuk, hogy a képünk a hostingen fekszik: WP-Content mappa; Témák mappája; Zeestyle mappa; Az IMAGIS mappája végül a kép neve a fejléc_bg.png. Ez hasznos számunkra a jövőben.

BAN BEN google böngésző A Chrome címe szinte is tanul. Hozzuk az egeret a helyén sapka, nyomja meg az egér jobb gombjával, válassza ki a „Copy URL Pictures” párbeszédablak, másolja és megtakarítás a link. Vannak sablonok, ahol a képek egyre ravaszul nyithatók meg.

Ezután nyissa meg a képet egy új ablakban, és működhet vele. A Photoshopban vagy más képek más szerkesztőjében szerkesztheti. A Pixlr programban (ez online Photoshop). Tudjon meg többet erről az "" és "" cikkekben.

A kép befejezése után ugyanolyan bővítéssel és ugyanazon geometriai dimenziókkal kell megmenteni, mint a régi kép. A név mentéséhez a szerkesztett kép átnevezése (én csinálom Teljes parancsnok.) És hozzárendeljük a NAME HEAMER_BG.PNG nevet. Ezt a nevet a fenti linkből veszik (minden névnek sajátja lesz).

Cserélje ki a webhely képét (kupak) FTP-n keresztül, vagy közvetlenül a szerveren, közvetlenül megtettem. Ehhez megyünk hostingunkba, megnyitjuk honlapunkat, nyissa meg a Public_HTML mappát, a WP-Content mappát, a témákat, a zeestyle-t, a képeket, és megtalálja a fejlécet (kép) - fejléc_bg.png.

Töröljük a talált képet, és letölt egy új szerkesztett képet a helyén. Frissítjük és menjünk az oldalra, én is frissítem, és megnézzük, hogy szerkesztett sapkunk (kép) van telepítve. Minden nagyon egyszerű - a webhely fejlécének cseréje.

Amint azt már említettük a cikk elején, a kalapomat nem csak a webhely oldalán és a láblécben hozták létre.

Az okot találták és megszüntették. Az a tény, hogy a fejlécben és a láblécben lévő sablonom olyan téglalapok jelennek meg, amelyek egyszerűen sötétkékkel festettek, a fő sablon színe alatt. Tehát kiderül, hogy a sapka és a futret forrása ugyanaz a kép (lásd a fenti hivatkozást), így megváltoztatja a sapka képeit, és a lábléc képét.

A probléma megoldásához meg kell osztani a linkeket, külön képet készíteni a sapkára és külön a futavitásra. Ehhez visszatérünk a webhelyünk adminpaneléhez, jöjjön be " Megjelenés"," Szerkesztő ", és válassza a" Styles "," Style Table "(Style.css) lehetőséget.

Keresse meg a láblécet, és nézze meg a képünk nevét a vonalon - háttérben: URL (képek / header_bg.png) No-Repeat # 1d4c82; A "Style Table" előtti kód jobb mentése. Ha hibát engedélyez, akkor mindig visszatérhet az eredeti állapotba.

Emlékezzünk arra, hogy a fejléc a fejlécünk képének neve. Most a kód helyett a fejléc, lásd a láblécet (lásd: Képernyő),

a többi nem érinti. Frissítjük a fájlt, menjünk az oldalra, frissítjük és látjuk, hogy minden a helyén lett. Szerkesztett kalap a helyén, a lábuháznak van egy régi szerkesztője. Ez a munka befejezhető. Egyszerű weboldal sablon készen áll.

Csak abban az esetben, ha egy képet készítettem a láblécről a szerveren, talán a jövőben szerkesztem. Ehhez a sapkák sapkáit a változtatásokhoz vették, és átnevezték a teljes parancsnokot - a fejléc_bg.png helyett, írja a lábfejet. Nyomja meg a képet a képek mappájába, ahol a kalapunk képe található.

Természetesen az ilyen helyzet nem minden sablonon fordulhat elő, de a fejlécben és a lábánál egyszerűen kitöltött sablonok (mint én) hasonlósággal rendelkeznek, és ez a módszer alkalmazható. Ha tudod, a munka néhány perc múlva elvégezhető. Amint láthatja a webhely sablont, bár egyszerű, de meg kellett találnom, mielőtt megértené, hogyan kell megváltoztatni a webhely fejlécét.

Őszintén, Ivan Kunpan.

P.S. A blog helyes létrehozásához megfelelően előmozdult, mindent szigorú sorrendben kell tennie. Az ilyen szekvenciát az én hírszerzési kártyámban mutatjuk be, amelyet saját tapasztalattal fejlesztettem ki. . Hasznos lesz, és letöltheti az ingyenes könyvet is "Hogyan kell írni egy cikket a bloghoz".

Kapjon új blogcikkeket közvetlenül postai úton. Töltse ki az űrlapot, kattintson az "Feliratkozás" gombra

A Joomla 2.5 sablon szerkesztéséhez egy sorozatot indítunk. Ebben a leckében megnézzük

Szükség van azonnal azt mondani, hogy ez a különböző fejlesztők különböző sablonjainak folyamata saját módján zajlik. Ezért megpróbálom megmondani a heider pozíciójának helyét, a logó és a CSS szerkesztését. Mint mindig ajánlom az összes manipulációt a webhelyen dENWER helyi szerver Annak érdekében, hogy ne zavarja, vegyen be egy sablont ezen az oldalon.

Kezdetben meg kell határozni, hogy meghatározzuk, hogy a modul melyik helyzete a fejlécünk, és mi van a fejlécben vannak pozíciók. A modulok helyzetének meghatározásához a sablonban Joomla 2.5. A webhelyünk után toborozunk ? Tp \u003d 1. Ez így fog kinézni: http: // your_sight /? tp \u003d 1.

Frissítjük az oldalt (F5) és ... nem látok semmit. Zokogás a webhely adminisztratív része A helyszíni pozíciók letiltása. Menjünk az Admin oldalra, menjünk a beállításokhoz

és kapcsolja be a pozíciók megjelenítését az alábbi képen látható módon. Ne felejtsd el túlélni.

Újra frissítjük az oldalt. Minden. A modulok pozíciói megjelentek. Látjuk, hogy vannak több közülük: fejléc, logo, számláló, banner. Ugyanakkor látjuk, hogy a pozíciók feltételes méretei kiemelik (számláló, banner), de fejléc, logó.

Jelentősen megértjük, hogy a fejléc modul pozíciója felelős a webhely fejlécéért, valamint a logó logóhelyzetéért.

Személyes meggyőződésem, hogy mindig ellenőrizze a probléma megoldásának egyszerű módjait, és ha nem működött, akkor mélyen mászni. A legegyszerűbb dolog, hogy menjen a Joomla 2.5 sablon beállításaihoz, és megnézze, hogy mely beállítások vannak. Mindenesetre, mint amikor felszereltük egyszerűen sablon Joomla 2.5 vagy telepítése után a Joomla 2.5 sablont a QuickStart induláskor, az első dolog, amit meg kell, hogy menjen a sablon beállításait, és foglalkozik a beállítási lehetőségeket. Ugyanakkor még nincs szükség a Joomla 2.5-re, mivel maga a mintát nem fordítanak oroszul.

A beállítások sok sablonfejlesztője lehetővé teszi a szerkesztéshez hapes (fejléc), valamint a helyszín (lábléc) a helyszínen és sok más ruhában. Azonban a sablon számos beállítása között a fényút nem található.

És így, ismerjük a fejléc helyzetét, mivel a fejléc "bővítés - modulkezelő" és a "Pozícióválasztás" legördülő menüben keresünk egy fejléc pozíciót. Nem ott van, és ott van, mert maga a sablonban nincs sapka. Csak egy logó van. A legmegfelelőbb I. gyors út A fejléc kimenete a webhelyen a "Modul Manager" bilincs a "Create" gombra.

És a modul típusának kiválasztásában válassza a "HTML kód" lehetőséget. Ezzel nem csak részt vehetünk HTML kódDe küldjön egy képet a sapkáinkról.

Azonban, hogy a fejlécet a modul helyzetéhez adjuk, előkészíteni kell, és erre meg kell ismernünk a modul helyzetének szélességét és hosszát. Emlékezzen a hűvös pluginra Firefug a Firefox számára És kezdje el használni. Ezzel a bővítéssel tanulmányozzuk a fejléc helyzetét és látjuk

milyen pozícionálással válaszol a fájl elrendezésére.css, és magassága 110 képpont. By the way, megváltoztathatja a szélességet a szükséges méretben cSS fájl. Most meg kell határozni a kupak hosszát. A legtöbb sablonban a szélesség a beállítások tartalmazza. Megyünk a sablonunkba és a tinktúrába, látjuk, hogy a sablon hossza 1100 pixel. Most elkészíthetjük a fejlécünket a szükséges paraméterekkel a grafikus szerkesztési program segítségével (például. Adobe Photoshop.). Nem fogom megmondani, hogyan történik. Ez az egész webhelyek szenteltek.

Az elkészített fájl a sapkával közelebb van a webhely "Képek - történetek" mappájához, de nem sablonhoz. Most a "HTML kód" modul segítségével helyezzük el. Fejlécek elrejtve. A fejléc helyzetét választjuk és fennállunk.

Az úton, így meg tudod csinálni, amit különböző oldalak A webhely más fejlécet mutatott. Több kalapot készítünk, hordozzuk őket a fenti mappába, és keverjük össze több "HTML kód" modul használatával bizonyos menüelemek kimenetével.

Heider kitalálta. Most szerkesztjük a logót. A modul helyzetének ismerete, nevezetesen a logó ellenőrizze. Megyünk a "Bővítmények - Modul Manager" és a "Pozíciókezelő" legördülő menüben, ahol egy pozíció logót keresünk. Van egy ilyen út a képhez a NAME LOGO.PNG-vel. De letiltja azt, nem látunk változásokat a webhelyen. Tehát ez a kép csak akkor használható, ha a gördülés egyszerűen a már telepített Joomla 2.5 sablonja. De a Joomla 2.5 sablon telepítésekor gyors indítás "Quickstart" Hogyan használunk képet egy másik mappából. És természetesen a sablonból.

Ezért elkezdünk keresni egy másik utat. Ismét, a Firefox Firebug plug-in használatával vizsgáljuk a sablon logó és a látni,

milyen pozícionálás felelős az azonos elrendezésért.css fájlért, és látni, hogy hol van (a fájl elérési útja) Nyissa meg egy új fülön. Keresztül notepad ++ programok Nyissa meg és keres egy 259 stringet.

Itt kísérletezhetünk a logó szélességével, hosszával. Ne felejtse el menteni, és frissítse az oldal oldalát az eredmény megtekintéséhez. Egy másik hatalmas előnye a Notepad ++ van valami, amit bármikor visszatérhet a forrás szerinti állam a fájl, de csak akkor, ha nem zárt a noteszbe ++ ablakot. Visszatérve a kezdeti állapotba a "Mégse" gomb segítségével.

Nos, hogy megváltoztassuk a logó kialakítását, szükségünk lesz az Adobe Photoshopra és a program elemi ismeretére.

Szóval rád nézett hogyan lehet szerkeszteni (változtatni) fejlécet joomla sablon 2.5.

Sok szerencsét a te törekvéseidben.