Vous pouvez poster dans la section entraide pour vos forums sans être inscrit !


 

Partagez | .
 

 Codages de Qui est en ligne pour Lumos

Aller à la page : 1, 2, 3  Suivant
Ludoloveisaavatar Membre
Sam 15 Juin - 19:55   

Coucou ^^

Voici ma commande

Pour le qui est en ligne :

Vue d'ensemble :
Spoiler:
 
Vue après ouverture:
Spoiler:
 

Donc quand on clique sur les groupe je voudrais que les infos du groupe + le nom des membres s'affiche dans la partie info et idem pour les deux petit rectangle en dessous : quand on clique dessus les infos s'affichent dans la partie infos.

http://lumos.harrypotterrpg.fr/

Merci à vous
Mr. Docteuravatar Expert en ForumActif
Sam 15 Juin - 20:02   

Hello Smile!!

Alors j'ai besoin de savoir combien de groupes tu as ?


Cordialement,
Smile
Ludoloveisaavatar Membre
Sam 15 Juin - 20:05   

J'ai dix groupes
Mr. Docteuravatar Expert en ForumActif
Sam 15 Juin - 20:08   

D'accord merci pour l'Info Smile
Ludoloveisaavatar Membre
Sam 15 Juin - 20:10   

De-rien merci à toi
Mr. Docteuravatar Expert en ForumActif
Dim 16 Juin - 5:40   

Bonjour Ludo' Smile!

Bon alors, je boss sur ton QEEL, mais j'aimerais t'apporter quelques précisions pour pas que tu fasse le saut Razz...

Dans ton schéma, tu demande deux portes coulissante qui s'ouvre de chaque coté. Moi je t'en ai fait seulement une qui s'ouvre vers la gauche. Car si je fait comme ton schéma, nous verrons qu'une seul moitié du QEEL à la fois et cela est vraiment poche comme rendu...


La deuxième chose que j'ai fait, c'est ton schéma avec les derniers connectés depuis 24hrs et les anniversaires. Au lieu de les mettre dans un rectangle, je les est mit dans des panneaux coulissants Wink... Tu me dira si c'est ok quand tu verras le résultat Smile...


Cordialement,
Smile
Ludoloveisaavatar Membre
Dim 16 Juin - 8:14   

Oki pas de problème ^^. C'est toi l’expert ^^.

Je suis pressé de voir le résultat
Mr. Docteuravatar Expert en ForumActif
Dim 16 Juin - 8:16   

Tu peux voir les début sur mon forum teste, http://docteur-teste.webservices.tv/

Ne te fit pas au couleur ni au rendu, j'ai pas fini Wink
Ludoloveisaavatar Membre
Dim 16 Juin - 18:58   

Oki ^^
Ludoloveisaavatar Membre
Jeu 20 Juin - 6:47   

Voilà le tutots que j'ai trouvé
Citation :
Ce code est à employer conjointement avec le code CSS ci après. Il peut être "installé" où vous voulez, sur une page HTML, sur votre message d'accueil, dans un message (moyennant compression du code), dans vos templates. A vous de l'adapter à votre usage !

Htlm
Code:
<div class="monBloc">
  <div class="blocVolet"></div>
  Un peu de contenu (caché par le blocVolet (qui peut contenir du texte))
</div>

Citation :
Ce code CSS contient la mise en page "minimale" pour un bloc qui glisse vers la gauche. Pour le personnaliser facilement, utilisez le code LESS donné plus bas.

Pour rappel, pour installer un code CSS sur un forum de ForumActif, rendez vous dans votre panneau d'administration, onglet Affichage, puis dans le menu Couleurs et enfin cliquez sur Feuille de styles CSS.

Css
Code:
/* Bloc principal */
.monBloc {
  position: relative; /* important ! */
  overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
  width: 250px; /* largeur du bloc */
  height: 150px; /* hauteur du bloc */
  background: red; /* couleur de fond */
}

/* Bloc de recouvrement */
.blocVolet {
  position: absolute; /* positionnement absolu (important) */
  top: 0; /* (important) */
  left: 0; /* (important) */
  width: 250px; /* largeur du bloc (identique au bloc principal) */
  height: 150px; /* hauteur du bloc (identique au bloc principal) */
  background: green; /* couleur de fond */
  /* réglage de la transition */
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
  left: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}


Code less

Ce fichier LESS vous permettra de générer le code CSS de base pour un déplacement du volet dans le sens de votre choix : vers le haut, vers le bas, vers la droite, vers la gauche, vers le centre (réduction jusqu'à disparaitre) et en diagonale

Il vous faudra ensuite éditer le CSS généré pour personnaliser votre effet avec les couleurs et la mise en page que vous préférez !

Code:

//========================================================
// VARIABLES (à éditer à votre convenance)
//========================================================

@hauteurBloc:150px; // Hauteur du bloc
@largeurBloc:250px; // Largeur du bloc

// Type de transition lorsque le bloc "de cache" se retire
// valeurs possibles : Gauche, Droite, Haut, Bas, Central ou Diagonale
@deplaceDirection : Gauche;

// Si vous choisissez la direction Diagonale, vous pouvez préciser la direction
// Valeurs possibles : HautGauche, HautDroite, BasDroite et BasGauche
// Même si vous n'utilisez pas la direction Diagonale, laissez une valeur !
@sensDiagonale : HautDroite ;

// =======================================================
// MIXINS (ne pas toucher)
//========================================================

.glisseBloc (@motclef) when (@motclef = Droite) {
  left:@largeurBloc;
}

.glisseBloc (@motclef) when (@motclef = Gauche) {
  left:-@largeurBloc;
}
.glisseBloc (@motclef) when (@motclef = Bas) {
  top:@hauteurBloc;
}

.glisseBloc (@motclef) when (@motclef = Haut) {
  top:-@hauteurBloc;
}

.glisseBloc (@motclef) when (@motclef = Central) {
  .echelle(0);
}

.glisseBloc (@motclef) when (@motclef = Diagonale) {
  .glisseDiagonale (@sensDiagonale);
}

.pointDeDepart () when not (@deplaceDirection = Diagonale) and not (@deplaceDirection = Central ){
  top:0;
  left:0;
}

.pointDeDepart () when (@deplaceDirection = Central) {
  top:0;
  left:0;
  .echelle (1);
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = HautGauche) {
  top:0;
  left:0;
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = HautDroite) {
  top:0;
  right:0;
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = BasGauche) {
  bottom:0;
  left:0;
}

.pointDeDepart () when (@deplaceDirection = Diagonale) and (@sensDiagonale = BasDroite) {
  bottom:0;
  right:0;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = HautGauche) {
  top:-@hauteurBloc;
  left:-@largeurBloc;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = HautDroite) {
  top:-@hauteurBloc;
  right:-@largeurBloc;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = BasGauche) {
  bottom:-@hauteurBloc;
  left:-@largeurBloc;
}

.glisseDiagonale (@motclef) when (@deplaceDirection = Diagonale) and (@motclef = BasDroite) {
  bottom:-@hauteurBloc;
  right:-@largeurBloc;
}



.transition (@string) {
  -webkit-transition: @string;
      -moz-transition: @string;
      -ms-transition: @string;
        -o-transition: @string;
          transition: @string;
}

.echelle (@valeur) {
  -webkit-transform: scale(@valeur, @valeur);
  -moz-transform: scale(@valeur, @valeur);
  -o-transform: scale(@valeur, @valeur);
  -ms-transform: scale(@valeur, @valeur);
  transform: scale(@valeur, @valeur);
}

//==========================================================
// LESS CODE
//==========================================================

/* Bloc principal */
.monBloc {
  position:relative;
  overflow:hidden;
  width:@largeurBloc;
  height:@hauteurBloc;
  background:red;
}

/* Bloc de recouvrement */
.blocVolet {
  position:absolute;
  width:@largeurBloc;
  height:@hauteurBloc;
  .pointDeDepart ();
  .transition (all 1s linear);
  background:green;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
  .glisseBloc (@deplaceDirection);
}

Voici le tutos pour les code Less

Spoiler:
 

Sa vous parlera mieux à vous qu'a moi ^^
Mr. Docteuravatar Expert en ForumActif
Jeu 20 Juin - 15:35   

Merci Ludo' Very Happy!

Ça va aller mieux pour régler le problème de la porte Smile
Ludoloveisaavatar Membre
Jeu 20 Juin - 16:53   

Lol mais de-rien mdr
Mr. Docteuravatar Expert en ForumActif
Dim 23 Juin - 15:57   

Hello Smile... Ne t'inquiète pas, je ne t'oubli pas !
Ludoloveisaavatar Membre
Dim 23 Juin - 16:13   

Ok merci
SkySkyavatar Modérateur
Ven 28 Juin - 18:23   

Doc,

tu veux que je m'en charge ?
Comme ca on cloture au plus vite
Mr. Docteuravatar Expert en ForumActif
Ven 28 Juin - 20:56   

Oui s'il te plait Smile!!

Dans ces temps, j'ai vraiment pas de temps Smile
SkySkyavatar Modérateur
Sam 29 Juin - 1:39   

Bonjour ludo,

Puis je avoir le nom de chaque groupe et la description ?
Ludoloveisaavatar Membre
Sam 29 Juin - 4:25   

Ok :
Spoiler:
 
SkySkyavatar Modérateur
Sam 29 Juin - 4:35   

Oki

j'ai commencé :
http://skysky.forumactif.com/
C'est pas fini mais au moins tu vois comment ca évolue
Ludoloveisaavatar Membre
Sam 29 Juin - 8:27   

Oki
SkySkyavatar Modérateur
Sam 29 Juin - 17:07   

Re,

Voila j'ai modifié ...
il faut cliquer sur les onglets pour que la description apparaisse

tu en pense quoi ?
Ludoloveisaavatar Membre
Sam 29 Juin - 17:11   

Pour le moment sa va ^^. Mais il y a plus les nom des groupes c'est normal? ^^
SkySkyavatar Modérateur
Sam 29 Juin - 17:13   

oui c'est normal avant c'était un système d'onglet qui affiche au survol mais ca n'allait pas comme je voulais
donc j'ai mis un système d'onglets sur clic

je vais ajouter les nom et les description
Ludoloveisaavatar Membre
Sam 29 Juin - 17:14   

oki lol et pour le panneau coulissant sa pose toujours problème?
SkySkyavatar Modérateur
Sam 29 Juin - 17:21   

Je terminerais par ca
Contenu sponsorisé
   

Page 1 sur 3Aller à la page : 1, 2, 3  Suivant

 Sujets similaires

-
» Faire un retour à la ligne pour séparer les sous-forums
» Comment insérer une ligne pour séparer les réponses ?
» Astuce Modifier le "Qui est en ligne" pour les forums en Invision
» Changer la position du bandeau "en ligne" pour PUNBB
» rendre invisible "qui est en ligne" pour les invités

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le forum d'entraide de Mr. Docteur :: Libre service & commandes :: Codage :: Commandes-