Jump to content
Monster-Amps

Modifier block recherche et header

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites

bonjour,

 

pense à remettre la largeur du header à 100% parce que là il est à 250% :blink:

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...

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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à

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

ça fonctionne à 98 % les deux blocs , accessoirisez votre guitare et frais de port sont l'un en dessous de l'autre .

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More