Lecke 257 Hogyan díszíteni a weboldal segítségével css minden ünnep

Új év jön, hamarosan minden fog történni ... Így fogunk készíteni az érkezését az ünnep, és díszítse a blog tematichnost elemekkel.

Ezek a képességek lehetővé teszik, hogy egy személyes honlap bármilyen alkalomra. Ezen túlmenően, a javasolt „dekoráció” nem lesz nagyon bosszantó a látogatók.

Mi fogja díszíteni használata nélkül plug-inek, és használja egy kis kód beillesztését és szerkesztését stílusok fájl helyben (style.css, css.css vagy más néven).

Mielőtt bármilyen munkát végezne a kóddal sablon fájlt, készítsen egy biztonsági másolatot a fájl szerkesztését. Ugyanebből szerkesztő használata ajánlott egy ingyenes program Notepad ++.

1. Változtassa meg a felsorolás

A túlnyomó többsége blogok, mint a felsorolás egy tér előtt a jel elemet, vagy egy fekete kör. Nézd meg a helyszínen, és látni ezt.

A wpnew.ru felsorolás a következőképpen jelenik meg:

Nézzük cserélni a Data szimbólumok. Ebben az esetben, ha nem tud egy karácsonyi harang, karácsonyfa.

Szóval Talált egy sorban meg kell tulajdonítani a stílus fájl list-style (a jobb alsó sarokban a Firebug írja a sorszám). Most cserélje ki a lehetőségek blokk:

A lezárás után be kell állítani az utat a képet. Ehhez a stílus fájlt hozzá egy új sort az alábbi paraméterekkel:

Ábrán egy példa elrendezés wpnew.ru sablont. Kezdés .hentry-tartalom ul vettünk az előző bekezdés és hozzá egy li. amely világossá teszi a böngésző, hogy szeretné alatt jelennek meg a kép minden elem a felsorolás.

A paraméter háttérrel mutatták az utat a képet (ebben az esetben ez a kép mappát sablon). A többi paraméter másolni. A 7. ábra egy függőleges bemélyedés kép. Száma: 0 - vízszintes padding. Megváltoztatni őket, amíg meg nem találja a kívánt értéket (Firebug segítségével)

Csak ne felejtsd el a zsákot, ami azt jelenti, itt a behúzás a szöveg a kép. Tárolt leírtak behúzás pixelben:

Ha a számok azonosak, akkor írj példa padding: 14px;.

2. Változás kurzor stílus véletlenszerűen

Most cserélje ki a szokásos „kéz” kurzor jelenik meg, amikor az egérrel egy linket bármilyen más képet (a karácsonyfa, édességet, Mikulás ...). A látogatók élvezhetik egy hasonló dolog.

Azt is ki kell számítani az osztály nevét, hogy a test válik, vagy inkább a linkeket. A wpnew.ru nyitott FireBug vezet vele minden kapcsolatot a cikket, és nézz jobbra osztály - akkor .hentry-tartalom a (közvetlenül hentry-tartalom osztály, a levél egy - tag linkeket, amelyekre fogunk csinálni).

A stílus fájl közvetlenül a keresett szöveget írt .hentry-tartalom a: hover. Ebben az esetben azt jelenti, hogy lebeg a következő paraméterekkel fog működni, ha a kurzor a link. Ez pontosan az, amit keresünk. Add hozzá ezt a sort, hogy lebeg a meglévő paraméterek:

3. Le az ember rejtély

Ezután meg kell, hogy egy kis doboz kódot a functions.php fájlt, ami megtalálható a honlapon sablon mappában. Nyisd ki a essek a végére, és a zárás előtt> szimbólum helyezze a következő:

utószó

Ma befejeződött. Próbáld ki, csak ne felejtsd el, hogy biztonsági másolatot készíteni a fájlokat, csak abban az esetben.

Üdvözlettel Potr Alekszandrov

Kapcsolódó cikkek