Share
So che i precedenti tre articoli potrebbero sembrare carichi di troppe informazioni e potresti aver avuto difficoltà a seguire alcuni passaggi. Ma la buona notizia è che ora abbiamo finito con la parte difficile, e il resto di questa serie di sviluppo del tema apparirà relativamente facile rispetto a quegli articoli precedenti, perché ripeteremo per lo più le stesse tecniche più e più volte, che ho imparato in quegli articoli.
Abbiamo completato il layout della home page fino ad ora, e in questo ultimo articolo sulla home page correggeremo alcuni problemi di stile. Se hai seguito tutti i passaggi degli articoli precedenti, dovresti avere una pagina iniziale simile a questa:
Sebbene abbia tutti i componenti necessari nei posti giusti, alcuni stili sono disattivati. Per iniziare a correggere questi stili, inizieremo dalla parte superiore della pagina e risolviamo prima gli stili di intestazione. Se guardi da vicino l'intestazione corrente, troverai un paio di difetti.
Prima di tutto, le icone in alto a sinistra hanno alcuni problemi di riempimento, il logo non è allineato al centro come in HTML, e la barra dei menu ha bisogno di un ulteriore stile. Un'altra cosa, che non è un problema di stile ma è necessaria, è il testo di benvenuto nell'angolo in alto a sinistra.
Siccome fissare il testo di benvenuto è il più semplice, gestiremo prima questo. Per risolvere questo problema, modificheremo il testo di benvenuto da Sistema> Configurazione> Generale> Design> Intestazione, e lo cambieremo Chiamaci ora testo come mostrato nel nostro HTML.
Ora esamineremo Chrome Inspector per verificare uno stile di diversi componenti uno per uno e iniziare a modificarli.
Inizieremo modificando le icone in alto a destra e allineando il logo al centro. Per questo, crea un nuovo file CSS, styles.css, collegalo dal file header.phtml e inizia ad aggiungere queste righe di codice al suo interno:
/ ***************** Stili di intestazione ************************ / 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%; allineamento del testo: centro; margin: 40px 0; div.logoBox .logo display: inline; float: none; div.logoBox .logo .large display: inline;
Ciò risolverà il problema di riempimento delle icone e centrerà il logo. Successivamente dobbiamo personalizzare lo stile della barra di navigazione e della casella di ricerca. Come puoi vedere, ecco come dovrebbe apparire la nostra barra di ricerca:
Ma al momento sembra così:
Per correggere la casella di ricerca e la barra di navigazione, aggiungeremo queste linee di stile nel nostro file CSS appena creato.
/ ***************** Stili barra dei menu ************************ / div.search margine: 2px 0; div.search # header-search display: block; posizione: relativa; inizio: 0; a destra: 0; larghezza: auto; altezza: auto; padding: 0; .search-button: before background-image: none! important; #search_mini_form .search-button background: url (... /images/searchButton.jpg) centro centro nessuna ripetizione! importante;. nav-primary li.level0 ul border: 1px solid # b39a64! important; .nav-primary li.level1 a border-bottom: 1px solid # b39a64! important; colore: # 333; font-weight: 300; altezza della linea: 20px; font-size: 13px; padding: 7px 12px; .nav-primary li.level1 a: hover color: # b39a64; .nav-primary li.level0> a font-size: 15px; colore: # 888; text-transform: maiuscolo; .nav-primary li.level0> a: hover, .nav-primary li.level0> a: focus text-decoration: none; background-color: #eeeeee; / * font-weight: bold; * / color: # 333; .nav-primary li.active> a background: none; color: # 000; .nav-primary li: last-child> a border-bottom: none! important;
Si spera che, quando aggiungerai questi stili, la tua casella di ricerca e la barra di navigazione sembreranno a posto ora:
Anche se il dispositivo di scorrimento della home page funziona bene, se guardiamo da vicino, c'è una piccola falla in questa diapositiva:
Il testo è troppo lontano verso sinistra sulla nostra home page; Dovrebbe sembrare come questo:
Per posizionare il testo nel posto giusto, aggiungeremo queste righe di codice nel nostro file CSS:
/ ***************** Stili di scorrimento ************************ / #sequence> .sequence -canvas li .secondSlideText left: 150px; #sequence> .sequence-canvas li .secondSlideImg float: right;
Poi arriva il nostro ultimo carosello di prodotti. Qui tutto sembra a posto, tranne il colore del prezzo, che dovrebbe essere nero.
Per risolvere il problema, aggiungeremo questa riga nel file CSS.
/ ***************** Stili del dispositivo di scorrimento del prodotto ************************ / .item .products .price-box .price color: # 000;
Ora il problema dovrebbe essere risolto e dovremmo avere un fantastico carosello di nuovi prodotti. Come questo:
Anche il piè di pagina presenta alcuni problemi di stile, in particolare la casella di iscrizione e la sezione dei collegamenti.
Useremo questi stili per correggere questi problemi:
/ ***************** Stili piè di pagina ************************ / .wrapper .footer border-top: none; padding-top: 0; .prodotti migliorati, .our-brand padding-top: 0! important; .copyright-info .newsletter input [type = text] width: 322px! important; margin-left: 23px; altezza: 33px! importante; font-size: 12px; .footer .copyright-info .newsletter .button background-color: # b39a64; .footer .footer-info p img display: inline; .footer .footer-info .support li altezza della linea: 28px; font-size: 12px;
Ora dovrebbe assomigliare a questo:
Queste sono tutte le correzioni per lo stile di cui abbiamo bisogno per rendere la nostra home page il più vicino possibile ai requisiti di progettazione HTML. Se hai seguito tutti questi passaggi, la home page dovrebbe apparire così:
Se hai seguito correttamente tutti questi passaggi e hai la tua pagina iniziale simile allo screenshot precedente, congratulazioni, hai compiuto notevoli progressi nella personalizzazione del tuo primo tema Magento.
Personalizzare la prima pagina è il compito più arduo nella creazione di qualsiasi nuovo tema, come su tutte le altre pagine della maggior parte dei componenti come intestazione, piè di pagina, barra dei menu, ecc., E cambieremo solo lo stile della sezione del contenuto . È quindi molto più semplice cambiare le altre pagine una volta completato lo stile della pagina iniziale.
Durante lo styling della home page abbiamo utilizzato quasi tutte le tecniche che useremo per personalizzare il resto del tema. Tutte queste tecniche come l'utilizzo di Chrome Inspector, che determina il file phtml responsabile del layout di una particolare parte della pagina, che modifica CSS, PHP, HTML e XML in file pertinenti, crea nuove pagine e blocchi statici e registra questi blocchi statici tramite XML , dovrebbero essere lezioni di valore per te.
Successivamente nel nostro tema, inizieremo a modificare la pagina di elenco delle categorie. Come abbiamo completato le sezioni di intestazione, piè di pagina e barra di navigazione, abbiamo solo bisogno di personalizzare la sezione di elenco dei prodotti e la sezione della barra laterale. Personalizzeremo entrambi in due articoli separati.
Prima di intraprendere le modifiche alle pagine delle categorie, ti consiglio vivamente di controllare il codice della pagina di categoria del nostro HTML di progettazione e anche abilitando i suggerimenti del modello, controlla quali file sono responsabili per il rendering del layout della pagina di categoria in Magento . Prova a modificare i modelli di pagina di categoria da soli, confrontandoli con la pagina HTML. Non dimenticare di copiare questi file prima nel nostro nuovo tema e di fare i backup, dato che non vogliamo fare confusione con i file del tema del tema RWD attuale.
Ti lascio con questo compito per ora. Una volta che sei pronto, inizia la modifica effettiva delle pagine delle categorie seguendo il prossimo tutorial.
Accentsconagua