Easy-Design.Net forum




Aides sur les thèmes PHPBoost [Tuto] slide header Thème Iboost evoV3 ajout d'images...

pegasetkc Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 15/04/2010 à 19h37

Messages: 1940

Le 14/12/2011 à 21h04
Suite a nombreuses demande par MP sur la façon d’ajouter des images en slide dans le header du thème je vous propose la solution directement ici :


Toutes les images doivent faire la taille suivante : 1200x315px (taille par defaut) et se trouvées dans le dossier : iBoost_evoV3slide_showimages

Pour ajouter des images au slideshow modifiez le fichier header.tpl à partir de la ligne 216 :

Code TPL :
<div id="sub_header">
<!-- slideshow du sub-header -->
<div id="slide-show">
<ul id="slide-images">
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/test.jpg"/></a></li>
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/test2.jpg"/></a></li>
</ul>
</div>
</div>


Voici le code a ajouter à partir de la ligne 222 :
Code TPL :
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/votre_image.jpg"/></a></li>


ce qui donne au final quelque chose de ce type :

Code TPL :
<div id="sub_header">
<!-- slideshow du sub-header -->
<div id="slide-show">
<ul id="slide-images">
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/images_01.jpg"/></a></li>
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/image_02.jpg"/></a></li>
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/image_03.jpg"/></a></li>
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/images_04.jpg"/></a></li>
</ul>
</div>
</div>


voila rien de bien compliqué ;)

Citation made in pegasetkc : "Sauvez un arbre mangez un castor"
Depuis que je connais Saturnin mon humour ressemble a cela : j'ai un string dans l'array
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 14/12/2011 à 22h04
Merci Pegase, je place cela sous le coude ;)

swan_signature

Site web    
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 15/12/2011 à 07h33
pegasetkc:
Suite a nombreuses demande par MP


Avis à tous les membres, ceux ci n'est pas une mise en garde ou quoi que se soit, mais juste un rafraîchissement, malgré le froid qui s'installe dans nos chaumières.

Toutes demandes pour n'importe quoi en relation avec les thèmes ou ce qui tourne autour, se font directement pas une demande d'aide dans l'une des catégories concernées sur le forum.

Peut-être que vous trouvez cela incohérent, mais cela peut servir de base de donnée pour les autres membres qui auront cotisé ou non pour ce type de thème.

Très bonne journée

highty


Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
E-mail Site web    
patgame Membre non connecté

EDN Concerné(e)

Rang

Avatar

Inscrit le : 28/09/2009 à 16h23

Messages: 146

Le 02/02/2012 à 15h01
Bonjour
merci pour ton tuyau pour l'ajout d'images ds le slider malheureusement il n' y a que la 1° qui s'affiche ( une des 2 images fournies a titre d'exemple)
même après nettoyage cache phpb et firefox

mais je dois dire que j'ai réduit la hauteur du slide pour convenance perso a 158 px et bie nsur les images idem of course cela a une incidence faut il indiquer cette taille qq part ?

merci a toi
pour qu'il ny ait pas de doute voici le code mis selon tes indications peut être ai je fait une erreur ?

Code TPL :
 
<div id="sub_header">
<!-- slideshow du sub-header -->
<div id="slide-show">
<ul id="slide-images">
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/images_01.jpg"/></a></li>
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/image_02.jpg"/></a></li>
<li><a href="#"><img src="{PATH_TO_ROOT}/templates/{THEME}/slide_show/images/image_03.jpg"/></a></li>
 
</ul>
</div>
</div>

cordialement
pat

euh si je peux abuser je vais peut être obliger d' ajouter une deuxième barre d'onglet au menu comment fait on pour donc abaisser d'autant le slide show
ah quand on est nul en code ....
Site web    
pegasetkc Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 15/04/2010 à 19h37

Messages: 1940

Le 16/02/2012 à 00h41
alors pour te répondre concernant la taille il faut modifier plusieurs paramètres :

Fichier design.css

Code CSS :
div#sub_header {
    background: none repeat-x scroll 0 -999px #FFFFFF;
    border-color: -moz-use-text-color #999999;
    border-style: none solid;
    border-width: 0 1px;
    height: 355px; /* hauteur de l'image + 40px */
    text-align: center;
}


Code CSS :
div#slide-show {
    height: 315px;  /* hauteur de l'image */
    padding-top: 40px;
}


Code CSS :
#slide-images {
    display: block;
    height: 315px;  /* hauteur de l'image */
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 1200px;  /*largeur de l'image */
}
Edité par pegasetkc Le 16/02/2012 à 00h42

Citation made in pegasetkc : "Sauvez un arbre mangez un castor"
Depuis que je connais Saturnin mon humour ressemble a cela : j'ai un string dans l'array
Site web    
patgame Membre non connecté

EDN Concerné(e)

Rang

Avatar

Inscrit le : 28/09/2009 à 16h23

Messages: 146

Le 16/02/2012 à 19h54
merci a toi nickel il me reste juste a regler de descendre un peu le slide
Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie