Page 2 sur 3 • 
1, 2, 3 
1, 2, 3 
PêpêcheMascotte- Messages : 4428
![[Aide Anim/codage] Question Feuille de personnage - Page 2 Empty](https://2img.net/i/empty.gif)
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 30 Juil 2019 - 14:06
Hello 
tu veux que je jette un oeil à ce que tu as commencé ?
tu veux que je jette un oeil à ce que tu as commencé ?
MmeFeuillage- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148 
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 30 Juil 2019 - 14:54
Pour le moment je n'ai vraiment pas fait grand chose, J'ai mis des éléments un peu au hasard pour tester
Je ne comprend pas pourquoi ça ne prend pas en compte la CSS ...
Je ne comprend pas pourquoi ça ne prend pas en compte la CSS ...
- Code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Badges</title>
<link rel="stylesheet" href="">
<style>
**/style cochage/**
.selectbadge{
margin: 30px auto;
width: 90%;
border: 2px black solid;
background : grey;}
**/style bouton/**
#btn{}
**/ style affichage badge /**
#rendubadge{}
</style>
</head>
<body ng-app="angularApp" ng-controller="appController" ng-cloak>
<div class="selectbadge">
<form action="#" method="post">
<p>
<input ng-model="radioButton.oldCode" ng-click="radioButton.oldCode = true ; action('oldCode');" ng-value="true" type="checkbox" /> <label>coche la case si tu as déjà une fiche.</label>
</p>
<div data-ng-if="radioButton.oldCode">
Indique le lien du message contenant tes badges
<input type="text" ng-model="ancienCode">
<br />
<input type="button" value="valider" ng-click="recupInfos(ancienCode);"/>
</div>
<div id="blk-cb">
<p>Mes badges : </p><!--
--><input type="checkbox" id="badge1" value="premiere_checkbox"><!--
--><label for="badge1"> Badge 1 </label><!--
--><input type="checkbox" id="badge2" value="deuxieme_checkbox"><!--
--><label for="badge2"> Badge 2 </label><!--
--><input type="checkbox" id="badge3" value="troisieme_checkbox"><!--
--><label for="badge3"> Badge 3 </label>
</div>
</form>
</div>
<div id="rendu-cache" style="display: none;"></div>
<textarea id="txt-genere" ng-hide="!showCode" readonly></textarea>
<div class="btn">
<button type="reset">Annuler</button>
<button type="button" ng-click="genererCode()">Générer le code</button>
</div>
<!-- Bibliothèque Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" language="Javascript" type="text/javascript"></script>
<script src="http://tambouille-raleuses.forumactif.com/16544.js" type="text/javascript"></script>
<!-- Bibliothèque jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// On crée l'application angular et on appelle les modules supplémentaires
var app = angular.module("angularApp", ['bbModule']);
// On associe le js à exécuter dans l'application angular
app.controller("appController", function($scope, $sce){
// Par défaut, on cache la zone du texte généré
$scope.showCode = false;
// on récupère le code
$scope.genererCode = function(){
// On récupère le contenu html de la div #rendu
var codeMsg = document.getElementById('blk-cb').innerHTML;
$('#rendu-cache').html(codeMsg);
$('#rendu-cache input[type="checkbox"]').each( function(){
$(this).attr('disabled', true);
});
codeMsg = document.getElementById('rendu-cache').innerHTML;
// On l'injecte dans notre champ html
document.getElementById('txt-genere').value = codeMsg ;
// On affiche la zone
$scope.showCode = true;
};
$scope.cacherBloc = function(){
if($scope.showCode){
// On le cache
$scope.showCode = false;
}
// sinon on ne fait rien
};
// Récupérer info
$scope.recupInfos = function(data){
var msg = data,
lienMsg = msg.split('#')[0],
idMsg = msg.split('#')[1];
$('#rendu-cache').load(''+ lienMsg +' #p'+ idMsg +' .postbody > .content > .content-msg');
setTimeout( function(){
$('#rendu-cache .content-msg input[type="checkbox"]').each( function(){
$(this).removeAttr('disabled');
});
var htmlToCopy = $('#rendu-cache .content-msg').html();
$('#blk-cb').html(htmlToCopy);
}, 800);
};
});
$('body')
// Au clic sur le champ de texte généré, il se sélectionne
.on("click", "#txt-genere", function(){
if (!window.getSelection().toString()) {
// Required for mobile Safari
this.setSelectionRange(0, this.value.length);
}
})
.on("change", '#blk-cb input[type="checkbox"]', function(){
if($(this).is(':checked')){
$(this).attr('checked', true);
}else{
$(this).removeAttr('checked');
}
});
</script>
</body>
</html>
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 30 Juil 2019 - 15:12
Les commentaires en CSS s'écrivent comme ça :
ou
Il faut toujours les ouvrir au moins avec /* et les refermer avec au moins [b]*/[/code]
Toi tu t'es un peu embrouillée ^^
tu as inversé le / et le *
- Code:
/* commentaire */
ou
- Code:
/** commentaire **/
Il faut toujours les ouvrir au moins avec /* et les refermer avec au moins [b]*/[/code]
Toi tu t'es un peu embrouillée ^^
- Code:
**/style cochage/**
tu as inversé le / et le *
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 30 Juil 2019 - 15:35
J'étais sure que c'était encore un truc à 2balles qui faisait tout foirer ! 
Merciiiii, ça devrait mieux marcher comme ça ^^
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 30 Juil 2019 - 15:36
ça arrive t'inquiète pas
Bon courage ^^ et si besoin, tu sais où nous trouver
Bon courage ^^ et si besoin, tu sais où nous trouver
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 30 Juil 2019 - 16:02
Merci 
Est ce qu'il y aurai un moyen de mettre les images des badges non cochés en couleur pale/transparence et qu'ils soient en couleur une fois coché ... ?
Tu me dit si j'abuse hein
Est ce qu'il y aurai un moyen de mettre les images des badges non cochés en couleur pale/transparence et qu'ils soient en couleur une fois coché ... ?
Tu me dit si j'abuse hein
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 30 Juil 2019 - 16:18
alors... Dans le tuto j'ai mis ça :
pour qu'on passe du N&B à la couleur. Du coup, on va changer ça en jouant avec l'opacité en plus
si tu ne veux pas avoir le N&B il te suffit de supprimer filter & -webkit-filter dans les 2 cas
- Code:
/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
pour qu'on passe du N&B à la couleur. Du coup, on va changer ça en jouant avec l'opacité en plus
- Code:
/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
opacity: .4;
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
opacity: 1;
}
si tu ne veux pas avoir le N&B il te suffit de supprimer filter & -webkit-filter dans les 2 cas
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 1 Aoû 2019 - 10:15
Ha j'avais pas lu le tuto jusqu'au bout, je n'avais pas vu qu'il y avait le noir et blanc de prévue ^^'
Merci !!!
En fait le java script par rapport aux versions du forum n'est pas tout a fait pareil non plus sur le tuto , du coup je pense que je vais reprendre le code du tuto directement
Je met du temps parce que je suis sur tout les fronts en même temps ^^' mais j'avance petit à petit
Merci !!!
En fait le java script par rapport aux versions du forum n'est pas tout a fait pareil non plus sur le tuto , du coup je pense que je vais reprendre le code du tuto directement
Je met du temps parce que je suis sur tout les fronts en même temps ^^' mais j'avance petit à petit
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Sam 3 Aoû 2019 - 7:04
Coucou
Logiquement, le tuto devrait te simplifier la vie. J'ai tout revu pour qu'il n'y ait que peu de chose à faire du coté du code
En tout cas, je suis là si besoin.
Logiquement, le tuto devrait te simplifier la vie. J'ai tout revu pour qu'il n'y ait que peu de chose à faire du coté du code
En tout cas, je suis là si besoin.
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 8 Aoû 2019 - 13:34
Coucou !!
Me revoila !!
Alors, cette fois, j'ai tout repris et suivi le tuto mais... a maaaarche paaaas
^^
J'ai surement encore zappé un truc mais j'ai beau reprendre je ne trouve pas ou est la boulette !!
Donc déjà :
La ou les membres posteront leur badges : http://forumfeminin.forumactif.org/f3-les-fiches-membres
Ma fiche de badges : http://forumfeminin.forumactif.org/t1032-test-badge
Le formulaire : http://forumfeminin.forumactif.org/h8-badges
Ma fiche de perso : http://forumfeminin.forumactif.org/u1 (J'ai mis le CSS mais la petite case apparait quand même donc déja la, il y a un bug ^^)
Les soucis
Sur la fiche de perso , le CSS na pas l'air d'être pris en compte vu qu'on voit la petite case cochée
Sur ma fiche de badges, les badges non cochés ne se mettent pas en noir et blanc
Quand je retourne sur le formulaire et que je rentre le lien de ma fiche de badge, dans l"idée d'ajouter des badges, dès que je valide le lien, les autres badges disparaissent du coup je ne peux pas en cocher d'autre, et le code a copier/coller est vide ... pourtant il me semble bien avoir changer la version du forum
J'ai donc du me louper quelque part mais je ne sais pas trop ou chercher du coup ^^
Me revoila !!
Alors, cette fois, j'ai tout repris et suivi le tuto mais... a maaaarche paaaas
^^J'ai surement encore zappé un truc mais j'ai beau reprendre je ne trouve pas ou est la boulette !!
Donc déjà :
La ou les membres posteront leur badges : http://forumfeminin.forumactif.org/f3-les-fiches-membres
Ma fiche de badges : http://forumfeminin.forumactif.org/t1032-test-badge
Le formulaire : http://forumfeminin.forumactif.org/h8-badges
Ma fiche de perso : http://forumfeminin.forumactif.org/u1 (J'ai mis le CSS mais la petite case apparait quand même donc déja la, il y a un bug ^^)
Les soucis
Sur la fiche de perso , le CSS na pas l'air d'être pris en compte vu qu'on voit la petite case cochée
Sur ma fiche de badges, les badges non cochés ne se mettent pas en noir et blanc
Quand je retourne sur le formulaire et que je rentre le lien de ma fiche de badge, dans l"idée d'ajouter des badges, dès que je valide le lien, les autres badges disparaissent du coup je ne peux pas en cocher d'autre, et le code a copier/coller est vide ... pourtant il me semble bien avoir changer la version du forum
J'ai donc du me louper quelque part mais je ne sais pas trop ou chercher du coup ^^
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 8 Aoû 2019 - 14:09
Coucou
On va y aller pas à pas
Il faut bien respecter la casse indiquée ici (les majuscules et minuscules)
Autrement dit, il faut que tu mettes :
ça devrait régler le problème du formulaire
A mon avis, le problème vient de ta feuille de style css :/ tu pourras la poster complète ici stp ?
Je ne peux pas voir le rendu (ça n'est pas accessible aux invités). Tu auras un compte de test ?
je pense que ça doit etre un mini couac de "chemin" d'élement dans la CSS
On va y aller pas à pas
Le formulaire
Il faut bien respecter la casse indiquée ici (les majuscules et minuscules)
// attention de bien respecter les écritures ci-dessous
// invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
Autrement dit, il faut que tu mettes :
- Code:
var versionForum = 'phpbb2';
- Code:
var versionForum = 'phpBB2';
ça devrait régler le problème du formulaire
Fiche de badges
Sur ma fiche de badges, les badges non cochés ne se mettent pas en noir et blanc
A mon avis, le problème vient de ta feuille de style css :/ tu pourras la poster complète ici stp ?
Fiche de perso
Je ne peux pas voir le rendu (ça n'est pas accessible aux invités). Tu auras un compte de test ?
je pense que ça doit etre un mini couac de "chemin" d'élement dans la CSS
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 8 Aoû 2019 - 15:16
Le formulaire :
J'ai modifié en phpbb2 mais ça ne marche toujours pas, ça me dit le formulaire a bien été réupéré puis ça passe tout seul à :
![[Aide Anim/codage] Question Feuille de personnage - Page 2 Captur21](https://i.servimg.com/u/f57/11/72/51/74/captur21.png)
Fiche de badge :
Le CSS en question est tout en bas de la feuille de style ^^'
et pour le compte de test, prend celui des jeux de role :
J'ai modifié en phpbb2 mais ça ne marche toujours pas, ça me dit le formulaire a bien été réupéré puis ça passe tout seul à :
Fiche de badge :
Le CSS en question est tout en bas de la feuille de style ^^'
- Code:
bodyline{
border:none;
-moz-box-shadow: 0px 0px 10px #FFFCF0;
box-shadow: 0px 0px 10px #FFFCF0;
-webkit-box-shadow: 0px 0px 10px #FFFCF0;
background-size: 100%;
background-color: transparent;
background-image: url("https://i.servimg.com/u/f62/11/72/51/74/top10.jpg"),url("https://i.servimg.com/u/f57/11/72/51/74/middle10.png");
background-repeat: no-repeat,repeat-y;
background-position: top,top, center,bottom;
position:relative;
top:50px;
}
img#i_logo{
position:relative;
top:100px;
margin-top:100px;
margin-bottom:60px;
padding-bottom:60px;}
/****NAV***/
#navig
{
width: 100%;
margin: auto;
text-align: center;
}
#navigation
{
position: fixed;
z-index: 999;
width: 100%;
height:30px;
background-color: white;
background-image: url("https://i.servimg.com/u/f57/11/72/51/74/middle10.png");
background-repeat:repeat-x;
border-bottom: 2px solid #64D0C7;
margin-top: 0px;
margin-left:-10px;
padding: 7px;
color:#64D0C7;
font-family: Amatic SC,cursive;
font-size:20px;
}
#navig a
{
color:#E96E5C;
font-size:20px;
font-family: amatic SC, cursive;
}
#a {
text-decoration:none;}
.a{
text-decoration:none;}
#bodyline a{
text-decoration:none;}
.bodyline a{
text-decoration:none;}
/************************************************** DÉBUT DES CATÉGORIES **************************************************/
.nomcat h2{
font-size:38px;
color:#F18883;
font-family:Amatic SC, cursive;
background-image: url("#"),url("#");
background-repeat: no-repeat, no-repeat;
background-size:contain;
background-color:rgba(233, 233, 233, 0.6);
background-position: top right, top left;
margin: 5px;
font-weight: lighter;
text-align : center;
border-bottom: double 4px #F18883;
font-variant: small-caps;}
.ligne1{
width:810px;
height:140px;
color:white;
display:flex;
background-color: rgba(40, 40, 40, 0.6);
background-image:linear-gradient(to left,transparent, black);}
.description{
width:375px;
height:135px;
margin:5px;
display: inline-block;
margin-right:175px;
}
.stats1{
display: inline-block;
color:#F5F6CE;
font-family : Cookie;
font-size:23px;}
.titreforum{
font-family:Amatic SC, cursive;
font-weight:lighter;
color: #64D0C7;
font-size:20px;
border-bottom: dashed white 2px;
margin-left:10px;
margin-right:10px;
margin-top:2px;
margin-bottom:0px;}
.titreforum a{
font-family: Amatic SC, cursive;
font-weight:lighter;
color: #64D0C7;
font-size:24px;
text-decoration: none;
}
p.descr{
width:375px;
height:100px;
font-family : Cookie, cursive;
font-size:20px;
margin-left:5px; margin-right:5px; margin-top:3px;
overflow:hidden;
border-bottom: dotted 2px white;
}
p.descr:hover{
overflow:auto;
}
p.descr img {
position: absolute;
margin-top: -35px;
margin-left: 395px;
border: solid 2px white;
border-radius:2px;
}
.listesousfo{
width: 200px;
height:130px;
font-family : Cookie, cursive;
font-size:20px;
margin-left:17px;
color:white;}
.listesousfo a{
width: 200px;
height:125px;
font-family : Cookie, cursive;
font-size:20px;
margin-left:15px;
color:white;}
.ligne2{width:810px;
height:42px;
border-bottom:solid white 2px;
margin-bottom:15px;
font-family:Cookie;
font-size:19px;
color:grey;
display: flex;
background-color: rgba(233,233,233,0.8)}
.stat{
width:460px;
height:65px;
display: inline-block;
margin-left:5px;
text-align: left;}
.stat1{display: inline-block;
margin-left:10px;
margin-right:10px;
border-bottom: solid 4px white;
overflow: hidden;
text-align: center;
margin-bottom:0px;
margin-top:0px;
font-family : Cookie;
font-size:20px;
color:grey;
text-align:left;}
.derniermess{
text-align: left;
margin:0px;
font-family : Cookie;
font-size:20px;
color:grey;
}
.derniermess strong a {
font-size: 20px;
position: absolute;
margin-top: -23px;
margin-left: 90px;}
.ligne2 .stat .derniermess > span > br{
display: none;
}
.ligne2 .stat .derniermess > span > strong a.gensmall {
position: relative;
margin-top: 0;
margin-left: 10px;
}
.avatar{
width: 40px;
height:40px;
margin-right:40px;
margin-left:10px;
border: dotted 2px white;
border-radius:10px;
background-size: contain;
overflow:hidden;
border-radius:100px;
}
.avatar img{
width: 40px;
border-radius:100px;
background-size: contain;}
.imagenew{
position: relative;
top:0px;
width: 165px;
height:40px;
display: inline-block;
margin-left:15px;}
/************************************************** FIN DES CATÉGORIES **************************************************/
/************************************************** QEEL **************************************************/
/* QEEL */
.QEEL {
margin:auto;
width:800px;
height:253px;
background:transparent;
border-bottom: double 2px white;
border-top: double 4px #F18883;
font-family:Cookie;
color:white; /* MODIFIABLE */
}
/* BLOC TITRE QEEL */
.tleQEEL {
padding:10px 10px 10px 0px;
background:transparent;/* MODIFIABLE */
text-align:center;
border-top: double 4px #F18883;
width:800px;
}
/* TITRE QEEL */
.tleQEEL a{
text-transform:uppercase;
font-family: Amatic SC;
font-size:32px;
color:#F18883; /* MODIFIABLE */
font-weight: lighter;
}
/* IMAGE QEEL */
#i_whosonline {
position:absolute;
margin-left:-30px;
margin-top:35px;
width:200px;
height:200px;
border-radius:100px;
box-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
transition-duration: 1s}
#i_whosonline:hover {
position:absolute;
margin-left:-20px;
margin-top:25px;
width:250px;
height:250px;
border-radius:200px;
box-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
transition-duration: 1s;
}
/* STATISTIQUES QEEL */
.stsQEEL {
position:absolute;
margin-left:190px;
margin-top:35px;
margin-bottom:50px;
width:350px;
height:60px;
padding:10px 0;
overflow:hidden;
border-radius:0px;
background-color: rgba(40, 40, 40, 0.6);
color:white; /* MODIFIABLE */
text-align:center;
font-size:20px;
font-family:Cookie;
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
position:absolute;
margin-top:130px;
margin-left:190px;
width:330px;
height:60px;
border-radius:0px; padding:10px; overflow:auto;
background-color: rgba(40, 40, 40, 0.4);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
color:white; /* MODIFIABLE */
font-size:20px;
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
position:absolute;
z-index:2;
margin-top:97px;
margin-left:495px;
width:145px;
height:20px;
padding:10px;
background:#4B606C;
font-family:Arial;
color:white; /* MODIFIABLE */
text-transform:uppercase;
text-align:center;
transform:rotate(-90deg); -webkit-transform:rotate(-90deg);
border-radius:0px;
}
/* CONTENU ANNIVERSAIRES QEEL */
.anvQEEL div {
position:absolute; z-index:3; margin-top:-70px; margin-left:62px;
width:0px; height:145px; padding:10px; overflow:hidden;
background:#4B606C; /* MODIFIABLE */
text-align:justify !important;
opacity:0; transform:rotate(90deg); -webkit-transform:rotate(90deg);
transition:all .45s linear; -webkit-transition:all .45s linear;
}
.anvQEEL:hover div{
margin-top:22px; margin-left:-20px;
width:165px; overflow-y:auto;
opacity:1;
}
.anvQEEL .row1{
background:none !important; padding:0 !important;
}
/* COULEUR TEXTE CONTENU ANNIVERSAIRES QEEL */
.anvQEEL .gensmall {
font-family:Cookie; color:white; text-transform:none; font-size:18px; /* MODIFIABLE */
}
/* 24H QEEL */
.dayQEEL {
position:absolute; margin-left:600px; margin-top:35px;
width:175px; height:155px; padding:5px; overflow:auto;
background:rgba(250,250,250,0.6); /* MODIFIABLE */
border-radius:0px;
}
.dayQEEL .row1 {
background:none; padding:0;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .row1 .gensmall {
font-family:Cookie; color:black; font-size:18px; /* MODIFIABLE */
}
/* BLOC GROUPES QEEL */
.blocGQEEL {
margin:auto; width:800px; padding:5px 0;
text-align:center; color:rgba(0,0,0,0);
background:Transparent;
}
/* GROUPES QEEL */
.blocGQEEL a {
font-size:14px; font-weight: lighter; text-transform:uppercase; font-family: Amatic SC;
}
/************************************************** CHAT BOX **************************************************/
/*CHAT*/
input#message.post{
width:80%;
height:18px;
}
/* Mise en forme de l\'avatar du membre */
#chatbox .cb-avatar {
padding:0!important;
width:40px!important;
height:40px!important;
border-radius:50px!important;
overflow:hidden!important;
box-shadow: none!important;
transform: translateZ(0); /* empeche bug Chrome */
}
#chatbox .cb-avatar > img {
position:relative!important;
top: -10px;
width:50px!important;
height:auto!important;
}
/* Mise en forme de la date */
#chatbox .date-and-time {
display:inline-block;
float:none!important;
margin-left:2px!important;
margin-top:2px!important;
margin-bottom:3px!important;
font-size:11px;
}
/* Mise en forme du pseudo du membre ayant poste */
#chatbox .user { float:left!important; }
#chatbox .user strong {font-size: 0;}
.chatbox-username.chatbox-message-username { font-size: 11px; }
/*********************************infochatbox dans la barre de notif************************************/
#fa_chat_container {
background:#FFF;
border:1px solid #556682;
border-radius:3px;
position:fixed;
right:3px;
z-index:999;
overflow:hidden;
min-width:500px;
min-height:250px;
transition:300ms;
}
#fa_chat {
border:none;
width:100%;
height:100%;
}
#fa_chat_button {
color:#FFF;
line-height:30px;
margin-left:10px;
padding:0 5px;
cursor:pointer;
}
#fa_chat_button.fa_chat_active {
color:#333;
background:#FFF;
}
/*fin*/
/*******************Widget dernier sujet*****************************/
/*********************************************affichage du contenu des message*********************************************/
/*Cadre autour des messages par Alu\' pour Never-Utopia *****************************************************************/
.profilmembre, .infoprofil, .imageavatar {
height: 220px;/*hauteur de l\'avatar*/
width: 160px;/*largeur de l\'avatar*/
}
.rangee .thRight, .nomavatar, .rangee .thLeft, .basviolet .browse-arrows{
font-family: \'Covered By Your Grace\', cursive; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
}
.total{
background-color:transparent;
border: 3px double black;
}
.detailetoption td{ background-color:transparent;}
.basviolet, .postviolet{ background-color:#FEFEF6;}/*couleur de fond des messages*/
.imageavatar{
background-image: url(\'#\');
/*image par-dessus l\'avatar, laisser vide pour l\'enlever*/
position:absolute;
top:0;
left:0;
z-index:3;
}
.infoprofil {
background-image:url("#");
/*image de fond des infos du profil, laisser vide pour l\'enlever*/
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
padding:15px;
font-size: 13px;
color:#9d8ab0;
z-index:0;
overflow: auto;
}
.nomavatar{
background-image:url("https://i.servimg.com/u/f62/11/72/51/74/60722910.png");/*image de fond du pseudo*/
background-repeat:no-repeat;
height:61px;/*largeur de l\'image de fond*/
width: 200px;/*hauteur de l\'image de fond*/
color:#9d8ab0;/*couleur du texte du rang*/
font-size: 18px;
line-height:95%;
text-align:center;
position:relative;
right: 5px;
padding-top:20px;
margin-top: -25px;
z-index: 3;
}
.fondpost{
border: 2px solid #4d4e51;/*bordures fines autour du message*/
border-radius:2px;/*arrondi*/
padding: 15px;
min-height: 325px;
margin: 10px 20px auto 20px;
}
.profilmembre {
border: 3px double #4d4e51;/*bordures autour de l\'avatar*/
position:relative;
left: 10px;
margin: 10px 0;
}
.titresujet{
border: none;
height:50px;
}
.titresujet .t-title .cattitle{
font-size:25px;
font-variant: small-caps;
font-family: \'Covered By Your Grace\', cursive; /*police utilisée*/
}
.titresujet td.catHead,
td.catBottom{
border: 0;
}
.rangee{
background-color:transparent !important; /*couleur de fond de la ligne auteur-message*/
display:block;
margin-top:2px;
}
.rangee .thRight{
color:#161616;/*couleur du texte "message"*/
font-size: 15px;
font-weight:bold;
display:block;
margin-left:255px;
padding-top:7px;
height:19px;
background-image:none;
background-color:transparent;
}
.rangee .thLeft, .basviolet .browse-arrows{
color:#161616;/*couleur du texte "auteur"*/
font-size: 15px;
font-weight:bold;
display:block;
float:left;
width:265px;
padding-top:7px;
height:19px;
background-image:none;
background-color:transparent;
}
.basviolet{
display:block;
border-radius:0 0 2px 2px;
border-top:none;
margin-bottom:2px;
background-color:transparent;
}
.postviolet{
display:block;
}
.reponse-rapide{
margin-top: 20px;
}
.postviolet .post-options{padding-right:30px;}
.avatar img: {width:100%; height: 100%;}/*redimensionne les avatars à la bonne taille*/
.pseudo {display:block;font-size:23px; /*taille du pseudo*/font-variant:small-caps;text-transform:none;}
th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop { border:none;font-weight:normal;}
.profilmembre:hover > .avatars {/*ne pas modifier*/
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
z-index:1;
}
.avatars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:2;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
}
/*Bouton de vote des messages*/
.fa_vote, .fa_voted, .fa_count {
font-size:12px;
font-family:Verdana, Arial, Helvetica, Sans-serif;
display:inline-block !important;
width:auto !important;
float:none !important;
transition:300ms;
}
.fa_voted, .fa_vote:hover { opacity:0.4 }
.fa_voted { cursor:default }
.fa_count {
font-weight:bold;
margin:0 3px;
cursor:default;
}
.fa_positive { color:#4A0 }
.fa_negative { color:#A44 }
.fa_votebar, .fa_votebar_inner {
background:#C44;
height:3px;
}
.fa_votebar_inner {
background:#4A0;
transition:300ms;
}
.fa_reputation a {
float: none;
}
/*fin*/
/************************************************** PRESENTATION LISTE SUJETS ********************************************/
/* Entête & Footer de la liste */
.nouveau_message, .repondre_message {
display: inline-block;
width: 20%;
padding: 1%;
text-align: center;
color:#0775a8!important;
text-transform: uppercase;
margin: 2% 0;
font-family: Amatic SC;
font-size:25px;
}
.nouveau_message {
background-color: transparent;
background-image: url("#")
}
.repondre_message {
background-color: #f7f7f7;
background-image: url("https://www.transparenttextures.com/patterns/french-stucco.png");
margin-left: 2%;
}
.boutons_footer_sujets {
text-align: center;
font-family: Amatic SC;
font-size: 20px;
}
.boutons_surveiller {
background: #e2efe1;
color: #fff;
display: inline-block;
margin: 1%;
line-height: 3;
text-align: center;
text-transform: uppercase;
width: 350px;
}
.boutons_surveiller a {
color: #fff !important;
}
.boutons_surveiller a:hover {
color: #c86855 !important;
}
#moderer a {
display: block;
background: #96aebb;
color: #fff !important;
text-transform: uppercase;
line-height: 4;
width: 250px;
font-size: 11px;
margin: auto;
text-align: center;
}
#moderer {
font-size: 0;
}
/************************************* LISTE DES SUJETS ******************************************/
.listsujet{
border: ridge 5px white;
border-radius: 5px;
background-color: rgba(40, 40, 40, 0.1)
}
.corp_sujet {
margin: 10px auto;
width: 890px;
height: 85px;
}
.vu_rep_sujet {
background-color: transparent /*modifiable*/
color: grey; /*modifiable*/
margin-bottom: 8px;
padding: 2px;
border-bottom : solid white 3px;
border-top: dotted white 2px;
}
.corp_desc_sujet {
display: inline-block;
margin-left: 10px;
width: 573px;
background-color:transparent;
}
.titre_sujet {
background-color: rgba(248, 252, 252, 0.6);
height: 60px;
overflow: hidden;
padding-left: 10px;
padding-top: 5px;
width: 554px;
border: dotted 2px white;
}
.titre_sujet a {
color: #F18883!important; /*modifiable*/
font-family: Cookie; /*modifiable*/
font-size: 20px; /*modifiable*/
padding-left:20px;
}
.titre_sujet a:hover {
color: #52B7FF!important; /*modifiable*/
}
.auteur_sujet {
font-size: 15px;
margin: 5px 10px 0;
text-align: left;
color: #64D0C7; /*modifiable*/
background-color: rgba(248, 252, 252, 0.3);
font-family:Cookie;
}
.auteur_sujet a {
font-size: 18px; /*modifiable*/
}
#auteur_sujet.gensmall a{
font-size: 13px;}
.desc_sujet {
color:#191919; /*modifiable*/
font-size: 15px; /*modifiable*/
}
.corp_stat_sujet {
color: #5D5959; /*modifiable*/
display: inline-block;
font-size: 15px; /*modifiable*/
height: 75px;
overflow: hidden;
text-align: center;
width: 183px;
background-color: transparent; /*modifiable*/
box-shadow: 1px 1px 1px #4C4B4B; /*modifiable*/
font-family: Cookie; /*modifiable*/
}
.stats_sujet {
float:center;
font-size: 18px;
height: 75px;
}
.stats_sujet .gensmall
{ font-size: 18px;}
.avatar_sujet {
float: right;
height: 65px;
overflow: hidden;
width: 50px;
}
.avatar_sujet img {
width: 50px;
height: 65px;
}
.img_old_new_sujet {
display: inline-block;
height: 65px;
width: 65px;
}
.go_to_page_sujet {
float: right;
font-size: 15px; /*modifiable*/
margin-right: 5px;
margin-top: -24px;
text-align: right;
display: inline-block;
font-family: Cookie; /*modifiable*/
}
.go_to_page_sujet a {
font-size: 15px; /*modifiable*/
}
/* image du bouton mentionner */
.sceditor-button-mention div { background-image:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
/* menu déroulant du bouton mentionner */
#fa-mention {
background:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
padding-left:22px;
}
/*fin*/
/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
background: #ddd;
border: 2px solid #666;
border-radius: 20px;
box-sizing: border-box;
margin: 10px auto;
padding: 10px;
text-align: center;
width: 96%;
}
/* Titre "Mes badges" */
#listing-badges h3{
border-bottom: 2px solid #666;
color: #666;
font-size: 18px;
font-weight: bold;
line-height: 25px;
margin-bottom: 5px;
}
#listing-badges label,
#listing-badges input[type="checkbox"]{
display: inline-block;
}
/* On cache les cases à cocher */
.liste-badges #listing-badges input{
display: none;
}
/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
et pour le compte de test, prend celui des jeux de role :
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 8 Aoû 2019 - 15:29
C'est ça qui fait péter ta CSS :
ça met tout le reste en erreur. Remplace ce bout de code par :
et ça devrait rentrer dans l'ordre pour cette partie
------
Pour le formulaire, il faut bien indiquer le lien du message :
http://forumfeminin.forumactif.org/t1032-test-badge#10550
et pas celui du sujet :
http://forumfeminin.forumactif.org/t1032-test-badge
- Code:
.rangee .thRight, .nomavatar, .rangee .thLeft, .basviolet .browse-arrows{
font-family: \'Covered By Your Grace\', cursive; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
}
ça met tout le reste en erreur. Remplace ce bout de code par :
- Code:
.rangee .thRight, .nomavatar, .rangee .thLeft, .basviolet .browse-arrows{
font-family: 'Covered By Your Grace', cursive; /*police utilisée*/
font-variant:small-caps;/*texte en petites majuscules*/
}
et ça devrait rentrer dans l'ordre pour cette partie
------
Pour le formulaire, il faut bien indiquer le lien du message :
http://forumfeminin.forumactif.org/t1032-test-badge#10550
et pas celui du sujet :
http://forumfeminin.forumactif.org/t1032-test-badge
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 8 Aoû 2019 - 16:31
Merci pour le CSS , pour info, comment tu vois qu'un élément met tout le reste en erreur ?
alors, tu vois, je ne savais même pas qu'il y avait une différence :O .
Comment fait tu pour avoir le lien du message ? Car quand je clique sur mon sujet, forcément, j'ai le lien du sujet pas du message
alors, tu vois, je ne savais même pas qu'il y avait une différence :O .
Comment fait tu pour avoir le lien du message ? Car quand je clique sur mon sujet, forcément, j'ai le lien du sujet pas du message
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 8 Aoû 2019 - 17:22
Récupérer le lien du message
Je te copie/colle un tuto que je dois reprendre depuis... Fiou... un moment =)
Pour commencer, nous allons aller dans : Panneau d'administration >> Affichage >> Templates : Général.
Nous allons ouvrir le template viewtopic_body et repérer cette partie :
- Code:
<a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
La partie qui nous intéresse est la suivante :
- Code:
{postrow.displayed.U_POST_ID}
On va utiliser cette information pour ajouter au message une ancre. Pour cela, on va repérer ce bout de code (dans le même template)
- Code:
{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}
- Spoiler:
![[Aide Anim/codage] Question Feuille de personnage - Page 2 LienMsgFA1_zps14169f64](https://2img.net/h/i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/lienMsgFA1_zps14169f64.png)
- Code:
<a href="#{postrow.displayed.U_POST_ID}">{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}</a>
Il ne nous reste plus qu'à sauvegarder et publier le template
A présent, chacun de vos messages aura un lien bien spécifique
---
Miantenant, tu pourras récupérer le lien de chaque message en récupérer l'url ici :
![[Aide Anim/codage] Question Feuille de personnage - Page 2 Captur13](https://servimg.com/r/7120051939/captur13.png)
Pour la CSS
Je l'ai ouverte dans un éditeur de code qui a une coloration syntaxique en fonction du langage.
![[Aide Anim/codage] Question Feuille de personnage - Page 2 Captur14](https://servimg.com/r/7120051939/captur14.png)
Tout en jaune pour de la CSS, c'est pas normal
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Ven 9 Aoû 2019 - 19:19
Ha oui ok pour la CSS, il faut que je prenne le reflexe de verifier de temps en temps ou quand il y a un bug quelques part c'est le risque en utilisant des Libres Services pris à droite à gauche ^^
Pour la récupération du lien, ça fonctionne pareil avec la version ModernBB (j'ai pas encore regardé le template du forum de test ^^) ?
Je me dit que je vais changer la version et le thème avant de lancer tout ça... si j'arrive à finir le design et faire un codage sympa qui bug pas, "toussa toussa"...!
c'est le risque en utilisant des Libres Services pris à droite à gauche ^^Pour la récupération du lien, ça fonctionne pareil avec la version ModernBB (j'ai pas encore regardé le template du forum de test ^^) ?
Je me dit que je vais changer la version et le thème avant de lancer tout ça... si j'arrive à finir le design et faire un codage sympa qui bug pas, "toussa toussa"...!
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Ven 9 Aoû 2019 - 21:20
Pour ModernBB, chaque lien de message a déjà une url ; pas besoin de l'astuce que je t'ai donné plus haut du coup ; c'est déjà en place par défaut
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Lun 19 Aoû 2019 - 15:36
Coucou
Tu en es où du coup avec cette idée ?
Tu en es où du coup avec cette idée ?
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Mar 20 Aoû 2019 - 20:08
Recoucou !
Alors alors
J'attend toujours que ma commande soit réalisé pour avoir les badges et enfin lancer l'animation !
Sinon ça fonctionne ...presque !!Disons qu'on progresse ^^
Pour ce qui est de la mise à jour des badges ça marche : http://forumfeminin.forumactif.org/t1032-test-badge#10550P
Par contre :
1- Les badges (smiley pour le moment) non cochés reste en couleur et ne sont pas en noir et blanc
2 - Quand je veux les mettre sur la feuille de jeux, je met le lien mais ça ne fait pas apparaitre les badges, on voit juste le lien : http://forumfeminin.forumactif.org/u1
Alors alors
J'attend toujours que ma commande soit réalisé pour avoir les badges et enfin lancer l'animation !
Sinon ça fonctionne ...presque !!Disons qu'on progresse ^^
Pour ce qui est de la mise à jour des badges ça marche : http://forumfeminin.forumactif.org/t1032-test-badge#10550P
Par contre :
1- Les badges (smiley pour le moment) non cochés reste en couleur et ne sont pas en noir et blanc
2 - Quand je veux les mettre sur la feuille de jeux, je met le lien mais ça ne fait pas apparaitre les badges, on voit juste le lien : http://forumfeminin.forumactif.org/u1
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Mer 21 Aoû 2019 - 8:23
Coucou
Je ne peux pas voir ta page utilisateur
Tu as un compte de test ou pas ? je peux m'inscrire "temporairement" pour voir ?
Tu saurais me redonner ta CSS stp ?
Je ne peux pas voir ta page utilisateur
Tu as un compte de test ou pas ? je peux m'inscrire "temporairement" pour voir ?
Tu saurais me redonner ta CSS stp ?
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Mer 21 Aoû 2019 - 9:59
Hello !
Pour le compte test, prend celui du "maitre de jeu"
La CSS, c'est tout à la fin du coup
Pour le compte test, prend celui du "maitre de jeu"
La CSS, c'est tout à la fin du coup
- Code:
.headerbar, #headerbar-top.is-sticky,
.forabg, .forumbg,
.module .h3,
.button, .button1, .button2, input[type="submit"], .button-round {
background-color: #e3e2e2;
color:Black;
font: Amatic SC;
font-size: 20px;
}
.headerbar{background-image : url("https://i.servimg.com/u/f57/11/72/51/74/e2809410.png");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 100%; /* Resize the background image to cover the entire container */
background-position-y: 30%;
background-color:transparent;
height : 430px;
}
/**fixe le header**/
#headerbar-top.is-sticky {
background: transparent;
position: relative;
box-shadow: none;
}
.headerbar-top > .wrap:first-child{
padding-top: 27px;
}
.is-sticky #logo {
display: block;
height: auto;
width: auto;
opacity: 1;
transform: inherit;
}
.is-sticky#headerbar-top.w-toolbar {
top: 0;
}
/**/
/**Fixe la barre de nav'**/
ul.navbar.navlinks {
position: fixed;
top: 42px;
left: 0;
width: 100%;
background-color: #EDD293;
font-variant: small-caps;
visibility: visible;
}
ul.navbar.navlinks li {
margin-top: 0;
}
.navbar {
color: #2A120A;
font-size: 12px;
font-family:Roboto; sans serif;
}
.navbar a {
border-radius: 3px;
color: #2A120A;
display: inline-block;
font-size: 14px;
line-height: 1.3846;
padding: 6px;
border-right: dotted 1px #694516;
border-left: dotted 1px #694516;
}
/**/
#tabs::after, .navbar::after, dl.polls::after, fieldset dl::after, ul.linklist::after, ul.topiclist dl::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: visible;
}
#logo{
margin-top:0px;
}
/** Liste des sujets**/
.forumbg .header{
background-image: url("https://i.servimg.com/u/f44/19/68/75/46/choco11.png")
background-color:#FFEFDB;
background-size:100% 57px;
background-repeat:no-repeat;}
li.row {
border-color: ;
border-style: none;
border-width: 0px 0 0;}
/**/
.content h2, .panel h2 {
border-color: #e3e2e2;
color: #e3e2e2;
}
.statistics {
background-color: #EDD293;
}
#page-footer {
background-color: #694516;
}
#page-footer .copyright-body {
border-color: #255227;
}
.module .h3{background:#EDD293; }
/*************CATEGORIES***************/
*{
box-sizing:border-box;
}
.titre_cate{
margin:15px auto 0px;
text-align:center;
border:none;
border-radius :5px 5px 0px 0px;
background:#EDD293;
}
.titre_cate h2{
font-size:30px;
font-variant:small-caps;
padding:10px;margin:0;
font: Amatic SC;
color:#694516;
}
.forums{
display:flex;
box-sizing: border-box;
padding:8px;
margin: 0px;
border: none;
min-height: 100px;
vertical-align: middle;
background:#F0E9D7;
}
.image {
width:10%;
border-right: none;
}
.corps {
width: 60%;
border-right: 4px double #6B390D;
padding:0 10px;
}
.corps .forumlink{
text-align:center;
width:100%;
font-variant:small-caps;
font-size:16px;
padding: 0;
margin: 0;
}
.description{
height: 95px;
box-sizing: border-box;
padding:5px;
background:#F7F2E0;
overflow:auto;
padding:10px 10px 10px 10px;
-moz-box-shadow: 4px 4px 10px #888;
-webkit-box-shadow: 4px 4px 10px #888;
box-shadow:4px 4px 6px #888;
color:#3E464C;
font-size: 1.3rem;
font-family: Roboto, sans-serif;}
.sous_forums {
border-right: 4px double #6B390D;
font-variant: small-caps;
text-align: left;
width: 20%;
font-size: 0;
}
.sous_forums > span {
display: block;
font-size: 11px;
}
.sous_forums a{
display:inline-block;
font-size:14px;
vertical-align: middle;
}
.sous_forums span:before{
content:' ※ ';
font-size:11px;
}
.sous_forums > a + a::before {
display: none;
}
.derniers_messages {
width: 20%;
text-align: center;
padding-left:6px;
}
.lastpost-avatarindex {
float: none;
width: 100%;
height: 40px;
overflow: hidden;
margin-top: 3px;
border: 1px solid black;
border-radius:5px;
padding:0;
}
.lastpost-avatarindex img {
width: 100%;
margin-top: -40%;
height:auto;
}
/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
background: #ddd;
border: 2px solid #666;
border-radius: 20px;
box-sizing: border-box;
margin: 10px auto;
padding: 10px;
text-align: center;
width: 96%;
}
/* Titre "Mes badges" */
#listing-badges h3{
border-bottom: 2px solid #666;
color: #666;
font-size: 18px;
font-weight: bold;
line-height: 25px;
margin-bottom: 5px;
}
#listing-badges label,
#listing-badges input[type="checkbox"]{
display: inline-block;
}
/* On cache les cases à cocher */
.liste-badges #listing-badges input{
display: none;
}
/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
/**QEEL par Cheshire Cat**/
.qeel h1{
margin-top:60px;
margin-bottom:0px;
background-color:#EDD293;
border-radius:5px 5px 0px 0px;
text-align:center;
font-family: 'AMATIC SC', sans-serif;
font-size:35px;
color:#694516;
text-transform:uppercase;
letter-spacing:5px;
}
.qeel h2{
text-align:center;
font-family: 'AMATIC SC', cursive;
font-size:20px;
color:#694516;
}
.qeel .bloc{
font-size:12px;
color:black;
font-family:Arial;
display:block;
overflow:auto;
width:210px;
height:250px;
margin:auto;
text-align:justify;
border-left:2px solid #634344;
border-right:2px solid #634344;
background-color:#F0E9D7;
padding-left:8px;
padding-right:8px;
}
.qeel .membresco24{
margin-left:-5px;
color:#7B4725;
font-size:12px;
font-family:Arial
}
.qeel .legend{
top:5px;
margin-bottom:20px;
margin-left:13px;
margin-right:13px;
padding-top:10px;
padding-left:8px;
padding-right:8px;
border-top:2px solid #634344;
background-color:#F0E9D7;
text-align:center;
}
.qeel .creditqeel{
font-size:11px;
text-align:right;
background-color:#F0E9D7;
width:100%;
}
.qeel .forumline{
background-color:#F0E9D7;}
.qeel .forumline :hover{
background-color:#F0E9D7;}
.qeel table.forumline tr:hover td {
background-color: #F0E9D7;
}
/**Modules**/
.mod-top-row .mod-top-pct{
background: #FEB294;
}
/** Badges**/
/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
background: #ddd;
border: 2px solid #666;
border-radius: 20px;
box-sizing: border-box;
margin: 10px auto;
padding: 10px;
text-align: center;
width: 96%;
}
/* Titre "Mes badges" */
#listing-badges h3{
border-bottom: 2px solid #666;
color: #666;
font-size: 18px;
font-weight: bold;
line-height: 25px;
margin-bottom: 5px;
}
#listing-badges label,
#listing-badges input[type="checkbox"]{
display: inline-block;
}
/* On cache les cases à cocher */
.liste-badges #listing-badges input{
display: none;
}
/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Mer 21 Aoû 2019 - 10:11
Ah oui c'est vrai c'est ce compte pour le test
On va donc remplacer ça :
par ça
Pour cette partie :
ça c'est normal on ne cible pas comme il faut dans la CSS.1- Les badges (smiley pour le moment) non cochés reste en couleur et ne sont pas en noir et blanc
On va donc remplacer ça :
- Code:
/* On cache les cases à cocher */
.liste-badges #listing-badges input{
display: none;
}
/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
par ça
- Code:
/* On cache les cases à cocher */
.liste-badges #listing-badges input,
.postbody .liste-badges #listing-badges input{
display: none;
}
/* Image en noir & blanc */
.liste-badges #listing-badges input + label,
.postbody .liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label,
.postbody .liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
Pour cette partie :
Tu peux me donner le js ?2 - Quand je veux les mettre sur la feuille de jeux, je met le lien mais ça ne fait pas apparaitre les badges, on voit juste le lien :
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Mer 21 Aoû 2019 - 12:41
Toujours pas de noir et blanc ^^' http://forumfeminin.forumactif.org/t1032-test-badge#10550
Je te remet la CSS car j'ai modifié un peu l'allure générale mais ça ne marchait déjà pas avant donc je ne pense pas que ça vienne de la ...
Je t'avoue que des que la CSS se complique un peu et se mêle au javascript je suis paumé, me faudrait une remise à niveau un de ces 4
CSS
Le javascript :
Je te remet la CSS car j'ai modifié un peu l'allure générale mais ça ne marchait déjà pas avant donc je ne pense pas que ça vienne de la ...
Je t'avoue que des que la CSS se complique un peu et se mêle au javascript je suis paumé, me faudrait une remise à niveau un de ces 4
CSS
- Code:
** Badges**/
/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
background: #F0E9D6;
border: 1px solid #666;
border-radius: 5px;
box-sizing: border-box;
margin: 10px auto;
padding: 10px;
text-align: center;
width: 96%;
}
/* Titre "Mes badges" */
#listing-badges h3{
border-bottom: 2px solid #666;
color: #666;
font-size: 18px;
font-weight: bold;
line-height: 25px;
margin-bottom: 5px;
background-color:#EFD485;
font-family:amatic SC;
font-size:25px;
}
#listing-badges label,
#listing-badges input[type="checkbox"]{
display: inline-block;
}
/* On cache les cases à cocher */
.liste-badges #listing-badges input,
.postbody .liste-badges #listing-badges input{
display: none;
}
/* Image en noir & blanc */
.liste-badges #listing-badges input + label,
.postbody .liste-badges #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label,
.postbody .liste-badges #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
Le javascript :
- Code:
;$(function(){
// On indique la couleur du champs qui contient l'url vers le message
var couleur = "#800D58";
// on indique la version du forum
// attention de bien respecter les écritures ci-dessous
// invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
var versionForum = 'modernbb';
var fiche,
parents,
contentMsg,
cibleIdMsg,
versionSpe = false;
switch (versionForum) {
case 'phpbb2':
fiche = "#profile-advanced-details .row1 > table td[nowrap='nowrap'] > span.gen";
parents = ".row1";
contentMsg = ".postbody > div:first-child";
cibleIdMsg ='#p';
versionSpe = true;
break;
case 'phpbb3':
fiche = ".column1";
parents = ".details";
contentMsg = ".postbody > .content > div";
cibleIdMsg ='#p';
break;
case 'punbb':
fiche = ".frm-set.left.rpg";
parents = "dl";
contentMsg = "+ .postbody > .post-entry > .entry-content > div > div:first-child";
cibleIdMsg ='#p';
break;
case 'invision':
fiche = ".box-content.profile .ipbform2";
parents = "dl";
contentMsg = ".postbody > .post-entry > div:first-child";
cibleIdMsg ='#p';
break;
case 'awesomebb':
fiche = ".block-dl-default";
parents = ".block-dl-default";
contentMsg = "+ .post-body > .post > .post-content";
cibleIdMsg ='#';
break;
/* modernbb */
default:
fiche = ".column1";
parents = ".details";
contentMsg = ".postbody > .content > .content-msg";
cibleIdMsg ='#p';
break;
}
// si on est sur la fiche de personnage
if( location.href.indexOf('/u') > -1 && location.href.indexOf('rpg') > -1 ){
if(versionSpe){
// Si le forum est en phpbb2
// On récupére l'url du message contenant la liste
var msgFiche = $(fiche).find('.gen[style="color:'+couleur+';"]').parents('tr').find('td + td .gen[style="color:'+couleur+';"]').html();
// On cache le champs qui contient le lien du message de la liste
$(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).hide();
}else{
// Si le forum est dans une autre version que phpbb2
// On récupére l'url du message contenant la liste
var msgFiche = $(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).find('dd .gen').html();
// On cache le champs qui contient le lien du message de la liste
$(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).hide();
}
// On isole le lien du message et l'id du message
var lienMsg = msgFiche.split('#')[0],
idMsg = msgFiche.split('#')[1];
// On ajoute une classe pour pouvoir styliser
$(fiche).find('img[src="https://i.servimg.com/u/f71/20/05/19/39/35343010.png"]').parents(parents).addClass('liste-badges');
// On affiche sa liste
$(fiche).find('img[src="https://i.servimg.com/u/f71/20/05/19/39/35343010.png"]').parents(parents).load(''+ lienMsg +' '+ cibleIdMsg +''+ idMsg +' '+ contentMsg +'');
}
});
- PêpêcheMascotte
- Messages : 4428
Re: [Aide Anim/codage] Question Feuille de personnage
Mer 21 Aoû 2019 - 15:43
Oh je suis bête, voilà la CSS corrigée
Pour le js, on va essayer de le modifier comme ça :
en fait, j'avais ciblé l'onglet RPG, mais il n'y en a plus là
- Code:
** Badges**/
/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
background: #F0E9D6;
border: 1px solid #666;
border-radius: 5px;
box-sizing: border-box;
margin: 10px auto;
padding: 10px;
text-align: center;
width: 96%;
}
/* Titre "Mes badges" */
#listing-badges h3{
border-bottom: 2px solid #666;
color: #666;
font-size: 18px;
font-weight: bold;
line-height: 25px;
margin-bottom: 5px;
background-color:#EFD485;
font-family:amatic SC;
font-size:25px;
}
#listing-badges label,
#listing-badges input[type="checkbox"]{
display: inline-block;
}
/* On cache les cases à cocher */
.liste-badges #listing-badges input,
.postbody #listing-badges input{
display: none;
}
/* Image en noir & blanc */
.liste-badges #listing-badges input + label,
.postbody #listing-badges input + label{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label,
.postbody #listing-badges input[checked="checked"] + label{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
Pour le js, on va essayer de le modifier comme ça :
- Code:
;$(function(){
// On indique la couleur du champs qui contient l'url vers le message
var couleur = "#800D58";
// on indique la version du forum
// attention de bien respecter les écritures ci-dessous
// invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
var versionForum = 'modernbb';
var fiche,
parents,
contentMsg,
cibleIdMsg,
versionSpe = false;
switch (versionForum) {
case 'phpbb2':
fiche = "#profile-advanced-details .row1 > table td[nowrap='nowrap'] > span.gen";
parents = ".row1";
contentMsg = ".postbody > div:first-child";
cibleIdMsg ='#p';
versionSpe = true;
break;
case 'phpbb3':
fiche = ".column1";
parents = ".details";
contentMsg = ".postbody > .content > div";
cibleIdMsg ='#p';
break;
case 'punbb':
fiche = ".frm-set.left.rpg";
parents = "dl";
contentMsg = "+ .postbody > .post-entry > .entry-content > div > div:first-child";
cibleIdMsg ='#p';
break;
case 'invision':
fiche = ".box-content.profile .ipbform2";
parents = "dl";
contentMsg = ".postbody > .post-entry > div:first-child";
cibleIdMsg ='#p';
break;
case 'awesomebb':
fiche = ".block-dl-default";
parents = ".block-dl-default";
contentMsg = "+ .post-body > .post > .post-content";
cibleIdMsg ='#';
break;
/* modernbb */
default:
fiche = ".column1";
parents = ".details";
contentMsg = ".postbody > .content > .content-msg";
cibleIdMsg ='#p';
break;
}
// si on est sur la fiche de personnage
if( location.href.indexOf('/u') > -1){
if(versionSpe){
// Si le forum est en phpbb2
// On récupére l'url du message contenant la liste
var msgFiche = $(fiche).find('.gen[style="color:'+couleur+';"]').parents('tr').find('td + td .gen[style="color:'+couleur+';"]').html();
// On cache le champs qui contient le lien du message de la liste
$(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).hide();
}else{
// Si le forum est dans une autre version que phpbb2
// On récupére l'url du message contenant la liste
var msgFiche = $(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).find('dd .gen').html();
// On cache le champs qui contient le lien du message de la liste
$(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).hide();
}
// On isole le lien du message et l'id du message
var lienMsg = msgFiche.split('#')[0],
idMsg = msgFiche.split('#')[1];
// On ajoute une classe pour pouvoir styliser
$(fiche).find('img[src="https://i.servimg.com/u/f71/20/05/19/39/35343010.png"]').parents(parents).addClass('liste-badges');
// On affiche sa liste
$(fiche).find('img[src="https://i.servimg.com/u/f71/20/05/19/39/35343010.png"]').parents(parents).load(''+ lienMsg +' '+ cibleIdMsg +''+ idMsg +' '+ contentMsg +'');
}
});
en fait, j'avais ciblé l'onglet RPG, mais il n'y en a plus là
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: [Aide Anim/codage] Question Feuille de personnage
Jeu 22 Aoû 2019 - 14:37
Coucou
Pour la CSS c'est bon !!
Par contre pour l'apparition sur le profil toujours pas ^^'
Je met le lien du message dans URL liste badges, quand je vais voir sur mon profil, la ligne URL liste badge disparait mais la ligne Mes badges reste vide
Pour la CSS c'est bon !!
Par contre pour l'apparition sur le profil toujours pas ^^'
Je met le lien du message dans URL liste badges, quand je vais voir sur mon profil, la ligne URL liste badge disparait mais la ligne Mes badges reste vide
Page 2 sur 3 • 1, 2, 3
1, 2, 3 Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|