Modul de editare a șablonului 2

În prima parte, ne-am ocupat de fișierele de bază ale șablonului, am discutat problemele legate de schimbarea "capului", mărimea textului. fonturi și linkuri.

În a doua parte vom aborda același model ca în primul. Puteți descărca aici.







Modul de editare a șablonului 2

Schimbați lățimea șablonului.

Deoarece modelul nostru este îngust, să încercăm să-l extindem puțin, cu 200 de pixeli.
Deschideți pagina principală, faceți clic dreapta pe ecran și examinați codul sursă (HTML). Avem nevoie de codul de sus a paginii, adică de blocul , așa că căutăm această etichetă.

Iată codul de care avem nevoie:

Modul de editare a șablonului 2

În cod, vedem mai multe blocuri cu clase (containere ). Aceste blocuri afișează conținutul șablonului. Sarcina noastră este să aflăm în ce blocuri este specificată lățimea șablonului, pot exista mai multe. Să începem în ordine. În figură am subliniat clasele roșii de blocuri, așa că îi vom căuta.
Deschideți fișierul template.css al șablonului nostru, de preferință WordPad. Și cu ajutorul Edit - Găsiți aceste clase.

• Clasa (mai precis ID) "page_bg"

Modul de editare a șablonului 2

După cum puteți vedea că nu există o lățime în ea, ne uităm la clasa următoare.

Indică faptul că textul ar trebui să fie centrat, fundalul este imaginea meniului.jpg, iar lățimea blocului este de 718 de pixeli, ceea ce căutam. Adică, lățimea șablonului este de 718 pixeli. Dar asta nu e tot, trebuie să te uiți la următoarele blocuri.






Deoarece am vrut să extindem șablonul cu 200 de pixeli, schimbăm lățimea la 918px, salvăm fișierul.

• Clasa "pillmenu"
Nu există nici o lățime în ea.

Clasa "clr" nu avem nevoie. De obicei, aceasta împarte pur și simplu blocurile (anulează fluxul în jurul blocurilor). Prin urmare, este subliniat în verde.

specifică de asemenea o lățime de 718 de pixeli, se modifică la 918. Apoi.

• Id "logo" în ea lățimea de 700 de pixeli este specificat, în care logo-ul este afișat. De asemenea, adăugați +200 pixeli.

• Id "content_top" fundalul este imaginea content_top.jpg, lățimea blocului 718, cu îndrăzneală corectă pentru 918.

• Clasa "centru" specifică și o lățime de 718 pixeli, de asemenea corectă pentru 918. A se vedea câte blocuri au dimensiuni de 718. Nu uitați să salvați modificările.

• Id "wrapper" fundal - imagine content.jpg, lățime 718 pixeli.

• Id-ul "conținut", așa cum indică numele, afișează conținutul. Lățimea sa este de 702, se modifică la 902 de pixeli.

Mai jos este un bloc cu id = "leftcolumn". este evident că el este responsabil pentru coloana din stânga, așa că nu îl vom atinge încă.

Da, în majoritatea șabloanelor există o clasă precum coloana principală. el este responsabil pentru coloana principală în care articolele sunt afișate. Să-l găsim.
Da, deci lățimea sa este de 510 pixeli, o schimbăm la 710 și o salvăm.

Din acest moment începe producția materialului. Am schimbat toate blocurile principale. Fiecare pompier va face altceva.
În fișierul template.css, modificăm toate valorile de la 718 la 918.
Pentru aceasta, faceți clic pe Editați - Înlocuire.

Modul de editare a șablonului 2

Salvăm și privim.

Și am obținut acest lucru:

Modul de editare a șablonului 2

Sloppy.
Acest lucru se datorează faptului că imaginile reprezintă fundalul blocurilor. Și nu le-am schimbat.

Din această situație există mai multe rezultate:

1. Adaptați imaginile cu PhotoShop
2. Desenați imaginile după cum doriți.
3. Utilizați în locul imaginilor color, de exemplu # 096626. Fiecare bloc poate seta propria culoare de fundal.
Rețineți că blocul este plasat într-un bloc, cum ar fi o păpușă.

Am schimbat fundalul blocurilor de la imagini la culori, asta am primit:

Modul de editare a șablonului 2

Deja mai bine. În plus, am setat culoarea în coloana din stânga și am întins capacul în Photoshop, lăsând înălțimea originală.

Acest lucru schimbă șabloanele pentru Joomla. Desigur, nu toate, ci cele mai multe. Cel mai important lucru este să înțelegem principiul și să cunoaștem picăturile de CSS.

Pe aceasta voi termina a doua parte și voi pregăti a treia.







Articole similare

Trimiteți-le prietenilor: