Agrandir la hauteur du header

Un forum de support CMSimple pour des utilisateurs et développeurs francophones

Moderator: Bob

Post Reply
Jean-Marie
Posts: 30
Joined: Wed Jan 04, 2012 10:35 pm

Agrandir la hauteur du header

Post by Jean-Marie » Tue Oct 13, 2015 6:13 pm

Bonjour

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

Merci à vous

lck
Posts: 1364
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Agrandir la hauteur du header

Post by lck » Wed Oct 14, 2015 9:10 am

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;}  
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Jean-Marie
Posts: 30
Joined: Wed Jan 04, 2012 10:35 pm

Re: Agrandir la hauteur du header

Post by Jean-Marie » Wed Oct 14, 2015 12:20 pm

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 ?

lck
Posts: 1364
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Agrandir la hauteur du header

Post by lck » Wed Oct 14, 2015 6:38 pm

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;
    ...
} 
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Jean-Marie
Posts: 30
Joined: Wed Jan 04, 2012 10:35 pm

Re: Agrandir la hauteur du header

Post by Jean-Marie » Thu Oct 15, 2015 10:31 pm

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

lck
Posts: 1364
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Agrandir la hauteur du header

Post by lck » Fri Oct 16, 2015 8:56 am

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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply