Avec PAS Script vous avez la possibilité de modifier votre logo depuis l'administration du site. Si vous souhaitez pousser un peu plus loin et suivant vos besoin. Nous allons vous expliquer comme intégrer un logo plus gros et adapter de ce faite l'entête de votre site internet.
Tout d'abord avant de commencer munisser vous d'un logiciel de retouche photo, vous pouvez très bien utiliser Paint.net qui est un bon compromis gratuit pour cela. Pour avoir le logo le plus professionel et le plus propre possible de vous invite à faire une image de votre logo au format .PNG avec un contour transparent.
Intégration d'un logo plus grand
Nous allons prendre comme exemple ce logo qui est largement plus grand que ce qui est précauniser dans le script pour pouvoir l'intégrer au site :
L'image présenter ici, sa taille est de 300 x 300 pixel, pour connaitre la taille de votre logo je vous invite à utiliser votre explorateur de fichier sous Windows, clic droit Propriété
Ensuite une fenetre s'ouvrira, aller sur l'onglet Details vous trouverez alors la taille réel de l'image, noter cela quelque part.
Rendez vous ensuite dans votre administration puis ajouter l'image de votre logo, dans Design & Apparence puis Paramètre du Template
Ouvrez ensuite votre navigateur et visiter votre site internet. Faite un clic droit sur le logo de votre site et selectionner Inspecter dans cette exemple nous utilisons Firefox mais cela fonctionne de la même manière sous Chrome.
Cela va ouvrir l'inspecteur depuis votre navigateur, vous tomberez en principe sur la ligne de l'image et nous retrouverons une div avec la class logo. Nous trouverons sur la droite les règles CSS de cette partie, nous allons jouer avec :
Ce qui est important ici est la taille de l'image qui est défini par la règle CSS (width et height) à savoir (largeur et hauteur), vous pouvez changer directement ces valeur en cliquant dessus pour voir ce que cela donnerait :
Comme on peux le voir sa dépasser la taille de l'entête et fixer à une certaine grandeur donc cela risque de ne pas faire très beau. Pour ce faire nous allons remonter un peu et choisir le header et lui donner aussi 300 pixel en hauteur enfin un peu plus car il y a une marge en haut, donc 317 pixels.
Maintenant pour ces modifications soit définitive, il faudra vous rendre dans votre administration dans Design & Apparence puis Edition du Template, selectionner le fichier main.css ou se trouve toute les règles CSS. Avec votre clavier faite CTRL + F ce qui ouvrira un champs de recherche et chercher le .logo qui est la classe qui gèrer le logo en CSS. N'hésitez pas à utiliser les flèches pour changer si vous ne tomber pas sur la règles immédiatement, une fois sur la bonne règle modifier par la taille de votre image soit 300 et 300 comme ici :
Deuxieme modification à apporter nous allons chercher le terme header dans la barre de recherche faite CTRL + F et taper header dans la barre de recherche utiliser les fleches si vous ne tomber pas sur le terme immédiatement. Une fois trouverez modifier par 317 comme nous l'avons vu plus haut, 300 pixel casse le menu vu la marge du haut
Une fois cela fait terminer en cliquant sur l'icone de petite disquette qui vous permettra de sauvegarder vos modification et consulter de nouveau votre site internet :
Je vous invite tout de même à prendre et faire un logo par trop grand pour éviter une disproportions trop importante sur l'entête du site ce qui risque de ne pas être très jolie à la fin. Pour finir vous pouvez faire bouger également le menu utilisateur car vu que le logo est de 300 pixel sur l'exemple cela permettra d'uniformiser.
Pour ce faire chercher le terme .user dans le fichier main.css et dans la règle padding-top, modifier par 141px, bien entendu il faudra adapter en fonction de la taille de votre logo si vous voulez déplacer ce menu. Une fois modifier terminée par sauvegarder avec l'icone de petite disquette.