Page 1 of 1

Agrandir la hauteur du header

Posted: Tue Oct 13, 2015 6:13 pm
by Jean-Marie
Bonjour

J'utilises le template gefloathorinav1XH, je voudrais savoir comment agrandir la hauteur du header ? Pour l'adapter à mon image.

Merci à vous

Re: Agrandir la hauteur du header

Posted: Wed Oct 14, 2015 9:10 am
by lck
Bonjour,

stylesheet.css ligne 30

Code: Select all

#tplge_header h1 {width: 80%; float: left; font-family: tahoma, verdana, sans-serif; color: #505960; font-size: 24px; line-height: 1.2em; text-align: left; font-weight: 100; padding: 10px 0 52px 16px; margin: 0;}               
Changer le padding: 10px 0 52px 16px;

ou compléter

Code: Select all

#tplge_header {... min-height: 200px;}  

Re: Agrandir la hauteur du header

Posted: Wed Oct 14, 2015 12:20 pm
by Jean-Marie
Bonjour Ludwig

Merci j'ai réussi à modiifier.

Je ne sais si j'ouvre un autre post, mais ca concerne toujours le header, je voudrais mettre quelques images avec lien en dessous de "titre du site" est ce possible ?

Re: Agrandir la hauteur du header

Posted: Wed Oct 14, 2015 6:38 pm
by lck
Bonjour,

voici un exemple.

Enregistrer les images à ./templates/gefloathorinav1xh/images/

template.htm modifications:

Code: Select all

<div id="tplge_headerin">
<h1>Site officiel de la commune d'Oursel-Maison</h1>

<div class="headerimglinks">
<a href="Link1"><img src="<?php echo $pth['folder']['templateimages']?>headerimg01.jpg" alt="Link1"></a>
<a href="Link2"><img src="<?php echo $pth['folder']['templateimages']?>headerimg02.jpg" alt="Link2"></a>
<a href="Link3"><img src="<?php echo $pth['folder']['templateimages']?>headerimg03.jpg" alt="Link2"></a>
<a href="Link4"><img src="<?php echo $pth['folder']['templateimages']?>headerimg04.jpg" alt="Link2"></a>
</div>

...
</div>
stylsheet.css modifications:

Code: Select all

.headerimglinks {
    float: left;
    padding: 0 6px 12px 16px;
    text-align: left;
    width: 80%;
    
}
/* optionnel */
.headerimglinks img {
    background: #FFF;
    border: 1px solid #999;    
    margin: 0;    
    padding: 3px;
    width: 200px;
}
/* optionnel */
.headerimglinks img:hover {
    background-color: #A0ACB9;
} 
Bien sûr, il faut ajuster dan à nouveau dans le padding de h1, par exemple :

Code: Select all

#tplge_header h1 {
    ...
    padding: 45px 0 45px 16px;
    ...
} 

Re: Agrandir la hauteur du header

Posted: Thu Oct 15, 2015 10:31 pm
by Jean-Marie
Bonjour

J'ai mis 2 images pour le moment, mais je n'arrive pas à les positionner en dessous site officiel etc ...
Voir ici pour les images header http://www.oursel-maison.fr/cmsimplexh/?Accueil

ce que j'ai mis dans stylesheet.css en fin de page :

Code: Select all

/* optionnel */
.headerimglinks img {
    background: #FFF;
    border: 1px solid #999;    
    margin: 0;    
    padding: 3px;
    width: 50px;
}
/* optionnel */
.headerimglinks img:hover {
    background-color: #A0ACB9;
}
#tplge_header h1 {
    ...
    padding: 45px 0 45px 16px;
    
}

Re: Agrandir la hauteur du header

Posted: Fri Oct 16, 2015 8:56 am
by lck
Bonjour,

s'il vous plaît supprimer les lignes que vous avez ajoutés à la fin de stylesheet.css.

Inclure titre de la ligne 30, de ce qui suit:

Code: Select all

.headerimglinks {float: left; padding: 0 6px 12px 16px; text-align: left; width: 80%;}
.headerimglinks img {background: #FFF; border: 1px solid #999; margin: 0; padding: 3px; width: 50px;}
.headerimglinks img:hover {background-color: #A0ACB9;}
Le padding pour "#tplge_header h1", s'il vous plaît changer juste à la ligne 30 car il existe déjà.
Voir mon post ci-dessus.