[PHPBB3] Personnaliser le qeel sur son apparence

Milouze14 Lun 17 Mar 2014 - 19:12

  ,


Je ne vais pas vous donner d'astuce pour modifier le texte
car c'est encore assez complexe à l'heure actuelle   vu le code source du Qeel.

On va simplement donner un identifiant afin de pouvoir mettre tout ce Qeel
à votre convenance les ami(e)s   .

Les backgrounds et les couleurs ne sont pas chouette ,
mais vous verrez de vous même pour modifier tout çà   .




Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite comme : Attribution de class sur le Qeel
Cocher sur l'index.

Collez ce contenu:

Code:


//LE TITRE QUI EST EN LIGNE
$(function(){
$("#i_whosonline.img-whois ").prev("div.h3").wrap('<div class="M14_Titre_Qeel"></div>');
});

//LE BLOC QUI EST EN LIGNE
$(function(){
$("#i_whosonline.img-whois ").next("p").wrapAll('<div class="M14_Bloc_Qeel"></div>');
});

//LE BLOC DES STATS
$(function(){
$(".M14_Bloc_Qeel").nextAll("p.page-bottom").wrapAll('<div class="M14_Bloc_Stats"></div>');

});
//LE TITRE DES STATS
$(function(){
$(".M14_Bloc_Stats").prev("div.h3").wrap('<div class="M14_Titre_Stats"></div>');
});


Penser a cliquer sur le bouton

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

La C.S.S est entièrement commentée, à vous de modifier les couleurs.
Pour le tutoriel, toutes les polices ont la même couleur   .

Collez ceci:

Code:


/* le titre de QUI EST EN LIGNE*/
.M14_Titre_Qeel
{
background:yellow;/*couleur de fond*/
color:pink !important;/*couleur de police*/
padding:3px; /*on donne un espace*/
margin:2px 0 2px 0;/*on donne une marge en ahut et en bas pour ne pas coller*/
-webkit-border-radius: 6px;/*les bordures arrondies*/
-moz-border-radius: 6px;
border-radius: 6px;
}
/*Le contenu de QUI EST EN LIGNE*/
.M14_Bloc_Qeel
{
background:orange;/*couleur de fond*/
color:red !important;/*couleur de police*/
padding:5px;/*on donne un espace*/
-webkit-border-radius: 6px;/*les bordures arrondies*/
-moz-border-radius: 6px;
border-radius: 6px;
}
/*L apparence des liens et caracteres gras*/
.M14_Bloc_Qeel a , .M14_Bloc_Qeel strong
{
color:red !important;/*couleur de fond*/
font-weight:normal !important; /*on remet les caracteres gras en normal*/
text-decoration:none !important;/*on supprime le soulignement des liens*/
}
/*Le titre STATISTIQUES*/
.M14_Titre_Stats
{
background:pink;/*couleur de fond*/
color:yellow !important;/*couleur de police*/
padding:3px;/*on donne un espace*/
margin:2px 0 2px 0;/*on donne une marge en ahut et en bas pour ne pas coller*/
-webkit-border-radius: 6px;/*les bordures arrondies*/
-moz-border-radius: 6px;
border-radius: 6px;
}
/*Le contenu de STATISTIQUES*/
.M14_Bloc_Stats
{
background:green;/*couleur de fond*/
color:blue !important;/*couleur de police*/
padding:5px;/*on donne un espace*/
-webkit-border-radius: 6px;/*les bordures arrondies*/
-moz-border-radius: 6px;
border-radius: 6px;
}
/*L apparence des liens et caracteres gras*/
.M14_Bloc_Stats a , .M14_Bloc_Stats strong
{
color:blue !important;/*couleur de fond*/
font-weight:normal !important; /*on remet les caracteres gras en normal*/
text-decoration:none !important;/*on supprime le soulignement des liens*/
}



Penser a cliquer sur le bouton





Voila, c'est tout pour le moment .
Un soucis direction l'entraide
https://www.milouze14.com/f14-entraide-forumactif

fleur78 Lun 17 Mar 2014 - 20:20

pierre31250 Dim 18 Mai 2014 - 20:34

curieux75 Lun 23 Juin 2014 - 18:19

Merci  

WyvernNE Mar 30 Sep 2014 - 7:24

Artdrock Mer 1 Oct 2014 - 14:04

Dada Jeu 4 Déc 2014 - 18:25

patriciadpt30 Lun 28 Sep 2015 - 21:11

Gae Mer 30 Sep 2015 - 18:41

bildil62 Jeu 1 Oct 2015 - 19:48

Invité Sam 3 Oct 2015 - 3:56

mariok Sam 10 Oct 2015 - 8:51

clost Lun 21 Mar 2016 - 19:46

Jackymi Lun 27 Juin 2016 - 23:03

Emc2 Mar 28 Juin 2016 - 22:15

50Thierry Jeu 30 Juin 2016 - 2:30

photoclic Mar 12 Juil 2016 - 14:32

Invité Sam 28 Oct 2017 - 19:39

Milouze14 Sam 28 Oct 2017 - 19:41

hamesashek Ven 10 Nov 2017 - 22:46

dams161 Sam 19 Jan 2019 - 22:52

Splash Dim 20 Jan 2019 - 8:35