En attente de tutoriel

Aller en bas

default En attente de tutoriel

Message par Milouze14 le Sam 22 Mar 2014, 07:42

Code:
ggggggggggg ,
<div class="vtip"style="background:#ffffff;float:left;border:1px solid#666666;width:73px;height:22px;padding:3px 5px 3px 5px;cursor:pointer;"title="Attention version PHPBB3">[img]http://i56.servimg.com/u/f56/11/26/21/37/9ss3ms10.png[/img]</div><br/>

Ce tutoriel vous permettra de personnaliser chaque catégorie de votre forum  :dte: .


L'aperçu imagé:
[img]http://i56.servimg.com/u/f56/11/26/21/37/00000012.png[/img]

Pour avoir ce rendu , il va falloir aller dans la structure et hiérarchie de votre forum:
[color=#FF6600][b]Affichage[/b][/color]/[color=#006600][b]Page d'acceuil[/b][/color]/[color=#FF6600][b] Structure et hiérarchie[/b][/color]/[color=#006600][b]Séparer les catégories sur l'index :[/b][/color]


Cochez sur  "Complet".


<div class="M14_merci"><a>Un petit merci pour voir le contenu en cliquant sur</a></div>

[hide]



Vous pouvez donc si vous le souhaitez  personnaliser seulement une de
vos catégories  :dte: .


Nous aurons donc quatre JavaScripts avec un ID différent pour chacune d'entre elles.


[color=#FF6600][b]Modules[/b][/color]/[color=#006600][b]HTML JAVASCRIPT[/b][/color]/[color=#FF6600][b]Gestion des codes Javascript[/b][/color]/[color=#006600][b]Créer un nouveau Javascript[/b][/color]
Mettre un titre explicite comme:
"Personnaliser les catégories"
Cocher sur toutes les pages.

[code]
//LA PREMIERE CATEGORIE
$(function() {
$("div.forabg:eq(0)").wrap("<div id='M14_cont'></div>");
});
//LA DEUXIEME CATEGORIE
$(function() {
$("div.forabg:eq(1)").wrap("<div id='M14_cont1'></div>");
});
//LA TROISIEME CATEGORIE
$(function() {
$("div.forabg:eq(2)").wrap("<div id='M14_cont2'></div>");
});
//LA QUATRIEME CATEGORIE
$(function() {
$("div.forabg:eq(3)").wrap("<div id='M14_cont3'></div>");
});
[/code]


Pensez a cliquer sur le bouton :Valid:


[hr]

[code]
//LA PREMIERE CATEGORIE
$(function() {
$("div.forabg:eq(0)").wrap("<div id='M14_cont'></div>");
});
[/code]

On résume:
[code]div.forabg:eq(0) [/code]

La première catégorie
ensuite on englobe cette catégorie avec un wrap avec une div portant
l'identifiant :
[code]
#M14_cont
[/code]

Si vous désirez ajouter une cinquième catégorie , il faudra donc modifier le javascript
[code]
//LA CINQUIEME CATEGORIE

$(function() {
$("div.forabg:eq(4)").wrap("<div id='M14_cont4'></div>");
});
[/code]



Passons à la C.S.S:

je vous donne juste l'apparence complète sur la première catégorie ,
il vous faudra donc personnaliser les autres  :dte: .

J'ai donc aussi compacté la feuille de style sur les couleurs et
les couleurs de fond afin d'alléger un maximum la C.S.S .



Dans la feuille de style:
[color=#FF6600][b]Affichage[/b][/color]/[color=#006600][b]Images et Couleurs[/b][/color]/[color=#FF6600][b]Couleurs[/b][/color]/[color=#006600][b]Feuille de style[/b][/color]
Collez ceci:
[code]
/*DEBUT DE LA PREMIERE CATEGORIE*/
/*LA COULEUR DE FOND DE LA CATEGORIE */
#M14_cont .forabg
{
background:black; 
}
/*LA COULEUR DES TITRES ET LIENS*/
#M14_cont .forabg ul.topiclist .table-title h2 ,
#M14_cont .forabg h2.hierarchy a.forumtitle ,
#M14_cont .forabg ul.topiclist  .topics ,
#M14_cont .forabg ul.topiclist .posts  ,
#M14_cont .forabg ul.topiclist .lastpost ,
#M14_cont .forabg ul.topiclist .lastpost span ,
#M14_cont .forabg ul.topiclist .lastpost strong ,
#M14_cont .forabg ul.topiclist .lastpost a
{
color:orange;
text-decoration:none !important;
}
/*LES BORDURES DES SUJETS*/
#M14_cont .forabg ul.topiclist  .topics
{
border-left:1px solid orange;
}
/*LES BORDURES DES MESSAGES*/
#M14_cont .forabg ul.topiclist .posts
{
border-left:1px solid orange;
border-right:1px solid orange;
}

/*La couleur de fond du contenu de la categorie*/
#M14_cont .forabg li.row
{
background:white;
}
/*La couleur de fond au survol du contenu de la categorie*/
#M14_cont .forabg:hover li.row
{
background:grey !important;
}
/*FIN DE LA PREMIERE CATEGORIE*/

[/code]
Pensez à valider les modifications en cliquant sur le bouton  :Valid:

[/hide]


Voilà, c'est tout pour le moment  :clinoeil: .
avatar
Milouze14
Administrateur
Administrateur

Prénom : Philippe Féminin Date d'inscription : 20/11/2012
Localisation : Vendée
Emploi/loisirs : Informatique
Humeur : Toujours bonne

http://testphpbb3.1fr1.net

Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum