Easy-Design.Net forum




Archives Thèmes » Thèmes PHPBoost 5.0 [PBTV5] Thème Multi_Theme Par Sakura & Swan

Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 10/04/2016 à 18h38



Contribution par: Sakura
Porté par : EDN | Swan
Version de PHPBoost : 5.0.3
Information/ Note de l'auteur: Thème pour de multiples possibilités
Couleur(s) dominante(s) : Blanc et gris.

Spécificités



1) Largeur fixe 1000px.
2) Multi-colonnes aux choix
3) Les menus sont modifiable dans le "body.tpl".
4) Responsive
5) Intégrant un slide d'images modifiable dans "/templates/Multi-Theme/theme/images/slide".

Prévisualisation du thème





Prévisualisation des menus





Vos questions



Posez les en dessous de ce sujet.



swan_signature

Site web    
NK-aide Membre non connecté

EDN Concerné(e)

Rang

Avatar

Inscrit le : 24/09/2013 à 16h07

Messages: 238

Le 04/09/2016 à 04h10
Bonjour ,

Merci pour le thème

Les image du slider ne défilent pas. Comment régler le problème !


Cordialement



Merci swan et sont équipes :top

Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 04/09/2016 à 12h21
Bonjour,

Maj de l'archive : Correction du slider.

Merci de l'avoir signalé.

:study Swan.


swan_signature

Site web    
NK-aide Membre non connecté

EDN Concerné(e)

Rang

Avatar

Inscrit le : 24/09/2013 à 16h07

Messages: 238

Le 05/09/2016 à 07h18
Bonjour,

Il serrait possible d'avoir la correction manuel pour se qui on déjà modifier certaine partie sans devoir upload le thème au complet ?

Exemple moi sans correctif qui et modifié les effets visuel sous copyright et le fond pour pas qui soie coupé sur ton correctif la partie du haut n'est plus (voir sur mon site de test) en bas:

Exemple ton correctif :

(la partie du haut n'est plus): http://testphpboostv5.mtxserv.fr/ mon site de test v5.

Merci d'avance

Cordialement

Ps: je tente manuellement en attendant moi je peut le faire , mais sa peut vite devenir compliqué pour des débutants. Edité par NK-aide Le 05/09/2016 à 09h14



Merci swan et sont équipes :top

Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/09/2016 à 11h06
Bonjour,

Alors pour transposer le slide c'est assez simple,

1/ Il faut changer le fichier JS : "slide-show.js" dans le dossier JS.
2/ Dans le design.css remplacer cette partie de la ligne 62 à 126 :

Code CSS :
/* --- paramètres slideshow --- */
 
#slider {
  position: relative;
  overflow: hidden;
  margin: 32px auto 0 auto;
}
 
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 228px;
  list-style: none;
}
 
#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 1000px;
  height: 228px;
  background: #ccc;
  text-align: center;
  /*line-height: 300px;*/
}
 
a.control_prev, a.control_next {
  position: absolute;
  top: 35%;
  z-index: 999;
  display: block;
  font-size: 30px;  
  padding: 25px 10px;
  width: auto;
  height: auto;
  color: #cccccc;
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
}
 
a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}
 
a.control_prev {
  border-radius: 0 2px 2px 0;
}
 
a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}
 
.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}


Par :

Code CSS :
/* --- paramètres slideshow --- 
* base : https://codepen.io/SitePoint/pen/YqmjRj/
--------------------------------------------------*/
 
section#slider {
padding:0px;
position: relative;
overflow: hidden;
margin:auto;
}
 
#contenair {
  position: relative;
  margin: 0;
  padding: 0;
  height: 228px;
  text-align: center;
  list-style: none;
}
.container div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
 
a.prev, a.next {
  position: absolute;
  top: 35%;
  z-index: 999;
  display: block;
  font-size: 30px;  
  padding: 25px 10px;
  width: auto;
  height: auto;
  color: #cccccc;
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
}
 
a.prev:hover, a.next :hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}
 
a.prev {
  border-radius: 0 2px 2px 0;
}
 
a.next {
  right: 0;
  border-radius: 2px 0 0 2px;
}
 


3/ Et pour finir dans le "body.tpl" à la racine du thème :

Remplacer :

Code TPL :
<div id="slider">
 <a href="#" class="control_next"><i class="fa fa-chevron-right fa-2"></i></a>
 <a href="#" class="control_prev"><i class="fa fa-chevron-left fa-2"></i></a>
<ul id="slide-images">
<li id="slide-images"><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/1.jpg"/></a></li>
<li id="slide-images"><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/2.jpg"/></a></li>
<li id="slide-images"><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/3.jpg"/></a></li>
<li id="slide-images"><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/4.jpg"/></a></li>
<li id="slide-images"><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/5.jpg"/></a></li>
</ul>
</div>


Par:

Code TPL :
<section id="slider" class="demo">
 <a href="#" class="next"><i class="fa fa-chevron-right fa-2"></i></a>
 <a href="#" class="prev"><i class="fa fa-chevron-left fa-2"></i></a>
<div class="container">
<div style="display: inline-block;"><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/1.jpg"/></a></div>
<div><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/2.jpg"/></a></div>
<div><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/3.jpg"/></a></div>
<div><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/4.jpg"/></a></div>
<div><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/5.jpg"/></a></div>
<div><a href="index.php"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/slide/6.jpg"/></a></div>
</div>
</section>


NB: les images du slide sont dans le dossier :"../template/Multi_Theme/theme/images/slide"

Et non .. le thème mis en DL est correct ;)




:study Swan.


swan_signature

Site web    
NK-aide Membre non connecté

EDN Concerné(e)

Rang

Avatar

Inscrit le : 24/09/2013 à 16h07

Messages: 238

Le 06/09/2016 à 07h38
Bonjour ,

Parfait swan merci beaucoup

Par contre pour le menu du haut il faut mètre le module recherche sinon la bordure du haut saute ;)

Cordialement Edité par NK-aide Le 06/09/2016 à 10h33



Merci swan et sont équipes :top

Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 06/09/2016 à 09h20
Re,

Citation:
Par contre pour le menu du haut il faut mètre le module recherche sinon la bordure du haut saute.../...


Ok je vais regarder à fixer la hauteur du haut, sans ll'obligation du mini-module recherche.


;)




Edit : dans le design.css ligne 267 modifie le div#compteur comme suis :

Code CSS :
 
div#compteur {
    color: #445766;
    float: left;
    font-size: 0.9em;
    height: 28px;
    padding-left: 10px;
    padding-top: 8px;
    text-align: left;
}
 
 





Edit :

De Nk-Aide : Parfait swan merci beaucoup, le reste du sujet est scindé. ( Voir le sujet)


swan_signature

Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie