Votre univers est le nôtre, n'hésitez pas à entrer dans celui des autres.
Bonjour/ Bonsoir à tous, passer une bonne journée/soirée sur le forum. Very Happy

Partagez|

Les tutos de codage de John

avatar
John CoxonAdmin
Masculin Messages : 65
Date d'inscription : 01/11/2012
Age : 43
Localisation : Quelque part sur les mers...
http://pavillonoir-rpg.forumactif.org
MessageSujet: Les tutos de codage de John Lun 11 Fév - 17:10

Bonjour à tous ! Very Happy

Le codage html/css étant une de mes grandes passions, j'ai décidé d'ouvrir ce sujet afin de vous faire partager les codes que je trouve sur le net, que je teste sur mes propres forums et que bien bien souvent, j'adapte ensuite à ma sauce.

Attention, mes codes ne sont testés que sur forumactif !

Avant toute chose, pour pouvoir bien utiliser ces codes sur vos forums, pensez à activer le html sur ceux-ci. Wink
(Panneau de configuration --> Messages et Emails --> Configuration --> Autoriser le html)

Les codes css sont à placer dans la feuille de style css.
(Panneau de configuration --> Affichage --> Couleurs --> Feuille de style css)

Bien que je vais essayer de donner le maximum d'explication, n'hésitez pas à me poser des questions s'il y a des choses que vous ne comprenez pas ! Cool

avatar
John CoxonAdmin
Masculin Messages : 65
Date d'inscription : 01/11/2012
Age : 43
Localisation : Quelque part sur les mers...
http://pavillonoir-rpg.forumactif.org
MessageSujet: Re: Les tutos de codage de John Lun 11 Fév - 17:42

Je commence par une chatbox latérale tout en html très très simple. Very Happy

Grâce à ce code, vous obtiendrez ceci :





Donc, ce code consiste à faire en sorte que la chatbox de son forum, au lieu de se trouver tout en haut ou tout en bas du forum comme nous le proposer habituellement forumactif, puisse se placer sur la droite ou la gauche et être rétractable. Ainsi, avec un bouton judicieusement placer, vous pourrez ouvrir ou fermer votre chatbox.
C'est-y pas beau ? Razz

Allez go, on attaque, vous verrez c'est bête comme choux !

Voici le code en question :
Code:

<table style="position: fixed; bottom: 150px; right: 0px;background-color: #0F3E6A;z-index:10000;"><tr><td>
<iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 850px; height: 390px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="LIEN DE VOTRE BOUTON OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'block':'none';this.src=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'LIEN DE VOTRE BOUTON FERMER':'LIEN DE VOTRE BOUTON OUVRIR';"/>
</td></tr></table>

Ce code est tout en html et il est à placer dans le message d'accueil de votre forum. Pas de panique, il n'y apparaîtra pas comme tel, enfin sauf si vous avez oublier d'activer le html.
Donc, se rendre ici : "Panneau de configuration --> Affichage --> Généralités --> Message sur la page d'accueil"


Houlala, ça m'a l'air un peu compliqué tout ce charabia de code, alors on va détailler ! scratch

Code:

<table style="position: fixed; bottom: 150px; right: 0px;background-color: #0F3E6A;z-index:10000;">
position: fixed: 150px <-- fixe la position de votre chatbox. Vous pouvez régler sa hauteur sur votre page en pixel (150px dans mon exemple).
right: <-- signifie ici que la chatbox se trouve à droite du forum. Pour l'avoir à gauche, mettez left à la place.
background-color: #0F3E6A <-- c'est tout simplement la couleur qui entourera l'image de votre bouton "ouvrir/fermer" de la chatbox. Là, vous pouvez changer comme bon vous semble.


Code:

<iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 850px; height: 390px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe>
Nous plaçons ici la chatbox dans une iframe. Ainsi, vos boutons "ouvrir/fermer" serons visible sur la droite ou la gauche de votre forum, suivant où vous désirez votre chatbox. Vous verrez que lorsque vous monter et descendez dans votre forum, le bouton "ouvrir/fermer" reste toujours à l'écran, ainsi votre chatbox sera toujours visible peu importe où vous vous trouvez sur votre page d'accueil.

width: 850px; height: 390px; <-- il s'agit de la taille de votre chatbox. Vous pouvez la modifier comme bon vous semble, mais veillez toutefois à ne pas la faire trop grande ni trop petite. Comme elle apparaîtra sur votre page d'accueil, vous devez faire en sorte qu'elle soit certes visible, mais qu'elle ne cache pas non plus toute votre page à l'écran.


Code:

<td style="vertical-align: bottom;"><img src="LIEN DE VOTRE BOUTON OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'block':'none';this.src=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'LIEN DE VOTRE BOUTON FERMER':'LIEN DE VOTRE BOUTON OUVRIR';"/>
Toute cette partie concerne les boutons "ouvrir/fermer" de votre chatbox.
Partout où vous voyez "LIEN DE VOTRE BOUTON OUVRIR", vous devrez placer l'adresse d'hébergement de votre image du bouton ouvrir. Cela implique donc de devoir créer ce fameux bouton et de l'héberger sur un site comme imageshack par exemple.
Idem pour le bouton fermer qui est donc à placer là où c'est marqué "LIEN DE VOTRE BOUTON FERMER".

Petit détail à savoir : une fois connecté comme utilisateur sur votre chatbox, que vous laissiez ouverte ou fermée votre chatbox à l'aide du bouton OUVRIR/FERMER, vous resterez toujours connecté à votre chatbox, ce qui peut être bien pratique pour naviguer plus aisément sur votre page d'accueil.

Et voilà, c'est fini pour ce premier tuto ! cheers

Enfin, là c'est vraiment du très très simple, pour le prochain je partirais dans quelque chose de plus compliqué. Faut bien vous faire souffrir un peu ! Razz


Dernière édition par John Coxon le Lun 11 Fév - 19:18, édité 4 fois
avatar
Monster KillerLangue pendue
Masculin Messages : 308
Date d'inscription : 04/11/2012
Age : 19
Localisation : Chez moiii :D
https://www.facebook.com/percy.komity
MessageSujet: Re: Les tutos de codage de John Lun 11 Fév - 17:43

Cool ! J'hésitais justement à me lancer là-dedans, mais si c'est quelqu'un comme toi qui explique, c'est encore mieux 8D Merci pour ce topic Smile
avatar
MirageAdmin
Féminin Messages : 341
Date d'inscription : 24/10/2012
Age : 26
Localisation : Strasbourg
http://ourworld.keuf.net
MessageSujet: Re: Les tutos de codage de John Lun 11 Fév - 20:49

C'est une idée génial, Very Happy merci merci merci Marc, sa va m'aider Very Happy
C'est vrai que c'est toi qui tes occupé du design du forum, je devrais m'y mettre mais j'ai peur que soit trop difficile. Avec tes explications sa parait plus facile Very Happy

_________________


Votre Admin préférée et dévouée.
=D
avatar
John CoxonAdmin
Masculin Messages : 65
Date d'inscription : 01/11/2012
Age : 43
Localisation : Quelque part sur les mers...
http://pavillonoir-rpg.forumactif.org
MessageSujet: Re: Les tutos de codage de John Ven 15 Fév - 22:42

Ca semble difficile, mais en réalité ça ne l'est pas tant que ça.
Avec l'habitude ça va tout seul, le tout est de comprendre quel code fait quoi. ^^

Ca me fait penser Mirage qu'il faudrait que tu actives le html de ton forum : Panneau de configuration --> Messages et Emails --> Configuration --> Autoriser le html Wink

avatar
PixelAdmin
Féminin Messages : 257
Date d'inscription : 24/10/2012
Age : 24
Localisation : Corrèze (19)
MessageSujet: Re: Les tutos de codage de John Ven 15 Fév - 22:45

Je l'ai fait Smile

_________________
avatar
MirageAdmin
Féminin Messages : 341
Date d'inscription : 24/10/2012
Age : 26
Localisation : Strasbourg
http://ourworld.keuf.net
MessageSujet: Re: Les tutos de codage de John Sam 16 Fév - 11:40

Pixel ma sauveuse ♥♥♥♥ :<3:

_________________


Votre Admin préférée et dévouée.
=D
avatar
John CoxonAdmin
Masculin Messages : 65
Date d'inscription : 01/11/2012
Age : 43
Localisation : Quelque part sur les mers...
http://pavillonoir-rpg.forumactif.org
MessageSujet: Re: Les tutos de codage de John Mer 27 Fév - 17:42

« Voici mon second tutoriel de codage CSS et HTML »

Pour ce second tutoriel, je vais vous apprendre à personnaliser vos forums grâce à divers petits codes facile à mettre en place. Wink

Note : de l'importance cruciale des { } (guillemets) ! Ils servent tout bonnement à ouvrir et fermer votre codage. Si vous en oubliez un, vos codes ne seront pas fonctionnels et d'ailleurs Forumactif vous le dira en rouge sur votre feuille de style.
Donc, vérifiez toujours que vous avez un nombre identique de guillemets ouverts et fermés Exclamation


RENDRE SON FORUM TRANSPARENT :
Il est tout à fait possible de rendre le fond de son forum transparent, comme sur Our World par exemple. Pour cela, il suffit de lui appliquer une opacité.
Vous allez voir, c'est très simple. Voici le code qu'on utilise :

Code:
body{
filter:alpha(opacity=94);
-moz-opacity:0.94;
-khtml-opacity: 0.94;
opacity: 0.94;}

Pour atténuer ou augmenter la transparence du fond de votre forum, il suffit de régler les chiffres des différents "opacity". Attention, vous devez appliquez vos changements partout où vous avez "opacity", sinon ça ne fonctionnera pas. Il suffit donc de jouer avec les chiffres (0,94 pour mon exemple, qui correspond à l'opacité de Our World). Notez bien que la transparence s'applique à tout votre forum (fond et cellules compris).
Voilou, c'est tout bête ! Razz


Passons maintenant à la suite !

METTRE UNE IMAGE DANS LE FOND DU CADRE DE SON FORUM :
Par cadre du forum, nous parlons du fond de la cellule principale et non pas l'image du fond de page que l'on change dans la gestion des images du forum. Sur Our World, il s'agit de l'image transparente blanchâtre que vous voyez dans la cellule principale du forum, derrière la bannière et les autres cellules.

Code:
.bodyline{ background:url("METTRE LE LIEN DE VOTRE IMAGE ICI");}

On applique tout simplement un fond (ou background) et plus exactement un fond image (background:url).
Vous pouvez mettre l'image que vous désirez, mais faites bien attention aux dimensions si votre image, par exemple, n'est pas un fond transparent !
Pour un fond transparent, une image aux dimensions de 100x100px est plus que suffisante.


On passe enfin à la dernière petite astuce pour aujourd'hui !

RETIRER LE SOULIGNEMENT DES LIENS :
Là encore si on prend en exemple Our World, on constate qu'aucun soulignement n'apparait sous les liens lorsque vous passez votre souris dessus. Il ne s'agit pas comme on pourrait le penser d'un effet classique de Forumactif, mais bel et bien du résultat dû à l'application d'un code CSS, que voici :

Code:
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none !important;}

a:link {text-decoration: none;} <-- on retire le soulignement du lien (le link)
a:visited {text-decoration: none;} <-- on fait de même pour le lien visité (le visited)
a:hover {text-decoration: none !important;} <-- et de nouveau la même chose pour le lien actif, c'est à dire lorsque l'on passe notre souris dessus (le hover).

Le "a:" n'est autre que le code directionnel qui mène vers les liens du forum. Il faut juste préciser ensuite vers quel lien on va. Lorsque l'on maîtrise ce petit code, on peut faire plein d'effets sympas (comme sur les liens de la barre de navigation de Our World par exemple, où l'on utilise ici le code "#navig a" et "#navig a:hover").

Pour supprimer le soulignement des liens, on applique donc le "none" à "text-decoration:", mais il est possible d'appliquer d'autres effets. Par exemple, si vous mettez "text-decoration:dashed", vous aurez vos liens soulignés en pointillés. Wink
Vous pouvez également appliquer vos effets seulement qu'à une ligne de lien (un dashed sur le "a:hover" fera que vos liens se souligneront en pointillés seulement au passage de la souris).


Et voilou, fini pour aujourd'hui ! cheers

Contenu sponsorisé
MessageSujet: Re: Les tutos de codage de John

Les tutos de codage de John

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» "Revivre à la campagne" de John Seymour (livre)
» John Wayne
» John Lennon
» pleins de tutos
» John Q

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Our World :: Loisirs :: Informatique et Technologies-