Edit Tyralosse : Quelques règles !

1) Vous pouvez partager vos thèmes sur ce topic. Ou les envoyer à Métar par MP pour qu'il les mette dans ce post comme exemple. N'oubliez pas de fournir un screen de ce que donne le thème pour que les membres puissent voir à quoi ça ressemble sans être forcés d'installer le thème !

2) Il faut toujours être en accord avec les règles du forum ! Donc si un thème contient des images nsfw ou qui font partie de la liste des interdits du forum (par exemple lyra plushie), il n'est en aucun cas autorisé de le partager ici.
De même tout screen d'un thème possédant des images de ce genre sera directement supprimé. Des mesures seront prises en cas de récidive de l'auteur.
____________________


Alors, vous aimez pas ce thème ? Vous trouvez la bannière hideuse et les gros boutons de navigation à vomir ? Les nuages au fond vous donnent des boutons ? Vous avez usé plusieurs claviers à vous déchainer sur les topics concernant le concours de bannière ?
Pas de soucis, on va arranger ça !

Le but de ce topic n'est pas de cracher sur le thème actuel et demander gentiment aux gens de "se bouger le putain de cul, bordel" (vous pouvez le faire quand même, à vos risques et périls). Non, ce topic est bien mieux que ça : il va vous permettre de mettre le thème que vous voulez. Oui, vous avez bien lu : choisir vos boutons, votre bannière, vos couleurs, et même vos smileys si vous êtes fous.
J'espère que vous aimez le copier-coller, parce que vous allez en bouffer (pas autant que moi, je vous rassure). Ce tuto fonctionne pour les navigateurs Opera, Firefox, Chrome et Chromium. Pour les autres je sais pas, démerde-toi (à partir d'ici je te tutoie).


Comme toute bonne introduction, je me dois d'annoncer le plan :
# Le pourquoi du comment
1) Installer un thème
....a) choisir son bousin
....b) Avec Stylish
....c) En se démerdant avec des fichiers css
2) Créer son thème
....a) les images
....b) le CSS très très basique
....c) le CSS un peu moins basique

Un utilisateur lambda dit : Houlà, c'est quoi ce pavé ? TL;DR!!
T'inquiète, si tu veux juste changer de thème, préoccupe-toi juste des parties 1.a) et 1.b).



ici, c'est un espace vide pour aérer un peu






# Explique-moi, tonton Metar, comment ça marche ?
Déjà, faut savoir qu'est-ce qu'on fout. Cette partie est pas importante, tu peux la sauter. Ça existe, du 34 de paragraphe ?
Ce qu'on fait ici, c'est modifier un peu la structure qui existe déjà.  
Une page web, en général, est composée d'un HTML et de CSS :
Le HTML sert à la mise en page, à la structure, etc. C'est le plus gros d'une page, ce qui contient les textes et ce qui va s'afficher au final.
Le CSS, c'est les feuilles de style, et c'est stylé : c'est un genre de code avec des thèmes prédéfinis (images, polices, couleurs...) qui va être réutilisé dans chaque truc qui le demande. Un message sur le forum, par exemple, utilise un CSS qui va définir sa police et sa taille par défaut, et chaque message va recourir à ce même style, un peu comme une fonction dans un programme.
Le monsieur moustachu et chevelu dit : pour faire simple : HTML = structure, CSS = apparence.

https://i.imgur.com/FVFUUrm.png
Fig. 1 : un bout de page d'accueil de French-Brony affiché dans le Dragonfly d'Opera (non, ce truc ne court pas après les filles).
À gauche, le document HTML. À droite, le CSS.

Ce qu'on va faire, c'est créer un CSS User. Normalement, le style du site (auteur) a la priorité sur celui de l'utilisateur, mais on peut facilement changer ça.

Captain Obvious dit : Le style utilisateur personnalisé que tu vas utiliser sera visible uniquement pour toi, par ton navigateur.



1) INSTALLER SON THÈME ? ?

Captain Obvious dit : Dans cette partie, on va expliquer comment installer un thème sur ton navigateur.

a) Je mets quoi ?


C'est un thème en kit : tu choisis ta bannière, ton pack de boutons, etc.
C'est simple as fuck : tu installe les Stylish que tu veux... c'est tout.
Certains truc ne sont pas encore disponible sur Stylish et le le seront probablement jamais, par flemme, comme les bannières. Pour ceux-là, copie-colle les codes que tu veux dans ce que je vais expliquer dans les parties 1.b) et 1.c).

Si tu a la flemme, il y a des thèmes entiers tout fait, installables en 2 clics, dans le spoiler approprié

ATTENTION : si quelqu'un constate une erreur dans les codes (c'est pas la bonne image, lien mort, etc.), merci de me prévenir.


ATTENTION :  je ne suis en aucun cas responsable de la laideur de ton thème.

Bannières :

Boutons de navigation :

Icônes :

Couleurs :

Divers :

Oh mon dieu, un pack complet ? :

b) Stylish, c'est magique
Stylish est un plugin disponible pour Firefox, Chrome/Chromium et Opera.
Ce plugin va vous permettre d'appliquer un style sur un site.
Une fois installé, va dans les options de Stylish, et clique sur "nouveau thème".

https://i.imgur.com/YJIgOwN.png
Fig. 2 : la fenêtre d'édition d'un nouveau style dans Firefox

Donne un petit nom et copie-colle le code que tu veux dans le champ (peu importe l'ordre).
Pour finir, ajoute en début de code @-moz-document url-prefix(http://www.french-brony.com/) { et à la fin }. Cela va éviter à Stylish de modifier d'autres sites qui ont rien demandé.

Captain Obvious dit : Pour enregistrer ton travail et le valider, clique sur enregistrer !

c) Mais j'en veux pas de ce truc !
Il est possible, sur certains navigateurs, d'utiliser un fichier .css plutôt qu'un plugin.
Cette méthode a un avantage pour ceux qui veulent créer des styles : on édite le CSS avec un éditeur externe (Bloc-note, Dreamweaver...), et on a un aperçu direct simplement en actualisant la page.
J'ai trouvé que pour Opera, il paraît que c'est aussi possible pour les autres mais j'ai pas trouvé.

• Cool, j'ai Opera
Super ! Fais ton CSS en copiant-collant les bouts de code, et enregistre ton fichier texte au format .css dans le dossier C:\Program Files (x86)\Opera\styles\user\ (ou ce qui correspond à ce dossier dans ton ordi).
Ensuite, va dans les préférences du site (Clic droit ► Éditer les préférences du site... ► Onglet Affichage) et indique ton fichier CSS.

• Mais euh, j'ai pas Opera !
Je suis pas ta mère, démerde-toi.

2) Créer son thème

ATTENTION :  s'il vous plaît, évitez de faire un truc trop moche.

a) Les iiimaaages !!!

Si t'as l'âme d'un artiste, tu peux te lancer dans la création des diverses images, boutons et icônes qui ornent le forum. Inspire-toi de ce qui existe déjà.

https://i.imgur.com/qd5LdZx.png
Fig. 3 : la légende des icônes par défaut sur French-Brony

https://i.imgur.com/6tlnY40.png
Fig. 4 : la légende d'icônes swag

Tu peux faire ça avec n'importe quel logiciel de graphisme, de Photofiltre à Photoshop en passant par Gimp.

Si t'as fait des jolis trucs mais que t'es trop con pour les intégrer dans les codes CSS, tu peux toujours les balancer dans un post sur ce topic. Il y aura sûrement un mec suffisamment intelligent pour le mettre en code mais trop naze pour faire des jolis trucs pour s'en occuper.

Note : inutile de faire d'autres bannières, on en a déjà à la pelle.

b) Modifier quelques images au marteau et au burin

Là, c'est un petit code magique qui va beaucoup servir, il va substituer une image affichée par une autre de ton choix. Normalement, c'est à la portée du premier crétin.

Code:

img[src*="URL de l'image à remplacer"]{ content: url("URL de l'image de remplacement"); }

Par exemple, le code suivant remplacera notre magnifique bannière actuelle par un gros plan sur le cul de Madame Banane.

Code:

img[src*="http://i35.servimg.com/u/f35/15/17/02/20/bannia10.png"]{ content: url("http://sournoishack.com/uploads/824564064test3.png"); }

ça marche pour : les boutons, les icônes, la bannière, les smileys...
Par contre, il a été constaté que des fois, ce code ne marche pas. Si c'est le cas, utilisez-donc

Code:

     img[src*="URL de l'image à remplacer"]{
    background-image: url("URL de l'image de remplacement");
    width: <Largeur de l'image>px;
    display:inline-block;
    padding: <hauteur de l'image>px 0 0 0;
    height: 0px}  

Vous pouvez faire ça avec n'importe quel logiciel capable d'éditer du texte (Bloc-notes...), même s'il existe des logiciel faits pour (Adobe Dreamweaver).

ATTENTION :  cette méthode ne marche que pour certaines images, celles qui sont définies par le document HTML du forum. Pour les autres (fonds...), se référer à la partie suivante.
Il a également été constaté que ce code ne fonctionne pas pour les smileys chez certains utilisateurs de Stylish, je sais pas pourquoi...

c) Oh, mais c'est pas fini ?

Et non, il nous reste encore pleins de trucs à faire ! Modifier le fond, la couleur du texte, etc.
Mais ça, c'est un peu plus compliqué, et vous allez surtout vous aidez de Google et/ou de l'ami-qui-s'y-connaît.

Un CSS est constitué de différents identifiants, qui ont chacun leurs propriétés.
https://i.imgur.com/Z7Aqjcj.png
Fig. 5 : un CSS affiché dans Adobe Dreamweaver.

Par exemple, sur la fig. 5, l'élément .table-title a pour propriété background-image:url("https://i.imgur.com/8u8IFCD.png"); (modifier l'image de fond) et color:#FFFFFF; (mettre le texte en blanc).
Le !important est important dans notre cas, puisque qu'il va permettre de prendre la priorité du style, et donc d'afficher le style utilisateur au lieu du style auteur.

Les principaux identifiants forumactif sont disponibles sur cette page. Pour les autres, vous n'avez qu'à regarder le code source de la page (cf. fig. 1).

Pour les paramètres, démerdez-vous avec Google. Je vous donne quand même plus les importants :
• l'image de fond :

Code:

background-image:url("URL de l'image");

• Couleur de fond (en hexadécimal) :

Code:

background-color: #RRVVBB;

• Couleur du texte (en hexadécimal) :

Code:

color:#RRVVBB;

Pour la syntaxe, basez-vous sur celle des screenshots, c'est pas hyper compliqué.

ATTENTION :  n'oubliez pas le !important à mettre devant le point-virgule !









Ayé, c'est fini, vous avez les éléments de base pour nous faîre un joli truc.
Il est possible que j'aie expliqué ça comme une tanche et que tu n'aies rien compris, dans ce cas redemande-moi des explications. S'il y a une erreur, pareil, tu me préviens !
Merci à Popinou pour la correction des fautes d'orthographe et de grammaire

C'est vraiment sympa et assez facile de faire avec stylish, même pour un type nul en info/codes comme moi.

Super initiative metarkice, comme ça ceux qui se plaignent n'auront qu'à faire leurs modifs tout seuls et n'auront plus de raison de nous les briser

Heureusement que Captain Obvious était là pour me guider, sinon j'aurais vraiment été perdu

Et que voilà ?
*roulements de tambour*

Un thème Apple Jack !

vvvvvvvvvvvvv

^^^^^^^^^

Créé par le Bon, le Grand, le Sublime Seigneur Lagicarius (c'est lui qui a insisté). Normalement, il aurait dû faire le post, mais il est pas là, il a piscine.

Pour l'installer, c'est tout simplement ici : http://userstyles.org/styles/90865/french-brony-apple-jack-par-lagirarius?r=1374500358 le bouton vert (ou bleu) à droite du screenshot

Modifications : fond, boutons de navigation, icônes, bannière, banderole, couleurs des liens, couleurs du tableau.
Répond au normes Custon Style Sheet, Stylish et Tryalosse International Rules, garantit sans matières grasses et sans sucre ajoutés*

C'est fait par un feuj, n'y touchez pas.  

C'est du bon boulot.

Thème Harmony par Axelerre:

Modifie : Boutons (Nouv. Message ; Inscription ; Connexion aussi changés) - Fond

Aperçu :


Lien : http://userstyles.org/styles/90368/th-me-harmony-pour-french-brony?r=1374517399

Pour l'installer, cliquer sur le bouton en vert à droite "Install with Stylish" puis confirmez l'installation dans la boîte de dialogue qui s'ouvre.

Plus personne ne se plaindra du style du forum maintenant  

Waouh, c'est vraiment cool comme idée ! Pouvoir installer le thème qu'on veut, le rêve  
J'ai mis le thème Applejack, il est vraiment cool ! GG !

(Juste une suggestion comme ça... et si on le mettait en post-it, ça éviterai qu'on le perde.)

J'ai fais une moitié de tl;dr mais ça a l'air bien expliqué, je m'y attaque dès demain pour le mien.

Merci Metar' !

Luminia a écrit:

(Juste une suggestion comme ça... et si on le mettait en post-it, ça éviterai qu'on le perde.)

Il y a été, mais personne l'a vu, alors je l'ai mis en topic normal.

Armé de mon DreamWeaverator, de mon GIMPATOR et de mon Operax, j'ai pondu en une grosse après midi un thème complet :



Il est beau, il est fini, il est complet, et il est disponible ici : http://userstyles.org/styles/90916/french-brony-octavia?r=1374616293


Entièrement réalisé par bibi, à l'exception des 3 vecteurs : Octavia, son violoncelle et la clé de sol)

Adopté! ('fin sauf la bannière)

Touchstone a écrit:

Adopté! ('fin sauf la bannière)

Moi c'est plutôt les gros boutons noirs/gris qui me gênent.

Pour les boutons, j'ai pas trop été inspiré... J'avais pas envie de faire des gros trucs carré. Mais c'est vrais qu'ils sont plutôt moches. Je vais sans doute changer ça dans une màj (peut-être ce soir, lurkez le spoiler update en haut du topic).

Pour la bannière,j'ai fais ce thème rapidement, donc la bannière est aussi vite faite. Si vous avez mieux à proposer (ou à faire), hésitez pas ! Ou tout simplement, remettre la bannière par défaut, ou celle de ton choix.


Ma prochaine victime sera : princesse célestia

Thème Twilight Sparkle par Axelerre:

Modifie : Boutons (Nouv. Message ; Inscription ; Connexion aussi changés) - Fond - Bandeaux - Bannière - Icônes - Couleur Liens - Image "Qui est en ligne ?"

Aperçus :


Lien : http://userstyles.org/styles/90960/twilight-theme-for-french-brony

Pour l'installer, cliquer sur le bouton en vert à droite "Install with Stylish" puis confirmez l'installation dans la boîte de dialogue qui s'ouvre.

énorme le thème TS  
*installé

Moi je trouve la couleur de background vraiment criarde.

Personnellement je me suis mis le thème d'OCtavia parce que c'est classe quand même. Par contre, si quelqu'un se sent inspiré pour un thème complètement  , je serais preneur.

C'est étrange, j'avais l'idée de faire un thème Rarity avant que tu demandes...

C'est bien, tu anticipes mes désirs, esclave  

Nan j'rigole. Rarity est le style fait poney, normal qu'on songe à faire un skin de forum rien que pour elle  

Très joli Axelerre, juste la couleur du fond, tu devrais la faire de la même couleur que la peau de TS.  
Je vais poster mon thème Pinkie Pie vers la fin de la semaine, il y aura beaucoup de gâteaux !  

N.B. : Je ferai des MAJ pour le thème AJ (Metar aussi en fera sûrement)

Le thème Twilight Sparkle a été édité, le fond est aux couleurs de Twili maintenant .
Le post ci-dessous contient les modifications faites sur le thème. Pour mettre à jour celui-ci, utilisez simplement le même lien que lors de l'installation et vous aurez juste à cliquer sur "Update with Stylish".

EDIT: Les icônes "Nouveau(x) Message(s) [Populaire]" et "Pas de nouveau message [Populaire]" ont été mises à jour. J'avais oublié de les rajouter

Axelerre a écrit:

Thème Twilight Sparkle par Axelerre:

Modifie : Boutons (Nouv. Message ; Inscription ; Connexion aussi changés) - Fond - Bandeaux - Bannière - Icônes - Couleur Liens - Image "Qui est en ligne ?"

Aperçus :


Lien : http://userstyles.org/styles/90960/twilight-theme-for-french-brony

Pour l'installer, cliquer sur le bouton en vert à droite "Install with Stylish" puis confirmez l'installation dans la boîte de dialogue qui s'ouvre.

Je dépoussière le topic pour vous dévoiler un nouveau thème :
(Un thème sur Button's Adventure arrivera plus tard )

Citation :

Thème Rarity par Axelerre:

Modifie : Boutons (Nouv. Message ; Inscription ; Connexion aussi changés) - Fond - Bandeaux - Bannière - Icônes - Couleur Liens - Image "Qui est en ligne ?"

Aperçus :


Lien : http://userstyles.org/styles/91802/rarity-theme-for-french-brony

Pour l'installer, cliquer sur le bouton en vert à droite "Install with Stylish" puis confirmez l'installation dans la boîte de dialogue qui s'ouvre.

Autres thèmes :

Thème Harmony:

Thème Twilight Sparkle: