Share
Jeg vet at de tre foregående artiklene kan være lastet med for mye informasjon, og du har kanskje hatt det vanskelig å følge noen av trinnene. Men den gode nyheten er at vi er ferdige med den vanskelige delen nå, og resten av denne temautviklingsserien vil se relativt enkelt ut i forhold til de tidligere artiklene, fordi vi for det meste vil gjenta de samme teknikkene igjen og igjen, som vi har lært i disse artiklene.
Vi har fullført hjemmesiden layout så langt, og i denne siste artikkelen om hjemmesiden vil vi fikse noen styling problemer. Hvis du har fulgt alle trinnene i de forrige artiklene, bør du ha en hjemmeside som ser noe slik ut:
Selv om det har alle nødvendige komponenter på de riktige stedene, er noen stiler av. For å begynne å korrigere disse stilene begynner vi fra toppen av siden og fikser først topptekstene. Hvis du ser nøye på gjeldende overskrift, finner du et par feil.
Først av alt, ikonene øverst til venstre har noen problemer med polstring, logoen er ikke midtjustert som den er i HTML, og menylinjen trenger litt videre styling. En annen ting, som ikke er et stilproblem, men som er nødvendig, er velkommen teksten øverst til venstre.
Ettersom velg tekst er det enkleste, vi håndterer dette først. For å fikse dette, redigerer vi velkomstteksten fra System> Konfigurasjon> Generelt> Design> Overskrift, og vi vil endre det Ring oss nå tekst som vist i vår HTML.
Deretter ser vi på Chrome Inspector for å sjekke stilingen av forskjellige komponenter en etter en, og begynner å redigere dem.
Vi starter med å redigere ikonene øverst til høyre og sentrere justeringen av logoen. For det, opprett en ny CSS-fil, styles.css, lenke den fra header.phtml-filen, og begynn å legge til disse kodelinjene i den:
/ ***************** Header Styles ************************ / ul li.dorpdown a img display: inline; padding-top: 3px; ul.usermenu li a img display: inline; padding-top: 3px; div.logo margin: 0; div.logoBox bredde: 100%; tekst-align: center; margin: 40px 0; div.logoBox .logo display: inline; float: none; div.logoBox .logo .large display: inline;
Dette vil fikse ikonens utfyllingsproblemer og sentrere logoen. Deretter må vi tilpasse stilen på navigasjonslinjen og søkefeltet. Som du kan se, så ser vår søylinje ut:
Men for øyeblikket ser det slik ut:
For å fikse søkefeltet og navigasjonslinjen, legger vi til disse linjene i vår nyopprettede CSS-fil.
/ ***************** Meny Bar Styles ************************ / div.search margin: 2px 0; div.search # header-search display: block; stilling: relativ; topp: 0; høyre: 0; bredde: auto; høyde: auto; padding: 0;. search-button: før bakgrunnsbilde: ingen! viktig; #search_mini_form .search-button bakgrunn: url (... /images/searchButton.jpg) sentrumsenteret ikke gjenta! viktig;. nav-primær li.level0 ul grense: 1px solid # b39a64! viktig; .nav-primær li.level1 en grense-bunn: 1px solid # b39a64! viktig; farge: # 333; font-weight: 300; linjehøyde: 20px; font-size: 13px; padding: 7px 12px; .nav-primær li.level1 a: hover color: # b39a64; .nav-primær li.level0> en font-size: 15px; farge: # 888; tekst-transform: stor bokstav; .nav-primær li.level0> a: svever, .nav-primær li.level0> a: fokus text-decoration: none; bakgrunnsfarge: #eeeeee; / * font-weight: bold; * / farge: # 333; .nav-primær li.active> a bakgrunn: ingen; farge: # 000; .nav-primær li: siste barn> en grense bunn: ingen! viktig;
Forhåpentligvis, når du legger til disse stilene, vil søkefeltet og navigasjonsfeltet se bra ut nå:
Selv om glidebryteren på hjemmesiden ser bra ut, hvis vi ser nøye ut, er det en liten feil i dette lysbildet:
Teksten er for langt til venstre på vår hjemmeside; det skal se slik ut:
For å plassere teksten på riktig sted, legger vi til disse kodelinjene i vår CSS-fil:
/ ***************** Slider Styles ************************ / #sequence> .sequence -canvas li. secondSlideText left: 150px; #sequence> .sequence-canvas li. secondSlideImg float: right;
Neste kommer vår siste produktkarusell. Alt ser bra ut her, unntatt fargen på prisen, som skal være svart.
For å fikse det, legger vi denne linjen til CSS-filen.
/ ***************** Produkt Slider Styles ************************ / .item .products .prisboks. pris farge: # 000;
Nå bør problemet løses, og vi bør ha en flott ny karrusell. Som dette:
Foten har noen styling problemer, spesielt abonnement boksen og koblingen delen.
Vi bruker disse stilene for å rette disse problemene:
/ ***************** Footer Styles ************************ / .wrapper .footer border-top: none; padding-top: 0; .featured-products, .our-merke padding-top: 0! important; .copyright-info. nyhetsbrevinngang [type = tekst] bredde: 322px! viktig; margin-venstre: 23px; høyde: 33px! viktig; font-size: 12px; .footer .copyright-info .Newsletter.button bakgrunnsfarge: # b39a64; .footer .footer-info p img display: inline; .footer .footer-info .support li linjehøyde: 28px; skriftstørrelse: 12px;
Nå skal det se slik ut:
Dette er alle stilingsrettingene vi trenger for å gjøre hjemmesiden vår så nær HTML-designkravene som mulig. Hvis du har fulgt alle disse trinnene, bør hjemmesiden se slik ut:
Hvis du har fulgt alle disse trinnene, og har hjemmesiden din så som skjermbildet ovenfor, så gratulerer, har du gjort et betydelig skritt i å tilpasse ditt første Magento-tema.
Tilpassing av den første siden er den mest skremmende oppgaven med å skape et nytt tema, som på resten av sidene vil de fleste av komponentene som topptekst, bunntekst, menylinje osv. Bli brukt, og vi ville bare endre innholdsdelings styling . Det er derfor mye lettere å endre andre sider når du har fullført hjemmesiden styling.
Mens styling på hjemmesiden har vi brukt nesten alle teknikkene vi skal bruke for å tilpasse resten av temaet. Alle disse teknikkene som å bruke Chrome Inspector, bestemmer phtml-filen som er ansvarlig for utformingen av en bestemt del av siden, endrer CSS, PHP, HTML og XML i relevante filer, lager nye sider og statiske blokker, og registrerer de statiske blokkene gjennom XML , bør være ganske verdifulle leksjoner for deg.
Neste i vårt tema begynner vi å endre kategoriseringssiden. Etter hvert som vi har fullført topptekst-, bunntekst- og navbar-seksjonene, trenger vi bare å tilpasse produktoppføringsdelen og sidefeltet. Vi tilpasser oss i to separate artikler.
Før du begynner å gjøre endringer i kategorisidene, anbefaler jeg deg sterkt å sjekke koden på kategorisiden av vårt design HTML, og ved å aktivere malttips, se hvilke filer som er ansvarlige for layoutgjennomføringen av kategorisiden i Magento . Prøv å endre disse kategorisiden maler på egen hånd, ved å samsvare dem med HTML-siden. Ikke glem å kopiere disse filene først i vårt nye tema, og ta sikkerhetskopier, da vi ikke vil rote med temafilene til selve RWD-temaet.
Jeg gir deg dette oppdraget for nå. Når du er klar, start den faktiske redigering av kategorisider ved å følge neste opplæring.
Accentsconagua