AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


208 résultats trouvés pour html

Manumanu

Choix de background pour vos utilisateurs - Dim 17 Aoû 2014 - 3:34


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Salut à tous,

Je viens de me fendre d'un petit plugin permettant de proposer à vos membres le choix d'une image de fond, sur l'élément que vous voulez (que ça soit votre en-tête, le fond de votre chatbox, le fond du forum, etc.). Le choix est ensuite sauvegardé, et l'utilisateur retrouvera ce fond à chaque page visitée, y compris après fermeture du navigateur.

Le projet sur GitHub - Exemple en live sur CodePen

1. Préparer le html
La première chose, c'est de créer un sélecteur. Si vous n'êtes pas familier avec les éléments de formulaire en html, vous pouvez vous référer au chapitre "les listes déroulantes" sur OpenClassrooms.

Il va donc falloir ajouter un bout de code dans votre template. À vous de voir où vous souhaitez le mettre. Par défaut, je vous suggère de lui trouver une place dans le template overall_header, après <body>. Pour cela, allez dans votre interface d'administration, puis "Affichage" → "Templates" → "Général". Après toute modification, pensez à appliquer celles-ci (bouton "+" vert une fois que vous aurez sauvegardé, dans la liste des templates).

Voilà un exemple du code à mettre :
Code:
<select id="change-background" class="select">
   <option value="image1" data-image="http://adresseimage1.jpg">Image 1</option>
   <option value="image2" data-image="http://adresseimage1.jpg">Image 2</option>
   <option value="image3" data-image="http://adresseimage1.jpg">Image 3</option>
   <option value="image4" data-image="http://adresseimage1.jpg">Image 4</option>
</select>



  • value="" est un identifiant pour l'élément sélectionné dans la liste. Veillez à ce que chaque valeur soit unique !
  • data-image="" doit contenir l'url (adresse) de votre image. Elle peut être hébergée n'importe où.


Sur la balise <select>, l'ID peut être modifié selon votre envie, mais attention à bien reporter la modification dans le Javascript par la suite. La classe ne sert qu'à styliser votre élément en CSS, vous pouvez choisir ce que vous voulez.


À vous, par la suite, d'appliquer du CSS pour améliorer le rendu du sélecteur, modifier sa position, etc.

2. Préparer le JS
Vient ensuite le moment d'ajouter le plugin à vos scripts. Pour ça, vous avez deux solutions :

La première, c'est d'ajouter un nouveau script directement dans l'administration de votre forum. Pour ça, rendez-vous sur "Modules" → "HTML & Javascript" → "Gestion des codes Javascript". Enfin, cliquez sur "Créer un nouveau Javascript".

Là, vous allez devoir remplir quelques champs. Indiquez un titre, cochez "toutes les pages", et dans le dernier champ, on écrira le code indiqué plus loin.

Tag html sur Never Utopia - graphisme, codage et game design - Page 6 Capture-d-cran-20...03.12.11-472ae0c

La seconde méthode, c'est d'ajouter le script directement dans votre html ; vous pouvez faire ça dans votre template overall_header, JUSTE AVANT la ligne </head> (et non <head> !), ou bien dans overall_footer_end, JUSTE AVANT la ligne </body>.

Dans un cas comme dans l'autre, voici comment ajouter le code :

Code:
<script type="text/javascript">
   /* ici le contenu du script que l'on verra plus loin */
</script>


Maintenant que tout ceci est prêt, voilà le code en question (en deux parties distinctes). D'abord, le plugin en lui-même (minifié et compressé pour un gain de place / poids) :

Code:
(function(e,t){e.fn.changeBackground=function(t){t=e.extend({target:"body"},t);this.each(function(){function a(e){r.css({"background-image":'url("'+e+'")'})}function f(){n.val(localStorage[s])}var n=e(this),r=e(t.target),i="fondForum:"+window.location.host+"Img",s="fondForum:"+window.location.host+"Select",o,u;if(localStorage[i]){a(localStorage[i]);f()}n.on("change",function(){u=n.find(":selected").data("image");o=n.val();a(u);localStorage.setItem(i,u);localStorage.setItem(s,o)})});return this}})(jQuery);


Vous pouvez le copier-coller directement aux emplacements présentés plus tôt.

Ensuite, il faut instancier le plugin sur le sélecteur html. Pour ça, on ajoute ceci juste après le code qu'on vient de copier :

Code:
$(document).ready(function() {
   $('#change-background').changeBackground();
});


La première ligne sert à attendre que jQuery (et la page en elle-même) ait fini de charger. La seconde, c'est celle qui nous intéresse.

On y appelle le plugin sur notre élément (le sélecteur). Remarquez (si vous n'êtes pas familier avec le jQuery) que la syntaxe est la même que pour le CSS. Ainsi, on avait défini un attribut id="change-background" sur notre élément html, on l'appelle donc avec le croisillon (non, ce n'est pas une dièse). Si vous changez votre ID dans le html, vous devez le changer ici aussi.


Ensuite, enregistrez votre code. Le voici fonctionnel.

3. Les options
En l'état, le plugin fonctionne par défaut sur l'élément body (le fond de la page). Vous pouvez ajuster ce point en modifiant l'instanciation du plugin (voir juste au-dessus).

Code:

$(document).ready(function() {
   $('#change-background').changeBackground({
      target: '.monElement'
   });
});


La syntaxe change légèrement : On passe une option au plugin. Ici, l'élément important est '.monElement'. C'est une syntaxe CSS classique, à vous d'écrire le sélecteur CSS qui convient pour cibler l'élément sur lequel vous souhaitez agir, en lieu et place du body.


4. Multiple
Vous pouvez avoir plusieurs sélecteurs. Il faut que ceux-ci aient un ID différent dans le html. Ensuite, il suffit de les instancier chacun à leur tour :

Code:
$(document).ready(function() {
   $('#change-background').changeBackground();
   $('#autre-element').changeBackground();
});


Conclusion
Je ne cache rien, vous pouvez prendre tout ça en l'état. N'hésitez pas à poser des questions si besoin. Il est possible que le plugin évolue avec le temps et propose de nouvelles options et d'autres fonctionnalités, ou bien qu'il soit simplement amélioré ; auquel cas, ce sera signalé ici. Il vous suffira de copier/coller le nouveau code pour le remplacer.

A-Lice

L'été sera chaud ~ - Ven 15 Aoû 2014 - 19:42



L'été sera chaud ~


Voici un ensemble de fiche pour faire venir l'été x).

Je précise que l'arrière plan vert correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :

HTML :
Code:
<br/><link href='http://fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css' /><div style="width:600px; background:#2ABECE; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); margin:auto; color:#EFF3E0;"><div style="padding:10px; background:#EFF3E0; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg);"><div style="font-size:25px; text-align:center; padding:10px; color:#BD8594; font-family: 'Aladin', cursive;">Titre RP</div>
<div style="display:inline-block; width:400px; height:140px; background:#FC605C; margin-left:15px; margin-right:15px; float:right;"><div style="float:left; width:5px; font-size:17px; text-align:right; word-break:break-all; line-height:15px; padding:10px; font-variant:small-caps; font-family: 'Aladin', cursive;">Prénom</div> <div style="padding:10px; text-align:justify; height:120px; overflow:auto;">[b]Description de ce qu'il s'est passé jusqu'à présent ~ [/b]

</div></div>
<div style="width:100px; height:100px; overflow:hidden; z-index:10; position:relative; margin-left:15px;"><img src="http://img11.hostingpics.net/pics/355723icon100100.png" /></div><div style="width:100px; height:100px; background:#2ABECE; -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); margin-top:-100px; margin-left:15px;"></div>

<a href="http://www.never-utopia.com/" style="text-decoration:none; display:block; text-align:center; color:#2ABECE;">© A-Lice | Never-Utopia</a></div></div><br/>


La suite de l'ensemble se trouve ici :


Présentation
Règlement - Contexte
En-tête RP
Contenu RP
Relations

/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

En rouge et noir - Mer 13 Aoû 2014 - 22:36




En rouge et noir


Voici le fruit d'une collaboration avec Dakota (:

Je précise que l'arrière plan vert correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :
Code:
<!Doctype><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' /></head><body>
  <div style="width:565px; height:1009px; background:url(http://i39.servimg.com/u/f39/18/91/99/24/fond_f11.jpg); margin:auto; color:silver;"><img src="http://i39.servimg.com/u/f39/18/91/99/24/fiche_12.jpg" alt="" style="width:565px; height:169px;" /><br/>
    <span style="display:block; font-size:22px; text-transform:uppercase; font-family: 'Francois One', sans-serif; padding:3px; letter-spacing:-1px; margin-top:5px; text-align:center;">- <span style="color:firebrick;">Nom du forum</span> - Genre - <span style="color:firebrick;">Nom du forum</span> - Genre -</span><br/>
    <span style="display:block; text-indent:40px; position:relative; top:30px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">Le forum en quelques mots</span><br/>
    <div style="margin-left:15px; width:350px; height:150px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:left;">Blabla est un forum de blabla</div> <br/>
    <span style="font-size:25px; text-align:center; line-height:25px; display:block; height:140px; overflow:auto; font-family: 'Francois One', sans-serif;">
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a></span><br/>
    <span style="display:block; text-indent:85px; position:relative; top:30px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">Le contexte</span><br/>
    <div style="margin-right:15px; width:470px; height:130px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:right;">C'est l'histoire de blabla</div><br/>
    <div style="margin-left:15px; float:left; margin-top:75px; width:150px;">
      <span style="font-size:25px; color:firebrick; text-align:center; display:block; font-family: 'Francois One', sans-serif;">Stats</span><br/>
      • XX membres<br/>
      • XX messages<br/>
      • Ouvert le XX<br/></div><br/>
    <span style="display:block; text-indent:45px; position:relative; top:45px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">La vie du forum</span><br/>
    <div style="margin-right:15px; margin-top:15px; width:350px; height:150px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:right;">Actuellement sur  blabla il se passe</div><br/><br/>
    <div style="height:70px; overflow:hidden; clear:both; position:relative; top:65px;">
      <a href="LIEN DU FORUM" style="font-size:25px; text-decoration:none; color:firebrick; font-family: 'Francois One', sans-serif; position:relative; right:20px; left:200px;">Rejoignez-nous !</a>
      <img src="http://img4.hostingpics.net/pics/960813bouton.png" style="border-radius:15px; margin-right:15px; float:right;" /><br/>
    <a href="http://www.never-utopia.com/" style="text-decoration:none; color:white; margin-left:15px; position:relative; top:8px; font-size:13px;">© Fiche par Dakota et A-Lice sur Never-Utopia</a></div>
</div></body></html>


Un petit commentaire (un avis ?) suffit pour voir le code.

Précisions : - Cette fiche a été codé pour être mise dans une page HTML (Panneau d'administration -> Modules -> HTML & JAVASCRIPT -> Gestion des pages HTML -> Création en mode avancé (HTML)

- Il est donc préférable de la distribuer avec ce code :
Code:
<center><iframe src="ICI LE LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="565px" height="1039px"></iframe></center>


/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

Bandeau de navigation vertical - Jeu 31 Juil 2014 - 14:45




Bandeau de navigation vertical


Suite à une demande de Narakye voici un bandeau de navigation vertical collé sur la droite.

Je précise que l'arrière plan rose et jaune correspond à mon forum.

HTML & CSS ~ Voici donc un aperçu : www


Et le code :
HTML :
Code:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Indie+Flower|Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css' />
<div class="bandeau_fond"><span class="bandeau_titre" style="margin-top:30px; font-family: 'Great Vibes', cursive; font-size:30px">Bienvenue</span>
<div class="bandeau_image1"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt="" /></div>
<span class="bandeau_titre">Liens utiles</span>
<div class="bandeau_lien"><div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
<div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
<div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
</div>
<span class="bandeau_titre">Les news</span>
<div class="bandeau_news">blablabla
blablablabla
</div>
<span class="bandeau_titre">Interphone</span>
<div class="bandeau_interphone1"><marquee direction="up" scrollamount="2" onMouseOver="this.stop();" onMouseOut="this.start();"><span class="bandeau_interphone2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lectus ultricies nisl vulputate molestie a sed lorem. Nullam consequat pulvinar quam, vel semper orci blandit quis. In id eros massa. Duis eget gravida mi. Aenean pellentesque, purus eget suscipit bibendum, justo lorem fermentum leo.</span></marquee></div>
<span class="bandeau_titre">Nos héros</span>
<div class="bandeau_image2" style="margin-left:30px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><div class="bandeau_image2" style="margin-left:5px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><br />
<a href="http://www.never-utopia.com/" class="ALice_credit">© By A-Lice</a>
</div>


Il faut placer ce dernier dans le template index-body, sur la deuxième ligne juste après ceci :
Code:
{JAVASCRIPT}


CSS :
Code:
.bandeau_fond {
width:175px;
padding:5px;
position:fixed;
background-image:url(http://imagesup.org/images12/1406735258-bordure.png);
height:100%;
right:0px;
top:0px;
z-index:100;
}

.bandeau_titre {
font-size:20px;
color:white;
display:block;
text-indent:45px;
margin-top:10px;
font-family: 'Love Ya Like A Sister', cursive;
}

.bandeau_image1 {
width:135px;
height:92px;
margin-left:30px;
overflow:hidden;
}

.bandeau_lien {
width:135px;
padding:5px;
height:11%;
overflow:hidden;
margin-left:25px;
font-family: 'Indie Flower', cursive;
}

.bandeau_lien_zoom {
font-size:12px;
opacity:0.8;
text-align:center;
}

.bandeau_lien_zoom:hover {
font-size:14px;
opacity:1;
text-align:center;
}

.bandeau_news {
background-color:white;
width:125px;
padding:5px;
height:15%;
margin-left:30px;
font-size:12px;
color:black;
text-align:justify;
overflow:auto;
border-radius:15px;
font-family: 'Indie Flower', cursive;
}

.bandeau_interphone1 {
width:135px;
padding:5px;
height:7%;
overflow:hidden;
margin-left:25px;
}

.bandeau_interphone2 {
text-align:justify;
font-size:12px;
color:black;
display:block;
font-family: 'Indie Flower', cursive;
}

.bandeau_image2 {
display:inline-block;
width:68px;
height:67px;
border-radius:100px;
overflow:hidden;
margin-top:5px;
}

a.ALice_credit {
font-size:12px;
text-decoration:none;
display:block;
text-align:center;
color:white;
margin-top:5px;
}



/!\ En cas de problème, c'est ici que ça ce passe.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Créer des onglets onclick en full CSS3 (ex: fiche de présentation) - Jeu 17 Juil 2014 - 14:58



Onglets en full CSS3



Mais oui je vous bombarde de tutos! Maintenant, un petit tuto qui fait suite à mon tuto sur le slideshow, bien que je vais prendre tous les points dont j'ai parlé dans le tuto des slideshow. Donc pas de panique: je ne vous demande pas d'avoir lu quoi que ce soit avant de lire ce tuto!


Toutes versions ▬ CSS3 & HTML5


Voici une rapide explication de comment le tuto est découpé: tout d'abord, je vais parler du principe général que j'utilise pour faire les onglets, pour vous expliquer rapidement comment ça marche. Ensuite, je passerais par un exemple pour montrer ce qu'on peut faire. Pour ce faire, je vais créer une fiche de présentation, car en effet, contrairement au Javascript qui n'est pas utilisable dans les messages,  le CSS3, lui, l'est! Du coup je découperais la deuxième partie en deux: la première sur le HTML et la seconde sur le CSS!

J'espère que je serais assez claire dans ce tuto, mais en cas de doute, n'hésitez pas à utiliser la section des problèmes en codage!


Le principe général


Comme vous pouvez vous l'imaginer, mon but était ici de créer des ognlets similaires au Javascript, c'est à dire qu'on a pas à chaque fois un "nouveau lien" pour chaque onglet qu'on ouvre, contrairement aux :target. C'est pour ça qu'en écrivant sur le slideshow à l'aide des input et des labels, j'ai vite eu l'idée de l'adapter au principe des onglets.

Le principe est très simple, et pour cela, il faut que je vous explique deux choses: ce qu'est le sélecteur ~ et ce qu'est la pseudo-élément :checked! (Vous retrouverez la même explication dans mon tuto sur le slideshow, mais ici, elle est "en clair" Wink )

Le pseudo-élément :checked
Le pseudo-élément checked est utilisé dans le CSS pour les formulaires, plus particulièrement pour les input de types radios (les petits ronds pour les votes quand vous ne pouvez voter que pour un choix) ou pour les types choix multiples (quand vous pouvez voter pour plusieurs choix). Ici, dans notre tutoriel, nous utiliserons uniquement des input de type radio (car on ne veut qu'un seul onglet à la fois).
En gros, :checked nous permet de voir si un input a été coché ou non. En somme, si nous avons par exemple ceci:
Code:
<input name="fiche" id="physique" type="radio" />

Si dans mon CSS je mets ceci:
Code:
#physique:checked ~ label {
color: white;
}

Cela veut dire que quand physique est coché, alors tout label frère sera blanc.

"Eh!" me direz-vous "mais je sais pas ce que c'est ce  ~ moi!". Bah oui, mais j'y arrive! =P

Cependant, tout ce que vous avez à retenir de :checked, c'est qu'on regarde lequel a été coché (d'input) et on agit en conséquence.


Le sélecteur ~
Ce sélecteur signifie "l'élément frère le plus proche".
Mais qu'est un élément frère? Eh bien ce sont des éléments qui sont "sur la même ligne verticale" ou plutôt, qui ont la même grandeur d'encapsulation. Cependant, même comme ça, ça ne doit pas vous dire grand chose, alors voici des exemples:

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément fils de un.
Code:
<div id="un">
</div>
<div id="deux">
</div>

Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!
Il est à noter que seul les deux éléments qui entourent le ~ doivent être des frères! On peut bien sûr faire appel à d'autres classes avant pour l'élément à gauche du sélecteur (par exemple si on veut sélectionner une class mais à un endroit spécifique du code, par exemple dans un id spécifique) ou alors plus bas dans la hiérarchie pour celui à droite du sélecteur. Par exemple .hallow #machin p .important ~.livres #chouette marche, tanr que .important (qui est le fils d'un p qui lui-même est le fils de #machin, qui lui-même est le fils de .hallow) est frère de .livres, le code va marcher, et effectivement s'exécuter sur #chouette qui se trouve dans .livres!


Et voilà, maintenant que vous connaissez ces deux petites choses, on peut commencer avec les choses sérieuses!
Tout d'abord, commençons donc avec une div tout simple, qui va entourer tout notre système d'onglets. C'est important, car cela nous permettra de facilement appeler par le CSS les input, si on ne veut pas mettre une class.
Ensuite, nous allons créer autant de input que nous voulons d'onglet, en leur donnant à chacun un id particulier. Je rappelle qu'un id est UNIQUE, donc ne doit pas se trouver ailleurs sur la page!
Pour vous donner un exemple, j'utilise déjà la fiche de présentation que je vais faire plus tard. Pour elle, j'ai cinq onglets, donc cinq input! Ils seront tous de type radio, et auront le même nom: la seule chose qui les différencie est l'id.

Code:
<div class="fiche"><!-- Ceci est donc la div qui va contenir l'ensemble du système d'onglets. -->
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
</div>



Maintenant: tout ce que vous ajoutez, mais surtout tout ce que vous voulez pouvoir change au click sur l'onglet doit se trouver en dessous des input. En effet, grâce au sélecteur que nous avons vu plus tôt, nous pourrons facilement choisir tout et n'importe quoi qui se trouve à la SUITE des input.
Du coup, je vous conseille toujours mettre les input tout en haut de votre conteneur principal d'onglets, le reste, même s'il ne change pas au gré des onglets, pourra être après: ça ne rajoute pas des lignes de CSS, ce n'est pas plus difficile, etc.

Bref, maintenant que nous avons nos input, nous devrions ajouter nos label. Les labels, ce sont les "boutons" qui vont nous permettre d'aller à un onglet à un autre. En effet, lorsqu'un label qui correspond à un input, est cliqué, eh bien c'est comme si on avait coché l'input correspondant. Cela vous rappelle quelque chose? Eh bien oui! C'est ce qui va nous permettre "d’appeler" le :checked dans le CSS!
Pour faire correspondre un lable à n input, il suffit de mettre dans l'attribut "for" du label, l'id de l'input correspondant.
Cependant, pour la pratique, vous devriez mettre tous les labels dans une seule et meme div d'une certaine classe, notamment si vous voulez leur donner à tous ne même allure lorsqu'ils sont actif, non actifs ou au passage de la souris!

Donc niveau code, on aurait ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
</div>


Vous voyez également que je leur ai donné à chacun deux classes (mettre class="lab hist" par exemple, signifie que l'élément est à la fois de la classe lab ET de la classe hist).

Maintenant, il vous suffit de placer tout ce que vous voulez dans vos onglets avant ou même après les label mais toujours après les input. Je vous conseillerais cependant de toujours mettre un div conteneur de tout les trucs changeant dans vos onglets pur facilement leur donner des position, ou des changements globaux, comme la taille, etc.
Pour mon code futur, j'aurais quelque chose comme ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="images"><!--  Ici des images qui changeront à chaque onglet --></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="contenu_onglet"><!--  Ici des div contenant mes contenus (description physique, infos, etc) --></div>
</div>



Maintenant, parlons rapidement du CSS.
Tout d'abord, il faut savoir que les inut ne nous sont utiles à rien "visuellement" parlant. C'est pru cela que la première chose qu'on va faire, c'est de les "cacher" à l'aide d'un display. Cependant, attention de ne pas le faire sur les input seul, mais uniquement sur les input de votre fiche, ou sinon, vous serez incapable de créer des sujets ou envoyer des messages, vu que les boutons envoyer, prévisualiser et les titres sont TOUS des input.
Donc pour l'instant on a ça:

Code:
.fiche input {
  display: none;
}



Maintenant, pour ce qui est de l'effet lors du click du bouton de l'onglet, c'est ici qu'on va utiliser le sélecteur ~ tout comme :checked. Prenons par exemple, si je veux modifier le label "Infos" quand je clique dessus, pour bien indiquer que c'est sur CE label que je suis (comme l'onglet actif en Javascript) il me suffit d'écrir:

Code:
#informations:checked ~ .boutons .lab.infos { color: red; }


Ici, je dis: lorsque l'élément à id informations et coché (checked) alors le plus proche frère de classe boutons, verra son fils de classe lab ET infos modifié ainsi: sa couleur deviendra rouge.

C'est le même principe avec tout! Imaginons que j'ai une image de class="imag infos" que je veux aussi modifier lorsque #informations:checked, alors j'écris:

Code:
#informations:checked ~ .images .imag.infos { opacity: 1; }



Bien sûr, il faudrait de façon optimale qu'à la "base", c'est à dire que quand le label est non-coché, l'élément qui sera modifié (dans nos deux exemples le label d'informations puis l'image d'informations) ait une autre allure, et si possible, tous la même.  On pourrait par exemple penser à une opacité à 0 pour toutes les images quand l'input correspondant n'est pas coché, ou un display: none pour le contenu des onglets. C'est pour cela que les "double classes" sont utiles: dans mon exemple, j'aurais toutes les images qui seront de classe imag, et chacune des images aura une classe supplémentaire différente: infos, phys, car, hist et ecr. Cela me permettra donc de donner une allure générale à toutes mes images en mettant un:

Code:
.fiche .images .imag {
  opacity: 0;
  transition: all ease 1s;
]


Qui me permet de toutes les rendre invisibles, et le code plus haut me permet de les rendre visible seulement quand le on input est coché.

J'espère donc que tout ceci est assez claire: c'est vraiment la base de ce qu'il faut savoir, et si vous avez compris, l'exemple à la suite ne vous sera pas nécessaire. Cependant, si vous n'avez pas très bien compris, j'espère que l'exemple qui va suivre sera assez compréhensible pour que vous puissiez faire par vous même par la suite!


Exemple: faire une fiche de présentation


Pour cette exemple voilà ce que je vais vous montrer comment faire. Comme vous pouvez le voir, les labels sont donc les différentes parties usuelles d'une présentation (Infos, Physique, Caractère, Histoire et Derrière l'écran) et autant le texte interne que l'image du haut change.
Si vous avez bien lu ce qu'il y a plus haut, vous pouvez vous imaginer plus ou moins comment j'ai fait tout ça mais malgré tout, je vais vous expliquer pas à pas!

Le HTML


Rappelez-vous plus haut, j'ai dit que ma base était ceci:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>

J'ai juste renommé contenu_onglets par interne.

Vu que je veux en faire une fiche de présentation, je vais tout de suite ajouter deux choses: le Nom et Prénom et une petite citation:

Code:
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>


Ce qui donne, sachant que je veux mettre le nom sous l'image et qui "empiète" sur l'image:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>



Maintenant, il est temps de rajouter les images. Je vais créer des div avec deux classes, comme expliqué plus haut: la class imag pour chacune d'entre elle, et leur classe qui leur est "propre" qui va me permettre de la changer au gré de boutons.

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>


Vous remarquerez que j'ai mit tout de suite dans la balise style l'image de fond. De cette façon, les membres pourront changer les images comme bon leur semble. C'est aussi la raison pour laquelle j'ai mit des balises div et non pas des balises img, car on ne sait jamais la taille des images que vont nous donner les membres. Je redimensionne ici la largeur automatiquement dans le CSS, mais je déteste donner une hauteur et une largeur fixe, qui déformerait alors les images. Je préfère donc mettre une div. C'est donc une préférence personnelle: vous n'êtes pas obligés de faire comme moi.

Maintenant, rajoutons les div qui contiendront nos descriptions physique, mental, l'histoire et les infos (tant RP que joueur). Ce sera le même principe que celui des images: je donne une classe générale à tous mes contenus qui s'appelle justement contenu et une class qui leur est spécifique. Vu que je n'utilise jamais les classes spécifiques aux images ou au contenu seules pour quoi que ce soit, et que j'écris toujours dans CSS leur deux classes (donc par exemple .imag.infos ou .contenu.info et jamais .infos seul) j'ai mit la même classe "spécifique" tant à l'image qu'au contenu correspondant.
J'ai le droit de le faire: une classe n'est pas un id, et donc, n'a pas à être unique! Cependant, faites bien attention de ne PAS spécifier dans le CSS de choses pour els classes communes à des choses qui n'ont rien à voir, mais bien d'utiliser les deux classes qui les décrivent!

Quoiqu'il en soit, voilà tout le HTML maintenant que j'ai ajouté le contenu de chaque onglet:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nome</h1>
<div class="citation">« Une toute petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"><div class="contenu infos">Hello, mon nom c'est [b]Mushu[/b] et je suis la [strike]mascotte[/strike] l'esprit animal de la famille Fa. En gros [b]je suis un peu pauvre[/b] parce qu'on m'oblige à m'occuper des vieux esprits de la famille Fa et c'est hyper chiant. Sinon [b]je suis vraiment très vieux[/b], mais genre, super vieux. Et [b]j'adore les pancakes, Mulan et les blagues pas drôles[/b] et je déteste [b]ce satané [strike]Cricket[/strike], les Huns et le faite que je sois si petit[/b].
Sinon [b]j'ai comme signe particulier le faite que je sois un dragon orange et très petit[/b]. Mon plus grand secret [b]ne vous regarde pas[/b]!</div>
<div class="contenu phys">Ici la description physique. </div>
<div class="contenu car">Ici la description du caractère</div>
<div class="contenu hist"> Ici l'histoire</div>
<div class="contenu ecr">Ici les informations joueurs</div></div>
</div>


Il est à noter que j'ai également deux link de polices de Google Fonts qui sont ajoutées à ma présentation, mais vus devriez les mettre dans votre overall_header. Ces deux polices sont Abel et Lobster.


Le CSS


Maintenant, il est temps de passer au CSS de ma fiche!

Tout d'abord, on va mette en forme la fiche de façon tout à fait normale. Du coup, ça ne tient que du CSS dont vous avez l'habitude et de mettre la fiche en forme comme on veut.

Tout d'abord, on va cacher les input en haut de fiche. On ne veut pas qu'ils apparaissent, parce qu'ils sont un peu moche, mais aussi et surtout parce qu'ils ne sont pas utiles. On  a donc ceci:

Code:
/* On cache les input */
.fiche > input { display: none; }



Ensuite, je crée la fiche. Bords arrondis, un fond, une taille, je la centre. Rien de bien compliqué.

Code:
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}



Maintenant, je vais aussi mettre en forme tous els "invariants" de la fiche. C'est à dire, tout ce qui ne va pas changer au gré des onglets. Pour moi, c'est le titre et la citation. Je les mets donc en forme:

Code:
/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}




Maintenant, on a les labels (qui sont donc nos titre des onglets), ainsi que le contenu à mettre en forme. Là, ça devient un peu plus corsé, parce qu'on veut que ça change.
Cependant, ce n'est pas si compliqué que cela. En effet, on va mettre en forme simplement comme s'il n'y avait pas d'onglets. Donc on va simplement mettre en forme les différents éléments, comme si on faisait une fiche normale.

Je commence par les images. Je vais donc leur donner des tailles (vu qu'elles sont dans des div), ainsi que de mettre une taille pour l'image de fond. Je les place alors toutes au bon endroit.

Petite subtilité ici: j'ai le conteneur "images" que je emts en relative, simplement parce que je veux créer un effet d'apparition en fondu pour les onglets. Du coup, il faut que toutes mes images ("imag") à l'intérieur aient une position absolue et se trouve au même endroit.

Pourquoi? Eh bien tout simplement parce que je devrais ensuite les mettre en opacité 0, mais que cela ne va pas les "effacer". C'est à dire qu'elles feront toujours la même taille, et donc, resteront à la même "place".
Si vous voulez éviter ceci, et que vous ne souhaitez pas forcément d'effet de fondu, vous pouvez tout simplement utiliser à la place de mes opacity et visibility, un display: none; puis un display: block; pour refaire apparaître.

Notez que cela sera pareil pour mes contenus plus bas.


Je mets également tout de suite l'opacité à 0 et la visibilité à invisible. En effet, je ne veux faire apparaître mes images que lorsque le bon onglet est sélectionné. Cependant, si vous voulez voir le résultat pour votre fiche avant d'avoir activé les onglets, juste pour voir à quoi ça ressemble, vous pouvez effacer ces deux lignes.

Code:
/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Mettons également les lables, ou les titres d'onglets, en forme. Ici, on les met en forme quand les onglets sont non-sélectionnés, mais aussi lorsqu'on passe la souris sur eux. Je mets également le cursor: pointer;  pour que l'on voie que le label est cliquable, et représente donc un onglet.
Avec l'aide de mon conteneur "boutons" je vais aussi faire en sorte que les labels soient bien centrés.

Code:
/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}



À présent, je vais mettre en place et en forme la partie de la contenue de ma fiche. Tout d'abord, vu que je veux un effet d'apparition en fondu, je dois donner une hauteur à mon contenuer "interne" et le mettre en position relative. Les "contenu" devront également avoir une hauteur prédéfinie et un overflow: auto; pour que le texte ne dépasse pas. Comme pour les images, je les mets tout de suite l'opacité à 0 et la visibilité à invisible, vu que je ne veux faire apparaître mon contenu que lorsque le bon onglet est sélectionné.

Si vous n'aimez pas les barres de navigation/scroll pour les longs contenus, vous pouvez très bien supprimer le positionnement absolu des "contenu" et plutôt que d'utiliser opacity: 0; et visibility: hidden;, vous pouvez utiliser display: none;. Vous n'aurez cependant plus d'apparition en fondu.

Code:

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Enfin, dernière partie de la mise en forme de base: je vais mettre un petit effet sur ce que je mets en gras dans la fiche. Je veux une autre couleur.

Code:
/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }



Il est donc temps de modifier selon quel onglet est changé. En fait, c'est très simple à comprendre avec les explications de plus haut. Vu qu'on a bien fait en sorte que les input soient frères aux classes "boutons", "images" et "interne", il suffit pour chaque bon input/onglet (donc ce qu'on a décrit avec une id, qui deviendra donc #informations ) de faire apparaître ou modifier le bon élément.

Ici, vu qu'on a utilisé des classes similaires pour chaque éléments (donc .infos, .phys, .car, .hist et .ecr), on a n'a qu'à changer la classe qui précède. Pour plus de sécurité cependant, j'ai utilisé la "double-classe" comme ceci: .lab.infos. Cependant, au lieu de .fiche #informations:checked ~ .boutons .lab.infos vous auriez pu simplement écrire .fiche #informations:checked ~ .boutons .infos.

Si vous avez décidé d'utiliser le display: none; plutôt que l'opacité et la visibilité, n'oubliez pas ici d'utiliser un display: block; plutôt que le code actuel!


Code:

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}



Voici donc le CSS complet et commenté:

Code:

    /************************************************ FICHE ************************************************/
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}

/* On cache les input */
.fiche > input { display: none; }

/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

NyoTheNeko

Slideshow full CSS3 sans :target ! - Sam 12 Juil 2014 - 17:27



Slideshow full CSS3





   
Ceci est un tuto, optimal pour une PA, crée suite à la Demande d'SatoruMasao, ici.
Notez, en tant que petit disclaimer, que je ne sors pas tout ça de mon chapeau. Vous trouverez en lien le slideshow que j'ai prit en base, qui montrait comment ne pas utiliser les :target mais plutôt les input et label (ce qui évite de faire comme une "nouvelle page" et permet de cliquer sur le bouton de "précédent" du navigateur pour vraiment aller sur la page précédente et non pas l'id du slide précédent.


Toutes versions ▬ CSS3 & HTML5 ▬ Ce que ça donne


   
Notez que je vais donc vous montrer comment faire autant le slideshow simple, que les personnages avec la petite bulle qui apparait au passage de la souris! Cependant, vous n'êtes pas obliger de mettre forcément des render de personnages et des petits bulles, mais pouvez très bien remplir d'autres choses! En gros, cela dépend fortement de votre imagination et de vos compétences. Le cas échéant, la section des problèmes est là pour vous aider!




Le slideshow de base


Avant de commencer à s'amuser à mettre les petites bulles d'informations sur les personnages ou même quoi que ce soit d'autres, il faudrait tout d'abord commencer à créer le slideshow de base, c'est à dire, le conteneur, les slides (de simples div pour l'instant) et les flèches avec l'animation qui devrait y avoir.

Je vais aller étape par étape, mais tout de même montrer tout le HTML avant de montrer tout le CSS. Cependant, il est à noter que sans le CSS, le HTML risque d'être très moche (et surtout de ne rien faire!).

Le HTML


Alors, tout d'abord, commençons par le commencement!
Nous allons créer notre toute première div qui va contenir tous le slideshow. Vous pouvez l’appeler comme vous le voulez, mais ici, elle sera appelée "slideshow". Elle contiendra alors tout ce qui a un rapport avec le slider: les slides, les boutons pour aller d'un slide à l'autre, etc. Donc la voici:

Code:
<div id="slideshow">
</div>


C'est très simple n'est-ce pas?

Maintenant, nous allons rajouter des balises input de type radio. Ces balises, ce sont normalement ce qu'on utilise dans le formulaires, pour choisir une option ou une autre. Un exemple simple est sur ForumActif, plus précisément sur NeverUtopia: quand vous créez un sujet, sous "Icône de sujet" vous avez à côté de chaque icône un petit rond qu vous pouvez cocher. Eh bien c'est ça les input de type radio d'un formulaire!
Mais pourquoi utiliser ça, mais surtout, à quoi ça sert? Eh bien plutôt que d'utiliser des liens et d'utiliser ensuite le pseudo-élément :target, ici nous allons utiliser les input et leur pseudo-élément :checked, qui regarde si un input est coché ou non. Cela permet donc de ne pas ouvrir un "nouveau lien" à chaque slide, mais bel et bien de toujours avoir le même lien dans la barre de navigation.

Nous allons donc mettre autant d'input que nous voulons de slides, ici 5:

Code:

<input checked name="slideshow" id="slide1" type="radio" />
<input name="slideshow" id="slide2" type="radio" />
<input name="slideshow" id="slide3" type="radio" />
<input name="slideshow" id="slide4" type="radio" />
<input name="slideshow" id="slide5" type="radio" />


   
Si vous ne connaissez pas la balise input, laissez-moi vous expliquer ce qu'est chacun des éléments ici présent. Premièrement, le nom (name)  permet simplement de... donner un nom à l'élément. Normalement, on tente d'en donner un unique à chacun, notamment lorsqu'on  utilise le JavaScript ou alors que l'on utilise ça vraiment comme un formulaire, et non pas pour un slideshow comme ici. Cependant, ici ce n'est pas important et tous nos input s'appellent slideshow.
Ensuite, on a donné un id à chacun de nos éléments, qui correspond au combientième slide on est. Cela est important pour le CSS, pour savoir que input a été coché, alors que le name n'est pas utilisé pour ça.
Le type est ensuite, eh bien, le type de l'input. Ici on a radio, c'est à dire que seul un input peut être coché à la fois, mais il existe beaucoup de différents types d'input (vu que c'est un formulaire: il y a pour du texte, un choix multiple, une barre avec plusieurs choix de mots, etc). Ici cependant, on a besoin du type radio pour notre slideshow.
Enfin, vous aurez pu remarquer que le premier input a le mot clé "checked" ajouté dans la balise. Cela veut dire que par défaut, c'est l'input slide1 qui est coché et donc, celle-ci qui sera affichée à l'ouverture de la page. Cela peut très bien changer! Vous pourriez choisir d'avoir le troisième slide d'affiché à l'ouverture ou même le dernier! En gros, c'est le input qui est checked qui sera vu en premier par les gens naviguant sur votre site!


Pour rester dans le thème des input, parlons tout de suite comment et pourquoi ils seront utilisé: les flèches qui "contrôlent" le slideshow, et décident quel input est checked ou non. Pour cela, nous utilisons des labels.
On va d'ailleurs mettre ces labels dans un id que vous pouvez nommer comme vous le voulez mais que je nomme "controls". Cela nous permettra alors de placer les flèches et de faire certains effets dessus dans le CSS, mais aussi de les sélectionner correctement grâce au CSS (dont je parlerais plus tard)

Code:
<div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
</div>


Comme vous pouvez le constater, chaque slide a son propre label, et c'est l'attribut for qui dit pour quel label est chaque input. En effet, si vous cliquez sur un label qui est for un certain input, alors cet input sera coché. Je suppose donc que vous comprenez à présent un peu mieux comment ça marche: on clique sur une flèche qui est en fait un label pour un certain input d'un slide, et ce slide sera alors coché, ce qui permettra, grâce au CSS, à aller au slide correspondant!
Remarquez cependant que le for doit avoir le même nom que l'id de l'input correspondant.

Donc jusqu'à présent, on a ça:

Code:
<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>


Ce n'est pour l'instant pas grand chose, cependant: c'est le plus important. en effet, bien que vous n'avez pas encore les slides à proprement parler, vous avez déjà la plus grosse partir du HTML, et ce qui va faire marcher tout le slideshow. Cependant, vu qu'un slideshow n'est rien sans slides, il nous faut les ajouter!

Nous allons donc créer une div qui va contenir tous nos slides, que l'on mettra entre les inputs et les controls (l'importance de ceci est expliquée plus tard) qui sera de la taille de tous les slides additionnés (que je nommerais inner), mais également un autre div, qui contiendra inner et qui permettra de cacher les slides en trop (à l'aide d'un overflow: hidden) de telle sorte à afficher un seul slide à la fois. Je le nommerais slides.
Nous avons donc ceci:

Code:
<div id="slides">
 <div class="inner">
 </div>
</div>



Je vais alors ajouter mes cinq slides dans inner, en leur donnant à chacun la classe a_slide (que vous pouvez appeler comme vous le voulez) qui me permettra de mettre la taille aux slides, mais aussi d'appliquer les effets nécessaires. J'ai donc ceci:

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 </div>
</div>



À présent, pour que l'on puisse tout de suite tester les slides, j'ai mit dans chaque slide une image (le render) avec une class selon où je les veux positionnés, entourés d'un lien. En effet, je veux alterner entre le render à gauche et le render à droite, cependant, vous pouvez créer autan de positions que vous voulez (au milieu, un peu à droit,e un peu à gauche, etc), u même placer à l'aide d'id plutôt que de classe chaque image indépendamment. De même, vous pouvez mettre autre chose dans chaque slide qu'une image!

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
 </div>
 </div>
</div>



Et voilà! Le HTML est terminé! En résumé, nous avons ceci (HTML complet pour l'étape du slideshow simple):

Code:
<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
  <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
  </div>
  <div class="a_slide">
  <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
  </div>
  </div>
 </div>
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>



Le CSS


Si vous envoyez à présent le HTML sans le CSS sur votre PA, vous verrez très vite que ça ne ressemble pas à grand chose... En effet, vu que nous avons que des class et des id, les div n'ont aucune hauteur ou largeur et donc, rien ne s'affiche. Enfin, mis à part les input (donc les boutons de type radio) dont le premier est coché... Et comme vous le voyez dans le résultat final, ces derniers ne sont même pas présents! Mais pas de panique: le CSS3 et sa magie va bientôt opérer, et vous aurez bientôt un superbe slideshow!

Cependant, nous avons beaucoup de choses à voir, alors là aussi je vais utiliser quelques titres pour les séparer un peu mieux!

Mise en place du bloc du slideshow


Tout d'abord, nous allons masquer les input, c'est à dire, faire en sorte qu'ils n'apparaissent pas. En effet vu que pour l'instant c'est la seule chose qui apparaisse mais que c'est la seule chose qu'on ne veut PAS voir apparaître, il suffit de faire en srte qu'ils ne s'affichent pas à l'aide d'un display: none;
Nous avons donc ceci:

Code:
/* Permet de cacher les input (apparait sous forme radio sinon) */
#slideshow input {
  display: none;
}



Maintenant que nous avons un "tableau blanc" sur lequel travailler, il est donc temps de commencer par le commencement: la balise qui entoure notre slideshow, à laquelle j'avais donné plus tôt l'id "slideshow". Nous allons donc tout de suite lui donner une largeur et une hauteur, mais aussi un position relative. C'est important, notamment pour positionner les flèches, ou tout autre élément que vous voudriez jouter aux slideshow (autre que les slides et les flèches).
Nous avons donc ceci:

Code:
/* Création du slideshow (contour) */
#slideshow {
  position: relative;
  width: 800px;
  height: 400px;
}



Maintenant, dans l'ordre logique des choses, je vais m'occuper des slides. Je vais donc commencer par la div à laquelle j'ai donné plus tôt l'id "slides", qui me permettra d'afficher un seul slide à la fois. Je vais donc lui donner la taille d'un seul slide (qui pour moi est la même taille que le slideshow en entier), le positionner de manière absolue tout en haut du slideshow (avec une position absolute) et un overflow: hidden, ce qui va me permettre de cacher tout ce qui dépasse de là, et donc, vous l'aurez compris, de cacher toutes les autres slides. En plus de cela, vu que mon slideshow aura une image de fond fixe et que seul des render vont passer par-dessus, j'ai mit une image de fond.

Code:
/* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 800px;
  height: 400px;
  background-image: url('http://animeipics.files.wordpress.com/2014/01/konoha-thrids-era.jpg');
  background-size: 800px;
  background-position: center center;
  overflow: hidden;
}

   
Le background-size: 800px; me permet de faire en sorte que mon image de fond ait une largeur appropriée et le background-position lui donne la bonne position. Ici, le background-size a la largeur qui est fixée mais la hauteur s'adapte automatiquement (proportionnellement à l'image de base). Si j'avais écrit Si j'avais écris background-size: auto 400px; ce serait la hauteur qui se serait fixée à 400px et la largeur qui se serait automatiquement mise à la bonne proportion. On peut aussi fixer les deux attributs, pour fixer la largeur (toujours en premier) et la hateur, comme ceci: background-size: 800px 400px;.
Le z-index est également important. En effet, les flèches sont dans un div plus tard, c'est à dire que normalement, il est "plus haut" sur le z-index que les slides. Il faut donc changer cela, et on va donner à controls un z-index plus petit que slides!


Maintenant que nous avons ceci, nous allons regarder la première div fille de slides, qui n'est autre que la div à la class "inner". C'est donc lui qui va avoir tous nos slides. Je lui donne donc la bonne taille (donc pour qu'il contienne 5 slides). Rien de spécial donc... mis à part donner une largeur!

Code:
/* Conteneur de tous les slides */
#slides .inner {
  width: 500%;
}


Ici, on met une largeur en pourcentage plutôt qu'en px. En effet, vu que le div d'id slides nous donne déjà la largeur d'un slide, et que donc cela correspond à 100%, il faut mettre le nombre de slides * 100 comme nombre. Donc ici, 5 slides sont 500%, 6 slides serait 600%, 4 slides serait 400%, etc. C'est important, plus tard, pour déplacer les slides. On pourrait très bien le faire en px, mais cela demande un peu plus de calcul tout de même Wink


On a donc les deux conteneurs des slides, mais maintenant, il faudrait mettre en forme les slides eux-même! On va donc leur donner une taille (la même que #slides), mais également une position relative (pour pouvoir positionner les choses en absolu dedans, notamment les images et, bien plus tard, les bulles, que l'on verra dans la seconde partie) et enfin un float: left;

Code:
/* Mise en forme des slides */
#slides .a_slide {
  position: relative;
  width: 800px;
  height: 400px;
  float: left;
}


Le float: left permet de faire en sorte que tous les slides se mette les uns à côtés des autres sans marge. En effet, les div étant normalement des éléments bloc, ils retournent à la ligne avant ET après, or ici, nous ne voulons pas que ce soit le cas!
Il n'y aura d'ailleurs aucun problème au niveau du float, vu que le conteneur a un overflow: hidden. Pour plus d'informations, je vous invite à lire l'annexe sur les float que j'ai écris moi-même dans le cursus Wink


Et c'est presque fini! en effet, à présent, il y a le code pour le déplacement des slideshow à faire! Et là, on en aura terminé pour le bloc "brut" du slideshow!
Voici donc la partie la plus importante du code, qui est aussi présente sur le slider dont je me suis inspirée pour faire celui-ci:

Code:
/* Déplacement des slides */
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }


OMFG!? C'est quoi ce checked? Et ce ~ là, ça veut dire quoi? AAAAAAH.
Pas de panique! O__O J'explique tout en-dessous!


Le pseudo-élément :checked
C'est ce qui va me permettre de voir quel input a été coché. J'en ai vaguement parlé plus tôt. Comme vous avez pu le voir dans le CSS, on regarde quel input est coché: celui de l'id slide 1, slide2, slide3, slide4 ou slide5. En effet, selon lequel est coché, on voudrait que inner soit décalé vers la gauche de plusieurs pourcent (c'est pourquoi aussi c'était important d'avoir en pourcentages la largeur d'inner). Pour afficher le premier slide c'est de 0, le second c'est de 100&, le troisème de 200%, etc. Notez qu'il faudrait en rajouter si on a plus de slides, tout comme il faut rajouter des input. Enfin, j'espère que le tuto est assez claire pour que vous ayez compris ça de par vous-même, mais j'aime autant préciser!
Donc en gros, ce pseudo-élément sert à ça: regarder lequel est coché et faire des choses en conséquence!


Le sélécteur ~
Ce sélécteur signifique "l'élément frère le plus proche". C'est à dire, dans notre code, le frère nommé "#slides .inner" le plus proche du input nommé #slideX qui est checked.
Mais qu'est un élément frère? Eh bien dans notre code par exemple, le div d'id "slideshow" a comme élément fils les input, le div d'id slides et enfin le div d'id controls. Cela implique donc que tous les trois sont des "frères" (ou sœurs).

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément filsè d eun.

Code:
<div id="un">
</div>
<div id="deux">
</div>


Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!


Je pense donc qu'à présent vous comprenez le code! Si tel input est checked, on change la marge à gauche de l’élément frère #slides .inner

Vous pouvez à présent envoyer votre code et voir... une image fixe! Et oui! Il n'y a pas encore les contrôles, donc les flèches, qui nous permettront de cocher les différents input! Du coup, eh bien... rien ne bouge! Il va donc falloir lire la suite pour mettre en place les flèches et, donc, ce qui nous permettra de contrôler le slideshow et de passer d'une slide à l'autre!

Mise en place des contrôles (flèches)


Les codes pour les contrôles est en réalité vraiment très "simple" dans le sens où, il n' a pas beaucoup de lignes, cependant, il peut être difficile à comprendre! Cependant, pas de panique: je suis là pour ça!

Commençons par le plus simple, qui est, le placement des flèches. Comme vous pouvez le voir, les flèches dépassent du slideshow. Ce n'est pas un problème, et d'ailleurs, vous pouvez bien sûr changer ça selon comment vous voulez avoir votre slideshow (avec les position: absolute de #slides et de #controls).
Quoiqu'il en soit, à l'aide du div d'id "controls" on va positionner les flèches au milieu de notre slideshow (à l'aide du top: 45%), et lui donner comme hauteur la taille des images que l'on va utiliser pour nos flèches. En plus de cela, il faut lui donner un z-index de 0 (ou en tout cas un z-index plus petit que celui de #slides) pour qu'ils soit derrière slides.
Notez cependant que si vous voulez que les flèches soient par-dessus votre slide, il va falloir changer ça, et même peut-être, avoir à placer chaque flèche individuellement! (car il faudrait que le z-index soit plus grand que celui des slides pour que les flèches apparaissent et soient cliquables, cependant, sur toute la longueur et hauteur de controls, les slides ne seraient plus cliquables (et n'auraient plus d'effet au passage de la souris).
Bref, en gros, voici le code:
[/b]
Code:
/* Mise ne place de l'élément contenant les flèches */
#controls {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50px;
}



Assez simple n'est-ce pas? Mais pour l'instant, on a toujours pas les flèches! En effet, nous voulons que les flèches s'affichent toujours, mais soient par rapport au bon label, c'est à dire, que lorsque le slide1 est coché, qu'il y ait la flèche de droite qui aille vers le slide2, et la flèche de gauche qui aille vers le slide5 (le dernier slide). Du coup, il faut une manière de cacher TOUS les labels, sauf le bon label correspondant au slide précédent et au slide suivant (et les bons qui plus est). Il faut donc tout d'abord mettre ce code:

Code:
/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
}


Donc ici, on cache tous les label et on leur donne la taille de l'image. MAintenant, passons au code compliqué!


Code:
/* Mise en place de la flèche vers le slide suivant */
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
  background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat;
  float: right;
  margin: 0 -70px 0 0;
  display: block;
}

/* Mise en place de la flèche vers le slide précédent */
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
  background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 -70px;
  display: block;
}


AAAAAAH!
Non mais faut apprendre à se calmer hein O__O

En réalité, ce code est très simple une fois qu'on comprend à quoi sert la pseudo-classe :nth-child(X). En effet, nth-child désigne le nième enfant du type de la classe/objet qui est mit avant. Donc label:nth-child signifie le n-ième enfant qui est un label, et dans ce cas, se trouve dans l'id #controls. Le chiffre en parenthèse, est donc ce fameux nième enfant: label:nth-child(4) signifie le 4ième enfant de type label. C'est assez simple non? Il suffit donc de regarder dans votre HTML et compter à quel enfant vous voulez aller.

Vous comprenez alors que lorsque slide1 est coché (donc le pseudo-élément :checked), on veut que la flèche next soit le label pour le slide2, qui est dans notre HTML le 2ième enfant de type label dans #controls. De même, on veut que notre flèche previous nous envoie vers le slide5, qui est dans notre HTML le 5ième enfant de type label dans #controls!  

Pour ce qui est du reste du code, le float nous permet de positionner les flèches tout à droite et tout à gauche du bloc, la marge nous permet de les mettre en dehors du slideshow, le display_block nous permet d'annuler le display: none du précédent code, de telle sorte à ce que seul le label que l'on veut s'affiche et enfin, le background est bien sûr l'image de la flpche, respectivement de celle vers la droite et celle vers la gauche.


Nous avons donc à présent les flèches et le slide en pleine état de marche, cependant, sans les animations, eh bien, c'est un peu moche... Mais pas de soucis, les animations arrivent dans la partie suivante!

Animer les slides et effets sur les flèches


Nous allons tout d'abord faire l'animation sur les flches. Tout simplement parce que, eh bien, c'est le plus simple! En effet, comme vous pouvez le voir, le seul effet sur mes flèches est un changement d'opacité. Très simple donc, et un changement qu'il suffit d'appliquer sur le CSS #controls label en ajoutant de l'opacité, et en faisant un changement au passage d ela souris grâce à la pseudo-classe :hover!
Je vous donne donc le code, qui n'a vraiment rien de compliqué !

Code:
/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
  transition: all ease-out 0.2s;
}

/* Effet au passage de la souris sur les flèches */
#controls label:hover {
  opacity: 0.8;
  transition: all ease-out 0.2s;
}



Voilà donc qui est fait pour les flèches! Maintenant, il est temps de passer au slides, pour qu'ils se déplacent de façon fluide. Le code est assez court (deux lignes), mais vraiment très condensé: je vous explique cependant tout!

Code:
/* Animation slides */
#slides .inner {
  -webkit-transform: translateZ(0);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}



Tout d'abord, le  -webkit-transform: translateZ(0); n'a vraiment pas d'autre fonction que d'assurer que l'animation se fait sans à-coups dans Chrome. En effet, si vous avez ce navigateur, vous verrez la différence si vous le mettez ou non. Ca ne change rien en soit, mais c'est plus joli, et surtout, uniquement pour Chrome qu'il y a cette ligne, vraiment xD
Vous voyez que la prochaine est une transition. Si vous avez un peu suivvi la plupart des Ls ici ou plusieurs Tutos, vous savez que cette ligne permet justement d'avoir l'animation, et donc un truc fluide. Cependant, vous voyez aussi que c'est une fonction bien compliquée que l'on utilise comme fonction de transition (cubic-bezier avec pleins de nombres dans ses parenthèses, contrairement aux habitues linear, ease-in, ease-out, ease-in-out et ease!). Cependant, pour déjà comprendre les deux premier termes de cette ligne: all signifie que tout ce qui peut être animé le sera. Ici, pour nous, c'est simplement le déplacement de inner. Ensuite, les 800ms est le temps durant lequel va durer l'animation. C'est 0.8 secondes en somme.

Revenons donc à cubic-bezier. En réalité, ease, ease-in, etc sont toutes des courbes de Bézier qui déterminent la transition. Et de même, chacun d'entre eux pourraient être écrits sous la forme de cubic-bezier (par exemple, ease pourrait s'écrire cubic-bezier(0.25, 0.1, 0.25, 1.0)). Donc, en gros, c'es une fonction de transition tout à fait normale, sauf que nous avons nous-même crée la façon dont l'animation va se jouer. En gros, c'est purement mathématique.
Vous avez cet outil qui vous permet de créer vos propres courbez de Bézier et les utiliser dans vos transitions, qui permet également de comparer avec les transitions "communes" ease, lineat, ease-in, ease-out et ease-in-out. Vous pouvez donc voir que notre courbe est très similaire au ease-in-out, bien que légèrement plus "rapide" dans sa transition.
Si vous voulez en apprendre plus sur la syntaxe de la fonction cubic-bezier, je vous invite à lire la partie de ce tuto qui en parle, qui est assez complet. Pour nous, ce n'est pas vraiment le sujet, on ne fait que l'utiliser Wink


Et maintenant, tout est bon! Nous n'avons plus qu'à placer les images correctement (comme je l'ai prévu dès le départ à gauche et à droite de chaque slide) et on en aura fini de cette première partie pour la création du slideshow!

Mise en place des images


Maintenant que nous avons tout le slideshow, il est temps de placer les images au bon endroit, comme j'avais dit lorsque j'ai écrit le HTML, j'ai prévu d'en mettre certaines à gauches et certaines à droites.
Je vais tout d'abord commencer par mettre toutes les images en position absolue. Je vais aussi faire en sorte qu'elle ne dépassent pas la hauteur du slideshow, donc les redimensionner à une hauteur de 400px.

Code:
/* Placer toutes les images en absolu. */
.a_slide img {
  position: absolute;
  display: block;
  height: 400px;
}



Maintenant, on va placer toutes les images avec la classe left à gauche

Code:
/* On place les images à gauche */
.a_slide img.left {
  bottom: 0px;
  left: 0px;
}



Et toutes les images avec la classe right à droite!

Code:
/* On place les images à droite */
.a_slide img.right {
  bottom: 0px;
  right: 0px;
}



Vous pourriez très bien utiliser les bottom, top, left et right pour placer les images ailleurs, et donc avoir plus de classes ou même des id pour chaque image si chacune doit être mise à un endroit spécifique! En somme, vous pouvez utiliser la position absolue comme vous le voulez pour placer les images!

Maintenant, il est temps de passer à la deuxième étape si vous voulez placer des bulles d’informations au passage de la souris sur les images!

Akina-chan

Une fiche de présentation dark ! - Mer 9 Juil 2014 - 15:31



Voilà une fiche de présentation qui ne me sert plus à rien.
aperçu:


Bien entendu, vous pouvez modifier les couleurs et le fond !

Pour le code, un petit merci, ça fait de mal à personne et ça fait surtout toujours plaisir.
Code:
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css' /><table style= "background-image: url(http://i50.tinypic.com/2zpiooo.png); border-radius: 50px; border: 2px #660000 solid; color :white;"><tr><td colspan="2" style="text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 36px; text-align: center;">

Présentation de Pseudo

</span>
</div></td></tr><tr><td><div style= "text-align: center;"><img src="http://i45.tinypic.com/a5dbnm.png" />
200*400px de préférence</div></td><td style="text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px; text-align: center;">
Qui suis-je ?
</span>
</div>

Nom :
Prénom: (Surnom si il y a)
Age:
Sexe:
Orientation sexuelle :
Pouvoir(s) : (uniquement pour les démons)
Arme(s) :
Couleur utilisée pour la ChatBox :
</td></tr>
<tr><td width="50%" style= "padding-bottom: 20px; padding-top: 20px; padding-left: 20px; padding-right: 10px; text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px; text-align: center;">


Ai-je besoin de chirurgie ?
</span>
</div>
<div style="text-align: justify;">Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.</div></td>
<td width="50%" style= "padding-bottom: 20px; padding-top: 20px; padding-right: 20px; padding-left: 10px; text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px; text-align: center;">


C'est mon caractère !!
</span>
</div>
<div style="text-align: justify;">Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.</div></td></tr>
<tr><td colspan="2" style="padding: 20px; text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px;">


Ce que j'ai vécu à cause de Lilith
</span>
</div>
<div style="text-align: justify;">Haec et huius modi quaedam innumerabilia ultrix facinorum impiorum bonorumque praemiatrix aliquotiens operatur Adrastia atque utinam semper quam vocabulo duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.

Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine damnabatur.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.</td></tr>
<tr><td colspan="2" style="text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px;">


Je suis son pantin...
</span>
</div>
Prénom : (si ça vous dérange pas de le donner)
Age :
Ce que vous aimez faire, vos hobbies :
Comment avez-vous connu le forum :
Un truc à dire en plus ?

Codage d'Akina-chan de <a href="http://www.never-utopia.com/">Never-Utopia</a>

</td></tr></table>

Bouton Aide en bas à droite du forum (comme sur ancienne version) - Mar 1 Juil 2014 - 0:04


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Effets Divers



Ceci est un code crée suite à la Demande de Clarisse, ici.

Pour phbb2 ▬ CSS3 & HTML5 ▬ Bouton au Repos au hover et une fois cliqué


Les effets


La boîte "glisse" pour s'ouvrir.
Les contenus internes ne sont pas fournis!
Vous pouvez changer l'image de la crois ou alors simplement mettre un texte!

Le code


Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> overall_header :
Juste après ça:
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Mettez ça:
Code:
  <div id="target_po">
    <div id="bouton_po">
      <a href="#target_po">Aide</a>
    </div>
    <div id="tableau_po"><div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>
      <div id="tableau_po_interne">
        <h1 class="titre_po">
          Titre Contenu
        </h1>
        Contenu
      </div>
    </div>
  </div>


Le CSS:
Code:
/********** DÉBUT BOUTON **********/

/* Mise en forme du bouton */
#bouton_po {
  /* Position */
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 900;
  /* Taille */
  width: 65px;
  height: 25px;
  padding: 5px;
  /* Couleur de fond puis de texte */
  background-color: #B7B7B7;
  color: black;
  text-align: center;
  /* Bordure */
  border: 2px solid black;
  border-bottom: 0px solid;
  transition: all ease 0.5s;
}

/* Mise en forme du bouton au passage de la souris */
#bouton_po:hover {
  background-color: #D8D6D6;
  transition: all ease 0.5s;
}

/* Mise en forme du lien dans le bouton */
#bouton_po a, #bouton_po a:hover {
  color: black;
  letter-spacing: 0px;
  text-decoration: none !important;
  transition: all ease 0.5s;
}

/* Effet sur le lien au passage de la souris */
#bouton_po:hover a, #bouton_po:hover a:hover {
  color: black;
  letter-spacing: 3px;
  text-decoration: none !important;
  transition: all ease 0.5s;
}

/* Mise en forme du contenu */
#tableau_po {
  visibility: hidden;
  /* Position du contenu */
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 999;
  /* Hauteur de base pour l'effet. */
  width: 0px;
  height: 0px;
  /* Couleur de fond puis de texte */
  background-color: #B7B7B7;
  color: black;
  /* Bordure */
  border: 2px solid black;
  transition: all ease 0.5s;
}

/* Apparition du contenu au click sur le bouton */
#target_po:target #tableau_po {
  visibility: visible;
  /* Taille du contenu */
  width: 401px;
  height: 556px;
  transition: all ease 0.5s;
}

/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
  margin: 3px;
}

/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
  text-decoration: none !important;
}

#tableau_po .fermer a {
  color: black;
  transition: all ease 0.5s;
}

#tableau_po .fermer a:hover {
  color: white;
  transition: all ease 0.5s;
}

/* Pour un overflow: auto */
#tableau_po_interne {
  /*taille*/
  height: 535px;
  width: 390px;
  margin: auto;
  overflow: auto;
}

/* Mise en forme des titres dans le contenu */
h1.titre_po {
  width: 100%;
  border: 0px solid;
  margin: 0px;
  margin-bottom: 10px;
  background: none;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid black;
  font-size: 15pt;
}
/********** FIN BOUTON **********/


Changer la croix / ce qui permet de fermer l'aide


Le code correspondant est celui-ci:
Code:
<div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>

Il suffit de retirer l'image ou la changer mais ne touchez surtout pas le lien autour, ni la div, uniquement l'image ou vous ne pourrez plus fermer votre aide!
Le code CSS correspondant est celui-ci:
Code:

/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
  margin: 3px;
}

/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
  text-decoration: none !important;
}

#tableau_po .fermer a {
  color: black;
  transition: all ease 0.5s;
}

#tableau_po .fermer a:hover {
  color: white;
  transition: all ease 0.5s;
}

Onyx

Navigation en forme d'horloge - Lun 23 Juin 2014 - 20:25




Navigation en forme d'horloge


Salut !

Voici un petit LS d'une barre de navigation en forme d'horloge dont l'aiguille pointe sur les liens survolés qui a été fait pour la demande de Dastan.

Pour l'aperçu, cliquez juste ici.

Ce code est en trois parties.
  • Tout d'abord, nous allons supprimer l'ancienne navigation et la remplacer par la notre dans le template "Overhall Header".
  • Ensuite, nous allons mettre notre navigation en forme en allant ajouter certains éléments dans le CSS.
  • Enfin, nous allons ajouter un petit javascript pour savoir qu'un nouveau message privé est arrivé dans notre messagerie. D'ailleurs, pour cette partie, je me suis servie de ce tuto : http://www.school-of-pub.net/t11850-fa-totalement-personnaliser-la-barre-de-nav.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Corps de la navigation (Template Overhall_Header)


Pour commencer, nous allons devoir nous débarrasser de la navigation normale afin qu'elle arrête de nous traîner dans les jambes.
Comment?
Nous allons carrément la supprimer.

Elle devrait normalement se trouver entre les lignes 273 et 277. Voici à quoi elle ressemble :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>



Une fois que c'est fait, il est temps d'ajouter notre propre navigation. Du coup, au même endroit où était positionné l'ancienne barre de navigation, nous allons venir mettre le code suivant :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="left">
 <tr>
                                          <td align="left">
   <div class="nav_bloc" align="center">
    <div class="navv" id="accueil"><a href="/forum"><img src="https://i.imgur.com/BleQNVF.png" alt="Accueil" /></a></div>
    <div class="navv" id="rechercher"><a href="/search"><img src="https://i.imgur.com/ILyNbqm.png" alt="Rechercher" /></a></div>
    <div class="navv" id="membres"><a href="/memberlist"><img src="https://i.imgur.com/smihrYB.png" alt="Membres" /></a></div>
    <div class="navv" id="groupes"><a href="/groups"><img src="https://i.imgur.com/0TCFuVf.png" alt="Groupes" /></a></div>
                                                    <div class="navv" id="profil"><a href="/profile?mode=editprofile"><img src="https://i.imgur.com/Fur3amR.png" alt="Profil" /></a></div>
      <!-- BEGIN switch_user_logged_in -->
    <div class="navv" id="mp"><a href="/privmsg?folder=inbox"><img src="https://i.imgur.com/AEQMua4.png" alt="MP" id="mpO" /></a></div>
                                                    <div class="navv" id="off"><a href="/login?logout"><img src="https://i.imgur.com/1WWhoBy.png" alt="Déconnexion" /></a></div>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_user_logged_out -->
                                                    <div class="navv" id="s_inscrire"><a href="/register"><img src="https://i.imgur.com/gFDkg6v.png" alt="S'inscrire" /></a></div>
                                                    <div class="navv" id="on"><a href="/login"><img src="https://i.imgur.com/1WWhoBy.png" alt="Connexion" /></a></div>
      <!-- END switch_user_logged_out -->
                                                    <div class="navv" id="nav_aiguille"></div>
                                                    <div style="visibility: hidden;">{GENERATED_NAV_BAR}</div>
      </div></td>
 </tr>
 </table>


Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

  • Au tout début, il y a une table qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
  • Ensuite, nous avons une "div" avec la class "nav_bloc". C'est le bloc avec l'image de l'horloge en background qui contient tous les liens de la navigation.
  • Puis, nous avons diverses "div" avec les liens de notre navigation. C'est séparé en trois parties :
    • Les liens que tout le monde peut voir.
    • Les liens entre le "BEGIN switch_user_logged_in" et "END switch_user_logged_in" que seuls les membres connectés peuvent voir.
    • Les liens entre "BEGIN switch_user_logged_out" et le "END switch_user_logged_out" que seuls les invités peuvent voir.
  • En avant dernier, nous avons l'aiguille qui tourne selon le lien sur lequel notre curseur est placé.
  • Enfin, nous avons l'ancienne navigation "GENERATED_NAV_BAR" qui est invisible mais qui nous sera utile pour récupérer le code des nouveaux MPs.

À l’exception des images de l'aiguille et de l'horloge, toutes les images des liens peuvent être modifiées à cette étape.



2. Mise en forme (CSS)


Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas super du tout pour le moment.

Du coup, nous allons mettre en forme notre navigation à l'aide du code suivant que j'expliquerai ensuite :
Code:
              /*NAVIGATION*/

/*Bloc de l'horloge*/
.nav_bloc {
  background-image: url('https://i.imgur.com/u2wxcxS.png');
  width: 300px;
  height: 300px;
  position: relative;
  display: block;
  margin-top: -190px;
  margin-left: 30px;
}

/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 2;
}

/*Aiguille*/
#nav_aiguille {
  background-image: url('https://i.imgur.com/QpoF06N.png');
  width: 14px;
  height: 244px;
  bottom: 32px;
  left: 140px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  z-index: 1;
}

/*Positionnement des liens*/
#accueil {
  width: 100px;
  height: 27px;
  bottom: 260px;
  left: 101px;
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
#rechercher {
  width: 131px;
  height: 35px;
  bottom: 200px;
  left: 184px;
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}
#membres {
  width: 94px;
  height: 28px;
  bottom: 100px;
  left: 218px;
  -webkit-transform:rotate(109deg);
  transform:rotate(109deg);
}
#groupes {
  width: 99px;
  height: 32px;
  bottom: 21px;
  left: 144px;
  -webkit-transform:rotate(157deg);
  transform:rotate(157deg);
}
#profil {
  width: 79px;
  height: 28px;
  bottom: 25px;
  left: 55px;
  -webkit-transform:rotate(205deg);
  transform:rotate(205deg);
}
#mp {
  width: 115px;
  height: 39px;
  bottom: 120px;
  left: -31px;
  -webkit-transform:rotate(265deg);
  transform:rotate(265deg);
}
#off, #on {
  width: 80px;
  height: 31px;
  bottom: 225px;
  left: 26px;
  -webkit-transform:rotate(315deg);
  transform:rotate(315deg);
}
#s_inscrire {
  width: 107px;
  height: 37px;
  bottom: 120px;
  left: -27px;
  -webkit-transform:rotate(263deg);
  transform:rotate(263deg);
}

/*Mouvement de l'aiguille selon le lien survolé*/
#accueil:hover ~ #nav_aiguille {
  -webkit-transform:rotate(2deg);
  transform:rotate(2deg);
}
#rechercher:hover ~ #nav_aiguille {
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}
#membres:hover ~ #nav_aiguille {
  -webkit-transform:rotate(109deg);
  transform:rotate(109deg);
}
#groupes:hover ~ #nav_aiguille {
  -webkit-transform:rotate(157deg);
  transform:rotate(157deg);
}
#profil:hover ~ #nav_aiguille {
  -webkit-transform:rotate(205deg);
  transform:rotate(205deg);
}
#mp:hover ~ #nav_aiguille {
  -webkit-transform:rotate(265deg);
  transform:rotate(265deg);
}
#s_inscrire:hover ~ #nav_aiguille {
  -webkit-transform:rotate(263deg);
  transform:rotate(263deg);
}
#on:hover ~ #nav_aiguille, #off:hover ~ #nav_aiguille {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

               /*FIN NAVIGATION*/



Maintenant, pour ceux qui veulent comprendre ce qu'ils font à la place de faire du copier/coller, nous allons découper certaines parties de ce CSS afin de comprendre comment cela fonctionne.

Premièrement, le bloc de l'horloge :
Code:
/*Bloc de l'horloge*/
.nav_bloc {
  background-image: url('https://i.imgur.com/u2wxcxS.png');
  width: 300px;
  height: 300px;
  position: relative;
  display: block;
  margin-top: -190px;
  margin-left: 30px;
}


  • Le "background-image" est image de l'horloge.
  • Le "width" est la largeur de l'image de l'horloge et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de l'horloge et est importante puisque cela délimite la hauteur du bloc également.
  • La "position: relative" indique que s'il y a d'autres div à l'intérieur du bloc, leur position sera définie par rapport à la largeur et à la hauteur du bloc de l'horloge.
  • Le "display: block;" indique que le bloc de l'horloge est un bloc.
  • Le "margin-top: -190px" permet de déplacer le bloc de 190px vers le haut, à savoir sur la bannière.
  • Le "margin-left: 30px" permet de déplacer le bloc de 30px vers la droite.



Deuxièmement, certaines caractéristiques des liens :
Code:
/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 2;
}


  • La "position: absolute" veut dire que la position des liens sont automatiquement liés aux bordures du bloc de l'horloge.
  • Le "display: block" indique que les liens sont des blocs.
  • Le " z-index: 2" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 2 et en-dessous des éléments qui ont un "z-index" supérieurs à 2.



Troisièmement, l'aiguille comme elle est initialement :
Code:
/*Aiguille*/
#nav_aiguille {
  background-image: url('https://i.imgur.com/QpoF06N.png');
  width: 14px;
  height: 244px;
  bottom: 32px;
  left: 140px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 1;
}


  • Le "background-image" est image de l'aiguille.
  • Le "width" est la largeur de l'image de l'aiguille et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de l'aiguille et est importante puisque cela délimite la hauteur du bloc également.
  • Le "bottom" indique que le bloc de l'aiguille est à 32px du bas du bloc de l'horloge.
  • Le "left" indique que le bloc de l'aiguille est à 140px du côté gauche du bloc de l'horloge.
  • Le "transform: rotate(0deg);" indique que le bloc de l'aiguille reste droit.
  • Le "transition: 0.5s;" indique que les mouvements de l'aiguille seront d'une durée de 0,5 seconde.
  • Le " z-index: 1" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 1 et en-dessous des éléments qui ont un "z-index" supérieurs à 1.



Quatrièmement, le positionnement des liens de la navigation. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
Code:
#rechercher {
  width: 131px;
  height: 35px;
  bottom: 200px;
  left: 184px;
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}


  • Le "width" est la largeur de l'image de rechercher et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de rechercher et est importante puisque cela délimite la hauteur du bloc également.
  • Le "bottom" indique que le bloc de rechercher est à 200px du bas du bloc de l'horloge.
  • Le "left" indique que le bloc de rechercher est à 184px du côté gauche du bloc de l'horloge.
  • Le "transform: rotate(57deg);" indique que le bloc de rechercher est tourné de 57 degrés vers la droite.



Dernièrement, le déplacement de l'aiguille en fonction du lien survolé. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
Code:
#rechercher:hover ~ #nav_aiguille {
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}


  • Le "#rechercher:hover ~ #nav_aiguille" veut dire que quand le bloc "#rechercher" (bloc de rechercher) est survolé, il y a l'effet suivant sur le bloc "#nav_aiguille" (bloc de l'aiguille).
  • Le "transform: rotate(57deg);" indique que le bloc de l'aiguille tourne de 57 degrés vers la droite. Normalement, la rotation devrait être la même que celle qui a été appliquée sur le bloc rechercher.


J'ai modifié tous les liens des images et tout est décalé! Qu'est-ce que je fais maintenant?
Premièrement, va lire les explications du CSS si tu ne l'as pas fait.
Ensuite, il va falloir repositionner chaque lien modifié avec leurs attributs "bottom", "left" et "rotate".
N'oublie pas d'aller ajuster la rotation de l'aiguille avec la nouvelle rotation de tes liens !
Enfin... bonne chance pour ce casse-tête Twisted Evil 



3. Nouveau MP (Javascript)


Avec la navigation de base, il y a une image différente que celle de la messagerie normale lorsqu'il y a un nouveau message. Seulement, ce n'est pas une fonction automatique si on fait sa propre barre de navigation. Du coup, nous allons reproduire cet effet !

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

À ce même endroit, si vous n'avez pas activé la gestion des javascripts, il faut le faire avant de faire tout autre chose.

Ensuite, nous allons "créer un nouveau javascript".
Il va falloir lui choisir un nom. Ex: "Nouveau MP"
Ensuite, il va falloir cocher le Placement "Sur toutes les pages".

Puis, on va y coller le code suivant :
Code:
jQuery().ready(function(){
        
        /* On prend l'élément du menu de base pour savoir s'il y a un nouveau message */
        var e= $("#i_icon_mini_new_message");
        
        /* Si il y en a pas, on s'arrête là */
        if(!e.length) return;
        
        /* S'il y en a, l'image changera pour l'image de nouveau message*/
        $("#mpO").attr('src','https://i.imgur.com/uTwYE10.png');
      
      
        });


Cette partie de code est expliquée directement dans le code alors on va en rester là ^^




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

A-Lice

Fiche de Pub - Sweet Darkness - Dim 15 Juin 2014 - 21:13




Fiche de Pub


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www



Et le code :
Code:
<br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css'><div style="margin:auto; width:96%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;"><br/>
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; border-radius: 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Fiche de Pub</span><br /><br /><div style="margin:auto; width:95%; height:200px; border-radius: 100px; border:2px dotted #767676; text-align:justify; color:white; overflow:hidden;"><img src="http://img4.hostingpics.net/pics/909792Bannierefofo.png" style="margin-left:-130px;" alt="" /></div><br/><br/>
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Contexte</span><br /><div style="height:250px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Stat's</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div> <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Liens</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
  </div></div><br /><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Nouveautés</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Logo's</span><br /><div style="height:100px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <br/><a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>


Perso je mets ce code dans une page HTML (panneau d'admin > modules > gestion des pages HTML > création en mode avancé (HTML) en cochant bien "non" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?") et ensuite je la donne à mes partenaires sous forme d'une iframe comme ceci :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="650px" height="1450px"></iframe></center>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

A-Lice

Fiche de Partenariat - Sweet Darkness - Dim 15 Juin 2014 - 21:10




Fiche de Partenariat


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www


Et le code :
Code:
<br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css' /><div style="margin:auto; width:96%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;"><br/>
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; radius: 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Fiche de Partenariat</span><br /><br /><div style="margin:auto; width:95%; height:200px; border-radius: 100px; border:2px dotted #767676; text-align:justify; color:white; overflow:hidden;"><img src="http://img4.hostingpics.net/pics/909792Bannierefofo.png" style="margin-left:-130px;" alt="" /></div><br/><br/>
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Contexte</span><br /><div style="height:250px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Stat's</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div> <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Liens</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
  </div></div><br /><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Staff</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Logo's</span><br /><div style="height:100px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <br/><a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>

Perso je mets ce code dans une page HTML (panneau d'admin > modules > gestion des pages HTML > création en mode avancé (HTML) en cochant bien "non" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?") et ensuite je la donne  sous forme d'une iframe comme ceci :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="650px" height="1450px"></iframe></center>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

A-Lice

Partenaires ▬ Sweet Darkness - Dim 15 Juin 2014 - 21:06




Fiche de Demande de Partenariat


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www


Et le code :
Code:
<link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css' />
<div style="margin:auto; width:80%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;">
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; border-radius: 100px; 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Devenons coupains \o/</span><br /><br />
<div style="margin:auto; width:75%; border-radius: 100px; background-color:#2F3C3E; border:2px dotted #767676; padding:40px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive; font-weight:bold;">Le nom du forum</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.

Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.

</div>
<a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

Koalz

Fiche publicité cadre bleu marine/noire - Mer 11 Juin 2014 - 11:55



Yop ^w^
Cette fiche est totalement modifiable, aucune contrainte de couleurs ou taille du texte, typographie, etc. Ne simplement pas réutilisé la base pour créer un autre code.
Juste, laisser le copyright s'il vous plais.
Le code sera visible après avoir posté, car un merci ça faut toujours plaisir ^w^
Merci <(*w*<)



NOM du FORUM

RéglementContexte Avatars Prédéfinis


Ecrire ici le contexte ou un résumer alléchant.


「P'tite description.」

Un petit texte descriptif sur l'ambiance, ce que l'on peut y trouver, sa force, ses qualités, etc...

「Nos Statistiques.」

¤ C'est un monde qui a vu le jour un date.
¤ Il compte un total de nombre d'inscrits petits monstres qui on fait nombres de messages bêtises entre temps.
¤ C'est également une alliance entre (nombre d'admin) puissants admins terriblement vilains èwé :


Nom&Prénom ~ Nom&Prénom ~ Nom&Prénom

「Nous Lier ?」





fiche by koalz



Code:
<center><div style="background-color: #110917; width: 550px; height: auto; border-top: 10px solid #1b1422; border-bottom: 10px solid #1b1422;-moz-box-shadow: #000000 1px 0px 5px;"><a href="URLduFORUM"><img src="URL Image Entête" /></a><span style="text-shadow: 1px 1px 10px"><span style="font-family: Mistral; font-size: 46px; color: #d9d9d9; position: relative; top: -5px;">

<i>NOM du FORUM</i></span></span>
<span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL du réglement" style="color: #d9d9d9;"><i>Réglement</i></font></a></span><span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL du contexte" style="color: #d9d9d9;"><i>Contexte</i></a></span> <span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL liste avatar" style="color: #d9d9d9;"><i>Avatars</i></a></span> <span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL prédéfinis" style="color: #d9d9d9;"><i>Prédéfinis</i></a></span>

<div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="text-align: justify;"><div style="width: 530px; text-align: justify; padding-right: 3px; font-size: 11px; color: #000"><span style="line-height: 12px; font-size: 9px; color: #7E8296; text-align: center;">
Ecrire ici le contexte ou un résumer alléchant.</span>
</div></div></div>
<div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="font-family: Trajan Pro; font-size: 15px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><div style="font-family: Garamond; font-size: 20px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><b>「P'tite description.」</b></div></div></div></div><div style="text-align: justify;"><span style="line-height: 12px; font-size:11px; color: #7E8296; ">
Un petit texte descriptif sur l'ambiance, ce que l'on peut y trouver, sa force, ses qualités, etc...</span></div></div><br /><div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="font-family: Trajan Pro; font-size: 15px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><div style="font-family: Garamond; font-size: 20px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><b>「Nos Statistiques.」</b></div></div></div></div><div style="text-align: justify;"><div style="line-height: 12px; font-size:11px; color: #7E8296; ">
¤ C'est un monde qui a vu le jour un <b>date</b>.
¤ Il compte un total de <b>nombre d'inscrits</b> petits monstres qui on fait <b>nombres de messages</b> bêtises entre temps.
¤ C'est également une alliance entre (nombre d'admin) puissants admins terriblement vilains èwé :

<center><img width="50px;" src="url image de l'admin" /> <img width="50px;" src="url image de l'admin" /> <img width="50px;" src="url image de l'admin" />
<b>Nom&Prénom</b> ~ <b>Nom&Prénom</b> ~ <b>Nom&Prénom</b></center></div></div></div><br /><div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="font-family: Trajan Pro; font-size: 15px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><div style="font-family: Garamond; font-size: 20px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><b>「Nous Lier ?」</b></div></div></div></div><div style="text-align: justify;"><div style="line-height: 12px; font-size:11px; color: #7E8296; "><center>
<a href="Url du forum"><img src="URL image pub"></a> <a href="Url du forum"><img src="URL image pub"></a> <a href="Url du forum"><img src="URL image pub"></a>

<a href="Url du forum"><img src="URL image pub"></a> <a href="Url du forum"><img src="URL image pub"></a>
</center></div></div></div><br /><span style="font-size: 10px; color: #7E8296;">fiche by <a href="http://www.never-utopia.com/u13592">koalz</a></span><br /></div></center>

NyoTheNeko

QEEL avec tableau de partenaires et image de fond - Ven 30 Mai 2014 - 13:18



Qui est en ligne



Ceci est un code de QEEL crée suite à la Demande de Fluff', ici.

Version phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne


L'image de fond n'est pas fournie, et il se peut que vous ayez, selon votre image, besoin de changer les positions!
L'image en exemple fait 800*682px (les dimensions peuvent être changées dans le CSS)


Le code


Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_body /!\ Mettez juste à la place du QEEL, ne remplacez pas le template par ce code! /!\ :

Code:
   <!-- BEGIN disable_viewonline -->
    <div id="qeel">
      <div id="groupes_qeel">
        <span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span>
      </div>
      <div id="infos_qeel">
        <span class="gensmall">
          <span id="post_nyo">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/Nos membres ont posté un total de/,"Nos archives comptent");</script><script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/messages/,"missives ");</script></span>.
          <span id="users_nyo">{TOTAL_USERS}</span>
          <script type="text/javascript">document.getElementById('users_nyo').innerHTML=document.getElementById('users_nyo').innerHTML.replace(/membres enregistrés/,"citoyens, ");</script>.
          <span id="new_user_nyo">{NEWEST_USER}</span>
          <script type="text/javascript">document.getElementById('new_user_nyo').innerHTML=document.getElementById('new_user_nyo').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"dont la nouvelle recrue");</script>
        </span>
        <br/><br/>
        <span class="gensmall">
          <span id="online_users_nyo">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/il y a en tout/,"Il y a en tout, se promenant dans le royaume");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateur en ligne/,"personne");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateurs en ligne/,"personnes");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/::/,"soit");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistré/,"citoyen");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistrés/,"citoyens");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisible/,"esprit");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisibles/,"esprits");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invité/,"recrue potentielle .");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invités/,"recrues potentielles .");</script>
        </span>
        <br /><br/>
        <span class="gensmall">
          <span id="step">{LOGGED_IN_USER_LIST}</span>
          <script type="text/javascript">document.getElementById('step').innerHTML=document.getElementById('step').innerHTML.replace(/Utilisateurs enregistrés/,"En train de parcourir les lieux ");</script>
          <table id="connected">
            {L_CONNECTED_MEMBERS}
            <script type="text/javascript">jQuery('#connected span.gensmall').html(jQuery('#connected span.gensmall').html().replace(/Membres connectés/,"Ils fûrent parmis nous"));</script>
            {L_WHOSBIRTHDAY_TODAY}
            {L_WHOSBIRTHDAY_WEEK}
          </table>
        </span>
      </div>
      <div id="position_partenaires_qeel">
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
      </div>
    </div>
    <!-- END disable_viewonline -->



Le CSS:

Code:
   /***** DÉBUT QEEL *******/
    /* Permet de mettre l'image de fond du QEEL, sa grandeur et la couleur d'écriture. */
    #qeel {
      width: 800px;
      height: 682px;
      margin: auto;
      position: relative;
      color: #AAAAAA;
      background-image: url('URL_IMAGE_ICI');
    }

    /* Donne sa couleur au texte */
    #qeel .gensmall {
      color: #AAAAAA;
    }

    /* Permet de mettre en place les groupes & donner une largeur max + les caler vers la droite */
    #groupes_qeel {
      position: absolute;
      top: 95px;
      left: 300px;
      width: 450px;
      font-weight: bold;
      text-align: right;
    }

    /* Permet de positionner toutes les infos du QEEL & donner une largeur max */
    #infos_qeel {
      position: absolute;
      top: 180px;
      left: 375px;
      width: 350px;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected .row1 {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de positionner les partenaires */
    #position_partenaires_qeel {
      position: absolute;
      top: 506px;
      left: 138px;
      width: 522px;
      height: 118px;
    }

    /* Permet de mettre en place les images de partenaire et faire l'effet. */
    #position_partenaires_qeel img {
      display: inline-block;
      margin: 2px;
      opacity: 0.8;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: all ease 1s;
    }

    /*Permet de faire l'effet sur les partenaires*/
    #position_partenaires_qeel img:hover {
      opacity: 1;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      transition: all ease 1s;
    }
    /***** FIN QEEL *******/


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

NyoTheNeko

Créer une infobulle - Mar 20 Mai 2014 - 9:44





Créer une infobulle





Bonjour à tous! Voilà un petit tutoriel pour vous apprendre à faire une infobulle! Nous verrons rapidement les bases de ce qu'est une infobulle, mais également ses différentes variations (sur une image, sur un texte ou sur un objet (div, table, etc. mais nous ne verrons comme exemple qu'une div!)) ainsi que quelques effets sur cette dernière. Une fois avoir lu ce tuto, vous pourrez alors sans problème créer une infobulle par vous-même sans avoir à utiliser un LS uniquement pour ça! ^^


Les bases


Pour créer une infobulle, il nous faut trois choses: une balise qui entoure notre objet sur lequel sera l'infobulle ET l'infobulle, l'infobulle en elle-même, et enfin, l'objet sur lequel sera l'infobulle.
Comme déjà exprimé dans l'introduction et comme vous le voyez avec les titres de ce tuto, l'objet sur lequel sera l'infobulle peut être de plusieurs formes: un texte, une image, ou alors un autre objet, comme une able, un div ou une section entière même.
Pour afficher une infobulle, nous utiliseront alors la pseudo-classe hover qui permet de changer un objet au passage de la souris. On pourrait bien sûr utiliser d'autres pseudo-classes, comme target pour que cela soit "au click", cependant, ce tuto va uniquement vous montrer pour le hover (le target étant largement moins utilisé et quelque peu plus compliqué).

Passons donc tout de suite au code!
Code:
<div class="conteneur"><div class="objet_vise"></div><div class="infobulle"></div></div>


Ok mais là tout est vide! Et c'est un peu sale là d'avoir des div dans tous les sens!

Effectivement, et là, pour l'instant, ce code ne fait pas grand chose... et n'affiche rien! En effet, vu que les div sont vides, rien ne s'affiche! Cependant, c'est la structure de base pour notre infobulle: une div qui entoure deux objets: le premier étant l'objet sur lequel sera l'infobulle, et le second l'infobulle en elle-même.
Vous pouvez bien sûr déjà remplir les deux div internes, et même changer la première div par autre chose (une imae, un span, etc) comme nous verrons plus tard, mais l'important est d'avoir ces trois éléments!

Cependant, avant de passer à autre chose, commençons tout de suite par la base du CSS pour ces trois éléments. Faites bien attention aux classes et ce qu'il s'y fait.

Code:
.conteneur {
position: relative;
height: 100px;
width: 100px;
overflow: visible;
}

.conteneur .objet_vise {
height: 100px;
width: 100px;
background-color: black;
}

.conteneur .objet_vise:hover {
/* ici, on peut modifier l'objet visé au hover si on le veut. Ici, je change sa couleur!*/
background-color: red;
}

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}


Et ça donne ceci:


Ok d'accord, ça fait beaucoup tout ça! O__O

Effectivement! Mais ne vous inquiétez pas, voici les explications, pas à pas!

Code:
.conteneur {
position: relative;
height: 100px;
width: 100px;
overflow: visible;
}


Ceci est donc le code qui met en place notre conteneur. C'est à dire, ce qui va entourer nos deux div.
Il faut qu'il ait le même taille que l'objet sur lequel est l'infobulle. Dans notre cas, vu que l'objet sur lequel sera l'infobulle est un carré de 100x100 pixels, eh bien le conteneur sera aussi de la même dimension.
Il faut également absolument que l'overflow soit à visible autrement, l'infobulle ne s'affichera tout simplement pas lorsque la souris passera au-dessus de l'objet visé, tout simplement parce qu'elle sera en-dehors du conteneur (tout du moins bien souvent en partie) et qu'un overflow hidden cacherait l'infobulle. Et enfin le position relative est là pour permettre, plus tard, de positionner l'infobulle par rapport au conteneur, et donc par rapport à l'objet visé. C'est très important de mettre le position-relative: autrement, toute vos infobulles se mettront par rapport au parent le plus proche ayant un position relative, ce qui est parfois votre moniteur ! Il est donc obligatoire de le mettre, pour ne pas avoir une infobulle n'importe où !


Code:
.conteneur .objet_vise {
height: 100px;
width: 100px;
background-color: black;
}


Ce code-ci permet de mettre en place l'objet visé, donc le mettre en forme. Ici, on crée simplement un carré noir en 100x100 pixels. Vous remarquez que l'on a écrit .conteneur .objet_vise. Cette manière d'écrire veut dire "l'objet de classe objet_vise qui se trouve dans un objet de classe conteneur". Retenez cette manière d'écrire, car elle sera à nouveau utilisée plus bas!


Code:
.conteneur .objet_vise:hover {
/* ici, on peut modifier l'objet visé au hover si on le veut. Ici, je change sa couleur!*/
background-color: red;
}

Grâce au hover sur objet_vise, on peut modifier l'objet visé lorsque la souris est dessus. On aurait également pu échanger et mettre .conteneur:hover .objet_vise pour dire que nous voulons que l'effet se fasse sur l'objet visé, tant que la souris est sur le conteneur ce qui inclut l'infobulle. En effet, avec cette façon d'écrire, si la souris est sur l'infobulle et non pas sur l'objet visé, alors l'objet gardera ses valeurs de base (donc il sera noir et non pas rouge).


Pour que vous visualisiez mieux, voici ce qu'on obtient avec .conteneur .objet_vise:hover { background-color: red; }


Et voici ce qu'on obtient avec .conteneur:hover .objet_vise { background-color: red; }


Il faut mettre votre souris sur l'infobulle!

Code:
.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

Ceci permet de mettre en forme l'infobulle. Nous avons donc une infobulle qui fait du 200x100 pixels, et est d'une couleur grise (le background-color).
C'est le position: absolute permet dont de positionner l'infobulle par rapport à l'objet visé (et du conteneur). Ici, nous avons mit à 80 pixels du haut (top) et 80 pixels de la gauche (left). Nour aurions également pu utiliser bottom (bas) et right (droite) pour positionner de l'autre coté. On aurait également pu utiliser des valeurs négatives, mais c'est fortement déconseillé.
Enfin, nous avns l'opacité (opacity) à 0 et la visibilité (visibility) à hidden (=caché). L'opacité à 0 permet de faire que l'infobulle soit invisible, et la visibilité cachée, permet également de faire en sorte que si la souris passe sur l'infobulle (qui est dans le conteneur et donc pourrait, pour certains navigateur (Chrome...), compter comme un conteneur:hover), celle-ci ne soit pas "vue" par le navigateur. C'est à dire qu'il ne compte pas comme "existant" à ce moment-là pour le navigateur. C'est compliqué, mais dites-vous que si vous ne voulez pas que sous certaine navigateurs l'infobulle apparaisse "sans raison" il faut le mettre!


Code:
.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}

Ceci permet donc de rendre l'infobulle visible, donc en changeant l'opacité à 1, et la visibilité à visible. Le z-index permet de mettre l'infobulle au-dessus de tout. Vous pouvez donc le changer pour autre chose (plus grand que 0), 999 étant une valeur assez grande pour qu tout soit au-dessous de ça!



Les variations


Sur une image


Donc au lieu d'une div, on peut simplement avoir une image en tant qu'objet visé (donc objet sur lequel sera l'infobulle).

Titre Image


Et voici le code correspondant:

Code:
<div class="conteneur"><img src="http://i55.servimg.com/u/f55/09/03/38/36/photo-10.png" title="Titre Image" alt="Titre Image"><div class="infobulle"></div></div>


Avec le CSS correspondant:

Code:
.conteneur {
position: relative;
height: 130px;
width: 130px;
overflow: visible;
}

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}



Hé, mai quasi-rien ne change!

Effectivement, mis à part la taille du conteneur qui change pour s'adapter à la taille de l'image, et le fait que la partie sur "objet_vise" est simplement effacée, eh bien rien ne change! C'est ça qui est bien avec les infobulles: changer d'un objet à l'autre est très simple!

Et si je veux faire des effets sur mon image?

Eh bien il vous suffit d'ajouter ces deux choses là:

Code:
.conteneur img {
/* Effet sur l'image lorsque la souris n'est pas là */
}

.conteneur img:hover {
/* Lorsque la souris est sur l'image*/
}

Ou bien sûr, comme expliqué plus tôt, on peut mettre .conteneur:hover img à la place de .conteneur img:hover.

Donc ceci permet de mettre en forme toutes les images qui sont dans conteneur.

Attends... TOUTES les images dans conteneur? Mais alors... cela veut dire que si j'ai une image dans mon infobulle elle sera affectée aussi?

Et oui! Si vous ne voulez pas que les images dans votre infobulle soient touchées, alors il va falloir mettre une classe à l'image sur laquelle sera l'infobulle, et donc refaire comme plus tôt.

Code:
<div class="conteneur"><img class="objet_vise" src="http://i55.servimg.com/u/f55/09/03/38/36/photo-10.png" title="Titre Image" alt="Titre Image"><div class="infobulle"></div></div>


Et voilà, le problème est contourné en réutilisant les codes de départ, mais en pansant que "objet_vise" est à présent une image!


Sur un texte


Voici donc ce que l'on veut avoir:
Blah blah blah. Ceci aura une infobulle...
Blah blah blah.

Et voici les codes:

Code:
Blah blah blah. <span class="conteneur"><span class="objet_vise">Ceci aura une infobulle... </span> <div class="infobulle"></div></span>Blah blah blah.


Code:
.conteneur {
position: relative;
overflow: visible;
}

.conteneur .objet_vise {
color: blue;
}

.conteneur .objet_vise:hover {
color: red;
}

.conteneur .infobulle {
position: absolute;
top: 20px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999;
}


À nouveau pas grand chose ne change, si ce n'est que l'objet visé et le conteneur sont tous deux des span! En effet, c'est très important, car les span sont des objet "inline" (=en ligne) c'est à dire qu'il n'y a pas de retour à la ligne avant ou après de façon forcée, ce qui permet de faire que tout ceci reste dans le texte.
Vous remarquerez aussi que la hauteur et la largeur des éléments en span ont été retirés, vu que ceux-ci se mettent à la taille de façon automatique: pas besoin donc de les mettre!

C'est donc une plus "grande" différence que ce qu'il y avait pour le passage d'une div à une image, mais relativement simple tout de même!


Sur un objet (div)


Eh bien c'est exactement le code vu au départ de notre tuto! Vos pouvez bien-sûr transformer votre div comme bon vous semble, y mettre du texte, une image de fond, etc etc etc. Bref, beaucoup de possibilités, et je laisse votre créativité imaginer que faire et le tenter! Comme d'habitude, la section des problèmes est là pour vous aider avec tout problème de code! Wink


Quelques effets


Maintenant que vous savez comment faire une infobulle, vous devez vous dire que c'est assez... moche! En effet, elle ne fait qu'apparaître tout simplement et disparaître aussi vite qu'elle est venue! Aucune transition, etc. Je vais donc ici vous montrer quelques exemples de transitions, assez simple à effectuer sur les infobulles! Nous n'allons donc que toucher sur le code CSS des infobulles, le rester restera pareil. (Je mets juste une transition sur l'objet visé pour que cela soit plus joli).


Apparition en fondu


Ce que ça donne:


Et voici le CSS correspondant:

Code:
.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
transition: all ease 1;
}


Comme vous le voyez, il suffit d'ajouter un "transition". Ici, elle se fait en une seconde (le 1s), mais on peut aussi la faire plus court ou plus longue en changeant cette valeur. On a également ajouté le transition au hover ET au normal. En effet, si on veut que l'infobulle apparaisse doucement, on voudrait aussi qu'elle disparaisse de la même manière!
Si vous ne voulez que cela soit fait en fondu que dans un sens, dites-vous que le "hover" est l'apparition, et le normal pour la disparition.


Apparition en agrandissement


Voici ce que nous voulons:


Et le code CSS correspondant, on utilise transform: scale:

Code:
.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
-webkit-transform: scale(0);
transform: scale(0);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
-webkit-transform: scale(1);
transform: scale(1);
visibility: visible;
z-index: 999:
transition: all ease 1;
}


Comme vous pouvez le voir, on retire l'opacité et on met simplement le transform: scale à la place, en le faisant aller de 0 à 1. c'est à dire que l'infobulle ira d'une grandeur = 0 à une grandeur =1 (qui est sa grandeur naturelle. On n'a donc plus besoin d'opacité.
À nouveau, on utilise une transition pour que l'apparition se fasse graduellement!


Apparition en rotation


Voici ce que nous voulons:


Avec le code CSS:

Code:
.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: all ease 1;
}


Ici, on utilise donc transform: rotate, en passant de 360 à 0 degrés. Cela permet de faire faire un tour complet à l'infobulle. Il est obligatoire d'avoir 0 degrés au hover, pour que votre infobulle soit à l'endroit est droite. Vous pouvez très bien changer la valeur si vous voulez, par exemple, qu'elle soit quelque peu en biais lors de l'arrêt de la transition!
La valeur de rotate au "normal" indique donc où on veut commencer la rotation, donc si l'infobulle fait un tour entier, un demi tour, etc. Bref, à vous de choisir!
Vous remarquez également qu'on a gardé l'opacité ici, donc qu'on a un mélange entre un fondu et une rotation! Cependant, ceci est obligatoire, car autrement, votre infobulle apparait de façon soudaine, et effectue simplement une rotation une fois apparue!
Et bien sûr, l'utilisation de transition pour que tout ceci se fasse un peu comme une animation!


Apparition en rotation et agrandissement


Voici ce que nous voulons:


Avec le code CSS:

Code:
.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
-webkit-transform: rotate(360deg) scale(0);
transform: rotate(360deg) scale(0);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
visibility: visible;
z-index: 999:
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
transition: all ease 1;
}


Comme vous pouvez le voir, il y a présent deux valeurs à transform: rotate ET scale. Grâce à scale, on peut également supprimer l'opacité, vu que l'on part d'une grandeur nulle et que donc l'infobulle n'est pas "là".
Et bien sûr la transition pour l'effet d'animation.

Vous pouvez très bien a imaginer d'autres formes d'apparition pour les infobulles, mais ceci vous donne déjà quelques idées!

Et voilà, c'est la fin de ce tuto! Si vous avez des questions ou des problèmes, n'hésitez pas!

Fond en transparence - opacité (fond en couleur ou en image) - Mer 14 Mai 2014 - 10:00





Faire un fond en transparence


Je pense que le titre est assez clair pour que vous imaginiez ce que l'on veut faire, malgré tout, voilà ce que je vais vous montrer comment faire.



Le texte ici présent est dans un div de couleur blanche, avec un fond d'opacité de 80%;


Le texte ici présent est dans un div et a une image de fond d'opacité 60%.



Pour une couleur


Pour une couleur, le code est extrêmement simple! En effet, il suffit d'utiliser le fait que le background-color peut être exprimée en rgba, le a étant l'opacité de la couleur. Il suffit alors de connaître le code RGB de la couleur que l'on veut utiliser, et de lui donner comme dernier élément l'opacité que l'on veut.

Voici donc les codes:

Si on a accès à la feuille CSS du forum



Dans le HTML:
Code:
<div class="fond_transparent_blanc">Ceci est un texte, làlàlà!</div>


Dans le CSS:
Code:
.fond_transparent_blanc {
/* N'hésitez pas à mettre d'autres style ici */
  background-color: rgba(255, 255, 255, 0.8); /* Donc 0.5 = 50%, 0.8 = 80%, etc */
}



Si on est membre, à poster dans un message


Code:
<div style="background-color: rgba(255, 255, 255, 0.8); ">Ceci est un texte, làlàlà!</div>




Pour une image


Pour une image, c'est un tout petit peu compliqué! En effet, on doit ajouter une div supplémentaire, et utiliser le pseudo-élément ":before". Cependant, je vais tetner de vous explique au mieux ce qui se passe ici!

Voici déjà le code HTML:
Code:
<div class="conteneur"><div class="contenu">Ceci est un texte, làlàlà!.</div></div>

Vous voyez donc qu'il y a un div qui entoure notre texte. C'est très important, car sinon, ça ne va pas marcher! La structure est, comme vous le voyez, pas très difficile: la partie la plus difficile réside vraiment dans le CSS!


Si on a accès à la feuille CSS du forum


Voici le code à mettre:
Code:
.contenteur {
  /* Le position relative permet de contrôler le positionnement absolu de l'élément before. */
  position: relative;
 /* N'oubliez pas ici de mettre la hauteur et la largeur de l'élément, ainsi que tout autre effet de style voulu! */
}
.contenteur:before {
  content: ""; /* Obligé de le mettre ou rien ne s'affichera */
  /* Mettre un positionnement absolu et ensuite les 4 option de positionnement (top, bottom, left et right) à 0, permet de faire en sorte que cet élément prenne toute la LARGEUR et toute la HAUTEUR de l'élément parent, dans notre cas, le contenteur! */
  position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 /* L'image de fond, bien sûr! */
  background-image: url('URL_DE_L'IMAGE_ICI');  
  /* Le z-index est la position sur l'axe des z (donc de la profondeur) de cet élément. Ici, on le met à un pour qu'il soit derrière notre contenu. */
  z-index: 1;
 /* Ici on règle l'opacité d el'image de fond. 0.8 = 80%, 0.5 = 50%, etc. */
  opacity: 0.6;
}

.contenu {
  /* Mettre une position est obligatoire pour utiliser le z-index. Vu qu'on ne veut pas de positionnement absolu de notre texte, on le met en relatif. */
  position: relative;
  /* On veut bien sûr notre texte au-dessus de l'image de fond, dans ce cas, on met un z-index plus grand que celui de l'élément before */
  z-index: 2;
}



Si on est membre, à poster dans un message :


Il est cependant possible que vous n'ayez pas accès à la feuille de style du forum où vous voulez poster un tel élément!

Dans ce cas il va falloir utiliser les balises style. Cependant, si vous mettez le message tel quel, vous verrez rapidement que FA prend tous les retour à la ligne en compte! Vous devez alors retirer tous les retours à la ligne.

Voilà la façon de faire :
Code:
<style type="text/css"> CODE ICI SANS RETOUR À LA LIGNE</style>



Et voilà! =D J'espère que ce tuto vous a été utile et si vous avez la moindre question, n'hésitez pas à poster ici : https://www.never-utopia.com/f177-probleme-avec-mon-code !

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

A-Lice

Fiche de pub - Lun 12 Mai 2014 - 0:48



Bonjour/bonsoir.

Une demande de fiche de pub a été faite, voici le LS.



HTML ▬ Aperçu : www


Voici le code :
Code:
<div style="width: 800px; text-align:center; background-color:yellow; color:black; margin:auto; font-family:arial;">
<br /><img src="http://zupimages.net/up/14/19/aewu.png" alt="Bannière" />
<br /><span style="font-size:35px; font-family:arial;">Titre du forum</span>
<br /><table><tr><td><div style="padding:5px; margin-left:-3px; width:388px; border-top:4px solid black; -moz-border-top:4px solid black; -o-border-top:4px solid black; -ms-border-top:4px solid black; -webkit-border-top:4px solid black; border-bottom:4px solid black; -moz-border-bottom:4px solid black; -o-border-bottom:4px solid black; -webkit-border-bottom:4px solid black; -ms-border-bottom:4px solid black; border-right:4px solid black; -moz-border-right:4px solid black; -ms-border-right:4px solid black; -o-border-right:4px solid black; -webkit-border-right:4px solid black; background-color:lime; text-align:justify; font-size:18px; font-family:arial; height:300px;">
<span style="display:block; font-size:25px; font-weight:bold; text-align:center;">CONTEXTE</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget suscipit enim. Mauris sed dolor iaculis, adipiscing nisl a, varius mi. Nam sed dapibus massa. Cras sit amet risus tempus arcu dictum vulputate in porta enim. Etiam id libero id orci dapibus porttitor. Maecenas feugiat, turpis id faucibus faucibus, metus lacus egestas dolor, at lacinia elit augue id dui. Sed et arcu felis. In vel iaculis est. Maecenas felis diam, pulvinar et ligula quis, rutrum lobortis nibh. Nam dignissim, est quis elementum euismod, sapien libero convallis erat, non rutrum diam mi eu ipsum.

</div></td><td><div style="padding:5px; margin-left:-4px; width:388px; border-top:4px solid black; -moz-border-top:4px solid black; -o-border-top:4px solid black; -ms-border-top:4px solid black; -webkit-border-top:4px solid black; border-bottom:4px solid black; -moz-border-bottom:4px solid black; -o-border-bottom:4px solid black; -webkit-border-bottom:4px solid black; -ms-border-bottom:4px solid black; background-color:lime; text-align:justify; font-size:18px; font-family:arial; height:300px;">
<span style="display:block; font-size:25px; font-weight:bold; text-align:center;">NOUVEAUTÉ</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget suscipit enim. Mauris sed dolor iaculis, adipiscing nisl a, varius mi. Nam sed dapibus massa. Cras sit amet risus tempus arcu dictum vulputate in porta enim. Etiam id libero id orci dapibus porttitor. Maecenas feugiat, turpis id faucibus faucibus, metus lacus egestas dolor, at lacinia elit augue id dui. Sed et arcu felis. In vel iaculis est. Maecenas felis diam, pulvinar et ligula quis, rutrum lobortis nibh. Nam dignissim, est quis elementum euismod, sapien libero convallis erat, non rutrum diam mi eu ipsum.

</div></td></tr></table>
<div style="border-bottom:4px solid black; -moz-border-bottom:4px solid black; -o-border-bottom:4px solid black; -webkit-border-bottom:4px solid black; -ms-border-bottom:4px solid black; padding:5px; font-size:18px; font-family:arial;">
<span style="display:block; font-size:25px; font-weight:bold; text-align:center;">STATISTIQUE</span>

Nous comptons {FORUMCOUNTUSER} habitants ayant envoyés {FORUMCOUNTPOST} courrier à leurs voisins. Le maire a emménagé le 01 décembre 2013.

</div><div style="padding:5px; background-color:lime; font-size:35px; font-family:arial;">
<img src="http://zupimages.net/up/14/19/fva3.png" alt="" /> <img src="http://zupimages.net/up/14/19/fva3.png" alt="" /> <img src="http://zupimages.net/up/14/19/fva3.png" alt="" />

</div></div>


Si vous avez un problème avec le code, vous aurez plus de chance d'avoir une réponse en postant votre problème ici .

Guide du template "viewtopic_body" (messages) pour PhpBB2 - Mar 6 Mai 2014 - 14:12



Bonjour,

Après le petit guide pour la modification du template index-box, je vous propose la même chose pour le template viewtopic_body.

Ce guide est sur la version de forum PhpBB2.

Une nouvelle fois, ce guide ne prétend pas être totalement exhaustif. Toutes les contributions pour l’améliorer seront appréciées. Ce guide a pour but de vous aider à vous orienter un minimum à l'intérieur de ce template, afin de le personnaliser ou de comprendre les personnalisations que l'on pourra vous proposer.

Dans un premier temps nous allons regarder les différents éléments structurants du template par défaut, qui organisent les éléments sur votre page. Dans un second temps, vous trouverez une liste des variables que ce template permet d'afficher.
NB : ce guide ne s'intéressera pas aux inserts javascript, n'ayant moi-même pas d'expertise suffisante en la matière.



1. La structure générale du template

Rappel : contrairement à ce que l’on pourrait croire, les indications fournies entre crochets "<  !--TEXTE --  >" ne sont pas de simples commentaires, mais contiennent tous les éléments de structuration des pages de votre forum. Il faudra donc faire attention à ne pas les supprimer en personnalisant votre page (à moins que ce soit un choix volontaire). Notez que dans la suite de ce guide, j'appellerai quand même, par souci de simplicité rédactionnelle, ces éléments structurants des "commentaires".


De manière globale, ce template est composé de 10 tableaux, organisés comme suit :
Spoiler:


  • Tableau 1 (en rouge) : constitué d'une seule ligne, il est divisé en trois colonnes, comprenant les boutons « nouveau » et « répondre », le lien conduisant à ce sujet, et les boutons de partage.
  • Tableau 2 (en orange) : grand cadre qui comprend l'intitulé du sujet, le profil et l'ensemble des messages postés sur une page. Il s’agit du bloc fondamental, où pourra se faire la mise en forme des messages et du profil.
  • Tableau 3 (en violet) : le rappel du titre du sujet et la navigation vers le haut de page ou les autres sujets, sujet précédent et sujet suivant. On le trouve en bas de page.
  • Tableau 4 (en bleu clair) : la pagination, l’accès aux autres pages le cas échéant et le bouton « surveiller les réponses de ce sujet ».
  • Tableau 5 (en bleu foncé) : Il s’agit de la version avec menu fermé du tableau 6.
  • Tableau 6 (en bleu foncé) : encart d’affichage des sujets similaires. Celui-ci peut simplement être masqué depuis le panneau d’administration de votre forum : Général --> Promotion du forum --> Echange de trafic --> Options --> Activer l’échange de trafic. Dans le tableau 6, les liens vers les sujets similaires sont affichés. Les deux tableaux se superposent.
  • Tableau 7 : pas d’explication pour le moment
  • Tableau 8 (en vert) : il comprend le bloc de réponse rapide, ainsi que le descriptif des permissions du forum, et le rappel du chemin d’accès à la page.
  • Tableau 9 (en gris) : il s’agit de la ligne comprenant le rappel des boutons « nouveau » et « répondre » en bas de page, ainsi que l’accès rapide à d’autres forums (« sauter vers »).
  • Tableau 10 (en rose) : les outils de modération (visible pour les administrateurs et modérateurs).


1.1 Le premier tableau

Code:
<table width="100%" border="0" cellspacing="2" cellpadding="0">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap">
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>
<td class="nav" valign="middle" width="100%">
 <span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span>
</td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
 <!-- BEGIN switch_twitter_btn -->
 <span id="twitter_btn" style="margin-left: 6px; ">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </span>
 <!-- END switch_twitter_btn -->
 
<!-- BEGIN switch_fb_likebtn -->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
 <!-- END switch_fb_likebtn -->
 
<span class="gensmall bold">
 <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
  | 
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </span>
 </td>
 </tr>
</table>



Comme vous le savez certainement, un tableau ("table") se divise en lignes ("tr") et en colonnes ("td").
La première colonne de ce tableau comprend deux boutons : le bouton "nouveau sujet" dans le "commentaire" intitulé "switch_user_authpost", et le bouton "répondre" dans le commentaire intitulé "switch_user_authreply".

La deuxième colonne, qui n'est encadrée par aucun commentaire, comprend l'arborescence qui vous a conduit à cette page.
Dans l'exemple illustré ci-dessus, il s'agit donc du texte "forum de test Jo :: Les bases de la Tyrannie :: Les lois de l'Olympe".


Enfin, la troisième colonne comprend les deux petits liens de droite qu'on oublie souvent : "Partagez" et "Plus!", ainsi que, si vous l'aviez affiché, le bouton "j'aime" de Facebook.
Le bouton "j'aime" correspond dans votre template à l'élément compris dans le commentaire "switch_fb_likebtn". Si vous l'enlevez du template, vous ferez définitivement disparaître l'option "j'aime" de votre forum. Cette option peut être tout simplement activée ou désactivée par le biais du panneau d'administration : Modules --> Réseaux sociaux --> Bouton "j'aime" --> activer le bouton "j'aime" de Facebook.

Le bouton "partagez", ainsi que le menu qu'il déroule, s'affiche grâce au morceau de code suivant :
Code:
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>


La variable entre crochets permet d'afficher le mot "partagez", alors que le lien affiche quant à lui le menu déroulant qui l'accompagne.

Le bouton "Plus !" se trouve dans le commentaire "switch_plus_menu", et il prend la forme d'un javascript.

Enfin, il existe dans cette colonne un morceau de code twitter encadré par le commentaire "switch_twitter_btn". Malheureusement, je n'ai pas encore d'explications sur ce point.

1.2 Le deuxième tableau

Spoiler:


Ce tableau contient en tout six lignes et trois tableaux emboîtés. Nous allons maintenant rentrer dans le détail de ce grand tableau qui comprend de nombreux éléments, ligne par ligne.

1.2.1 Première ligne

Code:
<tr align="right">
 <td class="catHead" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title">
 <h1 class="cattitle"> {TOPIC_TITLE}</h1>
 </td>
 <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
 </tr>
 </table>
 </td>
 </tr>


La première ligne du tableau correspond à la partie encadrée en rouge dans l'exemple ci-dessous :
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 Img3


Cette ligne ne comprend qu'une seule colonne, dans laquelle se trouve un tableau emboîté, composé d'une ligne et trois colonnes. La première colonne comporte un espace vide. La deuxième colonne de ce tableau va contenir le titre de votre sujet. Enfin, la troisième colonne affiche les flèches de navigation : la flèche de gauche conduit au "sujet précédent" de la section concernée, la flèche de droite mène au "sujet suivant" et la flèche pointant vers le bas conduit au "bas de page" à l'intérieur du sujet.

Vous pouvez modifier ces trois images par le biais de la gestion des images du panneau d'administration : Affichage --> Images et couleurs --> Gestion des images --> Mode avancé --> Mini icônes --> "Voir le sujet précédent :" ; "Voir le sujet suivant :" et "Aller en bas".


1.2.2 Deuxième ligne

Code:
<!-- BEGIN topicpagination -->
 <tr>
 <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END topicpagination -->
 {POLL_DISPLAY}



Cette ligne est encadrée par le commentaire "topicpagination". Il s'agit tout simplement de la pagination de la page (donc l'affichage du numéro de page et de la navigation vers les autres pages du sujet), qui apparaît dès lors que votre sujet s'étend sur plus d'une page.
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 Img4

Juste en dessous de la pagination, on trouve, entre deux lignes, une variable toute seule : "{POLL_DISPLAY}". C'est elle qui permet l'affichage du sondage, si vous avez créé un sondage dans votre premier message. Attention à ne pas la supprimer si vous voulez utiliser les sondages sur votre forum.

1.2.3 Troisième ligne

Code:
<tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>



Cette troisième ligne est une ligne de titre. Elle comporte deux colonnes, la première indiquant la mention "auteur" et la seconde affichant la mention "message".
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 Img5

Si vous ne souhaitez plus l'afficher, il vous suffit d'enlever le morceau de code ci-dessous :
Code:
<tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>



1.2.4 Quatrième ligne

Juste avant la quatrième ligne s'ouvre un commentaire un peu particulier, intitulé "postrow", qui débute ici pour se terminer dans le tableau n°3. Pas encore d'explication sur le positionnement de cette balise.

Code:
<!-- BEGIN hidden -->
 <tr>
 <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
 </tr>
 <!-- END hidden -->



La quatrième ligne est ensuite encadrée par un commentaire intitulé "hidden". Pas encore d'explication sur ce point.

1.2.5 Cinquième ligne

Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><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 />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
 <td valign="top" nowrap="nowrap" class="post-options">
 {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr>
 <td colspan="2" class="hr">
 <hr />
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <!-- BEGIN switch_vote_active -->
 <div class="vote gensmall">
 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
 <!-- END switch_no_bar -->

 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
 <!-- END switch_vote -->
 </div>
 <!-- END switch_vote_active -->

 <div class="postbody">

 <div>{postrow.displayed.MESSAGE}</div>

 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd>
 <!-- BEGIN switch_post_attachments -->
 <dl class="file">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

 <!-- BEGIN switch_dl_att -->
 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
 <!-- END switch_no_dl_att -->
 </dt>

 <!-- BEGIN switch_no_comment -->
 <dd>
 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
 </dd>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <dd>
 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
 </dd>
 <!-- END switch_no_dl_att -->

 <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->

 <div class="clear"></div>
 <!-- BEGIN switch_signature -->
 <div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>
 <!-- END switch_signature -->

 </div>
 <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
 </td>
 </tr>
 </table>
 </td>
 </tr>



Cette ligne 5 est composée de deux colonnes.

La première colonne (en bleu clair) contient l’avatar, le profil et, le cas échéant, la feuille de personnage, grâce à un ensemble de variables (listées en partie 2). Entre les balises du commentaire "profile_field", vous trouverez toutes les variables qui composent votre profil, tel que vous le remplissez en cliquant sur : Profil -->  Informations --> Profil personnalisé.
La variable que vous trouvez juste après ce commentaire (postrow.displayed.POSTER_RPG) correspond quant à elle à la feuille de personnage, lorsque celle-ci est générée dans votre profil par le biais du panneau d’administration.

La deuxième colonne de la ligne 5 contient pour sa part un tableau emboîté (en bleu foncé). Ce tableau contient à son tour trois lignes.

La première ligne (en rose clair) est divisée en deux colonnes. Dans la première colonne, on trouve le rappel du titre du sujet, et la date de publication du message. Dans la deuxième colonne, on trouve l’ensemble des boutons en haut à droite de chaque message, en fonction de ce qui est affiché et des droits du lecteur : remercier, citer, éditer, supprimer, IP, etc. L’ensemble de ces boutons se modifie dans le PA (Gestion des images).

La deuxième ligne contient simplement une balise "hr", qui correspond simplement à une règle horizontale de séparation.

La troisième ligne (en orange clair) va quant à elle afficher tout le corps du message, mais également les éditions de message, ainsi que la signature du posteur.

Entre les balises du commentaire intitulé "switch_vote_active" se trouvent les boutons permettant de voter pour un message, lorsque le système de réputation est activé.
Si vous ne souhaitez pas les afficher, pas besoin de supprimer ce code, il suffit d’activer ou désactiver l’option par le panneau d’administration : Modules --> Points et réputation --> Réputation --> Options générales --> Activer le système de réputation.

Tout le morceau de code compris entre ces balises a donc vocation à faire fonctionner la barre de vote et  à afficher les différents boutons.

L’élément central de cette ligne est la div suivante, puisqu’il s’agit du corps de votre message.
Code:
<div>{postrow.displayed.MESSAGE}</div>


Ensuite, entre balises du commentaire "switch_attachments", pas d’explication pour le moment.

Enfin, entre les balises du commentaire "witch_signature", on trouve la variable qui permet l’affichage de la signature en bas de chaque message.

Juste après cet élément, vous trouverez le bout de code suivant, qui indique la dernière édition et le nombre d’éditions du message.

Nombreux sont ceux qui veulent s’en débarrasser. Vous n’avez donc qu’à supprimer ce morceau de code :
Code:
<span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>



1.3 Le troisième tableau

Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center">
 <td class="row1" colspan="3" height="28">
 <span class="genmed">{no_post.L_NO_POST}</span>
 </td>
 </tr>
 <!-- END no_post -->
 <tr align="right">
 <td class="catBottom" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
 <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>



Le tableau 3 se compose de trois lignes.

Première ligne : Pas d’explication de cet élément pour l’instant.
Deuxième ligne, entre balises du commentaire "no_post" : Pas d’explication de cet élément pour l’instant.

Enfin, la troisième ligne correspond au bandeau en bas de votre page de sujet (encadré en rouge ci-dessous) qui reprend le titre du sujet, ainsi que les boutons de navigation vers le sujet précédent, sujet suivant, et haut de page.
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 Img5

1.4 Le quatrième tableau

Code:
table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
 <tr>
 <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
 <!-- BEGIN topicpagination -->
 <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
 <!-- END topicpagination -->
 </tr>
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <tr>
 <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
 </tr>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
</table>



Le tableau 4 comporte deux lignes. La première ligne se divise en deux colonnes. Dans la première colonne, on trouve le numéro de la page sur le nombre de pages totales du sujet, sous la forme de la phrase « page X sur X ».
Dans la deuxième colonne, entre les balises du commentaire intitulé " topicpagination", on trouve la pagination, c’est-à-dire la formule « aller à la page », ainsi que la liste des pages du sujet, et un accès rapide à ces pages.

La deuxième ligne de ce tableau n’a qu’une colonne. Cette ligne est insérée dans le commentaire "watchtopic", et concerne l’affichage de l’option « surveiller le sujet ». Il est à noter que ce commentaire est lui-même inséré dans un commentaire intitulé "switch_user_logged_in", puisqu’il est réservé aux membres inscrits sur le forum.

1.5 Les cinquième et sixième tableaux

Code:
<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
</table>
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row2 postbody" valign="top">
 <!-- BEGIN link -->
 » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </td>
 </tr>
</table>
<!-- END promot_trafic -->



Les tableaux 5 et 6 sont compris entre les balises du commentaire intitulé "promot_trafic". Il s’agit de l’échange de trafic, qui s’active ou se désactive depuis votre panneau d’administration : Général --> Promotion du forum --> Echange de trafic --> Activer l’échange de trafic. Lorsqu’il est activé, s’affichent sous vos messages un encart de titre « Sujets similaires » et un petit bouton « moins » qui masque ou affiche une liste de liens vers des sujets similaires d’autres forums.

Inutile donc de supprimer ce morceau de template, à moins vraiment que vous ne vouliez plus jamais entendre parler de cette option.


Le tableau 5 et le tableau 6 sont donc deux tableaux qui fonctionnent ensemble, et dont l’affichage est alternatif. Dans le tableau 5, le menu est masqué. Dans le tableau 6, le menu est déroulé, avec les liens. Les liens sont d’ailleurs affichés entre les balises du commentaire intitulé "link".

On retrouvera plus loin le même principe de tableau à affichage alternatif à l’intérieur du tableau 8.

1.6 Le septième tableau

Code:
<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
 <tbody>
 <tr>
 <td class="catBottom">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
 <tr>
 <td valign="top">
 <h1 class="cattitle"> {L_FORUM_RULES}</h1>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row1 clearfix">
 <table>
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules postbody">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
</table>
<!-- END switch_forum_rules -->


Pas d’explication pour l’instant.

Onyx

Bloc flottant latéral ouvrant "onclick" (javascript) - Sam 11 Jan 2014 - 5:11



Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bouh!

Autant j'aime bien le bloc flottant latéral ouvrant "onclick" (CSS avec target) d'Okhmhaka, autant je préfère passer par le javascript pour éviter d'avoir les "#target_onglet" dans ma barre d'adresse.

Du coup, j'ai laissé tombé l'idée d'utiliser le CSS3 pour ça et me voilà avec du javascript qui vous donnera le même résultat avec une méthode différente.

Sachant que tout le monde n'adore pas nécessairement faire du graphisme, vous avez l'option d'avoir un bouton pour ouvrir/fermer l'onglet fait avec des images ou avec du texte ^^

Je vous montre un petit exemple juste ici avec la méthode qui ne demande pas d'images.



Si le bouton est une image



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <img id="ongleton_ouvrir" src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" />
    <img id="ongleton_fermer" src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" style="display: none;" />
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première image est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième image est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
}


Voilà, votre bloc flottant est installé ^^






Si le bouton est un texte



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <div id="ongleton_ouvrir">
      Ouvrir
    </div>
    <div id="ongleton_fermer" style="display: none;">
      Fermer
    </div>
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première div est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième div est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant et les boutons dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
  width: 100px;
  height: 20px;
  background-color: #1B2836;
  border: 2px solid #6993BE;
  border-bottom: none;
  text-align: center;
  color: #9BB9D9;
  padding: 5px;
  padding-top: 10px;
  border-radius: 30px 30px 0 0;
  margin-left: -42px; /*Pour coller le bouton contre le bloc flottant*/
  -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/
  transform:rotate(90deg); /*Pour tourner le texte sur le côté*/
}


Voilà, votre onglet flottant est installé ^^




N'oubliez pas de créditer N-U è_é

Trenz

Style Rond - Sam 4 Jan 2014 - 18:20






Citation

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE



Code:
<style> .entete { border:dashed 0px #000000; -moz-border-radius-topleft: 80px; -moz-border-radius-topright:80px; -moz-border-radius-bottomleft:80px; -moz-border-radius-bottomright:80px; -webkit-border-top-left-radius:80px; -webkit-border-top-right-radius:80px; -webkit-border-bottom-left-radius:80px; -webkit-border-bottom-right-radius:80px; border-top-left-radius:80px; border-top-right-radius:80px; border-bottom-left-radius:80px; border-bottom-right-radius:80px; background-color: #000000; color: #FFFFFF; width: 200px; height: 200px; overflow: auto; padding: 10px } .entete:hover { background-color: #540707; color: #EDF500 </style>

<center><div class="entete">
[center]<div style="font-family: Oswald, cursive">[size=24]Citation[/size]</div>[/center]

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE

[right][size=7] (c) <a href="http://www.never-utopia.com/forum">Never Utopia</a>[/size][/right]


Ceci est une petite en-tête de rp ronde, faîtes avec du hover. J'insiste sur le fait que le crédit doit être gardé, il est interdit de l'enlever, ceci sera considéré comme du plagiat. Postez un petit merci pour avoir le code, vous me ferez grand plaisir <3

Défilement, rotation continue, balancier...[CSS3 animations complexes] - Lun 2 Déc 2013 - 14:54



Défilement - Rotation continue - Balancier ...
Les Animations complexes [CSS3]


Édit Responsable : Ce tutoriel utilise des animations. Si vous ne connaissez pas le fonctionnement, je vous suggère de lire ce tutoriel afin de comprendre les bases.


Dans ce tutoriel je souhaite aborder les animations "complexes", même si ce terme n'est peut-être pas le bon, disons plutôt l'élaboration d'animations, en CSS3. Qu'est-ce que ça donne concrètement ? Eh bien le parfait exemple est le site web de Never-Utopia :
- la lanterne qui se balance
- les nuages qui défilent
- les bulles qui remontent
- les rouages qui tournent
- les lueurs qui semblent réelles
etc.

C'est quelque chose qui semble complexe au premier abord mais qui ne l'est pas tant que ça, et surtout qui permet énormément de possibilités une fois qu'on a compris le principe ! Il y aurait énormément d'animations différentes à voir et à faire, mais dans ce premier tutoriel (j'en ferais peut-être d'autres ensuite sur ce type d'animation) je vais présenter trois animations différentes :
- un défilement (avec des nuages)
- une rotation (avec un soleil)
- un balancier (avec une sorte de cadre au bout d'une chaine)

Forum test

Vous avez donc ces éléments en haut de page. N'ayant pas mon logiciel de graphisme sous la main à ce moment là, j'ai simplement utilisé des images ou icônes trouvées sur internet.
Ce tutoriel a donc pour but de vous apprendre à placer et animer les trois objets cités plus haut. Libre à vous par la suite de les remplacer par ce que vous voulez !

I/ LE NUAGE

Attention : pour que le code fonctionne et notamment l'animation, vous devez cocher "non" à "Optimiser votre css", paramètre qui se trouve en dessous de votre cadre de saisie de la feuille CSS de votre forum.


Commençons par le nuage qui défile. Pour cela, vous avez besoin de l'image d'un nuage en transparence, ce qui est moins difficile à trouver qu'on pourrait croire. Tapez par exemple les mots "nuage png" sur google... L'autre solution pour avoir le nuage que le voulez est de le faire vous-même sur votre logiciel en utilisant des brushes.
Une fois que vous avez votre image, il va falloir la placer dans le haut de page.

1) le HTML

Allez dans le template "Haut de page" (ou "overall_header") que vous trouverez dans "Affichage" > "Templates" > "Général" > "Haut de page".
Placez vous après ce code :

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>
 </div>
 </div>
 <!-- END hitskin_preview -->

(lignes 201 à 213 dans le Template original)

Et intégrez donc ceci juste à la suite (donc ligne 214) :

Code:
<div id="nuage_bloc"><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>

Il s'agit donc simplement d'un premier bloc de contenu, contenant un autre bloc qui lui contient l'image.
N'oubliez pas de valider votre template !

2) le CSS

Si vous avez validé et que vous êtes allés voir le résultat vous avez pu constater que le nuage est fixe, en haut de forum, et qu'il décale tout vers le bas. Normal, il prend une place, les autres éléments se positionnent en fonction de lui aussi.
Pour éviter cela nous allons le mettre en "absolute", afin qu'il soit par dessus les éléments qui le suivent. Commencez donc par mettre ceci dans votre CSS :

Code:
#nuage_bloc
{
  position: absolute;
  top: 0;
  left: 0;
  widht: 100%;
  overflow: hidden;
  margin-top: -100px;
}

Nous avons donc ici placé notre nuage en absolute, il couvre alors les autres éléments. Le top "0" et left "0" sont pour caler le bloc à l'angle de la page entière, et être sûr qu'il ne soit décalé par rien d'autre. C'est important car nous allons ensuite le décaler hors de la page, il faut donc être sûr de sa position de départ.
Le "width: 100%" indique que le bloc fera toute la largeur de page et le overflow "hidden" permet de masquer tout ce qui sortira du bloc et éviter l'apparition d'un scroll.
Quant au "margin-top" il est ici totalement facultatif, c'est simplement pour vous montrer que vous pouvez monter ou descendre votre nuage, de sorte qu'il passe, par exemple, en bas de la bannière. C'est à vous d'adapter cette marge, voire de la retirer.

Il faut maintenant faire bouger notre nuage, et pour cela nous allons utiliser un "keyframes". En gros il s'agit de décrire l'animation voulue, par étape, en ajoutant autant d'étape que désiré. Un keyframes d'animation se présente sous la forme suivante :

Code:
@keyframes nom_de_l_animation
{
0% {propriétés...}
100% {propriétés...}
}

Vous avez donc le @keyframes qui ne change pas, puis un espace et le nom de l'animation que vous allez faire, dans mon cas je le nommerais "nuage". Ce nom importe peu, essayez juste de faire simple, sans caractère spéciaux évidemment.
A l'intérieur des accolades se trouvent les étapes de l'animation. 0% c'est le stade de départ, 100% le stade d'arrivée. Il y a donc d'autres accolades ouvertes après le 0% afin que vous puissiez dire "au départ le style du bloc c'est ..." et d'autres accolades à 100% pour que vous puissiez donner les propriétés du bloc à l'arrivée.
A ce stade, peu importe que l'animation soit en boucle ou pas, vous devez donner en fait juste une boucle d'animation.
Il est possible d'ajouter d'autres étapes ! On verra ça pour le balancier du tableau donc pour le moment on se contentera du début + fin.

Voilà ce que donne notre "keyframes" :

Code:
@keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}

Pourquoi ? Alors nous avons placé notre bloc tout à l'heure en disant qu'il était collé au bord et qu'il avait la largeur de toute la page. L'étape 0% (du début donc) sera de décaler totalement ce bloc vers la gauche pour qu'il soit hors de la page. Il faut donc le décaler de sa largeur, donc 100%. L'avantage du pourcentage ici c'est que peu importe la largeur de l'écran, le bloc sortira forcément de la page puisque 100% = la largeur de page, peu importe la résolution.
L'étape du 100% sera de faire sortir le bloc à nouveau, mais cette fois totalement à droite de la page, pour qu'il soit entièrement dehors. On passe donc d'une marge gauche totale (-100%) à une marge droite totale (100%). L'animation amènera donc l'objet à faire ce trajet.

La compatibilité avec un maximum de navigateur étant importante, il faut développer un peu notre code avec les éléments que comprennent les autres navigateurs. Au final, notre keyframes donne ceci :
Code:
@keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-o-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-moz-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-webkit-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}

(Le premier est le code de base, classique. Le second rend compatible pour Opera, le second pour Firefox et le troisième pour Safari.

On pourrait penser que c'est suffisant, mais en réalité le keyframes n'anime pas votre élément ! Il décrit simplement l'animation que vous voulez, mais il faut appliquer cette animation de la façon que vous connaissez déjà plus ou moins, ce sera simplement pas une "transition" mais bien une "animation".
Voici ce que vous devez ajouter :

Code:
#nuage
{
  animation: nuage 20s linear infinite;
  -o-animation: nuage 20s linear infinite;
  -webkit-animation: nuage 20s linear infinite;
  -moz-animation: nuage 20s linear infinite;
}

J'ai donc mon bloc "nuage" (le bloc contenant l'image) et ma ligne d'animation ainsi que les lignes permettant aux maximum de navigateur de comprendre la consigne. J'ai condensé les informations, mais nous avons, dans l'ordre :
animation : le nom de l'animation - le temps total d'une boucle de l'animation - la vitesse d'animation - le nombre de fois que l'animation se répète.
Nous avons donc ici : l'animation nommée "nuage" donc chaque boucle (donc un aller de 0% à 100%) durera 20s, la vitesse sera linéaire (même vitesse sans ralentissement ou accélération) et l'animation se répètera indéfiniment.

Validez et regardez... Votre nuage bouge ! Il défile de gauche à droite sans rupture puisqu'il va d'un côté à l'autre de la page en sortant entièrement de celle-ci.

PS : on pourrait ajouter comme élément un "délai", c'est à dire imposer qu'entre deux boucles l'animation s'arrête durant un temps défini. On obtiendrait alors un nuage qui passe, puis une fois sorti de la page il attendrait X secondes avant de réapparaitre de la gauche.

Si vous souhaitez que vos nuages ne défilent QUE dans un bloc défini et non sur toute la largeur de page, il vous faut placer votre bloc à l'endroit voulu et lui donner une taille inférieure, en pixel généralement, de votre bloc. Ensuite le chiffre du décalage sera forcément égal à la largeur de ce bloc.

Voilà donc pour notre nuage, vous pouvez très bien faire défiler ainsi plusieurs images de nuage à des vitesses différentes pour plus de réalisme, mais souvenez-vous que ça alourdi la page x).
Au passage une précision : si votre bloc passe par dessus la bannière vous ne pourrez plus accéder au clic de celle-ci. La solution est alors de rendre le nuage cliquable, ou mieux de faire un lien global cliquable qui couvre tout votre bloc nuage, comme ceci (dans le HTML) :

Code:
<div id="nuage_bloc"><a href="/forum.htm" style="display: block; position: absolute; width: 100%; height: 100%;"></a><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>

Libre à vous ensuite de personnaliser cela comme vous le voulez, vous pouvez baisser la vitesse de défilement en augmentant le temps que met l'animation à réaliser une boucle par exemple.


I/ LE SOLEIL

Le nuage c'est bien, mais avec du soleil c'est mieux *o* nous allons donc l'ajouter, et pour que tout reste animé nous le ferons tourner continuellement x)

1) HTML

Comme pour le nuage nous allons commencer par placer notre image du soleil (icône météo trouvée sur google...) dans le template haut de page. Le chemin reste identique ("Affichage" > "Template" > "Haut de page"). Placez le code suivant au même endroit que le nuage (avant ou après, c'est à votre choix, vous pourrez toujours les inverser après coup de toute façon), c'est à dire vers la ligne 214 du template de base.

Code:
<div id="soleil_bloc"><div id="soleil"><img src="http://img15.hostingpics.net/pics/344028soleil.png" /></div></div>

Validez et n'oubliez pas d'enregistrer votre template !

2) Le CSS

Allons ensuite positionner et animer notre soleil. Pour cela, ouvrez la feuille CSS. La première étape, comme précédemment, sera de placer notre bloc.

Code:
#soleil_bloc
{
  position: absolute;
  top: 0;
  right: 0;
  widht: 256px;
  height: 256px;
  overflow: hidden;
}

Comme vous pouvez le voir il y a des similitudes avec le précédent placement. Le principe reste le même, mais puisque j'ai décidé de placer mon soleil à droite, je vais le caler d'abord totalement dans le coin droit. Je n'ai pas ajouté d'autres marges mais vous pouvez le décaler encore plus vers le haut et la droite de sorte qu'on ne voit qu'une partie du soleil et que le reste soit hors page. Rien n'affectera l'animation.

Ajoutons ensuite nos keyframes, sous la même forme que tout à l'heure c'est à dire :

Code:
@keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-o-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-moz-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-webkit-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}

Je rappelle donc que le nom "soleil" est le nom de l'animation. Les différentes keyframes sont là pour qu'un maximum de navigateurs comprennent notre consigne d'animation.
Voici l'animation que j'utilise, normalement vous la connaissez ou vous l'avez déjà rencontrée quelque part... :

Code:
@keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-o-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-moz-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

Dans notre première étape, le positionnement de l'objet est à 0 degré, il est "droit". Dans la position finale, l'objet est à 360°, il est droit aussi. En fait il est placé exactement pareil à la première et à la dernière étape, c'est le fait de réaliser une transition entre ces deux états qui va donner l'animation.

Astuce : si vous souhaitez faire tourner votre objet dans le sens inverse, mettez simplement un "-" devant le "360deg" !

De la même façon que précédemment, l'animation est définie, mais elle n'est pas encore appliquée à notre élément. Nous allons donc l'ajouter :

Code:
#soleil
{
  animation: soleil 6s linear infinite;
  -o-animation: soleil 6s linear infinite;
  -webkit-animation: soleil 6s linear infinite;
  -moz-animation: soleil 6s linear infinite;
}

J'ai donc mentionné que c'était bien l'animation "soleil" qui devait s'appliquer, qu'elle durait 6 secondes, qu'elle doit se dérouler à une vitesse constante et infiniment.
Si j'avais mis "nuage" en nom d'animation nous aurions eut un soleil défilant (bien que l'animation n'aurait pas été bonne puisque le placement de l'élément est différent du nuage).

Vous pouvez ici aussi ralentir la vitesse de rotation en augmentant le temps mis pour faire un tour (ici 6 secondes).


I/ LE TABLEAU

Passons à l'animation du balancier pour notre tableau au bout de sa chaîne. Le tableau est vide dans mon exemple car j'ai juste pris le render que j'ai trouvé, mais il faut bien sûr imaginer qu'il contienne une image, ou bien que ce soit une lanterne ou tout autre objet susceptible de se balancer x)

1) HTML

On démarre de la même façon en intégrant notre image dans le template "overall_header" (Haut de page), même endroit que les autres donc aux alentours de la ligne 214.

Code:
<div id="tableau_bloc"><div id="tableau"><img src="http://img15.hostingpics.net/pics/956096tableau.png" height="400" /></div></div>

Remarque : j'ai réduis directement dans ce code la taille de l'image du tableau qui était à l'origine beaucoup plus grande. J'ai ici bloqué la hauteur à 400px donc le reste c'est adapté en se redimensionnant à l'échelle.

2) Le CSS

Positionnons notre image, j'ai choisi de la mettre à gauche, mais libre à vous de la mettre ailleurs... Le tout est que puisque notre image se balance c'est qu'elle est accrochée à quelque chose, donc il est préférable que l'image donne l'impression d'être accrochée au bord de page, sauf si bien sûr vous l'intégrez dans une image (fond de PA ou autre) et que vous la calez sur un plafond, une poutre ou que sais-je).

Code:
#tableau_bloc
{
  position: absolute;
  width: 300px;
  top: 0;
  left: 0;
  overflow: hidden;
}

Voilà pour le positionnement, passons à l'animation. Celle-ci sera un peu plus complexe que les précédentes puisque nous allons avoir trois étapes. En effet, notre objet doit effectuer un mouvement de balancier de la gauche vers la droite, mais il doit ensuite revenir par le chemin inverse. Si vous ne mettez que deux étapes vous aurez votre objet qui fera : gauche > droite puis qui disparaitra, re-apparaitra sur la gauche pour refaire le balancier dans le même sens.

Nous allons donc avoir ceci :

Code:
@keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-o-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-moz-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-webkit-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}

Notre objet va donc de -10 degré vers 10 degré, puis une fois à 10 degré retourne à -10 degré. Avec ces étapes nous avons notre boucle complète.
Reste à appliquer l'animation sur l'objet, et là il faut bien imaginer le problème que l'on va rencontrer... Si vous essayez de faire une application comme pour les autres animations, donc comme ceci :

Code:
#tableau
{
  animation: tableau 3s linear infinite;
  -o-animation: tableau 3s linear infinite;
  -webkit-animation: tableau 3s linear infinite;
  -moz-animation: tableau 3s linear infinite;
}

Vous allez bien avoir votre rotation, mais la rotation se fait autour du centre de l'image ! Comme pour le soleil qui tourne en ayant pour point d'ancrage son centre... En effet, les rotations, par défaut, se font en ayant pour point d'ancrage le milieu de l'image. C'est un problème, car nous, nous voulons que ce point soit le haut de la chaine, donc le milieu oui mais le milieu du HAUT de l'image... Heureusement, il est possible de changer cela x) (sinon je ne serais pas arrivé à mon résultat sur l'exemple). Vous devrez donc ajouter une origine à la transformation, comme ceci :

Code:
#tableau
{
  animation: tableau 3s linear infinite;
  -o-animation: tableau 3s linear infinite;
  -webkit-animation: tableau 3s linear infinite;
  -moz-animation: tableau 3s linear infinite;
  transform-origin: 50% 0;
}

Le premier nombre (50%) est la distance vers la droite horizontalement, et le "0" représente la distance du haut de l'image verticalement. Nous sommes donc bien à la moitié de l'image mais totalement en haut de celle-ci.

Bien ! Nous avons donc notre animation de balancier... Cependant, si vous comparez votre animation actuelle et la mienne il y a une différence : dans votre cas l'animation a une vitesse constante ce qui fait qu'arrivé aux extrêmes (totalement à droite ou totalement à gauche) on dirait que votre objet heurte un mur car il repart très sèchement de l'autre côté... Ce n'est pas naturel, pas réaliste, car un balancier ralenti à chaque fois qu'il remonte un peu, jusqu'à s'arrêter un millième de seconde puis repartir dans l'autre sens.
Pour changer cela afin que notre animation soit plus réaliste, il va falloir changer la constance de la vitesse, donc notre "linear" ne convient pas ! La courbe de vitesse de notre objet doit faire "lent-rapide-lent", et ceci s'appelle "ease-in-out".
Voici donc le bon code css pour appliquer notre animation :

Code:
#tableau
{
  animation: tableau 3s ease-in-out infinite;
  -o-animation: tableau 3s ease-in-out infinite;
  -webkit-animation: tableau 3s ease-in-out infinite;
  -moz-animation: tableau 3s ease-in-out infinite;
  transform-origin: 50% 0;
}

Regardez le résultat, vous verrez que c'est nettement mieux ^^


Voilà, ce tutoriel est terminé, il vous présente trois animations différentes que vous pouvez ensuite vous amuser à personnaliser comme bon vous semble !
Je ferais cependant une étape de cursus sur les animations afin que tout expliquer en détail, j'ai pensé qu'en premier lieu une application directe, même si vous ne possédez pas tout les éléments, était plus ludique qu'un bourrage de crâne sur une dizaine de termes et de propriétés.

Si vous utilisez ce tutoriel merci de mettre un crédit à Never-Utopia, en remerciement Wink

Enjoy x)

Mettre la navigation en colonne (verticalement), positionnement libre - Ven 29 Nov 2013 - 17:39



Navigation en colonne - positionnement libre


Bien que principalement pour PhpBB2, cette astuce est facilement adaptable pour toutes les versions de forumactif.

Dans cette astuce l'objectif est de changer l'affichage de la navigation pour qu'elle ne soit plus en ligne mais en colonne, les liens affichés les uns en dessous des autres. La navigation restera cependant celle d'origine et ses liens pourront être modifiés via le panneau d’administration (ajout du calendrier, du portail, etc...). De même, les connectés auront les liens de profil et messagerie que les invités n'auront pas. Bref, vous l'avez compris, la barre barre restera identique dans son contenu que la navigation classique mais son positionnement change, les liens seront les uns en dessous des autres et le bloc qui les contiendra pourra être placé où vous le souhaitez (par défaut dans le code il sera collé au bord gauche de la page.

Exemple de résultat (le lien "membre" étant survolé) :

Tag html sur Never Utopia - graphisme, codage et game design - Page 6 318675prov

1/ Modification du template

Tout d'abord il nous faut trouver le code affichant la navigation. Allez pour cela dans votre template "Haut de page" (dans "Affichage" > "Templates" > "Général") autrement nommé "overall_header". Notre bout de code se trouve de la ligne 265 à 269.

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
</table>
De ce code, nous n'allons conserver que la variable affichant seulement la navigation :

Code:
{GENERATED_NAV_BAR}
Et donc remplacer tout le code plus haut (des lignes 265 à 269) par celui-ci :

Code:
<div id="navigation">
    <div id="navig">{GENERATED_NAV_BAR}</div>
  </div>
N'oubliez pas d'enregistrer puis de valider votre template.

Allez également changer l'affichage de votre navigation, si besoin. Assurez-vous que vous avez coché "non" dans "Affichage" > "En-tête et navigation" > "Afficher seulement des images dans la barre de liens".  


2/ Le CSS

Tout d'abord il faut savoir que l'affichage par défaut de chaque lien de navigation sont "inline" (en ligne), nous allons donc les changer en "block" (bloc).

Code:
#navig a
{
  display: block;
}
Rien que ce code permet de mettre votre navigation en colonne, mais cela décale alors tout vers le bas puisqu'elle prend désormais de la place en hauteur et non en largeur.
Pour corriger cela nous allons mettre le bloc "navigation" en absolute et délimiter sa taille.
Pour le reste, il suffira de mettre les couleurs, bordures et effets que vous souhaitez sur votre bloc. Voici le CSS expliqué :

Code:
/* NAVIGATION */

#navigation /* configure le bloc qui contient tout les liens */
{
  position: absolute; /* permet de mettre la navigation par dessus le reste sans decalage */
  top: 0; /* colle le bloc en haut de la page */
  left: 0; /* colle le bloc a gauche de la page */
  margin-top: 100px; /* marge haute */
  border: 3px solid #44a5ff; /* bordure */
}
#navig a /* personnalise les liens */
{
  display: block; /* met les liens en colonne */
  margin-bottom: -20px; /* enleve l'espacement par defaut des liens entre eux */
  background: #ffffff; /* couleur de fond des liens */
  border-bottom: 1px solid #e6e6e6; /* bordure basse des liens */
  padding: 3px 10px; /* marge interieure des liens */
  text-align: center; /* alignement du texte */
  text-transform: uppercase; /* met le texte en majuscule */
  transition: 1s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig a:hover /* personnalise les liens au survol */
{
  background: #212121; /* couleur de fond du lien */
  color: #ffffff; /* couleur du texte lien */
  transition: 1s; /* permet la transition lente */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig img
{
  display: none; /* permet d enlever l espace vide de l image contenue par defaut dans le lien */
}
Quelques remarques et explications sur l'apparence de vos liens :
la marge : par défaut les liens de navigation sont très espacés. Pour combler cela j'ai ajouté une marge basse négative (margin-bottom) à mes liens (navig a). On aurait pu faire la même chose avec une marge haute négative mais cela faussait alors ma marge haute sur le bloc, je préférais mettre le margin-bottom, c'est plus logique à mon sens et posera moins de problème.
l'image : une image vide se trouve dans les liens, par défaut, c'est l'image de l’icône que vous pouvez ajouter aux liens lorsqu'ils sont affichés en "texte". Ce bloc vide possède des dimensions, il est petit, certes, mais vous gênera lors de votre personnalisation. C'est pour enlever totalement l'affichage de ce bloc que j'ai noté un "display: none" dans l'image des liens de navigation.


3/ Personnaliser

Positionner le bloc où vous le souhaitez - Pour cela vous aurez deux solutions, selon l'endroit où vous voulez placer votre bloc. Si votre bloc doit se placer par rapport au coin ou au bord de la page, vous pourrez simplement faire varier les "margin" (margin-top, margin-left) afin de le décaler plus ou moins du haut de page et du bord gauche. Si au contraire vous voulez mettre ce bloc par rapport à une bannière (si vous avez prévu dans votre bannière un cadre qui doit contenir la navigation), vous devrez commencer ABSOLUMENT par mettre le positionnement suivant :

Code:
#navigation
{
top: 0;
left: 50%;
}
Ce n'est que par rapport à cette position de référence que vous pourrez ensuite ajouter un margin-top ou un margin-left, quitte à mettre un margin-left négatif pour le ramener vers la gauche.
Je ne détaille pas le pourquoi du comment de cette méthode, si vous voulez la comprendre je vous encourage à consulter Le Cursus codage - Partie 4, TP1 (créer une page d'accueil HTML pour un forum) où je l'explique plus précisément.

Mettre des images à la place des liens textes - Même si je vous ai fait afficher uniquement les liens en début de tutoriel, vous pouvez parfaitement mettre des images à la place. Pour cela n'oubliez pas de changer l'affichage dans le panneau (Affichage > En-tête et navigation > Afficher seulement des images... > Oui). Tenez compte de la taille voulue dans la réalisation de vos images ! Prenez en considération que les images seront les unes sur les autres, et il est préférable qu'elles fassent toutes la même largeur.

Diminuer l'opacité - Si votre navigation est placé par rapport au bord de page comme dans mon premier exemple, il est possible que pour les résolutions basses elle soit par dessus la bannière... Il peut donc être judicieux, selon votre positionnement, d'afficher ce bloc de navigation en opacité réduite, et faire en sorte qu'il apparaisse en opacité totale au survol de la souris.
Pour cela, utilisez le code d'opacité suivant (à ajouter dans le début du css, pour "navigation") :

Code:
#navigation
{
opacity: 0.5;
-moz-opacity: 0.5;
-khtm-opacity: 0.5;
filter: alpha(opacity=50);
}
#navigation:hover
{
opacity: 1;
-moz-opacity: 1;
-khtm-opacity: 1;
filter: alpha(opacity=100);
}
Fixer la navigation ? - Fixer la navigation signifierait que le bloc ne bougera pas lorsque l'utilisateur scrollera la page. Il faut tenir compte de cela et bien visualiser que le bloc cachera tout ce qui passera en dessous de lui, c'est pourquoi je vous conseille de ne pas fixer le bloc et de le laisser en positionnement "absolute".

Combiner deux tutoriels ? - Avec le tutoriel que vous venez de consulter vous pouvez combiner "Bloc de navigation" (haut, bas et ancres) pour placer votre bloc de navigation DANS l'onglet et ainsi faire en sorte que cette navigation soit la vraie navigation de votre forum, et non des sortes de "liens utiles". Si vous faites cela, le positionnement "absolute" du bloc "navigation" n'est pas nécessaire.

Hana Evali

en tête soleil - Lun 28 Oct 2013 - 1:02



Bonjour à tous,

Voici un en tête de RP très simple mais original et facilement modifiable :)

Un petit aperçu ?

Un autre aperçu:


Code:
<br /><div style="background-color: #couleur; margin: auto; width: 500px; height: auto; color: #FF5900; text-shadow: 2px 2px 2px #7D0000; font-size: 40px; border-radius: 50px; box-shadow: 5px 0px 5px #7D0000; text-align: center;">Titre - Nom P.<br /><br /><img style="width: 50px; height: 50px; border: 2px solid #FF9300; border-radius: 0px 50px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><img style="width: 50px; height: 50px; overflow:hidden; border: 2px solid #FF9300; border-radius: 50px 0px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><br /><img style="width: 50px; height: 50px; overflow:hidden; border: 2px solid #FF9300; border-radius: 50px 0px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><img style="width: 50px; height: 50px; overflow:hidden; border: 2px solid #FF9300; border-radius: 0px 50px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><br /><div style="font-size: 11px;"><a href="http://www.never-utopia.com/">(c)Hana Evali</a></div></div>

Variante du Tutoriel de Amaziel (barre de navigation en haut du forum) - Ven 18 Oct 2013 - 2:55



Bonjour, :love: 

Suite à un magnifique tutorel (maintenant archivé) de Amaziel pour coller la barre de navigation en haut du forum (aperçu : ici), j'en ai changé quelque particularité qui, je pense, feront plaisir à certain. Dans ce tuto je vous monterais deux façons de modifier la barre : 
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 504593mini2 - Mettre la barre en Transparence au dessus de votre header
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 504593mini2 - Mettre la barre en transparente SUR votre header.


Etape -0 (reproduire le tuto d'Amaziel)
Tout d'abord, vous rendre dans le bon template :
Panneau d'administration >> Affichage >> Templates >> General >> Template overall_header

Puis, supprimer la barre de navigation de base qui est dans le template :
Code:
{GENERATED_NAV_BAR}


Vous retrouvez ensuite ce bout de code dans le template :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Et vous ajoutez, directement après, ce code :
Code:
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #000000; z-index:1000; width: 100%; border-bottom:1px solid #5E4036;" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>


Vous enregistrez et publiez le template et voilà !


Variante 1 : Mettre la barre en Transparence au dessus de vôtre header[/b]

Repérer la ligne suivante que Amaziel vous as fait installer dans l' Overall_hearder
Code:
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #000000; z-index:1000; width: 100%; border-bottom:1px solid #5E4036;" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>


Et changer le par celui-ci : 
Code:
<TABLE STYLE="POSITION: FIXED; LEFT: 0PX; TOP: 0PX; RIGHT: 0PX; BACKGROUND-COLOR: none!important; Z-INDEX:1000; WIDTH: 100%;" ><TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR></TABLE>


S'il se présente un espace entre la barre et le haut de vôtre forum, ce qui est possible car nous avons supprimer la couleur régler le :
"top: 0px;" à "top: -10px;" de manière a ne plus voir cette espace.

Ce qui vous donnera ceci : 
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 Eta1_b10





[u]Variante 2
: Mettre la barre en transparence SUR votre header.

Les code suivants sont basée en fonction d'un header collé en haut du forum. 

[b]Etape 1 : CSS du header

Allez dans: Affichage > couleur > feuille de style css.

Puis, collez ceci dans votre feuille de CSS :
Code:
/* LOGO DU FORUM */
img#i_logo {
width: 100%!important;
margin-left: 0px!important;
margin-right: 0px!important;
margin-top: -10px!important;
}


Ce code est configuré pour que votre image colle au bords de droite, de gauche et du haut de votre forum, vous pouvez bien sur les modifier. Le "margin-top: -10px" sert à monter l'image en haut pour la rétrécir si vous le souhaiter.


Repérer une fois de plus la ligne suivante que Amaziel vous as fait installer dans l' Overall_hearder
Code:
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #000000; z-index:1000; width: 100%; border-bottom:1px solid #5E4036;" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>


et remplacer le par celui-ci : 
Code:
<TABLE STYLE="POSITION: ABSOLUTE;
              LEFT: 0PX;
              TOP: 0PX;
              RIGHT: 0PX;
              BACKGROUND-COLOR: none!important;
              Z-INDEX:1000;
WIDTH: 100%;" >
<TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR>
</TABLE>


Cela devrait  donner ceci :
Tag html sur Never Utopia - graphisme, codage et game design - Page 6 Eta2_b10

Voila, Voila :cow:

Si vous avez la moindre question ou si vous souhaiter une modification a cette petite barre, n'hésitez pas a répondre à ce message, je reviendrait régulièrement vous aider. 

Bonne journée à tous :love:

Neva

Design changeant selon l'heure (bannière, fond et autres) - Dim 22 Sep 2013 - 16:33


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


RAPPELS :
- Si vous avez un problème avec ce tutoriel, n'hésitez pas à poser vos questions mais faîtes-le ici : https://www.never-utopia.com/f177-probleme-avec-mon-code  (relisez le tutoriel en entier avant de le faire et, lorsque vous ouvrez votre sujet, fournissez l'adresse de ce tutoriel, le lien de votre forum ainsi que les codes CSS/Javascript/template posant problème)


Salut à tous !

Je vous propose un tutoriel permettant de modifier l’apparence de votre forum selon l’heure (que ce soit pour faire un effet jour/nuit, matin/après-midi, un changement pour seulement une heure ou deux dans la journée...). Les deux exemples proposés se concentreront sur la modification du fond du forum et la modification de la bannière mais je vous invite à tenter vos propres personnalisations =)

A SAVOIR :  
- Le code utilise l’heure de votre ordinateur donc, une fois le code installé, vous pouvez changer l’heure sur votre ordinateur et recharger la page pour tester les différentes périodes.  
- Les codes javascript sont à insérer dans panneau d'admin > modules > gestion des codes javascript
- Sur la page "Gestion des codes javascript", pensez à activer les codes en cochant "oui" après "Activer la gestion des codes Javascript" et en enregistrant.




MODIFIER LE FOND DU FORUM ENTRE LE JOUR ET LA NUIT


Tout d’abord, commencez par mettre votre image de fond pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > Image du fond de page : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, nous n’avons besoin que d’un peu de JavaScript.

Voici le code en question :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});


PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).

Juste pour bien résumer, l'image que vous avez mise dans vos images est celle qui apparaît normalement et l'image mise dans le javascript est celle qui apparaît pendant la plage de temps inscrite dans le javascript.

INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages

Et voilà, c’est tout ce qu’il y a à faire ! =)




MODIFIER LA BANNIERE


Tout d’abord, commencez par mettre votre bannière pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > logo : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, il nous faut nos quelques lignes de JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }
});



PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).



Si la taille de la bannière de jour diffère de celle de nuit, il vous faut compléter et utiliser ce code :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("#pun-logo img,#i_logo,#logo img").css("width", "LARGEUR EN PX");
          $("#pun-logo img,#i_logo,#logo img").css("height", "HAUTEUR EN PX");
        }
});


INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages




COMBINER LES DEUX CODES


Si vous souhaitez modifier votre bannière ET votre fond, lisez les deux explications plus haut et suivez la démarche pour le template et le CSS de la bannière mais utilisez ce JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});





RAJOUTER DES TRANCHES HORAIRES


Pour rajouter des tranches horaires, il suffit de reproduire la partie de code qui suit (il s'agit du code pour changer le fond, je vous donne plus bas les parties pour les deux autres codes) en en changeant les infos et en collant  après le } de la précédente et avant le " }); " de fin :

Code:
       if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }


Voilà ce que ça donnerait en ajoutant un 19-23h :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND 7-18h')");
        }
        if(heure >= 19 && heure < 23){
          $("body").css("background-image", "url('ADRESSE FOND 19-23h')");
        }
});


Pour la bannière, c'est cette partie que vous devez copier/coller/remplir avec les nouvelles infos de la même façon :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }


Et cette partie pour le code combinant les deux effets :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }





AUTRES :


Bien que cette astuce ait été fait avec la bannière et le fond en tête, il faut comprendre que cela peut fonctionner pour n'importe quoi.

Petit exemple où je veux qu'un bloc avec l'id "bloc_bleu" devienne rouge de 8 à 19h :
Code:
/*Partie html*/
<div id="bloc_bleu">Je suis un bloc bleu qui devient rouge de 8 à 19h.</div>

/*Partie javascript*/
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#bloc_bleu").css("background-color", "red");
        }
});


Petit exemple où je veux qu'une image avec l'id "image_quelconque" change d'images de 8 à 19h :
Code:
/*Partie html*/
<img id="image_quelconque" src="ADRESSE FOND NUIT" />

/*Partie javascript*/jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#image_quelconque").attr("src", "ADRESSE FOND JOUR");
        }
});


Bref, on sélectionne notre "id" avec le $("#JeSuisUnId") au début en changeant le "JeSuisUnId" par le nom de l'id de notre bloc/image.
Ensuite, on utilise .attr("src", "ADRESSE FOND JOUR"); pour changer l'adresse de l'image (seulement pour les images).
Ou, on utilise .css("propriété", "valeur"); pour changer une valeur dans le css, que cela soit le background-image, la couleur de l'écriture, etc.




CONSEILS SUPPLEMENTAIRES :
- En cas de problème, vérifiez bien tous les signes de ponctuation
- Pour faire apparaître/disparaître un élément, jouez sur la propriété display (je pense notamment à display: none; pour faire disparaître votre bannière)


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 18:45