Share
I den föregående artikeln på kategori sidor redigerade vi verktygsfältet, rutnätet och listlayouten. I den här andra artikeln om anpassning av kategorisidan anpassar vi sidofältet och gör några CSS-korrigeringar.
Först och främst lägger vi till några komponenter i sidofältet så att vi kan stile dem. Här, för demonstrationens syfte, lägger vi bara till en eller två komponenter och ändrar dem. Det ger dig gott om förståelse för hur du också kan ändra de andra sidofältet.
För tillfället lägger vi bara till "jämför produkter" och en sidofältbanner till sidofältet. Det gör vi från local.xml-koden. Om du kommer ihåg från de första artiklarna i serien kan du hitta filen local.xml i layoutmappen i din temafil.
Vi lägger till en referens till den vänstra delen och lägger sedan till en banner och jämför produktmodul i sidofältet med koden nedan:
images / banner-small-01.png Vår kundservice är tillgänglig 24/7. Ring oss på (555) 555-0123. kassan / varukorg
Använd den som en referenskod-du kan lägga till fler moduler eller banderoller med samma procedur.
Om vi tittar på vår HTML-design kommer vi märka att alla komponenter är snyggt designade, särskilt rubrikdelen, som har flera färger i den.
Medan vår nuvarande design är liten, kan vi ändra designen genom CSS, men vi behöver ändra HTML för att lägga till klasser för olika färger i rubriken.
För att modifiera HTML-filen aktiverar vi först malltips och ser till att filen som är ansvarig för den är \ template \ catalog / product / compare / sidebar.phtml.
Nu öppnar vi denna sidebar.phtml-fil och jämför den med HTML-koden.
Vår design HTML-kod för sidofältet ser ut så här:
Produkter Tags
- Lincoln oss
- SDress för Girl
- Hörn
- Fönster
- PG
- Oscar
- Badrum
- PSD
Vi kan se att rubriken har h3 tagg med en klass av titel, och den har stark tagga runt rubrikdelarna, som har en annan färg.
För detta ersätter vi blockrubriken div med detta:
__ ('Jämför')?>__ ('Produkter')?> getItemCount ()> 0):?> __ ('(% d)', $ _helper-> getItemCount ())?>
Uppdatera sidan, och den ska se ganska nära vår HTML-design nu. Du kan lägga till och utforma andra sidobar komponenter på ett liknande sätt.
Nu när vi är redo att redigera phtml-filerna, låt oss börja fixa CSS-format.
Vi börjar med att fixa stilar från toppen. Den första komponenten som behöver vår uppmärksamhet är sidans rubrik. Som vi kan se är det ganska bra och ligger inte nära våra HTML-krav.
Vi lägger till dessa rader i vår nya CSS-fil för att ställa in rubriken.
.sidtitel h1 font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; flyta till vänster; position: relativ; bredd: 100%; marginal-botten: 15px; typsnittstorlek: 24px; färg: # 2f2f2f; typsnitt: 300; padding-bottom: 5px; text-align: center; bakgrund: url (... /images/hadingBg.jpg) no-repeat center; linjehöjd: 3; .col-md-9 .toolbar float: none; kant: none; bakgrundsfärg: transparent; padding-left: 0;
Här har vi bara gett den en bra textfont, linjehöjd, textjustering, bakgrundsbild etc. Vi har också gjort bakgrunden transparent utan gränser. Det borde se ut så här nu:
Nästa behöver vi ändra verktygsfältet. För det lägger vi till dessa stilar i vår CSS-fil:
.verktygsfält .sorter> .view-mode float: left; .toolbar .sorter> .view-mode .grid background-image: url (... /images/grid-icon.png); bredd: 25px; höjd: 25px; bakgrundsställning: 0px 0px; .toolbar .sorter> .view-mode .list background-image: url (... /images/list-icon.png); bredd: 25px; höjd: 25px; bakgrundsställning: 0px 0px; .toolbar .sorter välj font-size: 12px;
Här har vi precis angett några bakgrundsbilder, bredd, höjd mm, och det kommer ganska mycket att göra tricket. Sidan ska se så här ut:
Nu, låt oss börja redigera produkterna i gridvyn. Sidan ser ut så här nu:
Vi behöver bara göra några bredd- och svängstilstilningar. Även prisfärgen behöver ändras. Vi gör allt detta genom att lägga till dessa CSS-rader:
.kategori-produkter. produkt-nät - max-4-col> li width: 30%; .category-products. products-grid - max-4-col> li. : 170px; .item.price-box .price, .price color: black;
Nu ska gridavsnittet se ut så här:
I den sista delen måste vi fixa produkterna i listläget. Det ser för tillfället ganska roligt ut, men oroa dig inte - några rader av CSS kommer att ställa allt rätt.
För att det ska bli bra använder vi dessa CSS-stilar:
.item.product-list-description .price-box. price float: left; typsnittstorlek: 28px; färg: # b39a64; marginal-höger: 10px; .products-list .products.thumbnail border: medium none; flyta till vänster; marginal: 0; vaddering: 10px; position: relativ; bredd: 18%; höjd: auto; .products-list .products minhöjd: 100px; .products-list .products: hover background: #fff; kantfärg: # b39a64; -webkit-box-skugga: 0 0 5px 1px # d3d3d3; boxskugga: 0 0 5px 1px # d3d3d3; .products-list .products border: 1px solid # e1e1e1; position: relativ; överflöde: gömd; bakgrund: #fff; vaddering: 15px; marginal-topp: 15px; minhöjd: 150px; .products. button background: # b39a64; färg: #fff; . knapp: svävar, knapp: svävar gränsen: 1px solid # b39a64;
Här har vi satt produktbildens bredd, floated priset till höger, givet hela avsnittet en fin bakgrund, gräns och svängningseffekt och ändrat knappen något. Sidan ska se ut så här:
Med allt detta bör din katalogsida se bra och nära våra HTML-designkrav. Det kan hända att du behöver en annan CSS-finjustering, men annat än vad du är inställd på.
I nästa artikel i denna serie börjar vi redigera produktdetaljsidan.
Vänligen lämna dina förslag och feedback i kommentarfältet. Vi ser fram emot det.
Accentsconagua