Fermer

Login

You've been logged-out from spontex.

Authenticate

Your spontex.org account




Or




New here?


Create an account

Données personnelles ?

Information on this website is public but you have to be logged-in to share. Login, means "give a username and a password". Then, you'll be able to fill some more but nothing is mandatory. If you can read this, it means you clicked on something restricted to logged-in. NOBODY DIED registring here. If you wish not to register, feel free, but don't click on that link again :-)

Titre
Please share those informations... but do not forget to add a link to spontex!
you should never read that.

Changer le design de Spontex


Avatar of Stuffer
Stuffer - Aug. 23, 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 of piccolino
piccolino - Aug. 23, 2013 - 16:52:23

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


Avatar of Mako
Mako - Aug. 23, 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 of piccolino
piccolino - Aug. 23, 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 of Stuffer
Stuffer - Aug. 23, 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 of Dauby
Dauby - Aug. 23, 2013 - 17:04:45

Super le tuto !


Avatar of Mako
Mako - Aug. 23, 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 of mansuetus
mansuetus - Aug. 23, 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 of Dauby
Dauby - Aug. 24, 2013 - 12:16:27

Quel ticket ?


Avatar of mansuetus
mansuetus - Aug. 24, 2013 - 14:34:58
Avatar of Arpegius
Arpegius - Aug. 24, 2013 - 16:21:28

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


Avatar of Stuffer
Stuffer - Aug. 26, 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 of mansuetus
mansuetus - Aug. 26, 2013 - 13:41:18

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


Avatar of Beri
Beri - Aug. 27, 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 of mansuetus
mansuetus - Aug. 27, 2013 - 14:26:39

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


Avatar of Staafu
Staafu - Aug. 27, 2013 - 14:29:51

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


Avatar of Dauby
Dauby - Aug. 27, 2013 - 14:31:11

J'étais fan quand je me suis inscrit.



New post

You'll be able to post an answer when you are logged-in
Login/create an account