Salut tout le monde,
Comme c'est bientôt le week-end et que je pense à ceux qui s'ennuient, voila un petit topic pour ceux qui comme moi ne veulent pas accepter la nouvelle apparence du site.
Vous n'avez pas réellement besoin de savoir comment tout marche, mais évidemment avoir l'habitude de coder (et notamment coder pour le Web) vous aidera grandement.
Pour ceux qui ne connaissent rien, voila quelques principes importants pour aborder la chose :
- Si le contenu des pages est propre à chacune selon ce que mans' veut y mettre, la quasi-totalité de leur design est concentrée dans un seul fichier le Cascading Style Sheets (ou CSS).
– L'actuel est visible ici : CSS Spontex original
– Grâce à des extensions de votre navigateur (telles que Stylish pour Firefox, Chrome ou Opera) vous pouvez utiliser un CSS alternatif pour un site ou domaine donné.
– Vous pouvez donc vous faire une version perso de Spontex en copiant et modifiant le CSS d'origine pour changer ce qui ne vous plait pas.
- Un CSS utilise un principe assez simple : on associe à un sélecteur (une sorte d'identifiant) certaines propriétés (position, couleur, taille etc…).
– Pour identifier le sélecteur que vous voulez modifier, il faut afficher le code source de la page concernée (Clic-droit -> Source ou Voir le code de la page ou tout autre truc qui y ressemble).
– Une fois le sélecteur trouvé, il faut le localiser dans le CSS pour voir et éditer les propriétés et leur valeurs.
- Une fois les changements apportés, comment les appliquer ? Simple. Ouvrez Stylish->Gérer les styles->Nouveau. Un style “Nouveau style” apparait -> Editez-le. Changer éventuellement le nom, précisez par exemple le domaine (spontex.org) et coller l'intégralité de votre CSS dans l'éditeur. Voila, vous pouvez activer/désactiver votre style perso à votre guise. :)
Exemple : Je veux changer le logo Spontex (visible sur toutes les pages).
On voit ça :
En affichant le code source on comprends que cela vient de :
<div id="meta-wrap-top">
<div id="titre">
<a href="/"><img src="//media.spontex.org/css/style/imgs/titre.jpeg" title="spontex.org" id="logosptx" alt="Titre" /></a>
</div>
<div id="tools-titre">
On peut noter, entre autres, que la balise contenant l'image (<img…./>) contient l'id “logosptx”.
En cherchant cet id dans le CSS on ne trouve rien… Ce qui veut simplement dire que mansuetus n'as pas défini de propriété spéciale (en fait c'est normal, il l'a ajouté exprès pour que je puisse le changer :D).
Mais rien ne nous empêche d'en créer !
En ajoutant :
#logosptx
{
content:url("http://obbob.alwaysdata.net/images/myspontex/titre.png");
}
On remplace alors le logo par cette autre image :
Faites-vous plaisir, testez avec n'importe quelle image, ça peut être drôle.
Un autre exemple : vous voulez mettre les pseudos des gens qui postent sur la shout en gras ?
En fouillant un peu, on voit que les pseudos sont identifiés par le sélecteur “shoutboxowner” (pour tout le monde sauf soi) et par “shoutboxowneryou” pour soi-même.
En regardant le CSS on trouve :
.shoutboxowner
{
color: #535353;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
white-space: pre;
}
.shoutboxowneryou
{
color: #537baa;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
white-space: pre;
}
Hop ! On ajoute “font-weight: bold;” dans chacune des sections, et le tour est joué.
Bon, c'est un peu rapide comme post, et je ne vais pas vous apprendre ni le HTML ni le CSS en quelques lignes, mais vous avez le principe et beaucoup d'excellent tutos sur le net, donc y'a moyen de s'en sortir même pour les novices. ;)
Dernier point : un exemple de CSS maison. Au départ je voulais refaire l'ancien design, puis en faisant le con pour tester plein de trucs, je me suis amusé à faire un truc totalement from scratch.
Alors je préviens : c'est fait à l'arrache, entre 12h et 14h au boulot en douce les 3 derniers jours avec encore pas mal de trucs foireux et c'est pas forcement génial, mais ça donne un bon aperçu de tout ce que l'on peut changer.
Voila, à vos claviers si vous voulez vous faire votre propre skin Spontex.
Edit : Typos.