Share
Jag vet att de föregående tre artiklarna kan tyckas laddas med för mycket information, och du kan ha haft svårt att följa några av stegen. Men den goda nyheten är att vi är färdiga med den svåra delen nu, och resten av temat utvecklingsserien ser ganska lätt ut jämfört med de tidigare artiklarna, för vi kommer oftast att upprepa samma tekniker om och om igen, vilket vi har lärt sig i dessa artiklar.
Vi har hittills gjort hemsida layout, och i den här senaste artikeln om hemsidan ska vi fixa några stylingproblem. Om du har följt alla steg i föregående artiklar, borde du ha en hemsida som ser något ut så här:
Även om det har alla nödvändiga komponenter på rätt ställen, är vissa stilar avstängda. För att börja korrigera dessa stilar börjar vi från början av sidan och fixar huvudformat först. Om du tittar noga på den aktuella rubriken hittar du ett antal brister.
Först och främst har ikonerna överst till vänster hörn några problem, logotypen är inte mittlinjeformat som i HTML och menylinjen behöver lite ytterligare styling. En annan sak, som inte är en stilfråga, men som behövs, är välkommen texten längst upp till vänster.
Att fastställa välkomsttexten är den enklaste, vi hanterar den här först. För att åtgärda detta redigerar vi välkomsttexten från System> Konfiguration> Allmänt> Design> Rubrik, och vi ändrar det Ring oss nu text som visas i vår HTML.
Nästa tittar vi på Chrome Inspector för att kontrollera styling av olika komponenter en efter en och börja redigera dem.
Vi börjar med att redigera ikonerna över höger och centrera inriktningen på logotypen. För det här, skapa en ny CSS-fil, styles.css, länka den från header.phtml-filen och börja lägga till dessa rader med kod 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 bredd: 100%; text-align: center; marginal: 40px 0; div.logoBox .logo display: inline; float: none; div.logoBox .logo .large display: inline;
Detta kommer att fixa ikonernas vadderingsproblem och centrera in logotypen. Nästa behöver vi anpassa stilen på navigeringsfältet och sökrutan. Som du kan se, så här ska vår sökfält se ut:
Men för närvarande ser det ut så här:
För att fixa sökrutan och navigeringsfältet lägger vi till dessa stiler i vår nyskapade CSS-fil.
/ ***************** Menystänger ************************ / div.search marginal: 2px 0; div.search # header-search display: block; position: relativ; topp: 0; höger: 0; bredd: auto; höjd: auto; padding: 0;. search-button: före background-image: none! viktigt; #search_mini_form .search-button bakgrund: url (... /images/searchButton.jpg) center center no-repeat! viktigt;. nav-primära li.level0 ul border: 1px solid # b39a64! viktigt; .nav-primär li.level1 a gräns-botten: 1px solid # b39a64! viktigt; färg: # 333; typsnitt: 300; linjehöjd: 20px; font-size: 13px; padding: 7px 12px; .nav-primär li.level1 a: svävar färg: # b39a64; .nav-primär li.level0> en font-size: 15px; färg: # 888; text-transform: storlek; .nav-primär li.level0> a: sväva, .nav-primär li.level0> a: fokus text-decoration: none; bakgrundsfärg: #eeeeee; / * font-weight: bold; * / färg: # 333; .nav-primär li.active> a bakgrund: ingen; färg: # 000; .nav-primär li: sista barnet> en gränsbotten: ingen! viktig;
Förhoppningsvis, när du lägger till dessa stilar kommer din sökruta och navigeringsfält att se bra ut nu:
Även om startsidan är bra, om vi tittar noga, finns det en liten fel i den här bilden:
Texten är för långt till vänster på vår hemsida; det ska se ut så här:
För att placera texten på rätt ställe lägger vi till dessa rader av kod i vår CSS-fil:
/ ***************** Slider Styles ************************ / #sequence> .sequence -canvas li. secondSlideText left: 150px; #sequence> .sequence-canvas li. secondSlideImg float: right;
Nästa kommer vår senaste produktkarusell. Allt ser bra ut här, förutom priset på priset, vilket borde vara svart.
För att fixa det lägger vi till den här raden i CSS-filen.
/ ***************** Produktslidare Styles ************************ / .item .products .price-box. price color: # 000;
Nu bör problemet lösas och vi ska ha en snygg ny karrusell. Så här:
Footer har också några stylingproblem, speciellt prenumerationsrutan och länkavsnittet.
Vi använder dessa stilar för att korrigera dessa problem:
/ ***************** Footer Styles ************************ / .wrapper .footer border-top: none; padding-top: 0; .featured-products, .our-brand padding-top: 0! important; .copyright-info. nyhetsbrev inmatning [typ = text] width: 322px! important; marginal-vänster: 23px; höjd: 33px! viktigt; font-size: 12px; .footer .copyright-info .newsletter .button bakgrundsfärg: # b39a64; .fotograf .footer-info p img display: inline; .footer .footer-info .support li linjehöjd: 28px; typsnittstorlek: 12px;
Nu ska det se ut så här:
Det här är alla stylingfixar som vi behöver för att göra vår hemsida så nära HTML-designkraven som möjligt. Om du har följt alla dessa steg ska hemsidan se så här ut:
Om du har lyckats följa alla dessa steg och få din hemsida att se ut som ovanstående skärmdump, så grattis, har du gjort ett viktigt steg i att anpassa ditt första Magento-tema.
Anpassa första sidan är den mest skrämmande uppgiften när det gäller att skapa något nytt tema, som på alla övriga sidor kommer de flesta av komponenterna som header, sidfot, menyraden etc. att användas, och vi skulle bara ändra innehållsnitts styling . Det är därför mycket lättare att byta ut andra sidor när du har slutfört stilen på hemsidan.
Medan vi utformar hemsidan har vi använt nästan alla tekniker som vi ska använda för att anpassa resten av temat. Alla dessa tekniker som att använda Chrome Inspector, bestämmer den phtml-fil som är ansvarig för layouten för en viss del av sidan, ändrar CSS, PHP, HTML och XML i relevanta filer, skapar nya sidor och statiska block och registrerar de statiska blocken genom XML , borde vara ganska värdefulla lektioner för dig.
Nästa i vårt tema börjar vi ändra kategorinsultatsidan. När vi har avslutat rubrikerna rubrik, sidfot och navbarhet behöver vi bara anpassa produktlistan och sidovägg. Vi anpassar båda i två separata artiklar.
Innan du börjar göra ändringar på kategoridissorna rekommenderar jag starkt att du kolla koden på kategorinsidan i vår design HTML, och även genom att möjliggöra malltips, kolla vilka filer som är ansvariga för layoutavdelningen av kategorisidan i Magento . Försök att modifiera dessa kategorisidmallar på egen hand, genom att matcha dem med HTML-sidan. Glöm inte att kopiera dessa filer först i vårt nya tema och ta backup, eftersom vi inte vill röra med temafilerna i själva RWD-temat.
Jag lämnar dig med den här uppgiften för nu. När du är redo, starta den faktiska redigeringen av kategoridokument genom att följa nästa handledning.
Accentsconagua