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


24 résultats trouvés pour ffffff

Sawako

Madelle - Heroic Fantasy - Version °6 - Mer 24 Juil 2019 - 18:49

Oy!

Une nouvelle mise à jour de Madelle a été installée et on vous invite à découvrir les forums des participants de notre dernier concours. Exceptionnellement, nous avons ouvert notre concours à tous nos partenaires et plusieurs ont répondu à l'appel. Encore merci à eux :hug:

Fiche Partenaire    



LES NOUVEAUTÉS

- Nouveau Guide : il y a un peu plus d'explications, c'est surtout pour aider les invités à se repérer.
- Histoire : nouvelles images pour le contexte, il y a maintenant des résumés des événements très courts pour se faire tout de suite une idée de la progression du contexte sans avoir à tout fouiller. Les sujets des rps importants ne sont plus accessibles pour le moment (ils reviennent bientôt).
- Peuples : mini-résumés des confréries ajoutées.
- Vérité : changement des descriptions pour simplifier le sujet.
- Règles : le sujet "caractéristiques" a changé de nom pour accueillir le règlement, la présentation du staff et les crédits. Tous les aspects techniques sont maintenant rassemblés sur une seule page.
- Carte : elle est maintenant disponible dans la partie "Nature et Alchimie", elle n'a pas disparu.
- Nouveau Carnet : il a été simplifié, comme toujours, vous êtes libres de le mettre à jour ou de garder l'ancienne version.
- Nouvelle section Hauts Faits : un sujet unique par personnage à ouvrir pour ne plus avoir vos demandes perdues au milieu des autres. Le sujet est entièrement personnalisable.
- Annonces : maintenant un sujet sera accessible pour avoir toutes les dates de nos mises à jour et actualités sur Madelle.



ON LES ATTEND

Tag ffffff sur Never Utopia - graphisme, codage et game design Ogey Tag ffffff sur Never Utopia - graphisme, codage et game design 7r78 Tag ffffff sur Never Utopia - graphisme, codage et game design OmaM0vy Tag ffffff sur Never Utopia - graphisme, codage et game design NA3mQ08 Tag ffffff sur Never Utopia - graphisme, codage et game design Dtq5 Tag ffffff sur Never Utopia - graphisme, codage et game design X701 Tag ffffff sur Never Utopia - graphisme, codage et game design LHL4SuG

Les guildes qui recrutent :
- L'Alliance des Neustros, guilde des médecins
- L'Assemblée des Gardiens, guilde des protecteurs de la nature
- Les Enfants de Telperiën, guilde des chasseurs de monstres
- La Guilde des Ombres, guilde des voleurs


EN CE MOMENT...

Concours #13 - La Gazette de la Vérité



cliquez pour zoomer

Côté membres, nous n'avons eu qu'une participation, mais Madène Calis s'est donnée à fond est en quelques jours elle a réussi à finir le concours. Elle gagne donc le point de prestige du grand challenger, 120 xp pour les images, 50 xp pour la grille de mots cachés et 100 xp pour les deux grilles.

Côté partenaires RPG,

LE GRAND CHALLENGER
Tag ffffff sur Never Utopia - graphisme, codage et game design 5c4wICP

PODIUM DES IMAGES MYSTÉRIEUSES


Tag ffffff sur Never Utopia - graphisme, codage et game design NMEdGwP

Tag ffffff sur Never Utopia - graphisme, codage et game design IhoJtNA

Ils ont participé : Duralas et Stuttgart.

il y avait un lot par thème de prévu, mais tout le monde a envoyé toutes les images en même temps, alors il n'y aura qu'un podium.


PODIUM DES MOTS CACHES



Tag ffffff sur Never Utopia - graphisme, codage et game design H1TIM7N

Tag ffffff sur Never Utopia - graphisme, codage et game design IhoJtNA

Ils ont participé : Duralas et Stuttgart.

PODIUM DES MOTS CROISES

Tag ffffff sur Never Utopia - graphisme, codage et game design F97L8Y0





il y avait un lot par grille de prévu, mais tout le monde a envoyé presque
en même temps ses deux grilles, alors il n'y aura qu'un podium.



Interforum #6 - Place aux votes
Les choses sérieuses commencent désormais : les votes ! :warrior: Comme pour la précédente édition, tout le forum est invité à voter. Si vous n'avez pas de lecture pour ce mois de juillet, découvrez les magnifiques textes de nos concurrents, il y a de vraies perles ! Surtout avec les sujets qu'on a eu qui étaient vraiment inspirants !  :happy:

Contrairement à l'édition précédente, il n'y aura pas d'histoire de groupe pour un découpage des textes à lire donc... il faudra tout lire ! :peur: Enfin, heureusement que les textes sont bons, ils se lisent tout seuls ! :happy:

Comme avant, je vous propose que chacun poste son top 5 pour chaque épreuve à la suite de ce sujet. Ainsi, le 1er aura 7 points, le second 5, puis 3,2 et 1 point. On sommera les points à la fin des votes et on verra qui sort du lot ! Bien entendu, on ne vote pas pour un texte de Madelle ! :naon:

Nous avons jusqu'au 8 août pour envoyer notre top 3 pour chaque épreuve ! (le délai est plus long que la dernière fois)




AVIS DE RECENSEMENT

À la rentrée, le 1er septembre, un tour des comptes sera effectué. D'ici là, on vous laisse tranquille. Aucune vérification de compte n'aura lieu pendant l'été, la période de ralentissement est officielle. Ressourcez-vous et profitez du soleil ! On vous attend en forme pour la rentrée, d'ici là, si vous n'avez pas posté en zone Rp depuis un moment, essayez de poster une fois durant l'été pour éviter de retrouver votre personnage chez les disparus quand le recensement viendra.







 

Sawako

Madelle - Heroic Fantasy - Version °6 - Jeu 2 Mai 2019 - 16:45

Bonjour,

Depuis la réouverture nous ne vous avons pas transmis nos statistiques, car nous étions en plein recensement, mais le voilà terminé cheers  C'est toujours un moment difficile de devoir nous séparer de certains personnages devenus inactifs, mais parfois cela devient nécessaire.

Fiche Partenaire    



LE RÉCAPITULATIF DU RECENSEMENT

De nouvelles règles d'activité et de conservation des comptes ont été mises en place pour ce recensement, tous les membres sont invités à relire le règlement. Les comptes des personnages ayant vécu plusieurs aventures sur Madelle sont toujours conservés, mais les règles ont été durcies. En revanche, les règles en matière d'activité et de relance ont été assouplies.

Lors de la réouverture le 2 mars 2019, nous comptions 68 disparus. Aujourd'hui, le 2 mai 2019, il ne reste que 18 personnages féminins disparus et 18 personnages masculins.



QUELQUES CHIFFRES

Désormais, le nombre de personnages masculins et féminins de chaque groupe sera détaillé dans le QEEL.

» Maîtres du Jeu - 4 ♀♂
» Figurants - 1 ♀♂
» Disparus - 18 ♀ | 18 ♂
 » Héléos - 3 ♀ | 0 ♂
» Liares - 2 ♀ | 1 ♂
» Anciens - 2 ♀ | 0 ♂
» Arvèles - 1 ♀ | 1 ♂
» Namès - 0 ♀ | 3 ♂
» Parlèms - 2 ♀ | 2 ♂
» Récleyés - 2 ♀ | 0 ♂


Au total, il y a 60 comptes dont 5 PNJs et 19 personnages actifs. Les membres ont posté plus de 20 500 messages et ils ont terminé 61 quêtes et 9 rumeurs. Et en ce moment, il y a 9 quêtes et 9 rumeurs en cours.









 

Sawako

Madelle - Heroic Fantasy - Version °6 - Sam 20 Avr 2019 - 12:31

Bonjour,

Cela ne fait qu'un mois que nous n'avons pas donné de nouvelle. Les dernières date du 11 mars, on est en avril, nous avions encore un peu de temps normalement non ?

Me voilà pour vous annoncer que le forum est officiellement à nouveau actif. Un concours s'est terminé, les membres ont terminés des quêtes et rumeurs et ils continuent d'en prendre de nouvelles en ouvrant leurs propres aventures. Que demander de plus ^^ Toute cette motivation a permis au staff de sortir en un temps record une nouvelle mise à jour avec tout un tas de petites nouveautés qui on l'espère plaira aux membres et invités curieux.

Fiche Partenaire    



LES NOUVEAUTÉS - VERSION 6.1

- Quêtes et Quêtes de guildes : Les quêtes de guilde ont été supprimées. Désormais, les membres d'une guilde pourront prendre une quête normale pour le prestige de leur guilde. Les quêtes sont ouvertes à un ou plusieurs rangs de guilde. Elles restent bien évidemment ouvertes à tous les membres pour leur propre prestige, peu importe leur rang. Pour l'occasion, plusieurs quêtes ont été ajoutées, en espérant qu'elles vous plairont.
- Tableau des Canulars : Tous les canulars deviennent maintenant des rumeurs lorsqu'ils atteignent le niveau "Bruit".
- Boutique des Objets : Nouvelle section dédiée aux transports, un véhicule terrestre ou maritime ça vous tente ? Si vous n'avez pas les moyens pour un tel investissement, de nombreux pass sont disponibles pour naviguer sur les fleuves et mers de Madelle le temps d'un voyage.
- Boutique de la Nature : Les prix officiels des dragons sont enfin arrivés et de nouveaux textiles sont à découvrir.
- Boutique des Guildes : De nouveaux produits sont disponibles en lien avec les lieux et les transports.
- Contribution à l'univers : La possibilité de proposer des formules alchimiques et objets pour les boutiques a été ajoutée aux contributions des membres pour étoffer l'univers.
- Barre de Notifications : un petit ajout supplémentaire bien pratique.
- Hauts Faits : Découvrez les HF : Fin gourmet, Chasseur d'élite, Guerrier terrible, Voleur forcené, Prêtre extrémiste, Nomade indécis, Guilde légendaire et Artiste rêveur.



ON LES ATTEND

Tag ffffff sur Never Utopia - graphisme, codage et game design Ogey Tag ffffff sur Never Utopia - graphisme, codage et game design 7r78 Tag ffffff sur Never Utopia - graphisme, codage et game design OmaM0vy Tag ffffff sur Never Utopia - graphisme, codage et game design NA3mQ08 Tag ffffff sur Never Utopia - graphisme, codage et game design Dtq5 Tag ffffff sur Never Utopia - graphisme, codage et game design X701 Tag ffffff sur Never Utopia - graphisme, codage et game design LHL4SuG

Les guildes qui recrutent :
- L'Alliance des Neustros, guilde des médecins
- L'Assemblée des Gardiens, guilde des protecteurs de la nature
- Les Enfants de Telperiën, guilde des chasseurs de monstres
- La Guilde des Ombres, guilde des voleurs


EN CE MOMENT...

Concours #11 - Micro-nouvelles
- 1er prix | L'astronome : Il s'émerveillait de l'étoile de Simius rayonnant dans le ciel, la légende voulait qu'il n'existe rien de plus éblouissant dans tout l'univers. L'astronome était accompagné pour la première fois de sa fille.
- Que vois-tu dans le ciel ? demanda-t-il.
- C'est compliqué à dire.
- Oui, les étoiles sont infinies.
- Non ce que je veux dire, c'est que tu n'as pas retiré le cache du télescope.

- 2è prix | L'abominable abomination : Le monstre se releva et le Liare dû se tapir pour échapper à sa fureur. Désarmé, désemparé face à cette créature tout droit sorti des enfers, il saisit une pierre et la lança, dans une ultime tentative de tuer le monstre sanguinaire ... L'héléo s'écroula, mort sur le coup.
- 3è prix | Les favoris de mère nature : -C'est bien connu, rouspétèrent les peuples de l'eau et du feu, ce sont toujours les cadets qui sont les privilégiés et les préférés...
-Vous devriez être contant de votre puissance pourtant, gronda mère nature.
-Tout à fait..., approuvèrent les Palèrms.
-Pensez à ceux qui ne se réveillent jamais, soupirèrent les démunis.

- 3è prix ex aequo | Vérité : Il fait partie de ceux qui ont un don. Même si tout le monde possède sa part de vérité, lui savait manier la Vérité. Il envoûtait quiconque le regardait. On dit même qu’il savait arracher les étoiles du ciel et les amener dans le creux de sa main. Un spectacle divin. Mais détenait-il la Vérité absolue ? Car l’être parfait n’existe pas, et le mensonge n’est jamais bien loin.

et voici une nouvelle bonus, Feux de joie : Et là, j'ai vu le Récléyès et, sans hésiter, j'ai tiré ma flèche ... Pile entre les deux yeux !
- Ca alors ... Tu as sauvé l'Arbre de Vie alors ?
- Ah non, lui il a brûlé.


Concours #12 - Quizz sur la CB
Venez signaler quel week-end vous pouvez être libre afin de participer au quizz de connaissance (et de rapidité) sur l'univers et le forum de Madelle.

Quelques canulars
- La princesse oubliée : Il y aurait dans les rues d'Arnlo, le spectre d'une jeune femme qui envoûterait les passants telle une sirène. Chantant une mélodie ensorcelante, elle se tiendrait au bord d'une fenêtre dans une immense tour dont personne n'arrive à trouver l'entrée.  
- Idylle à Arnlo : Crystal de Faertas (de son vrai nom "Winter C. Eliwën") et Rhys de Canhall (parfois surnommé "Rhys Songteel"), deux riches héritiers dont la réputation n'est plus à faire à Arnlo, ont été vu s'éclipsant ensemble d'un bal. Il paraît même que leur mariage est prévu et tout le monde dans la Ville d'Or espère y être invité.
- Sous l'océan : Simon Doyle travaille d'arrache pied pour mettre au point son Aspir-eau, il y aurait déjà une petite portion de rail installée depuis la plage des astres qui intrigue les passants. Mais tous ne semble pas voir cela d'un bon œil, car on lui aurait volé son matériel.









 

Sawako

Madelle - Heroic Fantasy - Version °6 - Lun 11 Mar 2019 - 23:51

Bonsoir :friends:

Après plusieurs mois de maintenance, Madelle est de retour sur les ondes et il a bien l'intention de faire du bruit \o/ Tout cela n'aurait pas pu être possible sans la participation des membres du staff qui ont permis au forum de retrouver sa fraîcheur. On vous attend nombreux dans ce monde qui offrent de nombreuses possibilités. Des guildes recherchent des membres, des Figurants attendent qu'on les adopte, venez écrire votre légende sur Madelle !

Fiche Partenaire    



LES NOUVEAUTES - VERSION 6

- Thème et Codage : Merci à Deth Al'Abyssin alias Anglycanne pour son travail. Le forum revête un thème très sobre ayant la prétention de vouloir représenter l'entièreté du monde de Madelle.
- Contexte et Annexes : Tous les sujets ont été réorganisés et mis à jour.
- Vérité : Suite aux conséquences du dernier événement, la magie est devenue instable et c'est le monde entier qui est impacté.
- Nouveau Système de Rumeurs : Les événements sont remplacés par les rumeurs. Ce système permet aux personnages de lancer leurs propres rumeurs ou d'enquêter sur les plus grands secrets de Madelle.
- Les PJ sont devenus les Figurants et sont en train d'être mis à jour.
- De nouvelles villes sont à découvrir dans le monde des Humains et des Héléos.



ON LES ATTEND

Tag ffffff sur Never Utopia - graphisme, codage et game design Ogey Tag ffffff sur Never Utopia - graphisme, codage et game design 7r78 Tag ffffff sur Never Utopia - graphisme, codage et game design OmaM0vy Tag ffffff sur Never Utopia - graphisme, codage et game design NA3mQ08 Tag ffffff sur Never Utopia - graphisme, codage et game design Dtq5 Tag ffffff sur Never Utopia - graphisme, codage et game design PmH1VoV Tag ffffff sur Never Utopia - graphisme, codage et game design LHL4SuG
ET PLUS ENCORE



EN CE MOMENT...

Concours #11 - Micro-nouvelles
Ecrivez une micro-nouvelle pour gagnez des xp. C'est-à-dire une histoire très courte, souvent sur le ton de l'humour ou de l'absurde mais qui peut également privilégier l'aspect poétique. Elle se termine sur une chute ou une révélation surprenante, et se passe autant que possible de description.

Quelques rumeurs libres
- Alchimie | L'oiseau de feu : Il y a de cela presque deux ans, un alchimiste du nom eut l'idée folle de présenter à tous lors de la fête de l'élu le 13 Daeymo 1248 un engin volant. Malheureusement cette tentative fut un échec, mais depuis, l'alchimiste n'a cessé de travailler et il est convaincu de réussir à le faire voler lors d'une nouvelle démonstration à Arnlo.
- Arbre Originel | Le fragment de l'arbre : Les gardiens ont pour projet de cacher le fragment de l'arbre qui jusqu'à maintenant a toujours été sur les routes de Madelle pour permettre à l'Arbre d'appeler ses gardiens. Ils n'y sont toujours pas parvenus, car ils rencontreraient quelques soucis.
- Elections | Le dernier souffle d'un grand homme : L'hiver est passé sans que le général Arvèles ne montre de signe de vie. Son principal conseiller Joakim Torson serait le point d'officialiser sa mort et de procéder à l'élection d'un nouveau général.







 

Plusieurs propositions d'idées. [Un compte pour plusieurs personnages] - Ven 13 Juil 2018 - 13:46



But : concrétiser un forum rpg où il est possible de créer un compte ayant plusieurs personnages.

Par exemple, pour un forum rpg dans l'univers de Card Captor Sakura, le membre s'y inscrit avec une carte magique (Light, Sweet, Change, Maze, etc) puis il ajoute dans son profil (sous forme de petites icons rondes par exemple) les personnages qu'il compte jouer (Sakura, Shaolan, Yué, Eriol & Tomoyo)

Le mieux est de proposer à tous les rôlistes quelque chose dont ils auront tous en commun à long terme :
_ pour un forum rpg card captor sakura, c'est de compléter la liste des cartes de Clow (53+19 cartes au total)
_ pour un forum rpg pokemon, ça serait de prendre comme pseudo le nom d'un pokemon parmi les 708 disponibles
_ pour un forum rpg magical girl grâce à des fleurs magiques, prendre le nom d'une fleur( ou bien le nom latin compliqué d'une fleur)
_ s'inscrire avec le nom d'une couleur (avec une intrigue concernant un PNJ Collectionneur de billes mono-colorés ou des marques-pages mono-colorés, il s'agirait d'artefacts magiques octroyant des pouvoirs *-*)
_ s'inscrire avec un code (#00000 #FFFFFF #D0D0D0) d'une couleur (/poutre)
_ pour un forum rpg harry potter, ça serait de prendre une formule magique.
_ aller sur le net et chercher des 'longues' listes et croiser les doigts pour en trouver une qui peut coller avec le contexte de son forum
_ s'inscrire avec le nom d'un objet doré magique à retrouver (avec une intrigue concernant un PNJ Collectionneur de ces objets mystérieux !)
_ s'inscrire avec un mot que l'on a écrit à l'envers (n'importe lequel) commençant par les lettres du titre du forum, par exemple, titre du forum est "Miroir" donc les lettres M, I, R et O (et selon ce que la personne choisit comme lettre, il reçoit une 'particularité de la maison' (M offre un artefact, I offre patati, R offre patata.)
_ s'inscrire avec des horaires : 22:40 ; 15h05 ; 04h44 (je suis tellement morte de rire devant cette proposition : l'icons des rôlistes devront être un cadran réveil avec l'horaire dessus.

Edit 15/09/18 :
_ Nouvelle petite idée, pour une petite communauté n'ayant pas l'ambition de dépasser les 50 membres. Les pseudonymes des membres sont au choix entre : As de Pique, As de Trèfle, As de Cœur, As de Carreau, Deux de Pique, Deux de Trèfle, Deux de Coeur, Deux de Carreau, etc. La maquette du design peut également être à base de textures/brushs "pique, carreau, trèfle et cœur".


take it in your heart now, lover
BY MITZI

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 ffffff 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 ffffff 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.

Aetherya

Catégories gris/rose - Lun 7 Mai 2018 - 9:45

Perso j'ai réussi à changer la couleur ici (ce que j'ai mis en rouge) :


C'est dans le CSS. ^^

ColorTime'Less

Un simple codage de catégorie - Jeu 11 Jan 2018 - 16:34

Ma demande



Bonjour, je suis ici pour vous demandez votre aide ! La création d'un code sur l'apparence des catégories d'un forum. Merci à vous !


Schéma(s) et Eléments


Schémas : https://images2.imgbox.com/c2/ef/2JGfqCye_o.png
Tailles des éléments :

taille de l'image avatar : 62px*99px (taille normal : 200px*320px)
taille de l'image new,lock,.. 158px*30px
taille du rectangle titre catégorie 755px*27px
taille du rectangle titre forum 506px*20px
taille du rectangle description et sous forum 506px*79px
taille du rectangle dernier messages, nombres sujets et messages 156px*68px

Effets voulus : l'image de l'avatar afficher en noir et blanc et au passage de la souris redevient en couleur

Version de votre forum : PHPBB2


Ressources



Les couleurs :
rectangle titre catégorie
fond : #FAC8CA
écriture : #FFEFE3
contour : #FFFFFF

rectangle titre forum
fond : #FFFFFF
écriture : #FAC8CA
contour : #E6E6E6

rectangle description et sous forum
fond : #FFFFFF
écriture : #FAC8CA
contour : #E6E6E6

rectangle dernier messages, nombres sujets et messages
fond : #FFFFFF
écriture : #FAC8CA
contour : #E6E6E6


Autres précisions ?



Il s'agit d'un simple code pour un futur forum réel/célébrité, je vous remercies de votre attention et au plaisir de voir vos créations, merci beaucoup !


(Koray Allister) Commande : Page d’accueil sombre - Mer 6 Déc 2017 - 16:36

Page d'Accueil sombre



Bonjouuur ! N'ayant pas trouvé mon bonheur dans le Libre Service, je vous présente une demande de Page D'accueil assez sombre. Merci d'avance à celui ou celle qui prendra en charge la réalisation de cette PA ♥


Schéma(s) et Eléments


Schémas :
Simple :
Tag ffffff sur Never Utopia - graphisme, codage et game design 2uju

Au survol :
Tag ffffff sur Never Utopia - graphisme, codage et game design Bmxb
Tailles des éléments : La PA mesure 900px
Les images du staff font 93 x 94
Les images des prédéfinis font 61x86
Le bloc du contexte fait 369x191
Les images partenaires font 88x31
L'écriture des titres est de 14px
L'écriture des blocs est de 12px
L'écriture du titre de la PA est de 36px

Bien entendu, il est tout en votre honneur de modifier et d'adapter les dimensions !
Effets voulus : Tag ffffff sur Never Utopia - graphisme, codage et game design N3qu
Version de votre forum : PHPBB2


Ressources



Image prédéfinis
Tag ffffff sur Never Utopia - graphisme, codage et game design Augc

Image STAFF
Tag ffffff sur Never Utopia - graphisme, codage et game design 4dpm

Image partenaires
Tag ffffff sur Never Utopia - graphisme, codage et game design Lff0

Les couleurs utilisées sont :
#2e2b2b (fond)
#ad8245 (gros titre, liens et dates)
#ffffff (petits titres)
#575656 (textes)


Autres précisions ?


La taille des bordures noires des blocs est de 1px


Hebi

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

Le voici, le voilà !

Encore merci de donner de ton temps ^^

Spoiler:

Kanae

Maquettes & Idées - Mar 20 Déc 2016 - 13:31

La galerie




La galerie se décomposera en un petit paragraphe détaillant un peu ma démarche et mon autocritique, les ressources utilisées et une miniature de la maquette sur laquelle vous pourrez cliquer pour l'agrandir. Enjoy !


Un Cerf-Noël !



Au vue de la saison et inspirée par l'exemple de NU, j'ai eu l'envie de faire un thème de Noël avec des aplats de couleur et un rendu assez enfantin. Je ne voulais pas utiliser d'images réelles pour une fois, ni de petits dessins trop classiques... Je pensais même que je n'allais rien trouver d'original jusqu'à ce que je tombe sur l'image d'un cerf rose sur fond violet. Je suis tombée amoureuse des couleurs et du cerf, et j'ai construit tout mon thème autour de cet élément. Evidemment, je l'ai retravaillé un peu car je n'aimais pas le fait qu'il ait des cheveux. Les graphistes ont parfois des idées bizarres.

J'aime beaucoup le rendu que je trouve pétillant et festif tout en ayant un peu de cette âme d'enfant que m'inspire Noël. Je m'excuse en revanche de la qualité graphique, pour une raison inconnue, la netteté s'est perdue lors de la compression graphique et je n'avais pas la foi de tout recommencer.

Voilà, un petit thème rigolo pour m'amuser et sans prétention !


Images utilisées



Fond du header : Le cerf apparemment, il viendrait du site webneel.com mais ça ne m'étonnerait pas qu'il s'agisse d'un simple référencement et que l'artiste se soit perdu dans les méandres d'internet. Il est pas mal réutilisé à droite et à gauche cependant et le site sur lequel je l'ai trouvé proposait justement son exemple comme inspiration pour des cartes de noël.
Images "nouveaux messages", ect : Free Flat Christmas Pack.
Et j'ai dessiné moi-même les petits sapins ! ^^

Polices utilisées :



Calibri
Gabriola
MV Boli


Couleurs principales



Fond du Forum : #240B35 (violet)
Fond Navigation : #E4D548 (jaune/vert)
Fond Catégorie: #F2056D (rose fushia)
Fond des Icones : #50BAAC(bleu/vert)
Titres : #FFFFFF (blanc)
Textes : #202020 (gris foncé)
Tag ffffff sur Never Utopia - graphisme, codage et game design 673839Sanstitre51





Printemps en coquelicots



J'avais envie de créer quelque chose pour le printemps à venir et, comme j'ai été traumatisée par Meryl Streep dans "Le Diable s'habille en Prada", j'ai décidé de faire une petite composition florale. Des fleurs, pour le printemps, comme c'est original... L'objectif était donc d'utiliser des fleurs, mais sans donner un côté guilleret ou trop girly, célébrer le printemps sans être niais en fait.

Finalement, je suis tombée sous le charme des coquelicots et j'ai trouvé qu'élaborer un thème à dominante rouge, pour le printemps, ce n'était quand même pas banal. En plus, il y a un petit clin d'oeil à Kenzo qui me plaît bien... J'ai cherché à donner une ambiance un peu casual/poétique tout en évitant de faire vieille-fille. Je voulais que le thème claque tout en étant reposant à parcourir. J'ai donc éviter les contrastes trop violents tout en essayant de maintenir la dominante rouge et, comme toujours, en permettant au forum de rester lisible. Je trouve que les coquelicots donnent une atmosphère un peu feutrée, un peu secrète et ça me plaît bien.

Au final je pense avoir réussi mon paris, même si deux ou trois petites choses me chagrinent un peu. J'ai de gros doutes sur les typographies utilisées et pour une fois je suis un peu déçue par ma page d'accueil et totalement enchantée par mon QEEL ! C'est le monde à l'envers et je me rends compte que je suis en train de me lancer des fleurs...

Je vais donc m'arrêter là et vous laisser me dire ce que vous en pensez, ça vaudra mieux !


Images utilisées



Fond du header : Poppy Field Sunset de badass.
Fond du QEEL : Coquelicot2 du photographe Arnaud Grizard.

Polices utilisées :



Calibri
DJB Coffee Shoppe Espresso
Lemon/Milk
Open Sans
Taken by Vultures Alternates Design
UpperEastSide
Victorian Free Ornaments Two

Couleurs principales



Fond Navigation/Forum : #FFFFEC (beige clair)
Texte navigation : #27220F (vert très sombre)
Fond : #554D34 (taupe sombre/kaki, selon la résolution)
Fond des titres : #E83704 (orange soutenu)
Titres : #FFFFFF (blanc)
Textes : #4A4A4A (gris moyen)


Personnalités utilisées



Adam Gallagher
Anaïs Mali
Cate Blanchett
Olivia Wilde
Yaya Dacosta
Tag ffffff sur Never Utopia - graphisme, codage et game design 756833exemplemini





Mountains Glory



J'ai toujours eu une fascination de dingue pour les montagnes et le sentiment d'évasion qu'elles procurent. Ce sera donc un thème récurrent dans mes créations qu'elles soient enneigées, boisées, brunes, noires, flippantes, chaleureuses... Ici, j'ai construit ma maquette autour d'un levé de soleil sur des sommets enneigés. L'avantage était le joli camaïeu de couleur se dégradant en rose et violet avec ce petit cachet qui a l'air plein de promesse. Du coup, j'en ai profité pour jouer sur les contrastes avec ce griffon qui scintille et ces écritures blanches.

Je voulais garder un côté très académique avec des polices plutôt neutres et modernes et je me suis notamment inspirer du travail de Nemalus sur son forum Alone Together que je trouve magnifique. Sans virer totalement dans le minimalisme, je voulais qu'on garde un côté assez épuré mais qui ne serait pas vide pour autant. J'ai donc choisi de laisser le fond en transparence, y compris sous les textes. Un moment je me suis demandée si les textes allaient restés lisibles, puis je me suis rendue compte que ça donnait un petit côté photographie de magasine commentée et ça me plaisait bien.

Là où je n'ai pas du tout été académique en revanche, c'est en choisissant de répartir les éléments traditionnels de la PA tout autour du header et d'éclater le QEEL un peu à droite et à gauche. Je voulais casser avec les codes habituels et utiliser tout l'espace disponible. J'en suis plutôt contente parce que je trouve que ça fait vraiment menu de jeu avec toutes les informations essentielles condensées sur une seule page. C'est une disposition qui me plaît beaucoup et que je vais probablement réutiliser !


Images utilisées



Les illustrations : Ha Ling Peak (je recommande le site pour les amoureux du genre).



Polices utilisées :



Levenim MT
Open Sans
Prometheus (mais elle n'a pas toutes les lettres, ça m'agace)



Couleurs principales



Texte liens importants : #AD8FBA (violet clair)
Fond : #101321 (violet sombre)
Titres : #FFFFFF (blanc)
Textes peu importants : #D79EB1 (vieux rose)



Personnalités utilisées



Adam Gallagher
Ashley Green
Dylan Rieder
Eric Bana
Gemma Ward
Idris Elba
Jared Leto
Jon Kortajarena
Mélanie Laurent
Mickael Fassbender
Sui He
Tao Okamoto
Yaya Dacosta

Tag ffffff sur Never Utopia - graphisme, codage et game design 901383minimaquettemountains

FROSTendoloris

LS Bannière forum / Lucythao - Dim 7 Aoû 2016 - 21:02

Type d'image & oeuvre



   

   

Oeuvre(s) ou Artiste(s) d'appuis

Megan Fox

Couleurs dominantes

#20585a #ffffff #0a0b0b

Couleur de fond

#121717 & #0a0b0b


   Explications, mentionnez si besoin :
   - taille de l'images 800x450
   - Pour les couleurs, si vous voulez les modifier pour votre forum, je vous conseille d'utiliser les teintes/saturations sur Photoshop, pour ceux qui ne savent pas trop utiliser les outils de modifications !  

   
   >> Pour voir le fichier PSD, merci de poster à la suite.
   


   
Merci d'afficher en crédit le lien de Never-Utopia ainsi que mon pseudo : lucythao

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

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:  

Monaka

Copier/coller - Jeu 28 Jan 2016 - 14:52




PA Monaka




















Bienvenue {USERNAME}



Tag ffffff sur Never Utopia - graphisme, codage et game design Vava-t10





Contexte



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, molestiae, enim, aliquam laboriosam necessitatibus praesentium quia quaerat sint dolore nihil harum fuga fugit vel est vitae doloremque rerum. Ut, tempore.


Iure, repudiandae, pariatur, maiores temporibus reprehenderit incidunt fuga quas ullam aspernatur ea porro sapiente officiis! Maxime, vel, praesentium, doloremque, ut sequi ipsam eos iure odio perferendis obcaecati deleniti est modi.


Rem, pariatur, consectetur, voluptatibus quaerat necessitatibus ad hic totam distinctio atque voluptas dolores ullam quae. Facere, maxime modi nesciunt eum ducimus fuga nobis cumque aut. Repudiandae ab unde voluptas soluta?


Tempore, in, sequi, dignissimos, temporibus animi fuga aspernatur quasi magni natus repellat ad dolor mollitia et distinctio illum nostrum necessitatibus molestiae fugit repellendus sit facere molestias saepe neque nisi qui.


Minima, obcaecati adipisci dolor quibusdam sequi dolores commodi harum rem nostrum veniam aut labore ad unde ut tempore quod facere soluta odit ipsum necessitatibus ea eaque eveniet dicta. Inventore, blanditiis.




Staff




Tag ffffff sur Never Utopia - graphisme, codage et game design Essai-10
Henrykiki
Mp - Profil



Tag ffffff sur Never Utopia - graphisme, codage et game design Essai-10
Henrykiki
Mp - Profil



Tag ffffff sur Never Utopia - graphisme, codage et game design Essai-10
Henrykiki
Mp - Profil



Tag ffffff sur Never Utopia - graphisme, codage et game design Essai-10
Henrykiki
Mp - Profil



Membres à l'honneur



Tag ffffff sur Never Utopia - graphisme, codage et game design Essai-10
Henrykiki
Mp - Profil



Tag ffffff sur Never Utopia - graphisme, codage et game design Essai-10
Henrykiki
Mp - Profil


Nouveautés



07-01-2015 Etant en pleine période de Noël, voici un design qui représente l'hiver : hourra.


17-01-2015 Les mouches ont des pattes, et les fourmis aussi. Le saviez-vous ?


27-01-2015 Je pense que Cléopatre à ruiné l'Egypte, elle s'est prise pour une grande pharaonne, et bim !


07-02-2015 Pas touche, la mouche, t'as pas pris ta douche.


17-02-2015 Il était une bergère qui allait au marché..




À savoir



Ici nous demandons un minimum de 10 lignes.


Les personnages en dessous de 28 ans ne sont pas acceptés.


+ enfin des infos divers // ASTUCE = utiliser les balises
— < strong> — pour mettre en avant le principal





PA codée avec l'aide de Never-Utopia.




jQuery(function(){var el=jQuery('#pa-monaka');if(_userdata.session_logged_in){el.find('#user-avatar').html(_userdata.avatar);el.find('.user-name').html(_userdata.username)}else{el.find('.not-connected').show();el.find('.connected').remove()}});

P'tit loup

Une page d'accueil s'il vous plait... - Dim 20 Déc 2015 - 19:40

Ma demande



Bonjour à tout un chacun, c'est très humblement que je me tourne vers vous pour vous demander un peu d'aide. Il se trouve que la fondatrice de notre forum et moi-même nous sommes rendu compte que nous manquions de place sur notre page d'accueil et c'est en réfléchissant bien que je me suis dit "Mais bon sang ! Sur N-U ils sont géniaux, ils pourraient nous aider..." et non, je ne frotte pas dans le sens du poil pour obtenir votre aide, il s'avère simplement que je ne suis pas du tout à l'aise avec les tableaux en html, aussi je préfère demander un coup de main plutôt que faire des bêtises.
Je remercie d'ailleurs à l'avance celui/celle qui lira cette demande et voudra bien venir à notre secours.
Adresse du forum de destination : http://gene-v.forumactif.fr


Schéma(s) et Eléments
Schémas : http://i67.tinypic.com/1xxa3s.jpg
Tailles des éléments : Si la PA pouvait avoir 850 px de large tout au plus, ce serait parfait, la hauteur n'a pas d'importance. Pour ce qui concerne les images de staff, je dirais du 100px sur 100px, 75px sur 75px pour les prédefs, 50px sur 50ps pour les images top-sites. Pour le reste, ça dépendra de la taille des cellules. Couleur de fond des cellules : #723E64
Effets voulus : Images staff en hoover, image contexte en slide vers le haut, infos-bulles sur images prédefs.
Version de votre forum : PHPBB2


Ressources
Background de la PA
Staff 1
Staff 2
Staff 3
Staff 4
Top-sites
Image déco (à redimensionner selon la place dispo)
Image contexte (à redimensionner selon l'espace)


Autres précisions ?
Titres des cellules sur le bord
Police des titres de cellule : Abeatbykai ; couleur : #d74e77
couleur texte général : #FFFFFF
couleur lien : #8CC6D7

Alumine

Sélecteur de couleur de fond - Jeu 15 Oct 2015 - 10:37

Hello hello !
Bon, je le dis tout de suite, je ne savais vraiment pas où poster ça, donc on va dire que c'est une demande, comme ça ça pourra servir à d'autres, mais je préférerais qu'on m'explique comment faire, plutôt que de me donner un code tout prêt. (mes excuses si je n'utilise pas la fiche de demande, mais c'est un peu particulier)

Il s'agit d'un outil qui ressemble à un sélecteur de thème, mais en beaucoup plus simple. Cela ressemble à ce qu'on peut trouver sur ce site : http://www.scan-manga.com/lecture-en-ligne/Magi-Labyrinth-of-Magic-Chapitre-280-L-execution_34082.html#542.34082.985892 (la barre avec un curseur en haut à gauche qui permet de régler la couleur du fond de page). Sauf que c'est encore plus simple : il suffirait qu'un membre puisse cliquer deux boutons au choix : l'un donnant au fond du forum une couleur claire, l'autre une couleur foncée.
Donc, à la différence d'un sélecteur de thème, je préférerais que ça ne change pas entièrement de feuille CSS, puisqu'il n'y a qu'une seule chose à changer...

Je n'aurai pas de problème à m'occuper de créer ces boutons et les couleurs, mais à titre indicatif, on peut utiliser #FFFFFF en clair et #272727 en foncé. La div à laquelle donner cette couleur de fond se nomme #CDS

En fait ma difficulté, et là où je ne sais vraiment pas comment faire, ni même quel langage utiliser, c'est que j'aimerais que la couleur que le membre choisit reste en dépit des réactualisations et changements de page. Je ne sais pas comment on fait, mais j'observe que sur le site plus haut, la couleur choisie reste d'une visite à l'autre, sauf vidage de cache ! J'aimerais que ce soit pareil ^^

Voilà voilà, merci d'avance !

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;">

Ajartielle

Codage du cadre de l'en-tête - Mar 21 Juil 2015 - 2:10

Hello =)

Je ne sais pas si c'est ce que tu cherches, mais...

Code:
/*Retirer les bordures dans les cadres de titre */
th.thHead, th.thCornerL, th.thTop, th.thCornerR, th.thSides, th.thLeft, th.thRight, td.catHead {
  border-width: 0px !important;
}


En mettant le "border-width", j'enlève carrément ces bordures. Si tu veux juste en modifier la couleur, alors il faudrait un "border-color: #FFFFFF;" (En changeant bien sûr pour la couleur que tu veux.).

Ce code sélectionne toutes les bordures d'en-tête (à moins que j'en ai oubliées...). Je n'étais pas sûre si tu voulais en viser juste une en particulier...

Moro-PM

(Nemalus) [CATE] Catégorie por moa, s'il vous plaaît - Lun 20 Juil 2015 - 13:17

Ma demande



   Bonjour, bonsoir à tous ! Malgré de nombreux efforts à chercher des libre-services ou à lire des tuto', je n'arrive pas à parvenir à obtenir les catégories que je souhaite. :c Donc, je me permets de poster ici, en espérant qu'une bonne âme pourra m'aider.

   Schéma(s) et Eléments
   Schémas : https://www.zupimages.net/up/15/30/qkgm.png
   Tailles des éléments : Bah... Comme cela vous arranges. J'avais pensé à 700*200 pour les caté', mais faites comme vous le souhaitez, je n'y connais rien. °^°
   Effets voulus : Lorsqu'on passe la souris sur l'image de gauche (tournesol), on voit le sujet le plus récent, la date, le posteur et son avatar.
   Version de votre forum : PHPBB2


   Ressources
   Rien de bien précis, seulement des couleurs uniformes dans les tons des couleurs #FFFFFF et #D6D0CB. :3 Du coup, les couleurs sur le schéma ne sont pas celles souhaité, mais si vous désirez, je peux les changer (tout ça en rime ♥).

   Autres précisions ?
   Merci d'avance à la personne qui pourra me venir en aide ! ♥ N'hésitez pas si vous avez besoin d’éclaircissement ! :3
   

ass kicker

[NYO] Demande de catégorie - Sam 4 Juil 2015 - 16:35

Ma demande



   Bien le bonjour, ou bonsoir ! Je viens embêté votre petit monde pour faire ma demande de catégories. Étant un daube dans milieu du codage et étant aussi nulle en explication, j'espère que les éléments fournis suffiront pour vous aidez à codé tout ça.

   Schéma(s) et Eléments
   Schémas : http://nimga.fr/f/H5ItU.png
   Tailles des éléments : je pense que les tailles faites sur le shéma sont préférables pour ne pas déformé le forum qui porte la largeur même du schéma.
   Effets voulus : Effets voulus : pour la description des catégories, je les voudrais en justifier s'il vous plait. j'ai pas réussis à faire ça directement sur photoshop, malheureusement. si il est possible, les sous-forums doivent être dissimulé sous une image qui disparait progressivement au passage de la souris, quand à la police, je n'ai pas de préférence particulière du moment que tout reste en minuscule, que ce soit la description, comme le reste. si il est possible de mettre, cependant, une police type pixel (edit modo: VT323 sur Google Fonts est similiare) mais pas énormissime, pour ce qui est du "blabla du dernier message posté" & "nom du dernier membre à posté", ça serait super.
   Version de votre forum : PHPBB2


   Ressources
   http://nimga.fr/f/g3Zqs.png
http://nimga.fr/f/9SyHR.png
http://nimga.fr/f/YPFqZ.png
http://nimga.fr/f/flkF9.png


   Autres précisions ?
contour extérieur des cadres (vert): #c2d86a ; contour intérieur des cadres (blanc): #ffffff ; fond des descriptions: #faf9f9 ; couleur du titre de catégorie & liens en général: #dd4e48 ; couleur de texte du forum: #7280b8
    Je pense avoir rien oublier. Je remercie d'avance la personne qui prendra ma commande en charge. Je sais que je peux être casse pied pour vous mettre dans tous vos états avec tous les détails que j'ai donné. Quoi qu'il en soit, je vous remercie encore et bonne soirée, en espérant avoir une réponse très prochainement.

   

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 ffffff 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 ffffff 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.

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! ^^


Revenir en haut

La date/heure actuelle est Jeu 22 Aoû 2019 - 17:19