Share
Je sais que les trois articles précédents peuvent sembler trop chargés en informations, et vous avez peut-être eu du mal à suivre certaines étapes. Mais la bonne nouvelle est que nous en avons terminé avec la partie difficile, et le reste de cette série de développement de thèmes paraîtra relativement facile par rapport aux articles précédents, car nous allons répéter les mêmes techniques encore et encore. ont appris dans ces articles.
Nous avons terminé la mise en page de la page d'accueil jusqu'à présent et, dans ce dernier article, nous résoudrons certains problèmes de style. Si vous avez suivi toutes les étapes des articles précédents, vous devriez avoir une page d'accueil ressemblant à ceci:
Bien que tous les composants nécessaires soient présents aux bons endroits, certains styles sont désactivés. Pour commencer à corriger ces styles, commençons par le haut de la page et corrigeons d'abord les styles d'en-tête. Si vous regardez attentivement l'en-tête actuel, vous trouverez quelques défauts.
Tout d’abord, les icônes situées dans le coin supérieur gauche présentent des problèmes de remplissage, le logo n’est pas aligné au centre comme dans le code HTML et la barre de menus nécessite un style supplémentaire. Une autre chose, qui n'est pas un problème de style mais qui est nécessaire, est le texte de bienvenue dans le coin supérieur gauche..
Comme la résolution du texte de bienvenue est la plus simple, nous allons d'abord traiter celui-ci. Pour résoudre ce problème, nous allons éditer le texte de bienvenue de Système> Configuration> Général> Conception> En-tête, et nous allons changer cela Appelez-nous maintenant texte comme indiqué dans notre code HTML.
Ensuite, nous allons examiner l'inspecteur de chrome pour vérifier le style des différents composants un par un et commencer à les éditer..
Commençons par éditer les icônes en haut à droite et en alignant le logo au centre. Pour cela, créez un nouveau fichier CSS, styles.css, reliez-le au fichier header.phtml et commencez à y ajouter les lignes de code suivantes:
/ ****************** Styles d'en-tête *********************** / ul li.dorpdown a img display: inline; padding-top: 3px; ul.usermenu li a img display: inline; padding-top: 3px; div.logo marge: 0; div.logoBox width: 100%; text-align: center; marge: 40px 0; div.logoBox .logo display: inline; float: none; div.logoBox .logo .large display: inline;
Cela corrigera le problème de remplissage des icônes et alignera le logo au centre. Ensuite, nous devons personnaliser le style de la barre de navigation et du champ de recherche. Comme vous pouvez le constater, voici à quoi devrait ressembler notre barre de recherche:
Mais actuellement cela ressemble à ceci:
Pour corriger le champ de recherche et la barre de navigation, nous allons ajouter ces lignes de style dans notre nouveau fichier CSS..
/ ****************** Styles de la barre de menus *********************** / div.search marge: 2px 0; div.search # header-search display: block; position: relative; en haut: 0; à droite: 0; largeur: auto; hauteur: auto; padding: 0; .search-button: before image-background: none! important; #search_mini_form .search-button background: url (… /images/searchButton.jpg) centre centre non répété! important;. nav-primary li.level0 ul border: 1px solid # b39a64! important; .nav-primary li.level1 un border-bottom: 1px solid # b39a64! important; couleur: # 333; poids de la police: 300; hauteur de ligne: 20px; taille de police: 13px; remplissage: 7px 12px; .nav-primaire li.level1 a: survol couleur: # b39a64; .nav-primaire li.level0> a taille de police: 15px; couleur: # 888; transformation-de-texte: majuscule; .nav-primaire li.level0> a: survol, .nav-primaire li.level0> a: focus text-decoration: none; couleur de fond: #eeeeee; / * police-weight: gras; * / color: # 333; .nav-primary li.active> a background: none; color: # 000; .nav-primary li: dernier-enfant> a border-bottom: aucun! important;
Espérons que lorsque vous ajouterez ces styles, votre zone de recherche et votre barre de navigation auront l’air parfait:
Bien que le curseur de la page d'accueil soit correct, si nous y regardons attentivement, il y a un petit défaut dans cette diapositive:
Le texte est trop loin vers la gauche sur notre page d'accueil; ça devrait ressembler à ça:
Pour placer le texte au bon endroit, nous allons ajouter ces lignes de code dans notre fichier CSS:
/ ****************** Styles de curseur ************************ / #sequence> .sequence -canvas li .secondSlideText left: 150px; #sequence> .sequence-canvas li .secondSlideImg float: right;
Vient ensuite notre dernier carrousel de produits. Tout a l'air bien ici, sauf la couleur du prix, qui devrait être noir.
Pour résoudre ce problème, nous allons ajouter cette ligne dans un fichier CSS..
/ ****************** Styles de curseur de produit *********************** / .item .products .price-box .price color: # 000;
Maintenant, le problème devrait être résolu et nous devrions avoir un superbe carrousel de nouveaux produits. Comme ça:
Le pied de page présente également quelques problèmes de style, en particulier la zone d’abonnement et la section des liens..
Nous allons utiliser ces styles pour corriger ces problèmes:
/ ****************** Styles de pied de page *********************** / .wrapper .footer bordure supérieure: aucune; padding-top: 0; .featured-products, .notre-marque padding-top: 0! important; .copyright-info .newsletter input [type = text] width: 322px! important; marge gauche: 23px; hauteur: 33px! important; taille de police: 12px; .footer .copyright-info .newsletter .button background-color: # b39a64; .footer .footer-info p img display: inline; .footer .footer-info .support li hauteur de ligne: 28px; taille de police: 12px;
Maintenant cela devrait ressembler à ceci:
Ce sont toutes les corrections de style dont nous avons besoin pour que notre page d’accueil soit aussi proche que possible des exigences de conception HTML. Si vous avez suivi toutes ces étapes, la page d'accueil devrait ressembler à ceci:
Si vous avez suivi avec succès toutes ces étapes et que votre page d'accueil ressemble à la capture d'écran ci-dessus, alors félicitations, vous avez fait un pas en avant important dans la personnalisation de votre premier thème Magento..
La personnalisation de la première page est la tâche la plus ardue lors de la création d'un nouveau thème, car sur le reste des pages, la plupart des composants tels que l'en-tête, le pied de page, la barre de menu, etc. seront utilisés et nous ne ferions que changer le style de la section content. . Il est donc beaucoup plus facile de changer d’autres pages une fois que vous avez terminé le style de la page d’accueil..
Lors de la création de la page d'accueil, nous avons utilisé presque toutes les techniques que nous allons utiliser pour personnaliser le reste du thème. Toutes ces techniques, telles que l'utilisation de Chrome Inspector, la détermination du fichier phtml responsable de la mise en page d'une partie particulière de la page, la modification des fichiers CSS, PHP, HTML et XML dans des fichiers pertinents, la création de nouvelles pages et de blocs statiques et l'enregistrement de ces blocs statiques via XML , devrait être des leçons précieuses pour vous.
Ensuite dans notre thème, nous commencerons à modifier la page de liste des catégories. Comme nous avons terminé les sections d’en-tête, de pied de page et de barre de navigation, nous devons simplement personnaliser la section de liste de produits et la section de barre latérale. Nous allons personnaliser les deux dans deux articles distincts.
Avant de modifier les pages de catégorie, je vous recommande vivement de vérifier le code de la page de catégorie de notre code HTML de conception et d'activer les astuces sur les modèles. Vérifiez quels fichiers sont responsables du rendu de la présentation de la page de catégorie dans Magento. . Essayez de modifier vous-même ces modèles de page de catégorie, en les faisant correspondre à la page HTML. N'oubliez pas de copier ces fichiers d'abord dans notre nouveau thème et effectuez des sauvegardes, car nous ne voulons pas gâcher les fichiers de thème du thème RWD..
Je vous laisse avec cette mission pour le moment. Une fois que vous êtes prêt, lancez la modification des pages de catégories en suivant le prochain tutoriel..
Accentsconagua