Share
Ich weiß, dass die vorherigen drei Artikel mit zu vielen Informationen beladen zu sein scheinen, und dass Sie einige Schritte möglicherweise schwer gehabt haben. Aber die gute Nachricht ist, dass wir mit dem schwierigen Teil jetzt fertig sind und der Rest dieser Themenserien-Serie im Vergleich zu den vorherigen Artikeln relativ einfach aussehen wird, da wir meistens dieselben Techniken immer und immer wieder wiederholen werden habe in diesen Artikeln gelernt.
Das Layout der Homepage wurde bisher fertiggestellt. In diesem letzten Artikel zur Homepage werden einige Styling-Probleme behoben. Wenn Sie alle Schritte der vorherigen Artikel befolgt haben, sollten Sie eine Startseite haben, die ungefähr so aussieht:
Obwohl sich alle erforderlichen Komponenten an den richtigen Stellen befinden, sind einige Stile deaktiviert. Um mit der Korrektur dieser Stile zu beginnen, beginnen wir am oberen Rand der Seite und korrigieren zuerst die Kopfstile. Wenn Sie sich den aktuellen Header genau ansehen, werden Sie einige Fehler finden.
Zuallererst haben die Symbole in der oberen linken Ecke einige Probleme mit dem Auffüllen, das Logo ist nicht wie in HTML in der Mitte ausgerichtet und die Menüleiste muss noch weiter gestaltet werden. Eine andere Sache, die kein Stilproblem ist, aber benötigt wird, ist der Begrüßungstext in der oberen linken Ecke.
Da es am einfachsten ist, den Begrüßungstext zu korrigieren, behandeln wir diesen zuerst. Um dies zu beheben, bearbeiten wir den Begrüßungstext von System> Konfiguration> Allgemein> Design> Kopfzeile, und wir werden das ändern Ruf uns jetzt an Text wie in unserem HTML gezeigt.
Als Nächstes betrachten wir den Chrome-Inspector, um die Gestaltung der einzelnen Komponenten nacheinander zu prüfen und mit der Bearbeitung zu beginnen.
Wir beginnen mit dem Bearbeiten der Symbole oben rechts und dem Zentrieren des Logos. Erstellen Sie dazu eine neue CSS-Datei, styles.css, verknüpfen Sie sie mit der Datei header.phtml und fügen Sie die folgenden Codezeilen hinzu:
/ ***************** Kopfzeilenstile ************************* / 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 ausrichten: Mitte; margin: 40px 0; div.logoBox .logo display: inline; float: none; div.logoBox .logo .large display: inline;
Dies behebt das Auffüllproblem der Symbole und zentriert das Logo. Als Nächstes müssen wir den Stil der Navigationsleiste und des Suchfelds anpassen. Wie Sie sehen können, sollte unsere Suchleiste so aussehen:
Momentan sieht es jedoch so aus:
Um das Suchfeld und die Navigationsleiste zu korrigieren, fügen wir diese Stillinie in unsere neu erstellte CSS-Datei ein.
/ ***************** Menüleisten-Styles ************************* / div.search Marge: 2px 0; div.search # header-search display: block; Position: relativ; oben: 0; rechts: 0; Breite: Auto; Höhe: Auto; padding: 0; .search-button: vor background-image: none! important; #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; Farbe: # 333; Schriftgewicht: 300; Zeilenhöhe: 20px; Schriftgröße: 13px; Abstand: 7px12px; .nav-primary li.level1 a: hover color: # b39a64; .nav-primary li.level0> a font-size: 15px; Farbe: # 888; text-transform: Großbuchstaben; .nav-primary li.level0> a: hover, .nav-primary li.level0> a: focus text-decoration: none; Hintergrundfarbe: #eeeeee; /* Schriftdicke: fett; * / color: # 333; .nav-primary li.active> a background: none; Farbe: # 000; .nav-primary li: letztes Kind> a Rand unten: keine! wichtig;
Wenn Sie diese Stile hinzufügen, werden Ihr Suchfeld und die Navigationsleiste hoffentlich jetzt gut aussehen:
Obwohl der Schieberegler für die Startseite gut aussieht, liegt ein kleiner Fehler in dieser Folie, wenn wir genau hinschauen:
Der Text ist auf unserer Homepage zu weit nach links; es sollte so aussehen:
Um den Text an der richtigen Stelle zu platzieren, fügen wir folgende Codezeilen in unsere CSS-Datei ein:
/ ***************** Slider Styles ************************* / Sequence> .sequence -canvas li .secondSlideText left: 150px; #sequence> .sequence-canvas li .secondSlideImg float: right;
Als nächstes kommt unser neuestes Produktkarussell. Hier sieht alles gut aus, außer der Farbe des Preises, die schwarz sein sollte.
Um dies zu beheben, fügen wir diese Zeile in die CSS-Datei ein.
/ ******************************************************************************* .price-box .price color: # 000;
Jetzt sollte das Problem behoben sein und wir sollten ein großartig aussehendes neues Produktkarussell haben. So was:
Die Fußzeile enthält auch einige Designprobleme, insbesondere die Abonnementbox und der Linkbereich.
Wir werden diese Stile verwenden, um diese Probleme zu beheben:
/ ***************** Fußzeilenstile ************************* / .wrapper .footer Rand oben: keine; padding-top: 0; .featured-products, .our-brand padding-top: 0! important; .copyright-info .newsletter input [type = text] width: 322px! important; Rand links: 23px; Höhe: 33px! wichtig; Schriftgröße: 12px; .footer .copyright-info .newsletter .button background-color: # b39a64; .footer .footer-info p img display: inline; .footer -fusser.support li Zeilenhöhe: 28px; Schriftgröße: 12px;
Nun sollte es so aussehen:
Dies sind alle Styling-Fixes, die erforderlich sind, damit unsere Homepage den HTML-Designanforderungen so nah wie möglich kommt. Wenn Sie alle diese Schritte ausgeführt haben, sollte die Homepage folgendermaßen aussehen:
Wenn Sie alle diese Schritte erfolgreich durchlaufen haben und Ihre Startseite wie im obigen Screenshot aussieht, haben Sie einen großen Fortschritt gemacht, wenn Sie Ihr erstes Magento-Design anpassen.
Das Anpassen der ersten Seite ist die schwierigste Aufgabe bei der Erstellung eines neuen Themas, da auf allen anderen Seiten die meisten Komponenten wie Kopfzeile, Fußzeile, Menüleiste usw. verwendet werden, und wir würden nur die Gestaltung des Inhaltsabschnitts ändern . Es ist daher viel einfacher, andere Seiten zu ändern, wenn Sie die Gestaltung der Homepage abgeschlossen haben.
Beim Gestalten der Homepage haben wir fast alle Techniken verwendet, um den Rest des Designs anzupassen. Alle diese Techniken umfassen die Verwendung von Chrome Inspector, das Ermitteln der für das Layout eines bestimmten Teils der Seite zuständigen Phtml-Datei, das Ändern von CSS, PHP, HTML und XML in relevanten Dateien, das Erstellen neuer Seiten und statischer Blöcke sowie das Registrieren dieser statischen Blöcke über XML sollten für Sie sehr wertvolle Lektionen sein.
In unserem Thema beginnen wir mit dem Modifizieren der Kategorieauflistungsseite. Da wir die Abschnitte Header, Footer und Navbar abgeschlossen haben, müssen wir lediglich den Abschnitt mit den Produktlisten und den Seitenleisten anpassen. Wir werden beide in zwei separaten Artikeln anpassen.
Bevor Sie Änderungen an den Kategorieseiten vornehmen, empfiehlt es sich dringend, den Code der Kategorieseite unseres Design-HTML-Codes zu überprüfen. Außerdem können Sie durch Aktivieren von Vorlagenhinweisen prüfen, welche Dateien für das Layout-Rendering der Kategorieseite in Magento verantwortlich sind . Versuchen Sie, diese Kategorieseitenvorlagen selbst zu ändern, indem Sie sie mit der HTML-Seite abgleichen. Vergessen Sie nicht, diese Dateien zuerst in unser neues Design zu kopieren, und nehmen Sie Sicherungskopien mit, da wir uns nicht mit den Designdateien des eigentlichen RWD-Designs beschäftigen möchten.
Ich lasse Sie jetzt mit dieser Aufgabe. Sobald Sie fertig sind, beginnen Sie mit der eigentlichen Bearbeitung der Kategorieseiten, indem Sie das nächste Lernprogramm befolgen.
Accentsconagua