Share
Știu că cele trei articole anterioare pot părea că sunt încărcate cu prea multe informații și că ați avut dificultăți în urma unor pași. Dar vestea bună este că am terminat acum cu partea dificilă, iar restul acestei serii de dezvoltare a temelor vor arăta relativ ușor în comparație cu acele articole anterioare, pentru că vom repeta în mare parte aceleași tehnici de peste și peste din nou, pe care noi au învățat în aceste articole.
Am finalizat aspectul paginii de pornire până în prezent și în ultimul articol despre pagina de pornire vom rezolva câteva probleme legate de stil. Dacă ați urmat toți pașii din articolele anterioare, ar trebui să aveți o pagină de pornire care să arate astfel:
Deși are toate componentele necesare în locurile potrivite, unele stiluri sunt oprite. Pentru a începe corectarea acestor stiluri, vom începe din partea de sus a paginii și vom repara mai întâi stilurile antetului. Dacă vă uitați atent la antetul curent, veți găsi câteva defecte.
În primul rând, pictogramele din colțul din stânga sus au câteva probleme de umplere, logo-ul nu este aliniat în centru, așa cum este în HTML, iar bara de meniu necesită un stil suplimentar. Un alt lucru, care nu este o problemă de stil, dar este necesar, este textul binevenit în colțul din stânga sus.
Deoarece fixarea textului de întâmpinare este cea mai ușoară, o vom ocupa mai întâi de aceasta. Pentru a rezolva acest lucru, vom edita textul de întâmpinare de la Sistem> Configurare> General> Design> Antet, și vom schimba asta Sună-ne acum text, după cum se arată în codul nostru HTML.
Apoi vom examina Inspectorul Chrome pentru a verifica stilul diferitelor componente unul câte unul și începeți să le editați.
Vom începe prin editarea icoanelor de sus-dreapta și alinierea centralizată a siglei. Pentru aceasta, creați un nou fișier CSS, styles.css, îl conectați din fișierul header.phtml și începeți să adăugați aceste linii de cod în el:
/ ***************** Stiluri de antet ************************ / ul li.dorpdown a img display: inline; padding-top: 3px; ul.usermenu li a img afișare: inline; padding-top: 3px; div.logo margine: 0; div.logoBox lățime: 100%; text-align: centru; margine: 40px 0; div.logoBox .logo display: inline; float: nici unul; div.logoBox .logo .large display: inline;
Acest lucru va rezolva problema de umplere a icoanelor și va alinia centrul logo-ului. Apoi trebuie să personalizăm stilul bara de navigare și caseta de căutare. După cum vedeți, ar trebui să arate modul nostru de căutare:
Dar, în prezent, arată astfel:
Pentru a repara caseta de căutare și bara de navigare, vom adăuga aceste linii de stil în noul nostru fișier CSS.
/ ***************** Stiluri de bare de meniu ************************ / div.search margine: 2px 0; div.search # header-search afișare: bloc; poziție: relativă; top: 0; dreapta: 0; lățime: auto; înălțime: auto; padding: 0;. butonul de căutare: înainte de background-image: none! important; #search_mini_form .button de căutare background: url (... /images/searchButton.jpg) center no-repeat important; nav-prim li.level0 ul frontieră: 1px solid # b39a64! important;. prim -final li.level1 a border-bottom: 1px solid # b39a64! important; culoare: # 333; font-weight: 300; linia-înălțime: 20px; font-size: 13px; padding: 7px 12px;. prim-li.level1 a: hover culoare: # b39a64;. prim-li.level0> a font-size: 15px; culoare: # 888; text-transform: majuscule;. prim-li.level0> a: hover, .nav-prim li.level0> a: focalizare text-decoration: none; fundal-culoare: #eeeeee; / * font-weight: bold; * / culoare: # 333;. prim-activă li.active> a background: none; culoare: # 000; .nav-prim li: ultimul copil> a margin-bottom: none! important;
Sperăm că, atunci când adăugați aceste stiluri, caseta dvs. de căutare și bara de navigare vor arăta bine acum:
Deși glisorul de pe pagina de pornire arată bine, dacă privim îndeaproape, există un mic defect în acest diapozitiv:
Textul este prea departe spre stânga pe pagina noastră de pornire; ar trebui să arate astfel:
Pentru a plasa textul în locul potrivit, vom adăuga aceste linii de cod în fișierul nostru CSS:
/ ***************** Stiluri de slider ************************ / #sequence> .sequence -canvas li .secondSlideTxt left: 150px; #sequence> .secțiune-canvas li .secondSlideImg float: right;
Urmează cel mai recent carusel de produse. Totul arată bine aici, cu excepția culorii prețului, care ar trebui să fie neagră.
Pentru a rezolva asta, vom adăuga această linie în fișierul CSS.
/ ***************** Stiluri de produse de produs ************************ / produse .item .price-box .price culoare: # 000;
Acum, problema ar trebui să fie stabilită și ar trebui să avem un carusel de produse noi. Asa:
Subsolul conține și câteva probleme de stil, în special caseta de abonament și secțiunea legăturilor.
Vom folosi aceste stiluri pentru a corecta aceste probleme:
/ ***************** Stiluri de subsol ************************ / .wrapper .footer border-top: nici unul; padding-top: 0; .featured-products, .our-brand padding-top: 0! important; .copyright-info.newsletter intrare [type = text] width: 322px! margin-stânga: 23px; înălțime: 33px! important; font-size: 12px; .footer .copyright-info.newsletter.button background-color: # b39a64; .footer .footer-info p img afișare: inline; .footer .footer-info .support li linie-înălțime: 28px; font-size: 12px;
Acum ar trebui să arate astfel:
Acestea sunt toate corecțiile de stil necesare pentru ca pagina noastră de pornire să fie cât se poate de apropiată de cerințele de design HTML. Dacă ați urmat toți acești pași, pagina de start ar trebui să arate astfel:
Dacă ați urmat cu succes toți acești pași și dacă aveți pagina dvs. de pornire asemănătoare capturii de ecran de mai sus, atunci felicitări, ați realizat un progres semnificativ în personalizarea primei teme Magento.
Personalizarea primei pagini este cea mai dificilă sarcină în crearea unei teme noi, deoarece pe toate celelalte pagini majoritatea componentelor, cum ar fi antet, subsol, menubar etc., vor fi utilizate și vom schimba stilul secțiunii de conținut numai . Prin urmare, este mult mai ușor să modificați alte pagini după ce ați finalizat styling-ul de pagină de pornire.
În timp ce am stilizat pagina de pornire, am folosit aproape toate tehnicile pe care le vom folosi pentru a personaliza restul temei. Toate aceste tehnici, cum ar fi utilizarea Inspectorului Chrome, determinarea fișierului phtml responsabil pentru structura unei anumite părți a paginii, modificarea CSS, PHP, HTML și XML în fișierele relevante, crearea de noi pagini și blocuri statice și înregistrarea acestor blocuri statice prin XML , ar trebui să fie lecții destul de valoroase pentru dvs..
În continuare, în tema noastră, vom începe să modificăm pagina de înregistrare a categoriilor. Pe măsură ce am finalizat secțiunile antet, subsol și navbar, trebuie doar să personalizăm secțiunea listei de produse și secțiunea bara laterală. Vom personaliza ambele articole în două articole separate.
Înainte de a începe să faceți modificări în paginile de categorii, vă sfătuiesc cu fermitate să verificați codul paginii de categorii a HTML-ului nostru de proiectare și, de asemenea, să activați sugestiile șablonului, să verificați ce fișiere sunt responsabile pentru redarea aspectului categoriei în Magento . Încercați să modificați propriile șabloane de pagini de categorii pe cont propriu, potrivind-le cu pagina HTML. Nu uitați să copiați aceste fișiere mai întâi în noua noastră temă și să faceți copii de siguranță, deoarece nu vrem să ne amestecăm cu fișiere tematice ale temei reale RWD.
Te las acum cu această misiune. Odată ce sunteți gata, începeți editarea efectivă a paginilor de categorii urmând tutorialul următor.
Accentsconagua