Share
Ik weet dat de vorige drie artikelen mogelijk vol zitten met te veel informatie en dat je het misschien moeilijk hebt gevonden om een aantal stappen te volgen. Maar het goede nieuws is dat we nu klaar zijn met het moeilijke deel, en dat de rest van deze thema-ontwikkelingsserie er betrekkelijk gemakkelijk zal uitzien vergeleken met die vorige artikelen, omdat we dezelfde technieken steeds opnieuw zullen herhalen, wat we hebben geleerd in die artikelen.
We hebben de startpaginalay-out tot nu toe voltooid en in dit laatste artikel over de startpagina zullen we enkele stijlproblemen oplossen. Als u alle stappen van de vorige artikelen hebt gevolgd, moet u een startpagina hebben die er ongeveer zo uitziet:
Hoewel het alle vereiste componenten op de juiste plaatsen heeft, zijn sommige stijlen uitgeschakeld. Om te beginnen met het corrigeren van deze stijlen, beginnen we bovenaan de pagina en corrigeren we eerst de kopstijlen. Als je de huidige kop van dichtbij bekijkt, zul je een aantal tekortkomingen tegenkomen.
Allereerst hebben de pictogrammen in de linkerbovenhoek enkele problemen met de opvulling, het logo is niet in het midden uitgelijnd zoals in HTML en de menubalk moet nog verder worden gestileerd. Een ander ding, dat geen stijlkwestie is maar nodig is, is de welkomsttekst in de linkerbovenhoek.
Omdat het bevestigen van de welkomsttekst de gemakkelijkste is, zullen we deze als eerste behandelen. Om dit op te lossen, zullen we de welkomsttekst bewerken van Systeem> Configuratie> Algemeen> Ontwerp> Koptekst, en we zullen dat veranderen Bel ons nu tekst zoals getoond in onze HTML.
Vervolgens bekijken we de Chrome Inspector om de vormgeving van verschillende componenten één voor één te controleren en te beginnen met bewerken.
We beginnen met het bewerken van de pictogrammen in de rechterbovenhoek en het middelpunt uitlijnen van het logo. Maak daarvoor een nieuw CSS-bestand, styles.css, koppel het vanuit het bestand header.phtml en begin met het toevoegen van deze regels code:
/ ***************** 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 width: 100%; text-align: center; margin: 40px 0; div.logoBox .logo display: inline; float: none; div.logoBox .logo .large display: inline;
Hiermee wordt het probleem met de opvulling van de pictogrammen opgelost en wordt het logo in het midden uitgelijnd. Vervolgens moeten we de stijl van de navigatiebalk en het zoekvak aanpassen. Zoals u kunt zien, moet onze zoekbalk er zo uit zien:
Maar momenteel ziet het er als volgt uit:
Om het zoekvak en de navigatiebalk te corrigeren, voegen we deze stijllijnen toe aan ons nieuw gemaakte CSS-bestand.
/ ***************** Menubalkstijlen ******************** / div.search marge: 2px 0; div.search # header-search display: block; positie: relatief; boven: 0; rechts: 0; breedte: auto; hoogte: auto; opvulling: 0; .zoekknop: vóór achtergrond-afbeelding: geen! belangrijk; #search_mini_form. search-button background: url (... /images/searchButton.jpg) center center no-repeat! important;. nav-primary li.level0 ul border: 1px solid # b39a64! important; .nav-primary li.level1 a border-bottom: 1px solid # b39a64! important; kleur: # 333; font-gewicht: 300; regelhoogte: 20px; font-size: 13px; padding: 7px 12px; .nav-primary li.level1 a: hover color: # b39a64; .nav-primary li.level0> a font-size: 15px; kleur: # 888; text-transform: hoofdletter; .nav-primary li.level0> a: hover, .nav-primary li.level0> a: focus text-decoration: none; achtergrondkleur: #eeeeee; / * lettertype-gewicht: vet; * / color: # 333; .nav-primary li.active> a background: none; kleur: # 000; .nav-primary li: last-child> a border-bottom: none! important;
Hopelijk, wanneer je deze stijlen toevoegt, zien je zoekvak en navigatiebalk er nu goed uit:
Hoewel de schuifknop op de startpagina er goed uitziet, is er een kleine fout in deze dia als we goed kijken:
De tekst is te ver naar links op onze startpagina; het zou er zo uit moeten zien:
Om de tekst op de juiste plaats te plaatsen, voegen we deze regels code toe aan ons CSS-bestand:
/ ***************** Schuifstijlen ************************ / #sequence> .sequence -canvas li.secondSlideText left: 150px; #sequence> .sequence-canvas li .secondSlideImg float: right;
Vervolgens komt onze nieuwste productcarrousel. Alles ziet er goed uit, behalve de kleur van de prijs, die zwart moet zijn.
Om dit op te lossen, voegen we deze regel toe aan het CSS-bestand.
/ ***************** Productschuifstijlen ************************ / .item .products .price-box .price color: # 000;
Nu zou het probleem opgelost moeten zijn en we zouden een geweldig uitziende nieuwe producten carrousel moeten hebben. Zoals dit:
De voettekst heeft ook enkele stijlproblemen, met name de abonnementsbox en de koppelingen.
We gebruiken deze stijlen om deze problemen te verhelpen:
/ ***************** Voettekststijlen ************************ / .wrapper .footer border-top: none; padding-top: 0; .featured-products, .our-brand padding-top: 0! important; .copyright-info .nieuwsletterinvoer [type = tekst] width: 322px! important; marge links: 23 px; hoogte: 33 px! belangrijk; font-size: 12px; .footer .copyright-info .newsletter. button background-color: # b39a64; .footer .footer-info p img display: inline; .footer .footer-info .support li regelhoogte: 28 px; lettertypegrootte: 12px;
Nu zou het er zo uit moeten zien:
Dit zijn alle fixes voor styling die we nodig hebben om onze startpagina zo dicht mogelijk bij de HTML-ontwerpvereisten te laten lijken. Als u al deze stappen hebt gevolgd, ziet de startpagina er als volgt uit:
Als je al deze stappen met succes hebt gevolgd en je startpagina eruit ziet als de bovenstaande schermafbeelding, dan gefeliciteerd, heb je een aanzienlijke vooruitgang geboekt bij het aanpassen van je eerste Magento-thema.
Het aanpassen van de eerste pagina is de meest ontmoedigende taak bij het maken van een nieuw thema, omdat op de rest van de pagina's de meeste componenten zoals koptekst, voettekst, menubalk, etc. worden gebruikt en we alleen de inhoudssectie zouden veranderen . Het is daarom veel gemakkelijker om andere pagina's te wijzigen nadat u de startpagina-opmaak hebt voltooid.
Bij het stylen van de startpagina hebben we bijna alle technieken gebruikt die we zullen gebruiken om de rest van het thema aan te passen. Al deze technieken gebruiken Chrome Inspector, bepalen het phtml-bestand dat verantwoordelijk is voor de lay-out van een bepaald deel van de pagina, wijzigen CSS, PHP, HTML en XML in relevante bestanden, maken nieuwe pagina's en statische blokken en registreren die statische blokken via XML , zouden voor jou heel waardevolle lessen moeten zijn.
Volgende in ons thema, we zullen beginnen met het aanpassen van de categorie lijstpagina. Nu we de secties header, footer en navbar hebben voltooid, hoeven we alleen de sectie met de productvermeldingen en de zijbalksectie aan te passen. We passen beide aan in twee afzonderlijke artikelen.
Voordat u begint met het aanbrengen van wijzigingen in de categoriepagina's, raad ik u aan de code van de categoriepagina van onze ontwerp-HTML te controleren en ook door sjabloontoetsen in te schakelen, controleer welke bestanden verantwoordelijk zijn voor de lay-outweergave van de categoriepagina in Magento. . Probeer die categorieënpagina-sjablonen zelf aan te passen door ze te matchen met de HTML-pagina. Vergeet niet om die bestanden eerst in ons nieuwe thema te kopiëren en maak back-ups, want we willen niet knoeien met de themabestanden van het echte RWD-thema.
Ik zal je voorlopig verlaten met deze opdracht. Zodra u klaar bent, begint u met het bewerken van categoriepagina's door de volgende zelfstudie te volgen.
Accentsconagua