Share
În articolul precedent pe paginile categoriei, am editat bara de instrumente, grilă și aspectul listei. În acest al doilea articol despre personalizarea paginii categoriei, vom personaliza bara laterală și vom face unele remedii CSS.
Mai întâi, vom adăuga câteva componente în bara laterală, astfel încât să le putem modela. Aici, în scopul demonstrației, vom adăuga una sau două componente și le vom modifica. Acest lucru vă va oferi o înțelegere amplă despre modul în care puteți modifica și celelalte componente ale barei laterale.
Pentru moment, vom adăuga "compara produse" și un banner lateral în bara laterală. O vom face din codul local.xml. Dacă vă amintiți din primele articole ale seriei, puteți găsi fișierul local.xml în dosarul de aspect al fișierului dvs. temă.
Vom adăuga o referință la secțiunea din stânga și apoi vom adăuga un banner și vom compara modulul de produs în bara laterală, folosind codul de mai jos:
images / banner-mici-01.png Serviciul nostru pentru clienți este disponibil 24/7. Sunați-ne la (555) 555-0123. checkout / cos
Utilizați-l ca un cod de referință - puteți adăuga mai multe module sau bannere utilizând aceeași procedură.
Dacă ne uităm la designul nostru HTML, vom observa că toate componentele sunt bine concepute, în special partea de titlu, care are mai multe culori în ea.
În timp ce designul nostru actual este puțin, deși putem modifica designul prin CSS, dar trebuie să modificăm codul HTML pentru a adăuga clase pentru culori diferite în titlu.
Pentru a modifica codul HTML, vom activa mai întâi sugestiile șablonului și vom afla că fișierul responsabil pentru acesta este \ template \ catalog / product / compare / sidebar.phtml.
Acum vom deschide acest fișier sidebar.phtml și îl vom compara cu codul HTML.
Codul nostru HTML de design pentru bara laterală arată astfel:
Produse Etichete
- Lincoln
- Scuze pentru fata
- Colţ
- Fereastră
- PG
- Oscar
- Baie
- PSD
Putem vedea că titlul are h3 eticheta cu o clasă de titlu, și are puternic etichetați în jurul părților din titlu, care au o culoare diferită.
Pentru aceasta, vom înlocui titlul blocului div cu asta:
__ ("Comparați")?>__ ("Produse")?> getItemCount ()> 0):?> __ ('(% d)', $ _helper-> getItemCount ())?>
Actualizați pagina și ar trebui să pară destul de aproape de designul nostru HTML acum. Puteți adăuga și puteți modela alte componente ale barei laterale într-un mod similar.
Acum că am terminat de editat fișierele phtml, să începem să reparăm stilurile CSS.
Vom începe fixarea stilurilor din partea de sus. Prima componentă care are nevoie de atenția noastră este titlul paginii. După cum vedem, este destul de oprit și nu este aproape de cerințele noastre HTML.
Vom adăuga aceste linii în noul nostru fișier CSS pentru a modela titlul.
.pagina-titlu h1 font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; plutește la stânga; poziție: relativă; lățime: 100%; margin-bottom: 15px; font-size: 24px; culoare: # 2f2f2f; font-weight: 300; padding-bottom: 5px; text-align: centru; background: url (... /images/hadingBg.jpg) centru de repetare; linia-înălțime: 3; .col-md-9. instrument de bord float: none; frontieră: nici una; fundal-culoare: transparent; padding-left: 0;
Aici i-am oferit un font de text bun, înălțimea liniei, alinierea textului, imaginea de fundal etc. De asemenea, am făcut fundalul transparent fără frontiere. Ar trebui să arate așa:
Apoi trebuie să modificăm secțiunea barei de instrumente. Pentru aceasta, vom adăuga aceste stiluri în fișierul nostru CSS:
.bara de instrumente .sorter> modul de vizualizare float: left; .barbar .sorter> .view-mode .grid background-image: url (... /images/grid-icon.png); lățime: 25px; înălțime: 25px; pozitie fundal: 0px 0px; .barul de instrumente .sorter> .view-mode .list background-image: url (... /images/list-icon.png); lățime: 25px; înălțime: 25px; pozitie fundal: 0px 0px; . bara de instrumente. selectați font-size: 12px;
Aici tocmai am specificat câteva imagini de fundal, lățime, înălțime etc., și va face destul de mult truc. Pagina ar trebui să arate astfel:
Acum, să începem editarea secțiunii produse în vizualizarea rețelei. Pagina arată astfel:
Va trebui doar să facem unele ajustări de lățime și hover. De asemenea, culoarea prețului trebuie schimbată. Vom face toate acestea adăugând aceste linii CSS:
.categoria-produse .products-grid - max-4-col> li width: 30%; .category-products. : 170px; .item .price-cutie .price, .price culoare: negru;
Acum, secțiunea de rețea ar trebui să arate astfel:
În ultima parte trebuie să remediem secțiunea de produse în modul listă. În prezent, arată destul de confuz, dar nu vă faceți griji - câteva linii de CSS vor pune totul în ordine.
Pentru a face să arate bine, vom folosi aceste stiluri CSS:
.element .product-list-description .price-box .price float: left; font-size: 28px; culoare: # b39a64; margin-right: 10px; .products-list .products .thumbnail frontieră: mediu none; plutește la stânga; marja: 0; padding: 10px; poziție: relativă; lățime: 18%; înălțime: auto; .products-list .products min-height: 100px; .products-list .products: hover fundal: #fff; culoare frontală: # b39a64; -webkit-box-shadow: 0 0 5px 1px # d3d3d3; box-shadow: 0 0 5px 1px # d3d3d3; .products -products border: 1px solid # e1e1e1; poziție: relativă; overflow: ascuns; fundal: #fff; padding: 15px; margin-top: 15px; min-înălțime: 150px; .produse .button background: # b39a64; culoare: #fff; .button: hover, buton: hover border: 1px solid # b39a64;
Aici am setat lățimea imaginii produsului, am răsfoit prețul la dreapta, având în vedere întreaga secțiune un fundal frumos, efect de frontieră și de hover, și a modificat ușor butonul. Pagina ar trebui să arate astfel:
Cu toate acestea, pagina dvs. de catalog ar trebui să arate bine și aproape de cerințele noastre de design HTML. S-ar putea să aveți nevoie de alte programe de reglare fină a CSS, dar în afară de asta sunteți toți pregătiți.
În următorul articol din această serie, vom începe editarea paginii detaliate a produsului.
Vă rugăm să lăsați sugestiile și comentariile dvs. în secțiunea comentarii. Așteptăm cu nerăbdare acest lucru.
Accentsconagua