AccueilRechercherS'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.


21 résultats trouvés pour 000000

lelie25

(Onyx) Une commande de profil - Lun 7 Mai 2018 - 16:05

Ma demande



Bonjour tout le monde ! Je viens passer commande pour un profil pour mon nouveau forum. J'ai regardé les différentes profils dans le libre service mais je n'ai pas vraiment accroché... même s'ils sont bien faits :innocent: :heart:


Schéma(s) et Eléments


Schémas :
Spoiler:
Tag 000000 sur Never Utopia - graphisme, codage et game design Schema10

Tailles des éléments : aucune idée de la taille :S
Effets voulus : Normalement j'ai tout noté sur le schéma, je pensais à un effet d'opacité ou quelque chose du genre pour mettre la feuille de personnage derrière l'avatar... :kdo:
Version de votre forum : PHPBB2


Ressources


Je viens de voir aussi que j'ai oublié de mettre un petit dessin pour le en ligne. Est ce que ce serait possible d'avoir une image de cette forme ci Tag 000000 sur Never Utopia - graphisme, codage et game design Online10 pour signaler le online ?


Autres précisions ?

Ce serait possible de mettre le profil au couleur de mon forum ? voici les couleurs dominantes :

#000000 pour ce qui est du texte
#97CBCC pour les liens et liens survolés
#642830 pour le fond global du forum
#FFFFFF on a aussi un peu de blanc pour que les couleurs chaudes ne fassent pas trop mal aux yeux

Est ce que vous pourriez aussi mettre ces polices ci sur le profil ? ce sont celles du forum : journal, tahoma

Comme vous avez du le voir sur le schéma, j'aimerais que mon profil soit composé de phrases, comme par exemple : j'ai écrit XX messages etc.

FROSTendoloris

Bestiaire tout simple - Lun 25 Déc 2017 - 22:25

Bestiaire



Hé coucou ! Me voici encore une fois pour une nouvelle petite fiche assez simple, pour une fois :joie: . Merci d'avance à celui ou celle qui s'en occupera :heart:


Schéma(s) et Eléments


Schémas :
Aperçu 1 :
Tag 000000 sur Never Utopia - graphisme, codage et game design Hog5

Aperçu 2 :
Tag 000000 sur Never Utopia - graphisme, codage et game design Lj1w

Tailles des éléments : Taille de la fiche : 500 x 398
Taille de l'image : 200 x 320
Bordures : 1px

Effets voulus :
Tag 000000 sur Never Utopia - graphisme, codage et game design 0rkl

Comme il l'est écrit sur le schéma, j'aimerai que l'image devienne grise au passage de la souris et que le texte s'éclaircisse au passage de la souris.
Version de votre forum : PHPBB2


Ressources

Tag 000000 sur Never Utopia - graphisme, codage et game design 1y5p

Couleur de fond : #2E2B2B
Couleur du texte : #464646
Couleur de fond bloc texte : #161616
Couleur titre : #AD8245
Couleur des bordures : #000000


Autres précisions ?


La taille des blocs peuvent varier si jamais, à adapter bien évidemment, merci encore ♥


Aile

(Marie) [Profil] Un profil pour une huître - Lun 23 Jan 2017 - 12:10

Aloha! Merci de ta réponse ^^

Alors les codes couleurs, j'arrive à les repérer facilement '#000000'. Donc tu peux tout mettre en noir ou blanc je saurais mettre les couleur adaptées ^^

Hebi

(Nemalus) [QEEL] L'Echiquier - Ven 23 Déc 2016 - 22:43

Le voici, le voilà !

Encore merci de donner de ton temps ^^

Spoiler:

Scratpub

Demande d'un tableau - Jeu 15 Déc 2016 - 11:44

Bonjour !!

   

Ma demande



   Bonjour tout l'équipe de NeverUtopia ! Je souhaiterai un tableau pour mon forum

   Schéma(s) et Eléments
    Tag 000000 sur Never Utopia - graphisme, codage et game design Igu5
   Tailles des éléments : Pour les tailles je souhaite une taille normal. Pas trop grand pour le tableau ni trop petit (je ne connais pas la taille exacte pour un tableau, mais du moment que la taille est normal je verrais en fonction de votre travaille)  Wink . Pour le menu déroulant je veux une taille normale pareil je ne connais pas les tailles.
   Version de votre forum : PHPBB2

   Ressources
   Pas d'images.
Les couleurs : Pour le cadre je souhaite couleur bleu : #D0E5F5 texte : #000000 Pour les couleurs du menu aucune couleur, pour le survol je veux bien uniquement le texte qui change en couleur avec cette couleur #0477cf
Lien de mon forum : http://scratpub.forumactif.org/

   Autres précisions ? Pour mon menu je souhaite quelque chose de moderne, et avec un survol. Je souhaite avoir quelque chose de moderne et le tableau d'une couleur de mon forum qui est bleu et noir. #D0E5F5 texte : #000000 pour le cadre je choisirais cette couleur #2f6e9e Wink Je ne veux aucune animation a par le menu déroulant qui soit en survol.
    Un grand merci à vous. Je veux un tableau simple, pas trop compliquer si vous souhaitez encore plus de détails merci de me le dire et je verrais en suite sur votre travail. Le schéma que je vous ai montrer c'est un peut se que je désirs. Mais vous pouvez actuellement le mettre dans un cadre ou quelque chose pour que cela soit plus jolie. C'est juste un modèle pour vous montrer l'exemple de se que je souhaite  Wink
   

Philo

[PA] Forum RP Ilvermorny - Jeu 1 Déc 2016 - 13:23

Pouvez vous nous fournir un code de PA s'il vous plait?



Bonjours, je vous remercie déjà d'accorder votre temps à cette demande et m'excuse d'avance si je peux paraitre incompréhensible, j'essaierais d'être le plus clair et concise. Tout d'abord, il vous faut savoir à quoi servira votre code.
Nous sommes un groupe de 5 rôle players sur des plateformes de rpg en ligne nous avons décider de construire une école virtuel sur cette plate-forme ainsi qu'un forum pour cadrer les formalités du rpg. Nous nous inspirons grandement de l'univers de JKR, harry potter et dernièrement The fantastics beats and where to find them, c'est pourquoi nous avons comme projet de faire un forum dédié à l'école de sorcellerie d'Amérique du Sud, Ilvermorny.

La PA devra donc suivre, si possible, les demandes du schéma suivant, néanmoins si votre âme de sorcier (car pour moi le codage reste tout de même de la magie, donc oui, oui, vous êtes spécial :toto: ) est tout aussi inspiré nous accepterons des offres qui divergent.



Schéma(s) et Eléments
Schémas : https://www.zupimages.net/viewer.php?id=16/48/3hfj.jpg
Tailles des éléments : Si j'ai bien compris: le forum est à 75% et 800 px
Effets voulus : Un effet de glissement de haut en bas de 3 image + Logo des maisons qui disparaissent pour afficher les points des maisons + Horloge qui s'active (voir photo ressource).
Version de votre forum : PHPBB2, PHPBB3, PunBB ou Invision


Ressources
☛ Logo des maisons:
https://www.zupimages.net/viewer.php?id=16/48/4n1l.jpg
https://www.zupimages.net/viewer.php?id=16/48/fpsx.jpg
https://www.zupimages.net/viewer.php?id=16/48/vlzv.jpg
https://www.zupimages.net/viewer.php?id=16/48/vo1e.jpg

☛ Logo ilvermorny:
https://www.zupimages.net/viewer.php?id=16/48/2wyc.jpg

☛ Horloge animé:
https://www.zupimages.net/viewer.php?id=16/48/6xky.jpg
https://www.zupimages.net/viewer.php?id=16/48/3ve1.jpg

☛ Wanted Reward (image qui défile):
https://i.servimg.com/u/f37/19/57/84/13/sans_t14.jpg
https://i.servimg.com/u/f37/19/57/84/13/luicic10.jpg
https://i.servimg.com/u/f37/19/57/84/13/ss10.jpg

Nous désirons des teintes sombres soit #000000, #878787, #E1E4E6
Blanc, gris, noir pour faire simple.

Font: EB Garamond (mais reste facultatif).

Autres précisions ? Voilà, je pense que tout est fait, je reste à votre disposition si vous avez des questions, merci ! :lovebomb:




Un tableau automatique pour un forum Fallout s'il vous plaît ? ^^ - Dim 9 Oct 2016 - 14:42

Ma demande



Bonjour à vous ! Ce que je voudrais n'est, à ma connaissance pas bien compliqué mais étant une bille en CSS je dois m'en remettre à vous les codeurs U_U. Ce que je voudrais faire ce serait un tableau automatique dans mon forum de manière à avoir juste à rentrer un
au lieu d'un long et laborieux bbcode --". Les tableaux à une case, je sais faire en temps normal mais là c'est plus complexe car il me faudrait des tableaux à plusieurs lignes & colonnes Sad J'ai préparé une image pour vous montrer ce que je veux, j'ai quelques éléments de code, je vous laisse donc passer à la suite. Tchaô et merci d'avance ! =D

Schéma(s) et Eléments
Schémas :
Spoiler:
Tag 000000 sur Never Utopia - graphisme, codage et game design 1476016374-exemple

Tailles des éléments :
Largeur des 2 tableaux : 700px
Hauteur des 2 tableaux : overflow, auto
Couleur ligne 1 : #3d3a24
Couleur lignes paires : #767352
Couleur lignes impaires (sauf 1) : #a8a287
Bordures + ombre : 1px solid #000000; 0px 0px 4px #000000;


Effets voulus : Un code pour un tableau à 2 colonnes, et un pour un tableau à 4 colonnes svp =)
Version de votre forum : PHPBB2


Ressources
Police du texte Ubuntu (déjà installée sur le forum)

Autres précisions ?
Rien de plus, merci d'avance ! =D

Jujudu44

Problème de code pour affichage forum - Dim 5 Juin 2016 - 23:55

Bonjour !!

Je viens à vous, chers amis codeurs, car cela fait bientôt trois heures que je me prends la tête sur l'installation d'un code pourtant simple.

Ce dernier en libre service est ici :

http://www.never-utopia.com/t46680-css-et-template-simples-categories

J'ai revérifié une dizaine de fois. J'ai bien séparé les catégories sur l'index au niveau moyen, j'ai bien affiché le titre du sujet du dernier message d'un forum sur l'index et j'ai bien un lien vers les niveaux inférieurs. J'ai fait exactement ce qu'il était indiqué dans le tuto... Sur ma page principale du fofo, aucun soucis, comme vous pouvez le voir ici :

http://valarmorghulis.forumpro.fr/

En revanche, si je rentre dans un forum, l'affichage des sous-forums n'est pas correct :

http://valarmorghulis.forumpro.fr/f1-reglement-et-histoire-des-royaumes

La police n'est pas la bonne, l'affichage pas exactement non plus !! Je ne parviens vraiment pas à trouver d'où ça vient.... J'ai bien entouré mes titres de catégorie, forums et sous-forums avec des balises span.

Je vous colle tout mon CSS :

CSS:
/*DÉBUT DES CATÉGORIES*/
/*Corps de Catégorie*/
.global_cate {
 background-color: #1B1B1F;
 border: solid 1px #960505;
 border-bottom: double 8px #960505;
 border-top: none;
}

/*Titre de la Catégorie*/
.title_cate span {
 display: block;
 margin-top: -10px;
 padding-left: 40px;
 background-color: #1B1B1F;
 font-size: 30px;
 font-family: parisienne
 color: #E01B1B;
 border-bottom: double 8px #000000;
 transition: 0.8s;
 -moz-transition: 0.8s;
 -o-transition: 0.8s;
 -webkit-transition: 0.8s;
}

/*Corps de Forum*/
.global_forum {
 margin-top: 15px;
 margin-bottom: 15px;
 padding-right: 20px;
 padding-left: 20px;
 font-family: Verdana;
 color: #767676;
}

/*Sous-forums*/
.gensous_forums {
 position: relative;
 left: -5px;
 top: -32px;
 overflow: auto;
 z-index: 1;
 padding: 5px;
 background-color: #141517;
 width: 95px;
 height: 110px;
 border: solid 1px #700707;
 border-bottom: solid 5px #700707;
 border-top: solid 5px #700707;
 box-shadow: 0px 0px 15px 3px #700707;
 text-align: center;
}

/*Bloc de la description du forum*/
.gendesc_forum {
 background-color: #000000;
 padding-right: 40px;
 height: 105px;
 border: solid 1px #730505;
 border-left: solid 5px #730505;
 border-right: solid 5px #730505;
}
/*Description du forum*/
.desc_forum {
 position: relative;
 top: 15px;
 right: -30px;
 height: 85px;
 overflow: auto;
 padding-left: 110px;
 padding-right: 10px;
 text-align: justify;
 font-family: Verdana;
 font-size: 13px;
}

/*Titre de forum*/
.forumlink {
 display: block;
 margin-top: -212px;
 margin-bottom: -17px;
 padding-left: 50px;
 text-align: center;
 font-family: parisienne
 font-size: 28px;
 color: #FFFFFF;
 letter-spacing: 2px;
 transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 -webkit-transition: all 0.5s;
}


/*Image New-Old_Lock*/
.genicone_forum {
 position: relative;
 width: 50px;
 height: 40px;
 top: -178px;
 right: -13px;
 z-index: 1;
}

/*Bloc du Dernier Message*/
.stats_forum {
 padding: 5px;
 padding-top: 10px;
 border: solid 1px #700707;
 border-bottom: solid 5px #700707;
 border-top: solid 5px #700707;
 background-color: #141517;
 width: 126px;
 height: 80px;
 font-family: Times New Roman;
 font-size: 13px;
}
/*Nb de Topics et Messages*/
.stat_forum {
 font-family: Times New Roman;
 font-size: 11px;
}
  /*FIN DES CATÉGORIES*/

   

/*--------------------------------- DEBUT PROFIL --------------------------------- */

   .profil_mess
   {
     position: relative;
     z-index: 9;
     width: 210px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
     background-color: #333333;
     padding: 4px;
     text-align: center;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -htm-border-radius: 10px;
     -o-border-radius: 10px;
     -webkit-border-radius: 10px;
     border: 2px solid #5b5b5b;
     box-shadow: 0px 0px 5px #000000;
     -moz-box-shadow: 0px 0px 5px #000000;
     -htm-box-shadow: 0px 0px 5px #000000;
     -o-box-shadow: 0px 0px 5px #000000;
     -webkit-box-shadow: 0px 0px 5px #000000;
   }

   .name
   {
     display: block;
     text-transform: uppercase;
     margin-top: -15px;
     margin-bottom: -10px;
     font-size: 14px;
     font-family: arial black;
     text-shadow: 1px 1px 0px #000000;
     padding-bottom: 5px;
     border-bottom: 1px dashed #5b5b5b;
   }

   .avatar_mess
   {
     display: block;
     width: 200px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
     height: 320px;
     overflow: hidden;
     border: 5px solid #0d0d0d;
     opacity: 0.7;
     -moz-opacity: 0.7;
     -khtml-opacity: 0.7;
     filter: alpha(opacity=70);
     transition: 1s;
     -moz-transition: 1s;
     -o-transition: 1s;
     -htm-transition: 1s;
     -webkit-transition: 1s;
   }
   .avatar_mess:hover
   {
     opacity: 1;
     -moz-opacity: 1;
     -khtml-opacity: 1;
     filter: alpha(opacity=100);
     transition: 1s;
     -moz-transition: 1s;
     -o-transition: 1s;
     -htm-transition: 1s;
     -webkit-transition: 1s;
   }

   .profil2_mess
   {
     position: relative;
     z-index: 1;
     width: 180px;
     margin-left: auto;
     margin-right: auto;
     margin-top: -202px;
     background-color: #141414;
     padding-left: 4px;
     padding-right: 4px;
     text-align: left;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -htm-border-radius: 10px;
     -o-border-radius: 10px;
     -webkit-border-radius: 10px;
     border: 2px solid #434343;
     box-shadow: 0px 0px 5px #000000;
     -moz-box-shadow: 0px 0px 5px #000000;
     -htm-box-shadow: 0px 0px 5px #000000;
     -o-box-shadow: 0px 0px 5px #000000;
     -webkit-box-shadow: 0px 0px 5px #000000;
     color: #434343 !important;
     transform: rotate(-180deg);
     -moz-transform: rotate(-180deg);
     -o-transform: rotate(-180deg);
     -htm-transform: rotate(-180deg);
     -webkit-transform: rotate(-180deg);
     transition: 2s;
     -moz-transition: 2s;
     -o-transition: 2s;
     -htm-transition: 2s;
     -webkit-transition: 2s;
   }
   .profil2_mess:hover
   {
     margin-top: -42px;
     transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -htm-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transition: 2s;
     -moz-transition: 2s;
     -o-transition: 2s;
     -htm-transition: 2s;
     -webkit-transition: 2s;
   }
   .profil2_content
   {
     display: block;
     width: 180px;
     height: 200px;
     max-height: 200px;
     overflow: auto;
   }

/*--------------------------------- FIN PROFIL --------------------------------- */

   /************************************************************ DÉBUT QEEL ************************************************************/

   /*Fond du qeel*/
   #qeel {
     position: relative;
     width: 800px;
     height: 680px;
     margin: auto;
     margin-top: 50px;
     margin-bottom: 50px;
     background: #141313 url('https://redcdn.net/hpimg15/pics/570241qeel2.png') no-repeat top center;
     border-radius: 20px;
     box-shadow: 0px 0px 10px #000000;
   }


   /*Titre du qeel*/
   #qeel_title {
     color: goldenrod;
     font-size: 44px;
     font-family: 'Great Vibes', cursive;
     text-shadow: 1px 1px 2px #000000;
     padding-left: 15px;
   }


   /*Carré des informations sur les membres*/
   #qeel_info_members {
     position: absolute;
     top: 25px;
     left: 25px;
     width: 320px;
     height: 290px;
     background-color: rgba(20, 19, 19, 0.6);
     border-radius: 10px;
     box-shadow: 0px 0px 3px #141313;
     padding: 10px;
     color: #c9c7be;
     font-size: 13px;
     font-family: arial;
     letter-spacing: 1px;
     text-align: left;
   }


   /*Mise en forme des listes des membres connectés*/
   #userlists {
     margin-top: 5px;
     height: 205px;
     overflow: auto;
   }
   #totalconn {
     margin-top: 5px;
   }
   #totalconn .row1{
     background: transparent;
     vertical-align: top;
   }
   #totalconn .gensmall {
     color: #c9c7be;
     font-size: 13px;
     font-family: arial;
     letter-spacing: 1px;
     text-align: left;
   }


   /*Section des groupes*/
   #qeel_bottom {
     position: absolute;
     top: 418px;
     left: 0px;
     width: 800px;
     text-align: center;
   }


   /*Nom des groupes*/
   .qeelonglet {
     display: inline-block;
     margin-left: 20px;
     margin-right: 20px;
     margin-top: 2px;
     height: 40px;
     font-size: 38px;
     font-family: 'Great Vibes', cursive;
     letter-spacing: 1px;
     text-shadow: 0px 0px 3px #000000;
     opacity: 0.6;
   }
   /*Groupe au survol*/
   .qeelonglet_0:hover {
     cursor: pointer;
     opacity: 0.8;
   }
   /*Groupe actif*/
   .qeelonglet_1 {
     opacity: 1;
   }


   /*Description des groupes*/
   .contenu_qeelonglet {
     position: relative;
     width: 800px;
     height: 200px;
     margin-top: 20px;
     display: none;
   }
   /*Images des groupes*/
   .contenu_qeelonglet img {
     width: 800px;
     height: 200px;
     border-radius: 0px 0px 20px 20px;
   }
   /*Descriptions des groupes*/
   .qeel_desc {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 780px;
     height: 180px;
     background-color: rgba(20, 19, 19, 0.6);
     border-radius: 0px 0px 20px 20px;
     padding: 10px;
     color: #c9c7be;
     font-size: 13px;
     font-family: arial;
     letter-spacing: 1px;
     text-align: justify;
     overflow: auto;
     transition: 0.5s;
     opacity: 0;
   }
   /*Descriptions des groupes au survol*/
   .contenu_qeelonglet:hover .qeel_desc {
     opacity: 1;
   }

   /************************************************************ FIN QEEL ************************************************************/

   /*--------------------------------- PA ---------------------------------*/

   /* Fond */
   .fondsgénéraux {
     background-color: #1B1B1F;
     width: 700px;
     padding: 15px;
     color: #767676;
   }

   .blocpa {
     width: 220px;
     padding: 15px;
     background-color: #141517;
   }

   .blocpa:hover {
     width: 220px;
     background-color: #141517;
     border-left: 2px solid #2F3C3E;
     border-right: 2px solid #2F3C3E;
   }

   /* Titres */
   .titrePA1 {
     font-family: parisienne;
     font-size: 35px;
     color: #FE6D6D;
     z-index: 1px;
     position: relative;
   }

   .titrePA2 {
     font-family: parisienne;
     font-size: 25px;
     color: #F0F0F0;
     position: relative;
   }

   .titrePA2:hover {
     font-family: parisienne;
     font-size: 25px;
     color: #FE6D6D;
     position: relative;
   }

   .titrePA3 {
     font-family: parisienne;
     font-size: 25px;
     color: #FE6D6D;
     position: relative;
   }

   .titrePA3:hover {
     font-family: parisienne;
     font-size: 25px;
     color: #F0F0F0;
     position: relative;
   }

   /* Système onglets */
   .paonglet {
     display: inline-block;
     cursor: pointer;
   }

   .contenu_paonglet {
     display: none;
     width: 250px;
     height: 360px;
     background-color: #141517;
   }

   .contenu_paonglet:hover {
     display: none;
     width: 250px;
     background-color: #141517;
     border-left: 2px solid #2F3C3E;
     border-right: 2px solid #2F3C3E;
   }

   /* Info-bulles staff */
   .info {
     position: relative;
     z-index: 24;
     text-decoration: none;
   }

   d.info:hover {
     z-index: 25;
   }
   
   d.info span {
     display: none;
   }
   
   d.info:hover span {
     display: block;
     position: absolute;
     top: -2em;
    left: -2em;
     width: 120px;
     height: 50px;
     background-color: #1B1B1F;
     color: #16161A;
     text-align: center;
     font-weight: none;
   }

   /* Info-bulles prédef */
   .info {
     position: relative;
     z-index: 24;
     text-decoration: none;
   }
   
   c.info:hover {
     z-index: 25;
   }
   
   c.info span {
     display: none;
   }
   
   c.info:hover span {
     display: block;
     position: absolute;
     top: -7.3em;
    left: -0.2em;
     border-radius: 50%;
     width: 85px;
     height: 85px;
     background-color: #1B1B1F;
     color: #16161A;
     text-align: center;
     font-weight: none;
   }

   /* Images Prédef */
   .imgPA {
     border-radius: 50%;
     width: 80px;
     height: 80px;
   }

   /* Images Staff */
   .imgwidget {
     border-radius: 50%;
     width: 60px;
     height: 60px;
     -moz-transition-duration: 1s;
     -moz-transition-timing-function: linear;
     -webkit-transition-duration: 1s;
     -webkit-transition-timing-function: linear;
     transition-duration: 1s;
     transition-timing-function: linear;
   }

   .imgwidget:hover {
     border-radius: 50%;
     width: 60px;
     height: 60px;
     -moz-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }

   /* Top Sites */
   .tops {
     -moz-transform: rotate(20deg);
     -webkit-transform: rotate(20deg);
     transform: rotate(20deg);
     width: 40px;
   }

   .tops:hover {
     -moz-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
     width: 40px;
   }

   /*--------------------------------- FIN PA ---------------------------------*/

/********************************************* NAVIGATION *********************************************/
/*Fixe la navigation en haut cachée*/
#navbloc {
 position: fixed;
 z-index: 20;
 top: -32px;
 left: 0px;
 width: 100%;
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
}

/*Barre de la navigation*/
.nav_links {
 background: #1A1815;
 border-bottom: 2px solid #000000;
 color: #850606;
 height: 20px;
 padding: 5px;
}
/*Liens de la navigation*/
#navbloc a.mainmenu {
 font-family: monotype corsiva;
 font-size: 18px;
 color: #850606;
 text-shadow: 1px 1px 1px #000000;
}
/*Liens de la navigation au survol*/
#navbloc a.mainmenu:hover {
 color: #850606;
 text-shadow: 1px 1px 1px #000000;
}

/*Boutons pour ouvrir ou fermer la navigation*/
#nav_ouvrir, #nav_fermer {
 display: block;
 width: 190px;
 margin-left: 15px;
 margin-top: -2px;
 background: #1A1815;
 border: 2px solid #000000;
 border-top: none;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 color: #850606;
 text-shadow: 1px 1px 1px #000000;
 padding: 5px;
 font-family: Times New Roman;
 font-size: 20px;
 font-variant: small-caps;
 cursor: pointer;
 text-align: center;
}
/*Boutons au survol*/
#nav_ouvrir:hover, #nav_fermer:hover {
 color: #850606;
}
  /********************************************* FIN NAVIGATION *********************************************/

   

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


   /*---  Partie texte area : fond ---*/
   
   .sceditor-container iframe, .sceditor-container textarea {
   background-color: #1B1B1F !important;
   width: 540px !important;
   color: #FFFFFF !important;
   font-size:12px !important;
   }


Ainsi que le template Index_Box :

Index_Box:

Code:
<link href='http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|Indie+Flower|Nunito' rel='stylesheet' type='text/css' />
   <br><br>
       <!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <table class="global_cate" width="100%" border="0" cellspacing="0" cellpadding="0">
           <tr><td class="title_cate">
           {catrow.tablehead.L_FORUM}
           </td></tr>
      <!-- END tablehead -->
      <!-- BEGIN forumrow -->
      <tr>
           <td>
           <table align="center" class="global_forum" cellspacing="15" width="100%">
      <tr>
      <td align="left" valign="middle" style="padding-top: 24px;" width="95%">
        <div class="gensous_forums" align="center">
             <span class="sub_forums">
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
               </span>
               <script type="text/javascript">jQuery('.sub_forums').html(jQuery('.sub_forums').html().replace(/, /g,'<br />')).removeAttr('class');</script>
             </div>
             <div align="right"><div class="genicone_forum" align="center">
               <img class="icone_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
               </div></div>
             <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
             <div class="gendesc_forum">
          <div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div>
             </div>
      </td>
      <td align="center" valign="middle" width="5%">
        <div class="stats_forum">
               <span class="stat_forum">Topics: {catrow.forumrow.TOPICS} | Messages: {catrow.forumrow.POSTS}</span><br /><br />
        {catrow.forumrow.LAST_POST}
        </div>
      </td>
      </tr>
      </table>
      </td>
      </tr>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <tr>
         <!-- BEGIN inc -->
         <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
         <!-- END inc -->
         <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
      </tr>
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
   </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->



Je suis sous Firefox pour info et mon forum est en phhb2
Si vous pouviez m'aider, je vous en serai vraiment immensément reconnaissante,
Un très grand merci d'avance !!!
Juju

Lone wanderer

Une chatbox simple - Mar 17 Mai 2016 - 23:02

Ma demande



   Bonjour à vous tous ! Alors voilà, j'ai essayé de coder un peu en CSS pour ma chatbox et ça n'a pas marché (non c'est vrai ? ) D'où ma demande ici auprès de gens qui s'y connaissent plus que moi ^^ Je voudrais une CB toute simple mais qui soit en accord avec la présentation génerale de mon forum

   Schéma(s) et Eléments
   Schémas : Tag 000000 sur Never Utopia - graphisme, codage et game design 1463518475-chatbox-schema
   Tailles des éléments : Alors j'ai quelques spécificités : la hauteur m'est indifférente mais la largeur doit être de 858 px. le titre "chatbox" en 50px, six caps sans serif, ombre 1px 1px 2px #554c32, avec un margin bottom de 20px. La border bottom (du header, sous le titre) sera 1px solid #3d3a24
   Effets voulus : pas d'arrondit, mais une bordure autours de 3px solid #3d3a24. Sinon la couleur intérieur (header) serait #767352. La chatbox en elle-même est de couleur #a8a287 et (si possible) avec une shadow de 0 0 10px #000000
   Version de votre forum : PHPBB2


   Ressources
   J'ai plus ou moins tout résumé =) Si vous voulez des infos plus précises, n'hésitez pas =D C'est une commande plutôt simple puisque je cherche pas à avoir une chatbox psychédélique, juste que sa présentation respecte celle des autres éléments du fofo Wink

   Autres précisions ?
   Les codeurs, vous êtes les meilleurs ! <3
   

Cruelly

[résolu]( Taktiik ) Maquette pour enkilisar - Lun 18 Avr 2016 - 5:42

Ma demande



Bonjour ou bonsoir à tous les codeurs et codeuses du forum :)
Contrairement à mon habitude de tout commander séparément, j'ai choisi de commander tout mon codage en même temps avec une belle maquette que j'ai réaliser ^^.
Je tiens à dire un grand merci au codeur qui s'occupera de ma demande  :hug: Sachez également que je ne suis pas presser. Le forum n'est pas terminer dans ses modifications ^^.  
Lien du forum

Edit - J'aimerais beaucoup que les codes que je demande ce retrouve en LS à la suite de cette demande ^^. Si c'est le cas je modifierais les images pour l'adapter au LS  :hug:


Maquette(s) & Eléments
Type de contenu :  Thème complet
Maquettes :  Maquette 01
Liste des sujets
Informations :
Navigation
- Fond de la barre : #C6C9D8
- Largeur de la barre : 30px
- Écriture des liens : Pacifico sur google font
- Bande du dessous de 2px
- Couleur de la bande du dessous : #6B82A4
- Ouverture des informations du profil en cliquant sur l'image du dragon.
- Boîte d'information du profil : 125*160px
- Encadrement de 2px #6B82A4
- Dragon ( pour navigation et PA )

Structure du forum
Largeur du forum : 900px
Fond du forum : #6B82A4

Page D'accueil
Dimension Page d'accueil - 890*400px
Fond général : #8A9FBB
Image de la PA : Bienvenue, Contexte, Le staff, Navigation, Nos alliances, Nouveautés
Fond de tous les blocs : #93A6C0
Encadrement de tous les blocs : #889CB7
Bloc navigation : 170*335px
Couleur de fond au passage de la souris : #5D7793
Lien normal : #ffffff
Lien au passage de la souris : #000000
Bloc Contexte : 350*130px
Bloc Staff : 300*130
Bloc info Staff : 246*50px
Fond : #A3B3C9
Encadrement : #B2BFD2
Image staff
Bloc nouveautés : 350*160px
Info bulle : 40*20px
Fond : #5D7793
Encadrement : #A5B5CA
Nos alliances : 300*155px
Fond texte : #5D7793
Effet d'ombre blanche sur ces liens et texte noir
Bouton partenariat (50*50)

Ensemble des catégories : 890px de larges.
Couleur de fond de l'ensemble des catégories : #8A9FBB
Bouton des catégories
Police des titres des forums : Pacifico sur google font
Catégories informatives & Flood
Titre catégorie : Centrer et avec un effet d'ombre.
Largeur d'un seul forum : 420*150px
Fond forum : #6B82A4
Fond titre forum & sous-forums : #9BABC1
Fond Sujet message : #768CAB
Fond information *auteur, bla bla* : #637897
Fond description : #768CAB
Catégories RP
Image de fond : Change à chaque fois. Comme sur ses catégories ou l'image qui cache les sous-forums change à chaque forum ^^
Dimension catégorie RP : 863*149px
Pour le reste des effets vous les voyez sur le schémas. J'aimerais un fond transparent de la même teinte pour les sections. Cependant, dans la partie sous-forum j'aimerais que sous un sous-forums sur deux il y ait un fond plus foncer. Pour le reste des dimensions de cette section, vous avez carte blanche tant qu'ils sont de 100px de hauteur et pas plus ^^.

Qui est en ligne
Je vous laisse libre sur les dimensions du Qui est en ligne et du Partenariat. Tant que celle-ci ne sont de 890px de largeur ^^.
qui est de passage
Police du titre des partenaires : Pacifico sur google font
Bouton partenaire

Les sujets
Fond général : #8A9FBB
Fond titre sujet : #AAB9CD
Police titre des sujets : Pacifico sur google font
Fond dernier message : #8FA0B6
Fond d'un sujet : #9BADC5
Bouton nouveau

Consignes ou impératifs : Oups je crois que j'ai tout indiquer dans la partie avant celle-ci x) Bon ce n'est pas grave ^^.

Pour les liens sur l'accueil (Voir les nouveaux messages depuis votre dernière visite, ... et ceux du bas), J'aimerais qu'ils soient comme ce LS de Halloween <3 Pour le fond : #93A6C0

Je ne veux pas non plus la pub dans le haut du forum.  Vous avez un LS d'Alumine qui fonctionne très bien. Il est sur mon forum ^^. Edit Onyx : Refusé pour des questions éthiques, tu dois utiliser des crédits pour enlever la pub.

J'aimerais aussi ne pas avoir les légendes. Comme sur ce LS Very Happy

Sachez que si vous n'êtes pas en mesure de réaliser les deux types de catégories que je demandes, j'aimerais avoir des dernières (les catégories Rps)^^.

Voilà je crois que c'est tout ^^. S'il manque quoi que ce soit à ma demande ou qu'il y a quelque chose qui n'est pas claire vous pouvez me le dire  :heart:  :heart:  :heart:  

(Fyraliel) Une page d'accueil pour Fallout : Tales of the Wastes - Ven 15 Avr 2016 - 0:35

Ma demande



   Bonjour à vous ! Alors maintenant que mon fofo est officiellement lancé (en alpha 1.0, ouaiiiiiis ! =D ), j'aurais besoin d'une petite PA pour accueillir les arrivants ^. J'ai dessiné ce que je veux, je vous laisse le schéma plus bas et plusieurs infos de code.

   Schéma(s) et Eléments
   Schémas : Tag 000000 sur Never Utopia - graphisme, codage et game design 1464294436-new-pa
   Tailles des éléments : Alors, j'ai des demandes assez précises :
PA : 750x450, back : #767352, border 3d3a24 3pxsolid
Les petites boites back : #a8a287, box-shadow 0 0 10px #000000, police six-caps 000000 30px center, text-shadow: 1px 1px 2px #554c32; margin-top(pour le texte) -30px
box de gauche Derniers messages, 200x400
box milieu et droite 200x250, marge indifférente tant qu'elle est uniforme entre les deux.
box bas pour les dimensions, il faut qu'elle s'arrête au niveau des autres, que le tout soit uniforme (donc si on a des marges de 20 entre la box du milieu et de droite, elle fera 420). Idem pour la hauteur avec la box de droite.

   Effets voulus :
Derniers messages liste déroulante automatique, affiche tous les derniers messages
News (au milieu) liste déroulante NON auto, me permettrai d'écrire quelques news de manière régulière.
Navigation (à droite) Une liste de boutons cliquables, autant qu'il en tienne. les boutons : back 767352, border 1px 504d34, police six caps 000000, liens cliquables emmenant aux sections que je veux =)
Partenaires boutons cliquables sur deux rangées, 90x35.
   Version de votre forum : PHPBB2


   Ressources
   Pas vraiment, pas de graphisme à insérer, uniquement du code =}.

   Autres précisions ?
   Vous êtes les meilleurs les codeurs ! <3
   

Shoki

(NIHIL) Je reviens avec une QEEL :3 - Lun 14 Déc 2015 - 20:06

Ma demande



   Bonjour !
Suite à ma petite demande de catégories, je viens quémander gentiment une QEEL ! Merci d'avance au(x) codeur(s)/euse(s) qui aura (auront) la patiente de la faire :toto:


   Schéma(s) et Eléments
   Schémas : https://www.zupimages.net/up/15/51/nmb2.png
La partie entre crochet, c'est les phrases pour les anniversaires (qui restent tel quel), m'enfin, j'ai jugé bon de ne pas les mettre :siffle:
J'ai aussi oublié un élément dans le schéma : il doit y avoir la phrase "Qui est là ?" en haut et centrée. Mais si vous savez pas comment changer la phrase, ce n'est pas très grave :toto:
   Tailles des éléments : Mon forum fait 75%
   Effets voulus : Je ne demande pas d'effet particulier. Dans le cadre de la description, vous pouvez vous amuser à mettre un petit effet (éclaircissement au passage de la souris par exemple). Idem pour les trois blocs à gauche, mais évidemment, c'est facultatif, ces effets, tout comme la personnalisation des phrases de la cb ^^
   Version de votre forum : PHPBB2


   Ressources
   Je n'ai pas de ressources, mais je veux bien donner les couleurs que j'ai actuellement (oui actuellement) pour les groupes :
Elfes : #23CFDB
Humains : #21CC9B
Esprits : #969696
Hybrides : #EB9D17
Démons : #F23333
Anges : #F087D7
Demi-dieux : #0E8CED
Autres : #B933E6
PNJ's : #000000
Pour les couleurs de la QEEL, si ça peut aider le/les codeur(s), voici le lien de mon forum (je mettrai la QEEL et les catés et la PA une fois que j'aurai tout testé sur un fofo test à part Wink) : http://tsukis-world.forumactif.org/


   Autres précisions ?
   Si vous le souhaitez vous pouvez être à plusieurs pour prendre cette commande en charge, cela ne me gêne pas du tout :3 N'hésitez pas à me poser des questions, je suis ouverte à ça (et par mp aussi, mais c'est pas une raison pour me harcler ^^") :3
Encore merci  :hug:

   

Aide pour la mise en place d'un thème dans un sélecteur de thème - Lun 21 Sep 2015 - 13:39

voilà le lien du forum : http://poudlard-le-rpg.forumactif.org/

et là le code utilisé :

Spoiler:
body{
background-position:top center;font-weight:normal;}
body{margin-top:0px;}
#page-body{
margin:10px 22px 10px 22px;}
button.button2:hover,input.button2:hover{
color:#000;font-weight:bold;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;background-position:top;}
input.liteoption{color:#000;font-weight:bold;background-repeat:repeat-x;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;background-position:center;}
input.liteoption:hover{
font-weight:bold;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;color:#000;background-position:top;}
input.mainoption{color:#000;font-weight:bold;background-repeat:repeat-x;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;background-position:center;}
input.mainoption:hover{font-weight:bold;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;color:#000;background-position:top;}
.catBottom{
border:none !important;} .catHead{border:none !important;}
.thLeft{border:none !important;} .thRight{border:none !important;}
.forumline{background-image:url('https://i.servimg.com/u/f30/13/30/32/72/b1_bas10.png');background-repeat:no-repeat;background-position:bottom;padding-bottom:34px;/padding-bottom:3px;/background-image:none;/background-repeat:repeat;}
td.cat{background-repeat:repeat;
}
td.catHead{background-repeat:repeat;}
td.catSides{
background-repeat:repeat;}
td.catLeft{background-repeat:repeat;border-left:none !important;} td.catRight{background-repeat:repeat;}
td.catBottom{background-repeat:repeat;} #plus_menu{background-color:#23201b;border:1px solid #2e2b26 !important;}
.wysiwyg{background-color:#2e2b26 !important;} .bodyline{background-image:url('https://i.servimg.com/u/f35/11/95/30/70/217.png');background-position:bottom right;background-repeat:no-repeat;}
#text_editor_textarea{background-color:#1B1915 !important;color:#d1ba88;}
.attachbox{
background-color:#2e2b26;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');border:1px solid #6c6657;padding:5px;-moz-border-radius-topleft:15px;-webkit-border-radius-topleft:15px;-moz-border-radius-topright:15px;-webkit-border-radius-topright:15px;border-radius-topleft:15px;border-radius-topright:15px;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;
}
.attachbox dl.file{background-color:#212121;margin-top:8px;padding:5px;border:1px solid #6c6657;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;}
.row1,.row2,.row3,.row3Right{background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_c10.jpg');background-repeat:repeat;border:1px solid #37342d;} .container_IE{background-image:url('https://i.servimg.com/u/f35/11/95/30/70/copy11.png');background-position:bottom right;background-repeat:no-repeat;}
div.errorwrap,div.infowrap{background-color:#776952;border:1px solid #ac9a7b;color:#443b2b !important;font-weight:bold;}
div.errorwrap h4,div.infowrap h4{background-color:#443b2b;border:1px solid #ac9a7b;color:#ac9a7b;} div.errorwrap p,div.infowrap p{color:#443b2b;font-weight:bold;}

.code{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.quote{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.spoiler{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/35px10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px; -moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.spoiler_closed{background-color:#2c2a25;border:1px solid #6c6657;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;}
.spoiler_content{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;}
#i_logo{
margin-top:-7px !important;
/position:relative;} .catSides{border:none !important;}
button.button2,input.button2{
color:#000000;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;}
button.button2:hover,input.button2:hover{border:1px solid #000000;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;color:#000000;}
button.button2,input.button2{
color:#000;font-weight:bold;background-repeat:repeat-x;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;background-position:center;}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Le Coin des Bavardages"; }

p.chatbox_row_1 {
background-color:#1B1915;
}
p.chatbox_row_2 {
background-color:#1a1a19;
}


        .sceditor-container textarea {
          color: #D1BA88 !important
        }

        .sous-forums a {
                font-size: 10px!important;
        }

        body {
          background-image:url(https://i.servimg.com/u/f18/18/88/79/98/fond27.jpg);
          background-size: 135% auto;
        }

/* Message de connexion CB */
.msg span[style*="green"] strong {
    color: #2980b9; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}

/* Message de déconnexion CB */
.msg span[style*="red"] strong {
    color: #8e44ad; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}


et voici un lien pour les couleur (j'aimerai que le texte clair devienne foncé sur fond clair et inversement) : http://poudlard-le-rpg.forumactif.org/t831-bureau-directeur

Merci beaucoup !!

Ajartielle

Personnalisation d'une fiche de RP [Ajartielle] - Dim 16 Aoû 2015 - 18:32

En fait, si tu essais de remettre le code tel quel en changeant des trucs qui se trouvent entre les balises "style" (au début du code de la fiche) en postant dans une page où la fiche est déjà présente, ça ne marchera pas parce que les éléments "style" qui se trouvent dans un message précédent vont entrer en conflit avec tes changements. Je sais pas si c'est clair ce que je dis. x)

Disons que je poste 2 fois la fiche. Dans le code de la première fiche, pour la class bloc, je mets un "background-color: #ffffff;". Dans le code de la deuxième, je mets "background-color: #000000;". Et bien mes deux fiches vont être pareil, même si leur code est différent. Parce que les class qui sont codées entre les balises "style" s'appliquent à tous les éléments qui portent cette class dans la page. Et là, il y a contradiction, vu qu'il y a deux fois le code. Donc si j'ai une div "class="bloc"", ben elle reçoit 2 ordres différents...

BREF. Ça peut expliquer pourquoi tu n'arrives pas à changer la couleur (si tu essayais de le faire en postant à un endroit où la fiche était déjà présente). Pour éviter ça, d'ailleurs, je te propose de limiter au minimum ce qui se trouve entre les balises "style" et donc de modifier le code de la fiche ainsi :



À partir de là, si tu veux modifier la couleur de fond du texte, c'est là (juste après la balise flash) :

Code:
<div style="opacity: 0.5; width: 460px; padding: 15px; text-align: justify; background-color: #797773; border-radius : 5px;">

Ayameko

Parchemin déroulant - Mer 15 Juil 2015 - 16:54

Bien le bonjour !
Je viens de finir mon premier codage (sonnez guimbardes !), je passe donc vous le proposer. Il me fut inspiré par la jolie Fiche RP de Jawilsa ainsi que le code (non moins joli^^) de Anéa posté pour le Creativ Mess#7.
Etant un grand débutant, j'ai codé, j'ai utilisé mon code puis j'ai essayé de le nettoyer pour le poster ici. Si vous voyez des corrections, des allègements et autres modifications à faire, n'hésitez surtout pas à me les signaler, cela ne fera que me former un peu plus^^

Toutes les images visibles sont de mon cru et sont librement utilisables ou modifiables selon votre bon vouloir.
Voici donc la bête...






Lorem ipsum dolor sit amet...


Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Ut velit mauris
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.


Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.


Aliquam convallis sollicitudin purus.

¤ Praesent aliquam
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
Hébergement photos

¤ Consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
Hébergement photos



Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.


Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?




Okhmhaka

Partie 4 - Le Fond - Mar 4 Fév 2014 - 12:42

Partie 4 - Le Fond





Tout d'abord sachez qu'il est difficile de présenter les éléments séparément dans le tutoriel, tout simplement car sur votre forum ils sont tous affichés ensemble, et même s'ils n'ont pas un lien concret à chaque fois (par exemple la bannière et la navigation collés) ils sont tout de même en rapport et donc doivent être vu non pas comme une élément à part mais comme le morceau d'un tout qui devra s'adapter au reste, un peu comme si l'on détaillait les pièces d'un puzzle. Il ne faut jamais oublier d'avoir en tête le fait qu'il n'est qu'un bout du thème, et donc avoir une vision globale de "l'image" du thème.

Commençons donc par le fond. Il s'agit de l'image, du motif ou de la couleur qui occupera toute la page et par dessus lequel se trouvera votre corps. Selon le type de design que vous comptez faire, ce fond sera différent et aura une importance plus ou moins grande.
Le problème majeur avec le fond, quel que soit votre choix c'est la résolution d'écran : elle diffère selon les utilisateurs ! Il faudra donc que votre fond puisse être correctement affiché quelle que soit la résolution des visiteurs. C'est l'élément le plus complexe à prendre en compte. Il y a cependant de nombreuses manières de contourner ce problème. Nous allons donc détailler les différents types de fonds que l'on peut faire, en sachant qu'un fond compliqué n'est pas forcément LA chose à faire, il se peut qu'un fond simple soit la meilleure solution pour votre design, et au final plus esthétique qu'un fond complexe raté.


Simple et efficace : une couleur



Oui c'est simple, mais la simplicité n'a-t-elle pas du bon parfois ? Je vous assure que si. Un bon choix de couleur permettant de mettre en valeur votre corps de page tout comme l'est la feuille blanche sur un bureau en bois sombre c'est parfait. Le rôle est rempli. Sachez simplement que si votre corps est clair, un fond sombre le mettra en valeur, mais que l'inverse n'est pas aussi évident. Globalement, il est conseillé de ne pas utiliser de couleur trop prononcée pour le fond, mais au contraire un teinte neutre, un peu "cassée". J'entends pas "cassée" un blanc qui n'est pas blanc ou un noir qui n'est pas noir... Ca vous aide, n'est-ce pas ? XD Alors disons qu'au lieu d'un blanc on préfèrera qu'il ait une très légère teinte de bleuté, ou de beige, ou d'une autre couleur, juste pour éviter le "blanc pur". Idem pour le noir, on préfèrera un marron très sombre, ou simplement un gris foncé. Ce n'est pas une règle absolue ! Je n'ai pas dit qu'il fallait à tout prix éviter le blanc ou le noir, simplement que c'est ce que, personnellement, je conseillais.
Donc... comment mettre une couleur de fond ?

.... U_U Non mais c'est facile ça, suffit de mettre la couleur dans le panneau, dans la liste des couleurs, y'a pas 36 solutions.


Et bien... si, en fait, il y a deux solutions. La première est effectivement de mettre la couleur dans le panneau, dans l'endroit prévu.
Affichage > Couleurs > Couleur de fond de page


MAIS ! Sachez que cette couleur ne détermine pas seulement le fond de page, elle est aussi la couleur de fond du cadre de publicité qui se trouve sur votre forum (lorsque c'est du texte, si c'est une image ou animation de pub elle prend tout le cadre donc on ne voit pas le fond).
Du coup c'est un problème car si votre corps de page est beige alors que votre fond est marron, votre cadre de pub va se retrouver marron mais posé sur le beige du corps... Ca fait tâche, non ? Alors comment faire ? Il faut se souvenir d'une règle essentielle, énoncée par ForumActif sur votre panneau d'admin d'ailleurs, que je cite :
"A savoir que tout ce que vous ajouterez dans cette feuille de style sera prioritaire par rapport aux couleurs et images que vous avez définies dans la gestion du thème (le CSS de base). "
Pour ceux qui n'auraient jamais vu cette phrase, je précise qu'elle se trouve tout simplement dans les explications juste au dessus de la Feuille CSS (Affichage > Couleurs > Feuille CSS ).
Comment cette règle peut-être nous aider ? Et bien simplement parce que l'on va considérer que le cadre pub' n'est pas directement modifiable par le panneau d'admin, donc on choisira de mettre la couleur de fond en fonction de ce cadre dans "Couleur de fond de page", en lui attribuant donc la couleur de fond du corps de page. Et pour notre VRAI couleur de fond ? Ben oui, si on laisse comme ça le fond aura forcément la couleur du corps de page et de la pub', MAIS si le CSS personnalisé est prioritaire et que l'on met notre couleur via ce css, et bien c'est cette couleur qui sera en fond de page, et non celle mise dans "Couleurs".

C'est pas clair ? Ok, allons tester.

Ouvrez votre forum test, puis allez dans : Affichage > Couleurs > Couleurs de fond. Mettez blanc dans "Couleur intérieure du cadre du forum" (c'est votre corps de page), et mettez noir dans "Couleur de fond de page".

Veillez à ce qu'il n'y ait pas d'image en fond de page dans la gestion des images.


Vous observez que le fond est noir comme prévu, le corps blanc comme prévu, mais que le bloc de publicité est NOIR comme le fond, et sur votre joli corps de page blanc ça fait vilain... Mettez donc dans "Couleur de fond de page" du blanc, comme votre corps. Là, tout est blanc ! Le corps ET le fond. Alors, pour choisir notre couleur de fond, on va aller dans le css, et on va simplement mettre une couleur de fond de page :
Affichage > Couleurs > Feuille CSS


Code:
body
{
background-color: #000000;
}

Pour l'explication "body" désigne la page globale, donc le fond. Vous pouviez aussi mettre "black" à la place du "#000000", les noms des couleurs fonctionnent aussi.
Validez votre css et allez voir votre forum : vous pouvez constater que votre corps est blanc, que votre fond de publicité est blanc aussi et donc ne choque pas, et que votre couleur de fond de page est...noir !
Tadaaaa !

Et oui, tout ça pour mettre correctement une couleur de fond... Et là vous vous dites que si ça commence comme ça, ça craint pour le reste ! Mais non, pas de souci, chaque chose sera vue par étape et au final vous verrez que c'est un plaisir à faire x).


Un fond subtil mais à la mode : le motif ou la texture


Voici qui permet un juste milieu pratique entre la couleur et l'image unique qui va nous embêter pour les résolutions. Placer un motif qui se répète sur tout le fond sans interruption est probablement le moyen le plus simple de réaliser un beau fond sans se prendre la tête avec les tailles d'écran. Que ce soit un motif ou une texture, il y a bien plus de choix qu'on ne le pense.


Il y a cependant un problème auquel vous serez forcément confronté si vous testez : la répétition peut se voir si la texture ou le motif n'est pas "bon". J'entends pas cela qu'il existe des motifs ou des textures déjà faites qui peuvent se répéter, on ne voit pas la limite de chaque image. Par contre, s'il y a une différence même légère, cela peut se voir, et ne fait pas très joli.


Le fond de gauche a des soucis de répétition, elle se voit par endroit, même si c'est peu présent. Cela peut être beaucoup plus visible cependant, comme sur celui du milieu. Celui de droite avec les rayures au contraire est parfait et peut se répéter sur la page sans problème.


Il faudra donc être soigneux avec la création du motif et au besoin le tester sur photoshop pour être sûr de soit. Le plus simple étant évidemment de trouver des motifs ou textures déjà faits... Rassurez-vous cela dit, ce n'est pas compliqué de créer les vôtres, voici comment procéder.

Ouvrez votre logiciel, pour nous ici en exemple ce sera photoshop, dans la version que vous avez, cela n'a que peu d'importance. Il faut savoir que la taille du document à ouvrir dépend du motif, mais qu'on peut tout à fait imaginer un document qui ne fasse que 2x2 pixels et ne contienne qu'un point. On aurait alors un fond de points.

Motif forme


Commençons par tester un fond avec un motif "forme", c'est à dire une forme qui va se répéter sur la page : prenez disons un document de 100x100px. Mettez une couleur de fond, puis par dessus appliquez sur un autre calque une forme, celle de votre choix, ou bien un brush que vous redimensionnerez au besoin. Donnez lui une couleur proche de votre couleur de fond, mais que l'on puisse tout de même distinguer la forme. Enregistrez cela, et vous avez votre image de fond !



On peut également imaginer que la forme soit un coup droite un coup à l'envers... Dans ce cas, réalisez un document deux fois plus grand, donc 200x200, puis faîtes glisser votre réalisation en 100x100 dessus. Calez là dans un coin, dupliquez-là, puis mettez-la à côté avec une symétrie verticale (Edition > Transformation > Symétrie verticale). Vous obtenez ceci :


Il s'agit ensuite de faire pareil sur la seconde ligne, mais attention, si l'on refait exactement dans l'ordre, donc avec le motif à l'endroit puis à sa droite le motif à l'envers, il n'y aura pas de décalage sur notre seconde ligne lors de la répétition, et on obtiendrait un fond comme ceci :


Alors que nous, nous préférons cela :


Pour cela, la deuxième ligne doit avoir l'ordre inverse. Commencez-donc par dupliquer votre forme à l'envers, puis placez-là en premier sur la ligne du bas, et dupliquez pour terminer votre forme à l'endroit pour terminer le document. Vous devez avoir quelque chose comme ceci :


Pour ce type de motif la règle essentielle c'est qu'ils doivent être très subtils pour ne pas fatiguer l'oeil du visiteur. Mon exemple ci-dessus est trop visible, il aurait fallut baisser l'opacité de la forme. Votre design ne repose pas sur ce motif, il est là pour apporter un peu d'irrégularité sur un fond de couleur, donc même s'il se distingue à peine ça sera bon et apportera un effet à votre page.

Textures de base


L'alternative intéressante à ces formes-motifs sont les textures. Celles-ci sont très nombreuses et très variables, pouvant apporter une touche particulière à votre design. La mode d'un temps fut la texture bois-noir utilisée en fond de page par exemple.



Il existe beaucoup de textures différentes, sans compter que vous pouvez à loisir les cumuler ou les modifier.
Pour réaliser vos fonds en texture allez dans votre logiciel et ouvrez une image de 200x200. Notez que certaines textures peuvent très bien aller sur du 100x100 ce qui sera toujours moins lourd à charger par le navigateur à l'ouverture de la page. En effet, plus vos images sont grandes et nombreuses, plus la page mettra du temps à s'ouvrir. Il faut cependant adapter votre taille au besoin. Si vous avez une texture réaliste de bois avec des planches assez grosses, votre image devra nécessairement être d'un format plus grand que si vous faites seulement une texture "papier".
Voyons quelques textures, en nous concentrant sur celles de base dans photoshop qui vous serviront beaucoup : le "papier en niveau de gris".

Prenez-donc votre document et remplissez-le de blanc avec le pot de peinture. Puis allez dans les options de fusion, et cliquez sur la partie "Incrustation de motif". Là, vous avez des motifs par défaut, un peu étranges. Vous pouvez ouvrir d'autres listes de motif en cliquant sur la barre verticale à côté de l'image du motif, puis sur la flèche dans l'angle supérieur droit du cadre qui s'est ouvert.



Dans la liste de motif & textures que vous avez, vous devez trouver "Papier en niveau de gris". Ouvrez-le. Ce sont des textures type "papier" comme son nom l'indique, et elles vous seront utiles car elles donnent rapidement du caractère à une création lorsqu'elles y sont appliquées. Celle-ci par exemple peut être intéressante sur un fond :

Il y en a d'autres bien sûr, et au final tout est à tester, cependant vous risquez de vite faire le tour des textures simples de photoshop... Il y a alors une solution simple qui consiste à modifier ou cumuler les textures.

Textures modifiées


Restons dans nos "papier en niveau de gris" pour cet exemple, et voyons comment donner un peu de couleur à ces motifs... Ouvrez votre document de 200x200 et appliquez-y une couleur de fond, celle que vous voulez et qui correspondra bien sûr aux tons de votre design.

Il est important de choisir la couleur avant et de l'appliquer au document au lieu de faire un document blanc et de le remplir d'une couleur dans les options de fusion, car comme vous pouvez le voir les options sont classées, la liste n'est pas là par hasard, il s'agit d'un ordre de position. L'incrustation de couleur étant AVANT l'incrustation de motif, celle-ci sera "au dessus" de lui, comme s'il s'agissait de calque positionnés. Nous allons cependant voir plusieurs méthodes.


Vous avez votre document de couleur, personnellement j'ai choisi un marron (#685242). Là, nous allons mettre notre motif et lui donner un mode d'incrustation. Pour cela, allez dans les options de fusion et cliquez sur "Incrustration de motif". Choisissez le motif que vous voulez dans la liste "papier en niveau de gris". Une fois fait, vous pouvez constater qu'il y a d'autres options dans cette partie "Incrustation de motifs" et notamment : "Mode de fusion".



Il s'agit alors de trouver le mode de fusion qui rendra le mieux et correspondra le plus à votre style de design, du moins celui que vous avez prévu. Par ailleurs, vous pouvez également modifier l'échelle (taille du motif) qui est par défaut à 100%.

Attention car le grossir peut le rendre flou.


Voici quelques exemples :

La première texture de la liste en lumière tamisée et échelle 50%.

(Les réglages apparaissent sur l'image)


Texture "granite gris, en mode "produit" sur un fond bleu, échelle 50%.


Pour aller plus loin dans la modification nous allons pouvoir ajouter d'autres options à notre document, comme par exemple l’incrustation de couleur.

Attention : oubliez l’incrustation de dégradé ! Votre image devra se dupliquez partout sur votre fond de page, un dégradé casserait totalement la continuité et ferait apparaitre de grosse "cassures" là où l'image s'arrête.




Ce qui donnerait :


Votre incrustation de couleur peut servir à ajuster la teinte pour éviter une couleur trop franche. Là aussi, il faut lui appliquer un mode de fusion. Veillez cependant à ne pas rendre votre création trop flash, elle risquerait d'agacer le visiteur ou d’alourdir votre thème.

Fond possible :


Fond à éviter :


Une fois que vous avez obtenu un résultat qui vous satisfait validez vos options de fusion. Vous pouvez alors enregistrer votre image. Cependant, vous pouvez aller plus loin dans la modification, si votre texture manque de netteté par exemple, ou bien si vous souhaitez lui appliquer des courbes de dégradé.
Pour que notre document puisse être modifiée avec des filtres il faut qu'il soit une image "fixe", dans le sens où actuellement il s'agit d'une image blanche avec des options, les options ne peuvent être modifiées par filtre. Pour transformer votre calque en image, comme si vous veniez de l'ouvrir en l'important d'un dossier ou du net, créez un nouveau calque par dessus, puis sélectionnez les deux calques. Faites "Fusionner les calques". Vous avez alors votre image.

Soyez sûr de vous lorsque vous faites cela car vous ne pourrez plus modifier les options de fusion ensuite, car ils n'existent plus ! Votre image est "aplatie" si vous préférez. Si vous souhaitez avoir une "sécurité" et pouvoir revenir en arrière pour modifier vos options, dupliquez votre calque comportant ces options avant de le fusionner puis placez-le en dessous et masquez-le. Ainsi, vous serez toujours à temps de le reprendre si les modifications apportées ensuite ne vous plaisent pas.




Une fois que vous avez fusionné vos calques, vous pouvez par exemple appliquez un + net sur votre texture si vous estimez que cela la rend plus réaliste ou simplement plus jolie.

Filtre > Renforcement > plus net

<= avant ; après =>


N'abusez pas de ce filtre car il risquerait de donner un aspect "sale" à certaines textures, ou bien en étant utilisé trop de fois.


Avec tout cela, vous avez de quoi vous amusez pour créer un fond simplement et surtout sans vous prendre la tête avec des problèmes de résolution d'écran différente selon les visiteurs. C'est sobre mais efficace !

Complément : Si vous n'avez pas assez des textures de base de votre logiciel (ce qui arrivera forcément), vous pouvez toujours en trouver un peu partout sur le net, et notamment sur la mine d'or "DeviantART". Ce site étant en Anglais, je vais vous aiguiller pour savoir où chercher :
Sur la gauche de votre écran vous avez une navigation interne qui classe les créations du site par type. Allez dans "Ressources & Stock image" > Application Ressources > Photoshop Pattern. "Pattern" signifie texture, et vous aurez-là tout un stock de textures pour photoshop. Certaines sont téléchargeables, d'autres pas, selon la volonté de leur auteur. Téléchargez celles que vous voulez, puis vous devrez les mettre dans le bon dossier :
Program Files > Adobe > Photoshop xxx (selon votre version) > Paramètres prédéfinis > Motifs
Vous ne devez déplacer que les fichiers ayant l'extension .PAT
Une fois dans ce dossier, les nouveaux motifs seront disponibles dans votre liste lorsque vous ouvrez vos motifs dans les options de fusion.


Ces ressources sont généreusement mises à disposition par leur auteur, utilisez-les tant que vous voulez mais il serait mal vu de les redistribuer.


Voilà donc pour les motifs et textures de fond ! Mais il existe d'autres manières de mettre un fond... Vous n'avez pas fini ! Alors passons à la suite.

Affichage de votre motif en fond de page


Oui, il est bien beau d'avoir votre image crée, reste à la mettre sur votre fond de page. Cette étape sera très simple car puisque nous n'avons qu'une image destinée à se répéter, vous pouvez l'afficher normalement. Allez donc dans :

Affichage > Images & Couleurs > Gestion des images

Placez tout simplement votre image hébergée dans l'espace prévu pour l'image de fond de page et validez. Vous pouvez également cocher ou non la case "fond de page fixe" selon l'effet que vous préférez.


Un fond placé : une image et une couleur


Ce qui est agréable sur une page c'est un dégradé de couleur, léger, qui rompt un peu la monotonie d'une couleur identique de bas en haut de la page. Nous avons vu plus haut qu'il ne fallait pas utiliser de dégradé sur un motif qui se répète car ça cassait tout son bel effet en faisant une vilaine démarcation au moment de la répétition de l'image. Mais alors comment réaliser un dégradé sur notre page ?
Tout simplement en créant une image comportant ce dégradé, assez haute, et qui ne se répèterait que dans un sens... Car oui, il est tout à fait possible de ne choisir qu'une forme de répétition : verticale ou horizontale !

Réalisons ensemble un dégradé pour votre fond de page. Allez dans votre logiciel et ouvrez un document de 20x900px. La taille peut vous sembler étrange mais il faut savoir que pour un dégradé simple cela suffit. La hauteur peut être moindre cependant, tout dépend si vous voulez un dégradé qui fasse la hauteur de la page ou juste en guise d'en-tête. Pour notre exemple nous allons réaliser un dégradé de page, fixe, collé en haut de page, avec seulement deux couleurs.
Remplissez votre document d'une couleur, ce sera votre couleur de fond, personnellement j'ai choisi un beige #d6c5ac. Créez ensuite un nouveau calque par dessus, puis choisissez l'outil "Dégradé". Il se trouve dans la même case que le "pot de peinture".
Vous avez les options de dégradés en haut de page. Choisissez le dégradé "couleur – transparent" comme sur l'image ci-dessous, en veillant à bien être en dégradé linéaire.



Pour changer la couleur de ce dégradé changez simplement votre "couleur de premier plan" dans les couleurs normales :


Choisissez une couleur soit légèrement plus foncée, soit légèrement plus claire que votre couleur de fond. Il est préférable de rester dans les mêmes teintes et de ne pas faire un dégradé trop "brut". Dans mon cas je prend plus clair : #ebdfce.
Placez-vous sur le nouveau calque que vous avez créé puis tracez la ligne de votre dégradé en maintenant le bouton Shift (ou Maj) pour qu'il soit bien droit. Partez en dehors de votre document et descendez selon la hauteur que vous souhaitez :

=>


Vous obtenez donc un dégradé vertical avec une première couleur en haut allant vers votre seconde couleur et couleur de fond en bas. Pourquoi "couleur de fond" ? Et bien simplement car si votre fond est fixe il suivra votre haut de page et montera avec lui lors du scroll, donc en bas de page il n'y aura que la couleur. Ce sera plus clair pour vous avec l'installation.
Allez donc sur votre forum, et cette fois nous n'allons pas passer par la mise en place normale des images, car il faut personnaliser davantage. En effet, n'oubliez pas qu'en mettant l'image dans "Affichage > Gestion des images" elle va se répéter dans tout les sens sur toute la page, on ne peut pas faire cela car cela signifierait que si la page est longue on retomberait sur une répétition d'image avec notre couleur claire qui arriverait très brutalement, avec une séparation nette. Nous allons donc utiliser le CSS !

Commencez par héberger votre image sur un hébergeur classique. Allez ensuite dans votre feuille css et nous allons commencer le code suivant :

Code:
body
{

}


Comme dit plus haut, "body" sert à mettre en forme l'ensemble de la page, et donc dans notre cas le fond de page. Entre les accolades il va falloir placer notre image de fond ainsi que toutes les prorpiétés que l'on veut lui appliquer.

Code:
body
{
background-image: url(adresse.jpg);
}


Remplacez donc "adresse.jpg" par l'adresse de votre image hébergée.

Il est possible de mettre une apostrophe pour encadrer l'adresse, c'est une manière d'écrire qui est juste, mais personnellement je ne met rien.


Code:
body
{
background-image: url('adresse.jpg');
}


Si vous validez dès maintenant vous aurez un aperçu de ce dont je parlais plus haut, à savoir une répétition de l'image de fond verticalement, ce que l'on ne veut pas.
Pour l'éviter, on va tout placer correctement :

Code:
body
{
background-image: url(adresse.jpg);
background-position: top left;
background-repeat: repeat-x;
}


Une explication s'impose... Concernant la position il s'agit juste de là où vous posez votre première image, avant de l'imaginer se répétant. Dans mon cas, je l'ai mise en top left, mais en réalité ce n'était pas utile car c'est le positionnement par défaut. On verra plus tard que ce positionnement peut être très important. Dans le cas présent il n'est là que par sûreté.
Le background-repeat est ce qui va nous intéresser le plus ici. Je vous ai dit tout à l'heure que, par défaut, une image de fond se répète, c'est simplement parce que si rien n'est précisé par le css il applique d'office un "background-repeat: repeat;" en répétant le fond jusqu'à combler toute la page (ou le bloc, selon le cas). Or nous, sur notre page, nous ne souhaitons notre image qu'en haut, alors elle devra être placée tout en haut et ne se répéter QUE sur la largeur de page, nous sommes d'accord. Pour cela, le "repeat" devra être précisé, et pour cela nous utilisons les axes "x" et "y". Alors pour ceux qui sont comme moi allergiques aux maths, je rappelle juste que dans un graphique l'axe des "x" c'est l'axe horizonal, et celui des "y" l'axe vertical. Dans le cas présent, l'image doit se répéter horizontalement donc selon l'axe des "x", c'est pourquoi j'ai mis "background-repeat: repeat-x;"


Sachez aussi que vous pouvez écrire tout cela sur une simple ligne, de manière condensée :

Code:
body
{
background: url(adresse.jpg) top left repeat-x;
}


Dans cette manière "condensée" on met simplement "background", au lieu d'avoir plusieurs lignes avec chaque fois "background-image", "background-position", etc... Il n'y a qu'une situation où il est impossible de faire notre css de cette façon c'est pour le background multiple (plusieurs images de fond) mais nous y viendrons plus tard, à la fin de ce chapitre sur les fonds.
Il nous reste à énumérer tout ce qu'on veut mettre à la suite, sans séparation.


Nous n'avons pas vraiment fini notre code, car il manque... Il manque ?...
La couleur ! Et oui, je vous rappelle que, comme on l'a vu précédemment, il est mieux de mettre la couleur de fond dans le css plutôt que dans la page de couleur de votre panneau. Nous allons donc l'ajouter, soit avec une ligne complète, soit avec simplement le code, selon si vous avez condensé votre css ou non.

Code:
body
{
background-image: url(adresse.jpg);
background-position: top left;
background-repeat: repeat-x;
background-color: #d6c5ac;
}


ou

Code:
body
{
background: url(adresse.jpg) top left repeat-x #d6c5ac;
}


(habituez-vous plutôt à cette manière d'écrire, car je n'utiliserais que celle là par la suite)

la couleur à mettre est bien sûr celle du bas de votre dégradé, autrement dit votre couleur de fond à la base de votre document lorsque vous l'avez réalisé.


Normalement votre fond de page bouge au moment du scoll et donc le dégradé sort de la page vers le haut lorsque vous descendez. Si vous avez décoché "fond de page fixe" dans votre panneau d'admin (dans la gestion des images), le fond pourra rester en place et donc le dégradé restera sur la page même lorsque vous êtes en bas du forum. Il n'y a pas de bien ou moins bien ici, c'est seulement selon votre goût.

Vous pouvez ensuite vous amuser à faire un dégradé plus petit par exemple, pour qu'il soit juste en haut de la page sur une hauteur de 200px mettons.

Et si je veux mettre une texture dans ce dégradé ?


Alors il faudra commencer à faire quelque chose de vital dans la création de thème : tricher x). Pas de manière mauvaise bien sûr, mais tout les thèmes, skin, webdesign sont faits grâce à des petits "trucs", des choses que l'on cache, que l'on adapte, etc... Il s'agira d'apprendre où et comment le faire.

Concernant le fond avec texture, c'est la même chose que votre fond de dégradé en couleur, mais il est préférable de le réaliser sur un document plus large, disons de 200px de large. Si vous avez déjà fait votre dégradé avec votre fond puis votre couleur dégradée, laissez ainsi, et ajoutez simplement un calque par-dessus le tout. Remplissez ce calque de blanc, et nous allons jouer avec les options de fusion.
- en premier lieu mettez ce calque en mode "produit", il devrait alors "disparaitre", ou du moins ne plus se voir, car concrètement il est toujours là bien sûr.
- allez ensuite dans "Incrustation de modif" puis choisissez le motif qui vous plait. Appliquez un mode de fusion, ce que vous voulez, puis validez.

(j'ai réduit la hauteur pour ne pas prendre trop de place sur la page)

Le problème que nous allons alors rencontrer c'est que dans le cas d'un fond fixe ou d'un écran haut, il va y avoir une coupure entre la fin de l'image qui a la texture et la couleur de fond, même si vous prenez la couleur la plus proche possible.


C'est là qu'il faut tricher : créez un nouveau calque, prenez votre couleur de fond et appliquez un dégradé en partant du BAS de votre document, sur disons une centaine de pixel de haut :


Avec ce fond, la transition entre la texture et le fond sera douce. Néanmoins, cela risque d'être étrange de voir une texture en haut puis seulement de la couleur en bas... mais il est possible de palier à ce problème avec le fond multiple que nous verrons à la fin.
Pour placer ce fond procédez exactement de la même façon que pour le dégradé de couleur simple.

Nous en avons terminé pour ce qui concerne les fonds de page simples. Il reste tout une partie sur les fonds de page plus complexe, avec image (bannière-fond), avec corps de page, ou avec plusieurs images de fond.
C'est long, mais armez-vous de patience, car une fois que l'on sait comment réaliser un bon fond et surtout un fond avec plusieurs images on peut avoir réalisé une bonne moitié du design uniquement avec cela !

Partie précédentePage suivante

Création d'un thème complet (forme 2) - Lun 22 Avr 2013 - 17:28

Création d'un design de forum complet





Introduction


Bonjour et bienvenu sur l'index de ce6te création de thème de forme 1 ! Cette seconde application, la création d’un design de forum complet, vous permettra de mettre en œuvre tout ce que vous avez appris précédemment, mais également de découvrir de nouvelles choses pour créer, comme le titre l'indique, l'esthétique d'un forum en entier : Graphisme & Codage !


Tout comme le précédent tutoriel, vous avez besoin de quelques "outils" :
- Photoshop (ou un autre logiciel de graphisme, mais sachez que je ne ferais aucunes explications quant au graphisme car je ne suis pas expert dans le domaine ^^’)
- Un forum test "ForumActif" (forum pour installer le thème, vous pouvez en créer un sur ForumActif, et seulement sur cette plateforme, quitte à ouvrir une adresse mail rapidement)
- Un dossier que vous nommerez par exemple « Mon forum » pour y entreposer vos image.
- Bloc-note (Ou Notepad ++ peu importe) pour sauvegarder vos codes.

Je vais faire en sorte que ce tutoriel soit accessible à tous, débutant inclus. J'espère que cette application vous aidera à mieux comprendre comment concevoir un codage entier. Si vous avez des questions tout au long de l'application, n'hésitez pas à me MP Envoyer un MP ou de poster dans la section "Problème avec mon code" pour le côté codage et "Problème avec mon logiciel" ou "Work in Progress" pour la partie graphique.
Vous en avez probablement marre du blabla et moi aussi, mais avant tout, si vous utilisez ce tuto' pour réaliser votre forum, la mise en place d'un crédit pour Never Utopia serait très appréciable ;D.

Bon tutoriel !

Ce tutoriel est le fruit d'un travail conséquent, merci de ne pas le copier, totalement ou partiellement. Vous pouvez le mettre en pratique librement, mais pas vous en approprier l'invention. Vous êtes autorisés à mettre des liens vers cette page où vous le souhaitez.


Index


Introduction & Index
Étape 1 - Réaliser son fond et sa bannière
Étape 2 - Préparer sa feuille de style CSS
Étape 3 - Poser les fondations du codage du forum
Étape 4 - Mise en forme de la navigation et de la bannière
Étape 5A - Création graphique des catégories
Étape 5b - Installation des catégories
Étape 6 - Élaboration du "Qui est en ligne?"
Étape 7 - Élaboration du Footer
Étape 8 - Résumé des étapes précédentes
Étape 9 - Structure de l'affichage des sujets
Étape 10 - Mise en forme des messages
Étape 11 - La Page Accueil, mise en avant d'un élément décisif
Étape 12 - Des petits plus ?
Étape 13 - Zoom sur l'ensemble du tutoriel et Bilan
Étape 14 - Étape mystère

Étape 1 - Réaliser son fond et sa bannière



Introduction


Avant toute chose, la première chose à faire est de créer sa bannière et son fond, s'il est en image bien sûr. Ces derniers vont donner la tonalité au reste du forum, des couleurs et des sensations qui vont s'en dégager. Nous allons débuter ce tutoriel par la création de notre fond puis de notre bannière.

Création du fond


• Ouvrez Photoshop et créez un document vide de taille 1680*1018 (1680 Largeur et 1018 Longueur).

• A l’aide de l’outil « Pot de Peinture » Pot de peinture remplissez votre document de la couleur #021f2f

• Double-cliquez sur le Calque 1 et appliquez une incrustation en dégradé de la couleur la plus foncée #010f18 à la couleur la plus claire #021f2f. Faites glisser votre dégradé vers le bas et appliquez une échelle de 15 %.

• Créez un nouveau calque (CTRL+SHIFT+N) et remplissez le grâce à l’outil « pot de peinture » Pot de peinture de blanc #ffffff. Appliquez lui une fusion « Produit » puis double-cliquez sur le calque 2.
Sélectionnez Incrustation de motif puis appliquez celui que vous désirez en n’oubliant pas de modifier son mode de fusion. (Pour ma part, j’ai choisi un effet papier que j’ai incrusté en produit.)

Nous détenons à présent notre fond (Ou Background).
Sélectionnez grâce à l’outil sélection carrée le bas du fond de telle façon à n’obtenir que la fondue vers le bleu foncé. Coupez (CTRL+X), Créez un nouveau document (CTRL+N) et Collez (CTRL+V). Enregistrez le en format .jpg au nom de «BodyBottom » dans le dossier que vous avez créée précédemment. De même, sélectionnez la partie restante du fond et réalisez la même manipulation en l’appelant « BodyTop ».


Création de notre bannière


• Pour créer notre bannière nous aurons besoin de « Nébuleuses ».
Pour ma part, j’ai pris celles-ci :
Nébuleuse 1
Nébuleuse 2

• Ouvrez un document de taille 750*280 (Largeur*Longueur) et collez-y vos deux nébuleuses.
• Mettez la bleue en première et l’orange en seconde.
• Passez votre calque 2 en Mode Superposition.

• Appliquez maintenant 3 courbes transferts de dégradés selon vos nébuleuses.
Notre thème sera dans les tons froids donc nous allons utiliser des dégradés de couleurs froides. J’ai utilisés ceci :
(Mode Teinte – 100%)

(Mode Teinte – 20%)

(Mode Incrustation – 30%)

Voici mon rendu :

• Appliquez maintenant une typographie dans votre bannière. Je vous laisse le soin de décider pour ma part j’ai choisi d’appliquer une typographie large légèrement transparente en fond de la seconde avec un dégradé, une ombre portée et un contour.

Étape 2 : Préparer sa feuille de style CSS



Introduction


Après avoir réalisé notre fond et notre bannière, nous devons préparer notre feuille de style CSS. Lui donner un aspect organisé avec des marquages nous permettra de cibler quels balises CSS appartient à quelle partie du forum.

Organiser sa feuille de style CSS


Il est tant d'aller sur le forum test pour commencer à le préparer à sa transformation. Nous allons donc préparer notre feuille CSS. Le forum se divisera en 8 parties modifiées via le CSS :
Structure / Header
Page Accueil / Catégories
Sujets / Messages
QEEL / Footer

Ceci permettra un repérage BEAUCOUP plus simple dans la feuille CSS et donc si vous avez quelque chose à modifier, on s’y retrouvera en deux secondes.
Pour réaliser le marquage, nous allons utiliser les commentaires CSS. Ils commencent par /* et se terminent par */. Vous pouvez ainsi ajouter entre ces deux éléments le commentaire.

Si vous avez bien compris, notre feuille de style CSS va donc être :
Code:
               /*Début STRUCTURE*/
               /*Fin STRUCTURE*/

               /*Début HEADER*/
               /*Fin HEADER*/
         
               /*Début PAGE ACCUEIL*/
               /*Fin PAGE ACCUEIL*/
   
               /*Début CATEGORIES*/
               /*Fin CATEGORIES*/

               /*Début SUJETS*/
               /*Fin SUJETS*/

               /*Début MESSAGES*/
               /*Fin MESSAGES*/

               /*Début QEEL*/
               /*Fin QEEL*/

               /*Début FOOTER*/
               /*Fin FOOTER*/


C'est une étape que je trouve plutôt importante, même si elle peut se faire au fur et à mesure parce qu'elle permet un repérage efficace et rapide !
Nous avons terminé les préparatifs de la feuille, passons à ceux du forum !

Étape 3 - Poser les fondations du codage du forum



Introduction


Après avoir créée notre bannière, notre fond et avoir organisé notre feuille de style CSS, nous devons terminer les préparatifs par poser les fondations du codage du forum. Afin de pouvoir réaliser l'installation avec cette application, le forum doit être en phpBB2. Vous devez également être le fondateur du forum pour avoir accès aux templates.

Réglages prioritaires


• Allez sur votre forum test

• Pour démarrer, nous allons commencer par mettre les réglages principaux d’affichage. J’entends par là, le logo centré, le titre du forum caché etc. Pour ce faire, direction Affichage > Page d’Accueil > En-tête et navigation.
Vérifiez que ces éléments correspondent sinon modifiés-les comme voulu :
Position du logo : Centré
Afficher le titre du forum : Non
Afficher seulement des images dans la barre des liens : Non
Position du menu : Centré
Forcer la barre de navigation à rester sur une ligne : Oui

• Ensuite, allez dans Général> Configuration>Structure des pages :
Largeur du forum (nombre ou %) : 948

• Allez maintenant dans Affichage > Page d’accueil > Structure et hiérarchie et assurez-vous à nouveau de ces réglages :
Séparer les catégories sur l’index : Moyen
Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui
Longueur du titre du sujet affiché : 16
Lien vers les niveaux inférieurs : Oui
Afficher les modérateurs d'un forum : Non
Afficher les statistiques du forum : Uniquement sur l'index racine
Afficher les moteurs de recherche dans les statistiques du forum : Non

• Enfin, allez dans Affichage > Images et Couleurs > Gestion des Images et retirez-y TOUTES les images qui se trouvent dans : Général/Navigation – Icônes du forum – Icônes des sujets.
Ceci fait, vous vous trouverez à ce résultat :

Non ! Rangez-moi ces haches >.<, je ne vous ai pas fait faire ça pour rien, au contraire, ce sont des réglages parfois négligés qui jouent un rôle important dans la hiérarchie du forum ! Avant de vouloir construire vos catégories, il faut avoir un aspect global de ce que vous voulez de votre plateforme alors n’hésitez pas à consulter les sections d’aide à la conception de forum Wink

• Pour pouvoir enfin toucher au code, on va commencer par enlever les couleurs présentes sur le forum pour pouvoir mieux jouer avec le CSS. Allez donc dans Affichage > Couleurs et enlevez les couleurs de fond et les couleurs de contour.

Premiers pas dans notre CSS


• Maintenant, on passe au code pur et dur ! Il faut mettre en forme le fond et le corps du forum. Aussi, nous allons modifier la balise « body », littéralement « corps » en anglais mais un faux-ami ici puisqu'elle constitue le fond de votre forum. Nous allons tout d’abord commencer par y ajouter le fond que nous avons créée précédemment et retirer les espaces qui sont en haut et en bas entre le forum et la page web avec « margin : 0px » :
Code:
               /*Début STRUCTURE*/
body
{
  background-color: #021925;
  background-image: url('http://img507.imageshack.us/img507/6665/bottomsw.jpg'), url('http://img203.imageshack.us/img203/964/midjf.jpg');
  background-position: bottom left, top left;
  background-repeat: no-repeat, repeat-y;
  background-attachment: scroll, scroll;
  margin: 0px; /* Retire les espaces qui sont en haut et en bas entre le forum et la page web */
}
               /*Fin STRUCTURE*/


Background-color équivaut à une couleur de fond
Background-image équivaut à une image de fond, ici il y en a deux donc nous avons mis le bas (BodyBottom) en premier séparé d'une virgule (= au mot "et") puis mis le fond (BodyTop)
Background-position équivaut à la position des images du fond. Le bas commence en bas à gauche (Bottom left) et le haut en haut à gauche (Top left)
Background-repeat équivaut à la répétition des images du fond. Le bas ne se répète pas, le haut se répète sur l'axe des ordonnés (Si c'était uniquement le cas, on aurait mis repeat-y), donc de haut en bas et sur l'axe des abscisses (Si c'était uniquement le cas, on aurait mis repeat-x), donc de gauche à droite.
Background-attachment équivaut à l'attachement du fond à la page web. Scroll signifie qu'il ne suit pas la page web lorsqu'elle déroule (à l'inverse de fixed qui déroule en même temps que la page et reste donc fixe)

• Maintenant, on ajoute une couleur, des bordures, une taille et une ombre au corps du forum :
Code:
.bodyline
{
  background-color: #052231;
  border-left: 1px solid #095279;
  border-right: 1px solid #095279;
  width: 948px;
  margin: auto;
  padding: 0px; /*Pas de marge intérieur dans le corps*/
  box-shadow: 0px 0px 3px #000;
}
               /*Fin STRUCTURE*/

border-left équivaut à une bordure sur la gauche du corps. Elle sera de 1px de large, de consistance "solide" (c'est à dire sans coupure ou dédoublement) avec une couleur de #095279
border-right est le même procédé sauf que tout ce passe sur la bordure droite.
margin: auto viendra centrer le forum en laissant automatique les marges extérieurs du corps du forum. Il se centre donc automatiquement !
width donne une largeur au corps. On utilise "height" pour sa longueur mais ici, c'est inutile de l'utiliser.

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.


Radical changement hein ? Et bien, ce que vous venez de faire doit être aujourd’hui un réflexe lorsque vous commencez à coder votre forum. Ces éléments permettent une cohésion et une harmonie du forum.
Afin que le rectangle blanc contenant les publicités soit de la même couleur que le fond intérieur, il faut aller dans les couleurs mettre #052231 en temps que "Couleur du fond de page". Nous allons également colorer les espaces où l'on peut écrire, mettez donc #17344F en tant que "Couleur zones de saisie, menus déroulants et cadre de l'en-tête "

Je rappelle que vous pouvez modifier toutes les couleurs que je propose, tout ceci reste qu'une application et je ne vais pas aborder plusieurs nuances ou tons de thèmes, c'est infini et ça prendrait beaucoup trop de temps pour vous, comme pour moi ;P !

Récapitulatif du CSS :
Code:
               /*Début STRUCTURE*/
   /* Fond du forum*/
body
{
  background-color: #021925;
  background-image: url('http://img507.imageshack.us/img507/6665/bottomsw.jpg'), url('http://img203.imageshack.us/img203/964/midjf.jpg');
  background-position: bottom left, top left;
  background-repeat: no-repeat, repeat-y;
  background-attachment: scroll, scroll;
  margin: 0px; /* Retire les espaces qui sont en haut et en bas entre le forum et la page web */
}

   /* Corps du forum*/
.bodyline
{
  background-color: #052231;
  border-left: 1px solid #095279;
  border-right: 1px solid #095279;
  width: 948px;
  margin: auto;
  padding: 0px; /*Pas de marge intérieur dans le corps*/
  box-shadow: 0px 0px 3px #000;
}
               /*Fin STRUCTURE*/

               /*Début HEADER*/

               /*Fin HEADER*/
         
               /*Début PAGE ACCUEIL*/

               /*Fin PAGE ACCUEIL*/
   
               /*Début CATEGORIES*/

               /*Fin CATEGORIES*/

               /*Début SUJETS*/

               /*Fin SUJETS*/

               /*Début MESSAGES*/

               /*Fin MESSAGES*/

               /*Début QEEL*/

               /*Fin QEEL*/

               /*Début FOOTER*/

               /*Fin FOOTER*/


Étape 4 - Mise en forme de la navigation et de la bannière



Introduction


Tout comme l’application 1, nous abordons la navigation en première. Je vais vous livrer une petite astuce bien sympa et simple à faire. C'est une esthétique qui sera uniquement dans cette application, pour donner quand même une envie d'apprendre !

Modification de la structure


• Pour modifier la navigation et la bannière, vous devez aller dans le template Overall_header qui se trouve dans Affichage > Templates > Général. Comme l’a fait Sparrow dans l'application précédente, on peut remercier haut et fort le staff de FA pour avoir ajouté les lignes dans les templates, si vous saviez comme ça nous facilite la vie T_T

Enfin bon, direction l.265 à 269 et retirez ce qui gère l’affichage de la barre de navigation, c’est à dire :
Code:
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>


Et comme l'application précédente, on va supprimer la navigation mais on va la faire réapparaitre par *Magie* ! Dirigez-vous à la l.245 et vous avez ceci :
Code:
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>


Non, ce n’est pas du chinois, c’est ce qui gère l’affichage de votre bannière, celui du titre du forum ainsi que de la description de votre forum. Et devinez ce qu’on va faire … SUPPRIMER ! Hop hop hop, pas tout, on va conserver ce qui nous intéresse espèce de barbares ! x)

• Retirons d’abord ce qui gère l’affichage du logo à droite et à gauche ainsi que le titre et la description.

Ceci :
Code:
                   <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->


Ceci :
Code:
                      <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>


Et ceci :
Code:

                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->



On arrive en résumé à ceci :
Code:
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                  </td>
               </tr>
            </table>


• Maintenant, nous allons ajouter … Oui notre navigation, perspicaces les amis ♥ Mais comment ? Et bien nous allons créer une cellule (td) dans la ligne (tr) du tableau (table) déjà présent et régler la largeur des cellules. Pour ce faire, à la l.252, après
Code:
                     <br />
                     <!-- END switch_logo_center -->
                  </td>


Ajoutez :
Code:
                   <td align="center" width="25%" valign="top">
                  </td>



Puis modifiez le 100% en 75% ici :
Code:
                                         
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->


• Maintenant, nous allons ajouter notre navigation grâce à une div dans la cellule comme ceci :
Code:
             <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <td align="center" width="75%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                  </td>

                                             <td align="center" width="25%" valign="top">
   <div class="navigation">
   </div>
                  </td>
               </tr>
            </table>



• Notre navigation est en place, on va y ajouter un titre à l'aide d'une div qui contiendra le texte "Navigation", c'est pas vraiment utile mais ça permet de s'y retrouver ^^ Si vous avez suivi, ça donne :
Code:
   <div class="Navigation">
   <div class="NavigationTitle">Navigation</div>
   </div>


• Enfin, nous allons procéder à la création de nos liens de l'interface navigatrice. Nous allons inclure les liens suivants :
- Accueil : http://adressedevotreforum/
- Rechercher : http://adressedevotreforum/search
- Membres: http://adressedevotreforum/memberlist
- Groupes: http://adressedevotreforum/groups
- Profil: http://adressedevotreforum/profile?mode=editprofile
- Messages Privés: http://adressedevotreforum/privmsg?folder=inbox
- Déconnexion: http://adressedevotreforum/login?logout
- Connexion: http://adressedevotreforum/login
- Nous rejoindre: http://adressedevotreforum/register

- Règlements : Lien vers la section "Règlements "
- Présentations : Lien vers la section "Présentations "
- Questions Invités : Lien vers la section "Questions Invités"
- Flood : Lien vers la section "Flood"

Ils seront donc crée de la sorte :
Code:
<a href="URL" alt="NOM DU LIEN">NOM DU LIEN</a>


Avec de la jugeote, vous aller obtenir ceci :
Code:
   <a href="http://adressedevotreforum/" alt="Accueil">Accueil</a>
   <a href="http://adressedevotreforum/search" alt="Rechercher">Rechercher</a>
   <a href="http://adressedevotreforum/memberlist" alt="Membres">Membres</a>
   <a href="http://adressedevotreforum/groups" alt="Groupes">Groupes</a>
   <a href="http://adressedevotreforum/profile?mode=editprofile" alt="Profil">Profil</a>
   <a href="http://adressedevotreforum/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a>
   <a href="http://adressedevotreforum/login?logout" alt="Déconnexion">Déconnexion</a>
   <a href="http://adressedevotreforum/login" alt="Connexion">Connexion</a>
   <a href="http://adressedevotreforum/register" alt="S'inscrire">Nous rejoindre</a>

   <a href="http://adressedevotreforum/">Règlements</a>
   <a href="http://adressedevotreforum/">Présentations</a>
        <a href="http://adressedevotreforum/">Questions au staff</a>
   <a href="http://adressedevotreforum/">Flood</a>


Mais là, on est confronté à un problème vraiment énorme. Lequel est-il ? Et bien l'interaction Connexion/Déconnexion et Message Privé / Nouveau Message Privé n'est plus fonctionnelle ! Comment fait-on ? Et bien on va devoir jouer avec ce que nous propose ForumActif et un peu de Javascript. C'est pour cela que j'ai ajouté id="mp" à nouveau message car l'on va le récupéré via le JavaScript.

Direction l.260, sautez une ligne et ajoutez ceci :
Code:
      <!-- BEGIN switch_user_logged_in -->

Ceci signifie, "A changer lorsque l'utilisateur se connecte". On clos le commentaire à la l.262 en sautant une ligne et en ajoutant :
Code:
      <!-- END switch_user_logged_in -->


On utilise le même procédé à la l.262, on saute une ligne et on ajoute :
Code:
      <!-- BEGIN switch_user_logged_out -->

Ca signifie, "A changer lorsque l'utilisateur se déconnecte". On clos maintenant le commentaire à la l.264 en sautant une ligne et en ajoutant :
Code:
      <!-- END switch_user_logged_out -->


Cependant, pour que tout ceci fonctionne, on est obligé d'ajouter la barre originelle mais pour éviter les soucis d'affichage, on va la mettre en invisible. L.276, Après :
Code:
                  </td>
               </tr>
            </table>


Ajoutez :
Code:
                                 <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>


Nous avons terminé *-* !
Long pour faire une petit navigation hein ? Qui a dit que le codage était rapide héhé =P ?
Bien, en résumé de la l.245 à la l.277, vous avez ceci :
Code:
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <td align="center" width="75%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                  </td>

                                             <td align="center" width="25%" valign="top">
   <div class="Navigation">
   <div class="NavigationTitle">Navigation</div>
   <a href="http://adressedevotreforum/" alt="Accueil">Accueil</a>
   <a href="http://adressedevotreforum/search" alt="Rechercher">Rechercher</a>
   <a href="http://adressedevotreforum/memberlist" alt="Membres">Membres</a>
   <a href="http://adressedevotreforum/groups" alt="Groupes">Groupes</a>
   <a href="http://adressedevotreforum/profile?mode=editprofile" alt="Profil">Profil</a>
      <!-- BEGIN switch_user_logged_in -->
   <a href="http://adressedevotreforum/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a>
   <a href="http://adressedevotreforum/login?logout" alt="Déconnexion">Déconnexion</a>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_user_logged_out -->
   <a href="http://adressedevotreforum/login" alt="Connexion">Connexion</a>
   <a href="http://adressedevotreforum/register" alt="S'inscrire">Nous rejoindre</a>
      <!-- END switch_user_logged_out -->
   <a href="http://adressedevotreforum/">Règlements</a>
   <a href="http://adressedevotreforum/">Présentations</a>
        <a href="http://adressedevotreforum/">Questions au staff</a>
   <a href="http://adressedevotreforum/">Flood</a>
   </div>
                  </td>
               </tr>
            </table>
                                 <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>


Validez votre template, publiez-le et regardez le résultat sur votre forum.

Affreux hein ? Hey c'est normal, il y a pas de CSS, on va y passer dès maintenant Wink

• Il est temps d'ajouter notre bannière que nous avons réalisé ! Dirigez-vous dans Affichage > Images et Couleurs > Gestion des Images> Général/Navigation et ajoutez-là dans le champ Logo du forum.

• On va maintenant en profiter pour ajouter les couleurs du forum (Celles du texte, des liens etc..). Direction Affichage > Images et Couleurs > Couleurs> Couleurs et taille du texte.
Pour ma part, j'ai cette configuration :
Couleur du Texte :#658899
Couleur du Lien :#326E8A
Couleur du Lien Visité :#326E8A
Couleur du Lien Actif :#326E8A
Couleur du Lien survolé :#326E8A
Couleur Police En-tête :#326E8A

Voilà, maintenant, on passe à la Feuille de style CSS !

Modification de l'esthétique


Rappelez-vous, nous avons créée 2 div : "Navigation" et "NavigationTitle". Nous allons leur ajouter l'ID du logo pour pouvoir, elle aussi, la modifier, son nom est "#i_logo". Pour les mettre en forme, c'est très simple, nous allons faire ceci :
Code:
               /*Début HEADER*/
#i_logo
{
 
}

.Navigation
{
 
}

.NavigationTitle
{
 
}
               /*Fin HEADER*/


• Commençons par la bannière. Nous allons lui ajouter ses dimensions ainsi qu'une bordure.
Code:
#i_logo
{
  border-bottom: 1px solid #095279;
  width: 750px;
  height: 279px;
}


Pourquoi avoir mis 279px ? Parce que nous avons ajouter une bordure en bas qui prend 1px ! (279 + 1 = 280 *o* !)

Maintenant que c'est fait, on va modifier la navigation (le Bloc). On lui ajoute une couleur de fond, des bordures et une taille.
EXERCICE :
• "Navigation" va prendre les propriétés et les valeurs suivantes :
♦ Un fond de couleur #01121a
♦ Une bordure en bas et à gauche de 1px, solide en couleur #095279
♦ Ayant pour dimensions 197*280
Correction:
Code:
.Navigation
{
  background-color: #01121a;
  border-left: 1px solid #095279;
  border-bottom: 1px solid #095279;
  width: 197px;
  height: 280px;
}

A noter que "width" exprime la largeur et que "height" exprime la longueur (ou hauteur).
Pas vraiment d'autres explications à vous donner, peut-être pourquoi ces dimensions ? Parce que 948 - 750 = 198 -1 (bordure) = 197px ! ... Des mathématiques, désolé Razz

Maintenant, on touche au titre :
Code:

.NavigationTitle
{
  background-color: #01121a;
  border-bottom: 1px solid #01121a;
  width: 100%; /* Il prend toute la largeur dans la div */
  height: 15px;
  text-align: center; /* On center le texte dans la div */
  color: #04334a;
  font-size: 13px; /* Taille de la police */
  font-weight: bold; /* Titre en gras */
  font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
  text-shadow: 0px 0px 3px #000000; /*Ombre sur le texte */
}

Les valeurs dans "text-shadow" correspondent à l'allongement de l'ombre sur l'axe des abscisses (ici X=0), l'axe des ordonnés (ici Y=0), l'intensité (ici Z=3) et la couleur de l'ombre (ici = #000000.

Hop hop hop, pas encore le temps d'enregistrer, on va modifier les liens qu'on a mis ! On va pas laisser ça comme donc on va récupérer leur balise : Navigation a. Ça donne :
Code:
.Navigation a
{
  display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
  background-color: #031c28;
  border-bottom: 1px solid #01121a;
  width: 100%;
  height: 17px;
  font-size: 15px;
  font-family: 'Arial', serif;
  text-align: center;
  text-shadow: 0px 0px 2px #000;
  padding-top: 3px;
  padding-bottom: 3px;
}

Pourquoi avoir choisi de mettre display: block; plutôt que des sauts de lignes dans le HTML ?
Saut de ligne en HTML :
Code:
<br />

Parce que j'aime mieux faire ceci, en réalité c'est plus par fainéantise et puis c'est plus pratique d'ajouter une petit ligne que plusieurs ^^

Bon, parce que je vous aime bien, on va mettre un effet super classe grâce aux transition CSS3 sur les liens. On capte le suffixe :hover, ce qui signifie "lorsqu'on passe la souris sur le lien" et on le modifie :
Code:
.Navigation a:hover
{
  background-color: #01121a;
  border-bottom: 1px solid #031c28;
  color: #04334a;
  transition: 1s all;
}


On oublie pas d'ajouter la transition sur .Navigation a pour qu'elle soit progressive lorsqu'on passe la souris sur le lien et lorsqu'on l'enlève. Vous aurez remarqué que j'ai ajouté uniquement les éléments que je veux modifié au passage de la souris et pas plus !
Au final, mon CSS entre Début Header et Fin Header est :
Code:
               /*Début HEADER*/
   /* Bannière */
#i_logo
{
  border-bottom: 1px solid #095279;
  width: 750px;
  height: 279px;
}

   /* Boite Navigation */
.Navigation
{
  background-color: #01121a;
  border-left: 1px solid #095279;
  border-bottom: 1px solid #095279;
  width: 197px;
  height: 280px;
}

   /* Titre Navigation */
.NavigationTitle
{
  background-color: #01121a;
  border-bottom: 1px solid #01121a;
  width: 100%; /* Il prend toute la largeur dans la div */
  height: 15px;
  text-align: center; /* On center le texte dans la div */
  color: #04334a;
  font-size: 13px; /* Taille de la police */
  font-weight: bold; /* Titre en gras */
  font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
  text-shadow: 0px 0px 3px #000000; /*Ombre sur le texte */
}

   /* Liens Navigation */
.Navigation a
{
  display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
  background-color: #031c28;
  border-bottom: 1px solid #01121a;
  width: 100%;
  height: 17px;
  font-size: 15px;
  font-family: 'Arial', serif;
  text-align: center;
  text-shadow: 0px 0px 2px #000;
  padding-top: 3px;
  padding-bottom: 3px;
  transition: 1s all;
}
.Navigation a:hover
{
  background-color: #01121a;
  border-bottom: 1px solid #031c28;
  color: #04334a;
  transition: 1s all;
}
               /*Fin HEADER*/


Comme vous le voyez, il y a des soulignements des liens et c'est pas élégant, donc on va les retirer en faisant une grosse compression. Dans votre CSS, allez à la l.28, sautez une ligne et ajoutez :
Code:
a:link, a:link hover, a:link active, a:link target
{
  text-decoration: none !important;
}


Même procédé que Background-image, ici on retire aux liens, aux liens souligné, aux liens déjà cliqué, aux liens que l'on clique le soulignement. Ce sont des lignes à retenir et à ajouter à la base Wink !

Maintenant, nous allons nous occuper de la fonctionnalité Message Privé / Nouveau Message Privé. Pour ce faire, direction Modules> HTML & JavaScript> Gestion des codes JavaScript.
On vous demande : Activer la gestion des codes JavaScript, cochez OuiMaintenant, cliquez sur Créer un nouveau JavaScript.
Titre : Nouveau MP
Placement : Sur toutes les pages

Ensuite, dans l'espace réservé, collez :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('style','color: darkred; font-size: 16px; font-weight: bold;');
});


Le code créer une variable newmp et lui attribu la valeur de l'ID New message. Il pose une boucle qui dit "S'il y a un nouveau message, l'attribut mp que nous avons ajouté au lien dans la navigation va modifier le style de "Nouveau message" et va le passer en rouge, d'une taille de 16px et en gras. Libre à vous de modifier son style !

Récapitulatif du CSS :
Code:
               /*Début STRUCTURE*/
   /* Fond du forum*/
body
{
  background-color: #021925;
  background-image: url('http://img507.imageshack.us/img507/6665/bottomsw.jpg'), url('http://img203.imageshack.us/img203/964/midjf.jpg');
  background-position: bottom left, top left;
  background-repeat: no-repeat, repeat-y;
  background-attachment: scroll, scroll;
  margin: 0px; /* Supprime la marge en haut et en bas entre le forum et la page web */
}

   /* Corps du forum*/
.bodyline
{
  background-color: #052231;
  border-left: 1px solid #095279;
  border-right: 1px solid #095279;
  width: 948px;
  margin: auto;
  padding: 0px; /*Pas de marge intérieur dans le corps*/
  box-shadow: 0px 0px 3px #000;
}

   /* Soulignement liens */
a:link, a:link hover, a:link active, a:link target
{
  text-decoration: none !important;
}
               /*Fin STRUCTURE*/

               /*Début HEADER*/
    /* Bannière */
#i_logo
{
  border-bottom: 1px solid #095279;
  width: 750px;
  height: 279px;
}

   /* Boite Navigation */
.Navigation
{
  background-color: #01121a;
  border-left: 1px solid #095279;
  border-bottom: 1px solid #095279;
  width: 197px;
  height: 280px;
}

   /* Titre Navigation */
.NavigationTitle
{
  background-color: #01121a;
  border-bottom: 1px solid #01121a;
  width: 100%; /* Il prend toute la largeur dans la div */
  height: 15px;
  text-align: center; /* On center le texte dans la div */
  color: #04334a;
  font-size: 13px; /* Taille de la police */
  font-weight: bold; /* Titre en gras */
  font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
  text-shadow: 0px 0px 3px #000000; /*Ombre sur le texte */
}

   /* Liens Navigation */
.Navigation a
{
  display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
  background-color: #031c28;
  border-bottom: 1px solid #01121a;
  width: 100%;
  height: 17px;
  font-size: 15px;
  font-family: 'Arial', serif;
  text-align: center;
  text-shadow: 0px 0px 2px #000;
  padding-top: 3px;
  padding-bottom: 3px;
  transition: 1s all;
}
.Navigation a:hover
{
  background-color: #01121a;
  border-bottom: 1px solid #031c28;
  color: #04334a;
  transition: 1s all;
}
               /*Fin HEADER*/
         
               /*Début PAGE ACCUEIL*/

               /*Fin PAGE ACCUEIL*/
   
               /*Début CATEGORIES*/

               /*Fin CATEGORIES*/

               /*Début SUJETS*/

               /*Fin SUJETS*/

               /*Début MESSAGES*/

               /*Fin MESSAGES*/

               /*Début QEEL*/

               /*Fin QEEL*/

               /*Début FOOTER*/

               /*Fin FOOTER*/

               /*Début CHATBOX*/

               /*Fin CHATBOX*/

Changer la couleur de sélection (surlignement d'un texte) - Lun 1 Avr 2013 - 17:41


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


Lorsque vous êtes sur une page internet et que vous surlignez un texte, un fond de couleur par défaut apparait et ça fait très Pokémon dit comme ça, mais bref. Par exemple, sur une page classique, si je surligne avec ma souris une partie de texte, il s'affiche comme ceci :

Tag 000000 sur Never Utopia - graphisme, codage et game design JgDgEmQ

Mais la couleur de fond et le changement de couleur de police peuvent être modifiés. Par exemple, sur N-U actuellement avec un thème très bleu, si vous surlignez un texte vous devez avoir un fond bleu et le texte presque blanc, comme ceci :

Tag 000000 sur Never Utopia - graphisme, codage et game design WzXKnUK

Pour faire cela, il vous suffit de mettre dans votre css le code suivant :

Code:
::selection
{
  background: #ffffff none repeat scroll 0 0;
  color: #000000;
  text-shadow: none;
}
::-moz-selection
{
  background: #ffffff none repeat scroll 0 0;
  color: #000000;
  text-shadow: none;
}


Dans le code la couleur de fond est le blanc (#ffffff) et la couleur de texte le noir (#000000), vous pouvez ainsi harmoniser le surlignement à votre couleur dominante de page.
Ce code ne fonctionne peut-être pas avec certains navigateurs, notamment leur version plus ancienne.

Dans le code présent j'ai précisé un "text-shadow: none" ce qui signifie que les ombres de texte, s'il y'en a, seront enlevées. En effet, ces ombres rendent souvent le surlignement illisible.

Apokalip'z

Fiche de pub personalisable - Mar 26 Fév 2013 - 17:44



Coucou, voilà une fiche de pub que vous pouvez personnaliser grâce aux quelques astuce que je vais vous donner,...

voilà le rendu et le code:

Spoiler:



NOM DE TON FORUM


NOM DU FORUM




Déscription

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

Nouvelles

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

Statistiques

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

Crédits Du forum

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

© Fiche Crée Par Natsu Dragneel de Never utopia



Code:
<div style="border: 4px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-attachment: fixed; background-color: #C4D3D9; width: 650px;">


<center><a href="LIEN DE TON FORUM"><img src="LIEN DE LA BANNIERE OU MINI BANNIERE" alt="NOM DE TON FORUM"/></a></center>
<span style="font-family: Lucida Handwriting; font-style: italic; font size: 70px">
<center>NOM DU FORUM</center>
</span>


<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Déscription</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Nouvelles</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Statistiques</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Crédits Du forum</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<span style="border: 2px dotted #000000; font-size: 10px; background-color: #ffffff;">© Fiche Crée Par Natsu Dragneel de <a href="http://www.never-utopia/">Never utopia</a> </span></div>



Si vous voulez utiliser cette fiche veuillez ne pas Supprimer ou Modifier la partie Copyright Du code.


Si vous voulez modifier quelque chose au code voici quelques trucs en spoiler

Spoiler:
- Pour modifier la couleur du fond de la fiche recherchez:
Code:

<div style="border: 4px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-attachment: fixed; background-color: #C4D3D9; width: 650px;">

et modifiez le #C4D3D9 par le code couleur de votre choix

- Pour modifier la couleur et/ou la sorte de bord de la fiche recherchez:
Code:

<div style="border: 4px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-attachment: fixed; background-color: #C4D3D9; width: 650px;">

et modifiez le #000000 par le code couleur de votre choix et/ou le solid par la sorte de border souhaité.

- Pour modifier la couleur du fond des Titres tels que: Description, Nouvelles, Statistiques, Crédits du forum. Recherchez:
Code:

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Déscription</div></center>

et modifiez le white par le code couleur de votre choix

- Pour modifier la couleur et/ou la sorte de bord des Titres tels que: Description, Nouvelles, Statistiques, Crédits du forum. Recherchez:
Code:

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Déscription</div></center>

et modifiez le #000000 par le code couleur de votre choix et/ou le dashed par la sorte de border souhaité.

- Pour Mettre la Bannière ou l'image de votre choix, cherchez:
Code:

<center><a href="LIEN DE TON FORUM"><img src="LIEN DE LA BANNIERE OU MINI BANNIERE" alt="NOM DE TON FORUM"/></a></center>

et Remplacez le "LIEN DE TON FORUM" Par le lien de votre forum ,
Remplacez le "LIEN DE LA BANNIERE OU MINI BANNIERE" par le lien de votre image, et remplacez le "NOM DE TON FORUM" par le nom de votre forum

- Pour mettre le nom de votre forum en grand (comme le Tsugi no sakkaku dans l'exemple (le rendu) )
Vous devez rechercher ce code:
Code:

<span style="font-family: Lucida Handwriting; font-style: italic; font size: 70px">
<center>NOM DU FORUM</center>
</span>

et remplacez le "NOM DU FORUM" par le nom de votre forum

Voilà avec tout ça, le tour est joué ;D

Minishiro

[Astuce] Fonctionnement des codes hexadécimaux - Mar 25 Déc 2012 - 0:07


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


Bonjour!

Ah, les codes hexadécimaux! Ces bé-bêtes donnent du fil à retordre à bien des codeurs, expérimentés comme débutants, et nombreux sont ceux qui doivent se fier à des générateurs de code pour produire la couleur idéale, souvent par essais et erreurs. Eh bien, l'astuce que je vous sers aujourd'hui ne remplacera certes pas lesdits générateurs, mais peu à peu, vous serez probablement capable de les utiliser moins souvent, voire pas du tout dépendant des situations. :)

Pour ceux qui ne le savent pas, il y a quatre façon de générer des codes de couleur sur le web.
white, black, blue, etc. → ce sont les noms des couleurs en anglais.
rgb(XXX,XXX,XXX) → ce sont les quantités de rouge, vert et bleu dans la couleur, représentées par une valeur allant de 0 à 255.
rgba(XXX,XXX,XXX,0.X) → même principe que le rgb, mais avec la transparence en nombre décimal entre 0 et 1.
#XXXXXX → codes hexadécimaux.


Les codes hexadécimaux sont nommés ainsi car ils comportent, vous l'aurez deviné, 6 chiffres ou lettres. Les deux premiers chiffres donnent la quantité de rouge, les seconds de vert et les derniers de bleu, comme ceci:
#XXXXXX


En effet, les couleurs primaires sur le web ne sont pas les mêmes que celles des arts plastiques (magenta, cyan et jaune). Les codes hexadécimaux vont de 00 à FF de la manière suivante:
00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F, etc.


00, c'est le noir, c'est l'absence absolue de la couleur. FF, c'est la saturation maximale. Ainsi:
#000000 = noir
#FF0000 = rouge
#00FF00 = vert
#0000FF = bleu
#FFFF00 = jaune
#00FFFF = cyan
#FF00FF = rose
#FFFFFF = blanc


Lorsque les codes de rouge, vert et bleu sont les mêmes, la saturation de la couleur est nulle; ces codes correspondent aux différentes nuances de gris.

#000000 = noir
#111111 = gris 1
#222222 = gris 2
#333333 = gris 3
#444444 = gris 4
#555555 = gris 5
#666666 = gris 6
#777777 = gris 7
#888888 = gris 8
#999999 = gris 9
#AAAAAA = gris 10
#BBBBBB = gris 11
#CCCCCC = gris 12
#DDDDDD = gris 13
#EEEEEE = gris 14
#FFFFFF = blanc
#000000 = noir
#101010 = gris A
#202020 = gris B
#303030 = gris C
#404040 = gris D
#505050 = gris E
#606060 = gris F
#707070 = gris G
#808080 = gris H
#909090 = gris I
#A0A0A0 = gris J
#B0B0B0 = gris K
#C0C0C0 = gris L
#D0D0D0 = gris M
#E0E0E0 = gris N
#F0F0F0 = gris O
#0F0F0F = gris AA
#1F1F1F = gris BB
#2F2F2F = gris CC
#3F3F3F = gris DD
#4F4F4F = gris EE
#5F5F5F = gris FF
#6F6F6F = gris GG
#7F7F7F = gris HH
#8F8F8F = gris II
#9F9F9F = gris JJ
#AFAFAF = gris KK
#BFBFBF = gris LL
#CFCFCF = gris MM
#DFDFDF = gris NN
#EFEFEF = gris OO
#FFFFFF = blanc


Lorsque tous les chiffres d'un code sont les mêmes, il est possible de n'en mettre que les trois premiers (note: ça ne fonctionne pas en BBCode). Les majuscules sont facultatives:


Voyons donc comment ces belles informations peuvent vous être utiles! :) Supposons que nous partons d'un rouge:

Finalement, ce rouge est trop vif et trop pâle. Nous voudrions le rendre plus foncé.

Et puis, il est encore trop vif, nous allons ajouter du vert et du bleu pour en baisser la saturation.

Comme nous avons ajouté de la couleur, elle est à nouveau trop pâle.

Et puis, ça serait bien que ça tire un peu sur le bourgogne, nous allons donc ajouter du bleu.

Et on aimerait que ça soit encore un peu plus foncé.

Et voilà! Bon, certes si vous êtes daltonien, il se peut que vous ne voyez pas ou peu la différence des nuances entre ces différentes étapes, mais sinon vous devriez le voir. :)

En espérant que ça serve! ^^

[Tuto] Fond des messages différents pour le Staff - Lun 6 Aoû 2012 - 13:54

Salut à tous,

Pour mon premier tutoriel sur ce forum, j'ai décidé de vous expliquer comment mettre un fond de message spécial au membre du staff. Cette astuce et très simple, elle nécessite simplement d'ajouter un javascripte et de rajouter une balise "span" dans les rangs du staff.

Vous devrez en premier lieu créer un rang que vous attribuerez aux membres en question.

Si les membres ont déjà des rangs, vous n'avez qu'à les entourer de la balise, dans le cas où vos membres n'ont pas de rang, insérez ce code dans le nom du rang:

Code:
<span class="fondstaff">Titre du rang</span>

Vous pouvez bien sûr remplacer Titre du rang par ce que vous désirez.

Une fois le rang attribué, créez un code javascript sur les sujets et insérez-y ce code:
Code:
$(function() {$('div.post:has(".fondstaff")').css('background-color','#000000');});

Dans le code présent, vous personnalisez la couleur du fond, modifiez simplement le #000000 par la couleur désirée.

Pour avoir une image, utilisez se code :
Code:
$(function() { $('tr.post:has(".staff") td').css({backgroundImage: 'url(url de l'image) !important', backgroundSize: '100% 100%'; backgroundRepeat: 'no-repeat' }); });
En remplacent "url" de l'image, par l'url de l'image.

Si vous avez des questions, n'hésitez pas à les poster.

Cordialement

Bellumm

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


Revenir en haut

La date/heure actuelle est Sam 7 Déc 2019 - 1:00