Lecția 257 Cum de a decora un site cu ajutorul css pentru orice vacanță

Anul Nou vine, în curând totul se va întâmpla ... Deci, vom pregăti pentru sosirea de vacanță și decora elementele dvs. tematichnost blog.

Aceste aptitudini vor permite să dea un site personal pentru orice ocazie. În plus, propuse „decoratiunile“ nu va fi de vizitatori foarte enervant.

Vom decora fără utilizarea de plug-in-uri, și de a folosi un mic inserare de cod și stiluri de editare site-ul de fișiere (style.css, css.css sau alt nume).

Înainte de a efectua orice lucrare cu fișierul șablon de cod, face o copie de rezervă a fișierului editat. Pentru aceeași editare, se recomandă să utilizați un program gratuit Notepad ++.

1. Modificarea listei cu marcatori

În marea majoritate a blog-uri, cum ar fi lista cu marcatori are un pătrat în fața elementului de semn sau un cerc negru. Uită-te la site-ul dvs. și vedeți acest lucru.

Pe lista cu marcatori wpnew.ru este afișată după cum urmează:

Să înlocuiască simbolurile de date. În acest caz, puteți pune un clopot de Crăciun, un pom de Crăciun.

Deci S-au găsit într-un rând ar trebui să ne atribuim fișierului de stil lista de stil (în partea de jos fereastra din dreapta a Firebug scrie numărul liniei). Acum, înlocuiți-l cu opțiuni pentru a bloca:

Odată blocat, trebuie să setați calea imaginii noastre. Pentru a face acest lucru, în fișierul de stil pentru a adăuga un rând nou cu următorii parametri:

Este prezentat un șablon de wpnew.ru exemplu de aspect. Start ul .hentry-am luat conținut cu punctul anterior și a adăugat o li. ceea ce face clar browser-ul pe care doriți să apară sub imaginea pentru fiecare element din lista cu marcatori.

Parametrul fundal am arătat calea spre o imagine (în acest caz, este în șablon dosar imagini). Parametrii rămași copiați. Figura 7 prezintă o verticală imagini indentare. Numărul 0 - umplutură orizontală. Schimba-le până când găsiți valoarea dorită (Firebug pentru a ajuta)

Doar nu uitați de umplutură, ceea ce înseamnă că aici indentarea textului din imagine. Stocate ca adâncitură descris în pixeli:

Dacă numerele sunt identice, puteți scrie la Exemplul padding: 14px;.

2. Schimbarea stilului cursorului în mod aleatoriu

Acum, înlocuiți standard de „mana“ cursorul care apare atunci când treceți peste un link către orice altă imagine (pomul de Crăciun, bomboane, Moș Crăciun ...). vizitatorii site-ului se vor bucura de un lucru similar.

De asemenea, este necesar să se calculeze numele clasei pentru organism pentru a deveni, sau mai degrabă pentru link-urile. La wpnew.ru FireBug deschis, îl conduce pe orice link din articol si uita-te la clasa dreapta - aceasta va .hentry conținut o (clasa direct hentry conținut, litera a - link-uri de etichete, pentru care vom face).

Fișierul stil direct sub șirul de căutare este scris .hentry conținut a: hover. În acest caz, Hover înseamnă că următorii parametri vor lucra atunci când cursorul pe link. Aceasta este exact ceea ce cautam. Adăugați această linie să plutească la parametrii existenți:

3. Jos cu omul de mister

În continuare, aveți nevoie pentru a face o cutie mică de cod în fișierul functions.php, care pot fi găsite în lucrarea sa dosar site-ul șablon. Deschideți-l prin rabatarea până la capăt și înainte de închidere> simbolul se introduce următorul text:

postfață

Astăzi terminat. Încearcă-l, pur și simplu nu uitați să o copie de rezervă a fișierelor doar în cazul.

Cu stimă, Potr Aleksandrov

articole similare