Accentsconagua

Magento Theme Development Kategori Side, Del 2

Kode
Share

I forrige artikkel på kategorisider redigerte vi verktøylinjen, rutenett og listelayout. I denne andre artikkelen om å tilpasse kategorisiden, tilpasser vi sidefeltet og gjør noen CSS-korrigeringer.

Først av alt legger vi til noen komponenter i sidefeltet, slik at vi kan style dem. Her, for demonstrasjonsformål, vil vi bare legge til en eller to komponenter og endre dem. Det gir deg god forståelse for hvordan du også kan endre de andre sidebar komponentene. 

For nå vil vi bare legge til "sammenlign produkter" og et sidebar-banner til sidefeltet. Vi gjør det fra local.xml-koden. Hvis du husker fra de første artiklene i serien, kan du finne filen local.xml i layoutmappen til temafilen din.

Vi legger til en referanse til den venstre delen, og deretter legger du til en banner og sammenligner produktmodul i sidefeltet ved hjelp av koden nedenfor:

   images / banner-small-01.png Vår kundeservice er tilgjengelig 24/7. Ring oss på (555) 555-0123. kassa / cart

Bruk den bare som en referanse kode - du kan legge til flere moduler eller bannere ved hjelp av samme fremgangsmåte.

Hvis vi ser på vår HTML-design, vil vi legge merke til at alle komponentene er pent designet, spesielt overskriftsdelen, som har flere farger i den. 

Mens vår nåværende design er liten, kan vi endre design gjennom CSS, men vi må endre HTML for å legge til klasser for forskjellige farger i overskriften. 

For å modifisere HTML-en, gjør vi først mulighetstips og finner ut at filen som er ansvarlig for den, er \ template \ catalog / product / compare / sidebar.phtml.

Nå åpner vi denne sidebar.phtml-filen, og sammenligner den med HTML-koden.

Vår design HTML-kode for sidelinjen ser slik ut:

 
Produkter Tags
 
     
  • Lincoln oss
    •  
  • SDress for Girl
    •  
  • Hjørne
    •  
  • Vindu
    •  
  • PG
    •  
  • Oscar
    •  
  • Badrom
    •  
  • PSD
    •

Vi kan se at overskriften har h3 tag med en klasse av tittel, og den har sterk Ta tak i overskriften deler, som har en annen farge. 

For dette erstatter vi blokk-tittelen div med dette:

__ ('Sammenlign')?>__ ('Produkter')?> getItemCount ()> 0):?> __ ('(% d)', $ _helper-> getItemCount ())?>

Oppdater siden, og den skal se ganske nær vår HTML-design nå. Du kan legge til og utforme andre sidebar komponenter på en lignende måte.

Nå som vi er ferdige med å redigere phtml-filene, la oss begynne å fikse CSS-stilene.

Vi begynner å fikse stiler fra toppen. Den første komponenten som trenger vår oppmerksomhet, er siden overskriften. Som vi ser, er det ganske lite, og det er ikke nært våre HTML-krav.

Vi legger til disse linjene i vår nye CSS-fil for å stile overskriften.

.side-tittel h1 font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; flyte: venstre; stilling: relativ; bredde: 100%; margin-bunn: 15px; skriftstørrelse: 24px; farge: # 2f2f2f; font-weight: 300; polstring-bunn: 5px; tekst-align: center; bakgrunn: url (... /images/hadingBg.jpg) no-repeat center; linjehøyde: 3;  .col-md-9 .toolbar float: none; border: none; bakgrunnsfarge: gjennomsiktig; polstring-venstre: 0;

Her har vi nettopp gitt det en god tekstfont, linjehøyde, tekstjustering, bakgrunnsbilde etc. Vi har også gjort bakgrunnen gjennomsiktig uten grense. Det skulle se slik ut nå:

Deretter må vi endre verktøylinjen. For det vil vi legge til disse stilene i vår CSS-fil:

.verktøylinje .sorter> .view-modus float: left; .toolbar .sorter> .view-modus .grid bakgrunnsbilde: url (... /images/grid-icon.png); bredde: 25px; høyde: 25px; bakgrunnsposisjon: 0px 0px;  .toolbar .sorter> .view-modus .list bakgrunnsbilde: url (... /images/list-icon.png); bredde: 25px; høyde: 25px; bakgrunnsposisjon: 0px 0px;  .toolbar .sorter velg font-size: 12px;

Her har vi bare angitt noen bakgrunnsbilder, bredde, høyde, etc., og det vil ganske mye gjøre kunsten. Siden skal se slik ut:

La oss nå begynne å redigere produktseksjonen i rutenettvisning. Siden ser slik ut nå:

Vi må bare gjøre litt justering av bredde og svingestil. Også prisfarge trenger endring. Vi gjør alt dette ved å legge til disse CSS-linjene:

.kategori-produkter. produkt-grid - maks 4-kol> li bredde: 30%; .kategori-produkter. produkt-grid - maks 4-kol> li. : 170px; .item.price-box .price, .price color: black;

Nå skal rutenettet se slik ut:

I den siste delen må vi fikse produktseksjonen i listemodus. Det ser for øyeblikket ut, men ikke bekymre deg - noen få linjer med CSS vil sette alt riktig. 

For å få det til å se bra ut, bruker vi disse CSS-stilene:

.vare. produkt-liste-beskrivelse. prisboks. pris float: left; skriftstørrelse: 28px; farge: # b39a64; margin-høyre: 10px; .products-list .products.thumbnail border: medium none; flyte: venstre; margin: 0; polstring: 10px; stilling: relativ; bredde: 18%; høyde: auto; .products-list .products min-høyde: 100px; .products-list .products: hover background: #fff; border-farge: # b39a64; -webkit-boks-skygge: 0 0 5px 1px # d3d3d3; bokseskygge: 0 0 5px 1px # d3d3d3;  .products-list .products border: 1px solid # e1e1e1; stilling: relativ; overløp: skjult; bakgrunn: #fff; polstring: 15px; margin-topp: 15px; min høyde: 150px;  .products. button bakgrunn: # b39a64; farge: #fff; . knapp: svever, knapp: svever grense: 1px solid # b39a64;

Her har vi satt produktbildebredden, floated prisen til høyre, gitt hele delen en fin bakgrunns-, grense- og sveveeffekt, og endret knappen litt. Siden skal se slik ut:

Med alt dette gjort, bør katalogsiden din se bra ut og i nærheten av våre HTML-designkrav. Du må kanskje ha noen andre CSS finjustering, men annet enn det du er satt til.

I neste artikkel i denne serien begynner vi å redigere produktdetaljsiden. 

Vennligst legg igjen dine forslag og tilbakemeldinger i kommentarfeltet. Vi gleder oss til det.

Kode
×