Monster-Amps Posted December 13, 2011 Share Posted December 13, 2011 Bonjour à tous Je souhaiterais modifier la taille de mon header , mais malgré firedebug , je ne trouve pas comment procéder .Centrer le logo et l'agrandir , ainsi que réorganiser langue , mon panier etc . J'aimerais également remplacer le terme "recherche" dans le block recherche par "Rechercher un article ou tapez un mot clé" et centre le block recherche . Merci pour votre aide Link to comment Share on other sites More sharing options...
Carl Favre Posted December 13, 2011 Share Posted December 13, 2011 Bonjour monster-amps, Il s'agit du site dans ta signature ? Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 Bonjour tout à fait il s'agit de www.monster-amps.com Link to comment Share on other sites More sharing options...
Carl Favre Posted December 13, 2011 Share Posted December 13, 2011 Pour le header que veux-tu faire exactement ? Pour changer sa taille il faut modifier le global.css dans ton thème : #header { background: url("../img/bg_header_r.gif") repeat-y scroll right top #FFFFFF; float: left; width: 100%; } Pour agrandir le logo, il faut utiliser Paint.net/Photoshop/Gimp par exemple. Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 je voudrais centre le logo , agrandir le header , déplacer rechercher sous le logo centré . Positionné contact,blog,devise et langue à gauche Pour finir , rendre l’arrière de mon header transparent . Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 Bon j'ai agrandi le logo , le résultat est pas terrible , mais le logo est plus clair HELP Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 bonjour, pense à remettre la largeur du header à 100% parce que là il est à 250% ensuite pour mettre ton fond transparent ajoute "transparent" comme ceci : #header { background: transparent url("../img/bg_header_r.gif") repeat-y scroll right top; float: left; width: 100%; } ensuite tu auras un "conflit de largeur entre le logo et header_right... sachant que la largeur de #page est de 940px et que ton logo fait 283px.... ton #header_right doit faire 940-283=657px donc #header_right { float: right; text-align: right; width: 657px; } ça devrait le faire... Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 Ce qui est étrange c'est que sur firefox , la largeur du header est bien de 100% sur chrome , ça dépasser. Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 Merci monsieur Chonez , ça avance . Il ne me reste maintenant qu'a centrer le logo , deplacer et agrandir la barre recherche et déplacé à gauche 'contact, blog". Petite question , pourquoi lorsque je charge un png en back office comme logo il est automatiquement uploadé en jpg? Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 pour centrer le logo tu vas devoir passer par un positionnement relatif: img.logo { float: left; left: 329px; position: relative; } la barre de recherche est traitée ne image donc il te faut la recupérer et la retoucher sous gimp/photoshop. ensuite suivant la largeur, il te faudra élargir le width de : #header_right #search_block_top input#search_query_top { background-color: transparent; border: medium none; color: #888888; font-family: 'BebasNeueRegular'; font-size: 20px; height: 23px; line-height: 23px; width: 145px; } concernnat les images, il faut comprendre que toutes les images importées via le BO sont redimensionnées (thumbnails) et converties en .jpg... ceci peut-être changer dans BO > Préférences > images > qualité .... choisir : Utiliser le PNG seulement si l'image de base est au format PNG voilà Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 Merci pour les infos , dans le BO>préférences>images>je ne trouve pas le logo qualité . Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 c'est un bouton radio dans le cadre "Qualité d'image".... sinon fais attention car la position de ton logo va certainement contraindre le "identifiez-vous" car si le client s'appelle tartampion de la machinchose jean-noel, il va manquer de la place Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 c'est de la folie , je ne le voie pas . Si je vous crée un accès à mon back office , pourriez vous regardé ? edit : résolu pour le png , il ne me reste qu'a déplace le block permanent link et déplacer la barre recherche , ce qui ne va pas être facile à faire Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 déjà dans bo> module > position fais ( je te tutoie ok?) en sorte que blockpermanentlink soit placé en 1er position dans top of page! ensuite modifie #header_right dans ton globall.css comme ceci #header_right { text-align: right; width: 940px; } et ul#header_links dans permanentlink.css comme celà : ul#header_links { float: left; list-style-type: none; margin: 5px 0 0; } Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 pas de soucis pour le tutoiement , jusque la ca roule , tout est en place , reste plus qu'a réduite le header maintenant . deuxième soucis , j'ai perdu un bloc dans la bataille , celui à cote de personalliser votre instrument , il suit le logo .Que pui je faire? Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 il faut enlever le float:right; à #header_right! je comprends pas l'histoire du bloc... c'est celui en bas (accessoirisez votre guitare)? Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 oui normalement il y en a un deuxieme . A gauche accessoirisez votre guitare et a droite frais de port offert. Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 oui je crois comprendre, en modifiant ton logo pour le centrer celà à déplacer tes 2 visuels... alors ajouter après img.logo { float: left; left: 329px; position: relative; } .footer_top img.logo { float: left; } Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 ca ne donne pas de résutat , le block permanent link lui à de nouveau bouger . AU SECOUR ! Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 j'étais pari chercher mes enfants! bon on va reprendre autrement, remplace img.logo et .footer_top img.logo par img.logo { left: 40%; position: absolute; } .footer_top img.logo { left: 0; position: relative; } j'ai moi ça fonctionne Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 ça fonctionne à 98 % les deux blocs , accessoirisez votre guitare et frais de port sont l'un en dessous de l'autre . Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 manqué juste le float:left; .footer_top img.logo { float: left; left: 0; position: relative; } Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 13, 2011 Author Share Posted December 13, 2011 un grand merci Stéphane ca fonctionne . En passant , saurais tu comment remplacer blog,contact par des logos ? Un grand merci à toi pour tes conseils et ton temps Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted December 13, 2011 Share Posted December 13, 2011 pour mettre des images tu dois intervenir sur le module blockpermanentlink... la bonne pratique est de faire une copie du dossier blockpermanentlink et de le copier dans le dossier module que tu dois créer dans le dossier de ton thème. créer un dossier images et place les visuels que tu as besoin pour tes liens. ensuite édite le fichier blockpermanentlinks-header.tpl qui se trouve désormais dans theme/ton theme/module/blockpermanentlink repère <li id="header_link_contact"><a href="{$link->getPageLink('contact-form.php', true)}" title="{l s='contact' mod='blockpermanentlinks'}">{l s='contact' mod='blockpermanentlinks'}</a></li> <li id="header_link_sitemap"><a href="{$link->getPageLink('sitemap.php')}" title="{l s='sitemap' mod='blockpermanentlinks'}">{l s='sitemap' mod='blockpermanentlinks'}</a></li> remplace les textes comme {l s='contact' mod='blockpermanentlinks'} par des appels d'image <img src="images/ton_image.gif" alt="" /> p-e as-tu déjà modifier ce module auparavant. Link to comment Share on other sites More sharing options...
Monster-Amps Posted December 18, 2011 Author Share Posted December 18, 2011 salut Stéphane , je travaille à la création d'un théme de A à Z , j'aurais aimé déplace l'onglet "0 articles dans panier" et se connecter etc , dans le sur header . http://iron-ink.fr/JO/PS/ et la je bloque a fond . Tu auras un tuyau ? Link to comment Share on other sites More sharing options...
Ami KUGLER Posted November 28, 2015 Share Posted November 28, 2015 Bonjour Stephane Chonez j' ai le bloc de recherche qui est position en dessous du slider et j aimerais le positionner au dessus du bloc "menu haut horizontale" tout en changeant la couleur. pouvez vous me dire comment faire s'il vous plait ? Merci pour votre aide. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now