Fermer

Connectez-vous

Vous devez être connecté pour faire ça.

Identifiez-vous

Votre compte spontex.org




Ou




Nouveau ?


Osez rejoindre le crew !

Données personnelles ?

Les informations sur ce site sont publiques mais la participation est réservée aux personnes enregistrées. S'enregistrer, ça veut dire "donner un login + un mot de passe". Après, vous pourrez renseigner plus d'informations mais RIEN d'autre n'est obligatoire. Si vous êtes tombé ici, c'est que vous avez voulu faire quelque chose réservé aux personnes enregistrées. De source fiable, j'ai appris que PERSONNE n'était JAMAIS mort après avoir rempli ce formulaire. Si vous ne voulez toujours pas vous enregistrer (libre à vous), vous pouvez continuer votre navigation, sans cliquer sur les liens qui mènent à cette page :-) Merci d'avoir lu jusqu'ici.

Titre
N'hésitez pas à partager nos informations... mais n'oubliez pas de nous citer !
you should never read that.

Changer le design de Spontex


Avatar de Stuffer
Stuffer - 23 août 2013 - 17:05:13

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 :
Logo Officiel

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 :
Logo Officieux

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.

Aperçu 1

Aperçu 2

Voila, à vos claviers si vous voulez vous faire votre propre skin Spontex.

Edit : Typos.


Avatar de piccolino
piccolino - 23 août 2013 - 16:52:23

J'aime bien le côté dark de ton css, moins la réflexion sur les boutons.


Avatar de Mako
Mako - 23 août 2013 - 16:53:22

Merci pour le tuto !
Après, je vais être honnête, ton design perso est… comment dire… très personnel…


Avatar de piccolino
piccolino - 23 août 2013 - 16:57:39

Après, je vais être honnête, ton design perso est… comment dire… très personnel…

La mode est passée des fonds sombres. Mais si tu enlèves les dégradés de gris et le logo en police cursive, ça prend forme.

Après, moi j'ai toujours un terminal en vert sur noir, alors…


Avatar de Stuffer
Stuffer - 23 août 2013 - 17:03:46

Après, je vais être honnête, ton design perso est… comment dire… très personnel…

Non mais je l'ai dit : ce design n'est pas réellement mon design perso. C'est principalement pour jouer avec les trucs. Clairement, mon vrai objectif final c'est plus de revenir vers un truc sombre et “à l'ancienne”.

Et ça ne ressemblera probablement pas à ça. ;)


Avatar de Dauby
Dauby - 23 août 2013 - 17:04:45

Super le tuto !


Avatar de Mako
Mako - 23 août 2013 - 17:04:22

Mais si tu enlèves les dégradés de gris

Bah justement, c'est ça qui est assez horrible pour les (mes) yeux. Mais si tu l'enlève, il reste plus que du noir effectivement…

Après, moi j’ai toujours un terminal en vert sur noir, alors…

Got it, on voit tout de suite que tu bosses pas et que tu glandes sur Spontex du coup (clin d’œil)


Avatar de mansuetus
mansuetus - 23 août 2013 - 23:02:45

@Stuffer, j'ai le regret de t'annoncer officiellement que j'ai chié dans la colle :-)

Pour corriger un ticket de Dauby (tout est donc de SA faute), j'ai dû ajouter un nouveau <div> autour du titre.

Et j'ai viré deux <br /> de la page shoutbox, devenus inutiles par une petite correction de CSS :-)


Avatar de Dauby
Dauby - 24 août 2013 - 12:16:27

Quel ticket ?


Avatar de mansuetus
mansuetus - 24 août 2013 - 14:34:58
Avatar de Arpegius
Arpegius - 24 août 2013 - 16:21:28

Tiens c'est pas mal çà. Merci Stuffer.


Avatar de Stuffer
Stuffer - 26 août 2013 - 12:49:56

@Stuffer, j’ai le regret de t’annoncer officiellement que j’ai chié dans la colle :-)
Pour corriger un ticket de Dauby (tout est donc de SA faute), j’ai dû ajouter un nouveau <div> autour du titre.
Et j’ai viré deux <br /> de la page shoutbox, devenus inutiles par une petite correction de CSS :-)

A priori, y'a rien de cassé, je suppose que tu as gardé le même sélecteur pour le titre ?


Avatar de mansuetus
mansuetus - 26 août 2013 - 13:41:18

Voui : mon but n'était pas de te faire chier ;-)


Avatar de Beri
Beri - 27 août 2013 - 14:15:46

Manque plus qu'un codeur pour refaire apparaître les bannières aléatoires avec le zizi sauteur et tout rentrera dans l'ordre.


Avatar de mansuetus
mansuetus - 27 août 2013 - 14:26:39

Ca c'est pas le plus compliqué, je pense même que j'ai toujours ça en stock.


Avatar de Staafu
Staafu - 27 août 2013 - 14:29:51

J'ai toujours regretté les bannières aléatoires, ça faisait très… Spontex, quoi.


Avatar de Dauby
Dauby - 27 août 2013 - 14:31:11

J'étais fan quand je me suis inscrit.



Ajouter un post

Vous pourrez poster une réponse quand vous serez loggué
se connecter ou créer un compte