Bonjour,
 
Ce topic est destiné à recueillir et discuter des thèmes perso que vous avez fait (ou allez faire ) pour le forum.
Je ne parle pas ici des modifications que l'on peut faire via le profil mais bien de refonte en profondeur du design.
 
ah bon on peut faire ça ?
Certains plugin firefox permettent de mettre une surcouche de CSS et/ou de javascript. Grâce à eux ton navigateur t'offre la possibilité d'un design radicalement différent de ce qu'il est.
 
Oui mais firefox ça pue...
Ca marche aussi pour Chrome et Opera
(stylish est porté sous ces 2 navigateurs aussi, pour IE pour l'instant il faut passer par greseMonkey)
 
Et puis si il faut installer 50 plugin laisse tomber quoi, encore un truc de geek...
HFR est un forum de geek, mais même toi tu peux le faire, il suffit de 2-3 clics.
 
Et si je veux créer mon propre thème ?
Je te recommande d'installer Firebug pour avoir accès facilement au code source et aux CSS puis de tester les modifs une à une. Tu peux faire un topic WIP si ça te dit.
 
C'est quoi céesseesse ?
GOTO PROG
 
Mais il est très bien comme ça le forum.
OK
 
 
Le deuxième post sera consacré aux thèmes développés.
Le troisième abordera les questions d'ordre pratique : les plugin à utiliser et leur utilisation
Les suivants seront utilisés selon les besoins qui apparaitrons.

Thèmes disponibles
(les liens images amènent à la page Stylish du thème, voir les post d'info complémentaire pour le détail)

Noname - par Leujuiphe (6.3.2010) pur CSS

DarkPaper - par (12.3.2010 / maj 28.05.2010) Pur CSS. Infos

Extensions pour Firefox, Chrome et Opera
Stylish : permet de modifier les styles d'un domaine, sous domaine ou d'une url.
Le site http://userstyles.org/ répertorie et permet de rechercher les styles disponibles. L'installation des styles se fait en 1 simple clic et leur désactivation en 2, vraiment très simple.
A noter que les styles peuvent être installé au choix pour Stylish ou GreaseMonkey.
Stylish pour Chrome
Stylish pour Opera

Le site répertorie déjà quelques modifs faites pour HFR

Extension dispo pour Firefox, Epiphany, Opera et IE; nativement géré par Chrome.
GreaseMonkey : bien plus puissante cette extension permet de rajouter du JavaScript sur les pages. Ce qui permet non seulement de modifier les styles comme avec Stylish mais aussi de rajouter des comportements et fonctionnalités.

Toutefois, l'usage de GM provoque une latence où on voit apparaitre le thème d'origine. Donc privilégiez Stylish pour l'instant avec les thèmes pur CSS.

Il existe déjà des modifs faites pour HFR ainsi qu'un topic sur la cat sofware/windows.

réservé

parce que j'ai plus d'anti-flood  

pfff c'te présentation dans le premier post
 
et on peut avoir un thème star wars ?
obiwan est d'accord

j'en ferai pas mais je suis preneur

Bonne idée.
Reste plus qu'à trouver des personnes assez motivées pour faire un thème.    
 

J'ai fait un petit test avec Stylish.
Je n'ai quasiment modifié que les couleurs.
La mise en page du forum se basant essentiellement sur des tableaux, ça devient difficile de faire quelque chose avec du CSS.
 
 
Avant

Après

 
Amis testeurs, aider moi à repérer les trucs qui sont pas top :
Le tout se récupère ici : http://userstyles.org/styles/25961
 
(a noter que c'est compatible avec les autres styles déjà cités par Skopos)

Pas le temps d'expliquer là (poulet mariné sur le feu ) : il ya peu de class et d'id donc pour faire des modifs plus poussée il faut passer par des sélecteur "avancés" (chainage, +, > [attributs]...) ça permet de cibler à peu près n'importe quoi.

Tout à fait. J'utilise déjà ces techniques pour mon thème.
Mais y'a du boulot pour arriver à quelque chose de sympa.    
 
 
Mais tout n'est pas possible.
exemple :
Je voulais ne mettre en orange que le n° de page sélectionnée. Malheureusement il n'y a ni class, ni id pour cet élément.
Je m'en suis sorti avec la balise "b" car le numéro de la page sélectionnée est en gras, mais je me retrouve du coup avec le mot "page" en orange également car il n'y a pas de sélecteurs appropriés pour ces éléments.
 
 
Et sinon, j'ai mis à jour mon thème :
- Suppression de la bannière HFR qui faisait un peu tâche (code que j'ai honteusement copié du thème de Yell  - "Design HFR" )
- Mise en évidence des sujets lors du survol
- Le titre des sections du forums sont désormais en orange
- correction de la couleur du texte dans les boutons + listes déroulantes
- Modification de la couleur d'arrière plan des sondages

leujuiphe ca fait une plombe dis donc !!

Je me suis frotté au même problème
Il faut deux règles :
.ciblage b+b, pour le cas de la page 1
.ciblage span+b, pour les autres

edit du 28/05
- réponse rapide accessible en bas-droite de la fenêtre au survol
- insertion des prop CSS3 (radius et shadow) pour webkit et opera
- fil d'ariane bas de forum : correcttion bug de tremblement
- img hors smiley ombrées
- augmentation contraste des liens dans les messages
- augmentation contraste survol des liens du haut
- révision de la page racine du forum
- corrections page de réponse (sauts de ligne)

Bon j'ai un truc montrable, c'est pas encore au point ya plein de petits détails à régler mais c'est fonctionnel, au moins sous Firefox 3.6
(jveux bien des retours sous les autres navigateurs)

(clicable mais qualité moisi qd même )

Code sur stylish http://userstyles.org/styles/26120

Remarque :
Si les quotes ont le même fond que les posts, il vous faut modifier le paramètre "affichage des citations de manière traditionnelle"  dans votre profil (paramètre du forum).

Caractéristiques notables:
-Largeur du forum limitée à 1024px, pour limiter la longueur des lignes et faciliter la lecture.
-Thème modo-compliant.
-La page d'accueil du forum est moche mais je ne m'en suis pas vraiment occupé pour l'instant (vu que je l'utilise jamais j'arrive à l'oublier )

J'envisage de faire une banière générale pour hfr.
Puis éventuellement des banières pour certaines cat, selon l'envie et l'inspiration .

Envisagé aussi, des modif de banières et/ou menu par sous-cat (compromis)

installé
très sympa, mais je n'ai pas l'image du haut " cat graphisme "

J'avais oublié de modifier le lien de l'image, normalement c'est bon là

ça marche
autre chose, la taille de la colonne avec les posts... sans le thème ça prend la largeur de la page, avec le theme moitié moins

Ca c'est normal (j'ai édité le post entre temps)

Libre à toi de le modifier sur ton FF , moi j'aime pas les trop longues lignes.
(cherche 1024 dans l'éditeur de stylish et modifie ou supprime la propriété)

ok nickel c'est mieux

totalement d'accord avec skopos

ah c'est classe, je l'ai installé aussi du coup
 
il y a juste la bannière que je trouve un peu kitch (surtout le "graphisme" en arc-en-ciel en fait    ) mais autrement c'est chouette. Merci pour ça  

thx
 

je te l'accorde
 
Je savais pas quoi en foutre, j'ai testé  différentes typo, des gris, des couleurs, ... au final j'ai pris toutes les couleurs
 
Mais si j'avais attendu d'avoir un truc qui me plaise totalement j'étais pas près de vous proposer quoi que ce soit
(de toute façon je pense la retoucher plus tard, ya des trucs qui me dérangent comme le orange que j'ai sali avec du noir, le crayon qu'est moche et mal intégré, les courbures du C et T, et je voudrais rajouter des trucs comme un pinceau, une gomme, copeaux de crayons,...)
 
 
 

ah et une précision pour les noob: CAT 12, c'est parce que la catégorie graphisme est la douzième créée sur HFR.
(enfin je crois, j'étais pas virtuellement né )

voilà

merci... vieux

Ce qui m'a fait douté c'est que DSC est apparu en 13, je pensais que cette tanière à trolls était plus ancienne

feu bla-bla, renommage numérotage je crois

Testé et adopté.
ça c'est du sacré relooking .

La tu viens de me mettre minable

Juste 4 petites remarques :
- Le texte de la zone de recherche en haut à droite est de la même couleur que le fond. Du coup on ne voit pas ce qu'on tape.
- la page de réponse n'a quasiment pas bougée par rapport au reste du forum. ça fait un peu bizarre
- toujours dans la page de réponse, quand on utilise la fonction "aperçu", le texte est noir sur fond très foncé (la couleur d'arrière plan du forum) et il n'y a plus de retour à la ligne.

-Et juste pour chipoter, parce que je suis un peu jaloux : la couleur des liens n'est pas toujours très lisible pour les messages dont le fond est gris clair  (mais là ça vient peut être de mon écran   )

J'ai matté un peu le code.
C'est très propre tout ça; Et en plus y'a des commentaires  
PS : combien d'heures de boulot ?

Chapeau bas  

Edit : testé sur FF 3.6

C'est bien sympa.
 
Par contre c'est possible de changer l'image du haut en fonction de la cat consulté ?
Sinon j'aime bien la police des sujets non lu  
 
Ha la couleur de fond de l'aperçu rend illisible le texte et les retour a ligne ne sont plus pris en compte.
 
en tout great taf  
 
edit : Les liens au dessus pour ce logger son trop sombre.

En fait j'ai créé le topic dans ce but    

 

1. oui alors ça j'ai bien essayé vite fait d'y remédié en modifiant le bg-color mais j'ai pas réussi  
2. m'en suis pas occupé
3. j'avais pas vu, je note
4. peut-être, ça passe assez bien chez moi, mais j'essayerais de corriger ça.
 

merci
 
Dessin du header compris, j'ai bien dû y passer une grosse 20aine d'heure en tout qd même, voire 30
 
Je n'ai jamais bossé sur des tableaux avant ça donc il a fallu que je teste des trucs pour comprendre quels éléments avaient quels propriétés. La gestion des bordures m'a tellement emmerdé que c'est pour ça que je l'ai traité à part justement.
 
J'ai perdu bcp de temps sur le menu sous-cat aussi. Au départ j'étais parti sur ça...

et puis j'ai changé pour qq chose de plus austère qui "parasite" moins le header
Après je me suis rendu compte que je perdais le style de la sous-cat active qd un filtre (drapeau/fav) est actif car la structure des liens change.
Pas moyen de trouver une solution courte se basant sur les lien, impossible de cibler un élément précédent en CSS donc j'ai bien perdu du temps la dessus
 
Faites-y gaffe si vous vous y attelez.
 
 

Cat ou sous-cat ?
En tout cas j'ai prévu de faire au moins une banière HFR par défaut pour le reste du forum.
 

 
 les liens du haut, au survol ou en général tu veux dire ? (en général j'y toucherais pas je pense)
 

euh par contre je viens de tilter que les banières/cat ne devraient fonctionner qu'en cas de filtres non-activés avec stylish. En rajoutant du JS (donc avec greasemonkey) c'est possible par contre.
 
Sinon ya ptêt une solution CSS à chercher en constituant la banière à partir des liens arborescents mais bonjour la prise de tête

Du beau travail !    
 
On sait comment l'installer sous Chrome ?

j'ai réinstallé chrome pour voir (je l'utlise pas car j'arrive pas à le lancer depuis ma session limitée).

Il gère l'intégration des script greasemonkey en natif. Il suffit donc d'aller sur la page userstyle en lien et de cliquer sur le bouton qui va bien pour installer le thème.

Par contre, du fait de certaines différences d'interprétations CSS (et notament des propriétés spécifiques à FF préfixées par -moz, dont je n'ai pas encore cherché si il y avait équivalence) il y a de grosses très différences pour l'instant.

Autre truc, lors du chargement des pages il ya un "flash" pendant lequel on voit le thème original, ça je ne sais pas pourquoi ni si il ya moyen d'y remédier

edit:
en remplaçant les préfixes -moz de firefox par -webkit ça fera lire les propriétés par chrome et safari (préfixe -o pour opéra) , après il faut encore qu'elles existent et qu'elles soient interprétées de la même manière...

Ah bah oui, c'est très simple...    
 
Merci beaucoup, c'est nickel !

j'ai édité entre temps

Ho pitaing tu t'es donné du mal skopos    
 
J'imaginais pas voir ça de sitôt , c'est très stylé, j'adore    

y'en a qui font des sudokus moi je me casse la tête avec les ciblages CSS

drap'

Bon je viens de tester mon thème avec greaseMonkey sous FF, c'est moisi

Ya une latence à chaque chargement de page où on voit le thème original.

Vu que c'est du pur CSS, utilisez stylish, c'est instantané.

(si il ya un moyen pour empécher cette latence je suis preneur )

C'est BO comme tout ! J'adoooore ...
 
Moi je dis on lance un concours pour le bandeau du site !!!