L'atelier

Faire un thème CSS pour BDA

LES APPARENCES DU SITE par Egg
Faire un thème CSS pour BDA

INTRODUCTION
Vous pouvez changer l'apparence du site BDAmateur.com en vous rendant sur "Les apparences" dans le menu à droite, rubrique "Le Site".

A moins de posséder un logiciel graphique permettant d'éditer des "feuille de style" (CSS : Cascading Style Sheet), la création de votre propre thème ne necessitera que l'utilisation d'un éditeur de texte (style "Jext" ([lien]), mais un simple "bloc-note" fera l'affaire), ainsi que quelques connaissances CSS.
(et du temps, beaucoup de temps ;oD)
Il vous faudra de plus un espace de stockage sur le ouaibe, pour mettre votre CSS en ligne !

lien utile : débuter avec les CSS ([lien])
pour les furieux : les spécifications CSS 2 ([lien])
pour ceux que ça interesse :
le (X)HTML en 1 heure !([lien])

Si pendant le processus de création vous êtes perdu, et que vous voulez remettre l'apparence par défaut du site, cliquez ici : remettre l'apparence par défaut du site ! ([lien])

Le site est structuré de façon "logique" (enfin ... on a essayé ...)
Ainsi le titre du site est placé dans une balise "H1",
les sous titres dans des balises "H2",
les sous sous titre dans des balises H3,

Concrètement, sur la page de présentation d'un membre ([lien]), le titre du site est dans une balise H1, le nom du membre dans une balise H2, une balise H3 entoure le texte "Présentation de <nom du membre>" et des balises H4 entourent les sous titres "bio", "influences" et "projet en cours".

L'apparence "Vide" ([lien])vous donne une idée de la structuration du site (en fait l'apparence "Vide" correspond au site "sans apparence", lorsque vous commencerez votre propre thème, vous partirez de ce point là : le vide !)

LES COULEURS

La première chose à faire est de trouver les couleurs de votre thème.
Pour commencer vous pouvez créer un fichier texte que vous renommez "bda.css"
Dedans collez le code suivant
CODE
/*** les balises de base ***/

/** le corps du document **/
body {
/*la couleur du texte en général*/
color: #405b4c;

/*la couleur de fond de la page*/
background-color: #23a509;
}

/** les sous titres **/
h2 { color: #e0ce04; }

h3 { color: #f9dd09; }


/** la couleur des liens (le titre (H1) est en fait un lien) **/
a { color: #e89600; }

Les couleurs (exemple #3B7EBB) sont exprimés en code hexadecimal RVB (Rouge Vert Bleu) ou RGB (la même chose, mais en anglais).
Le blanc correspond au code #FFFFFF, le noir au code #000000
Le rouge #FF0000, le vert #00FF00 et vous devinez le bleu : #0000FF
A la place des codes RVB, on peut utiliser certains noms de couleur (en anglais), comme : red, blue, purple, black, silver, ... cela semble plus pratique, mais le choix des couleurs s'en trouve plus restreint.

Vous pouvez modifier les couleurs du code ci dessus. (sinon vous aurez droit à un truc moche avec des écritures orange/jaunatre sur fond vert)

Pour trouver des codes couleurs, renseignez vous sur internet, ou servez vous de vos logiciels de création/retouche d'image (Gimp, Photoshop, ...).

une fois votre fichier bda.css enregistré, mettez le en ligne (sur votre site perso) puis allez sur bdamateur.com, connectez vous, et dans le menu "les apparences" précisez l'adresse de votre fichier CSS.
Et là sous vos yeux ébahis apparaitra le site avec vos couleurs ! (oui, il y'a du boulot)

LA STRUCTURE DU SITE BDAMATEUR.COM

Le site repose sur le squelette suivant :

CODE
<body>


<!-- début "entête"-->
<div id="header">

<!-- début "logo" -->
<div id="logo"><h1><a href><span>www.BDAmateur.com</span></a></h1></div>
<!-- fin "logo" -->

</div>
<!-- fin "entête"-->


<!-- début "contenu" -->
<div id="content">

<!-- début "de la section (liste des membres, à propos de BDA, Tribune, ...)" -->
<div id="nom_de_la_section_en_anglais">

<h2><span>Nom de la section</span></h2>

(contenu de la section)

</div>
<!-- fin "de la section" -->

</div>
<!-- fin "contenu" -->


<hr />


<!-- début "menu"-->
<div id="menu">

(menu : voir détail ci dessous)

</div>
<!-- fin "menu"-->


</body>


Toutes les parties du site repose sur cette structure.

La page d'accueil et la zone membre (présentation et galerie d'un membre) sont 2 parties du site qui sont un peu plus complexes, mais leur base est la même ! (seul la division "contenu" sera un peu plus complexe)
Leur structure sera exposée plus bas.

Le menu est composé de la sorte :
CODE

<!-- début "menu"-->
<div id="menu">

<!-- début "menu connexion" / "menu deconnexion" -->

(menu connexion/deconnexion : voir détail ci dessous)

<!-- fin "menu connexion" / "menu deconnexion" -->

<!-- début menu "navigation" -->
<div id="menuhome">
<a href><span>Accueil de BDA</span></a><br />
</div>

<div id="menubda"><h3>Les BDA</h3>
<ul>
<li id="menulistmember"><a href>Les membres</a></li>
<li id="menulistcomics"><a href>Les planches</a></li>
<li id="menulistscenario"><a href>Les scénarios</a></li>
<li id="menurandom"><a href>Hasard</a></li>
</ul>
</div>

<div id="menu9zone"><h3>La 9ème zone</h3>
<ul>
<li id="menulistlink"><a href>Le portail des BDA</a></li>
<li id="menustudio"><a href>L'atelier</a></li>
<li id="menulisttechlink"><a href>Liens techniques</a></li>
<li id="menufile"><a href>Les dossiers</a></li>
<li id="menuedition"><a href>Les publications</a></li>
<li id="menugame"><a href>Les jeux</a></li>
<li id="menucadavreexquis"><a href>Cadavre-exquis</a></li>
</ul>
</div>

<div id="menucommunication"><h3>Communiquer</h3>
<ul>
<li id="menufreespeech"><a href>La tribune</a></li>
<li id="menuchat"><a href>Le chat</a></li>
<li id="menuforum"><a href>Le forum</a></li>
</ul>
</div>

<div id="menusite"><h3>Le site</h3>
<ul>
<li id="menufaq"><a href>La F.A.Q.</a></li>
<li id="menuabout"><a href>A propos de BDA</a></li>
<li id="menuskin"><a href>Les apparences</a></li>
<li id="menuedito"><a href>Les éditos</a></li>
<li id="menucontact"><a href>Contactez-nous !</a></li>
</ul>
</div>

<!-- fin menu "navigation" -->

<!-- début "nombre de connectés sur BDA" -->
<div id="numberofconnected"><a href>Un membre</a> <abbr>sur le site</abbr></div>
<!-- fin "nombre de connectés sur BDA" -->

</div>
<!-- fin "menu"-->


le menu connexion / deconnexion n'est pas le même selon que l'on soit ... connecté ou deconnecté !

si on est connecté, le menu deconnexion est affiché :
CODE
<!-- début "menu deconnexion" -->
<div id="menuconnection">
<form>
<div id="formdeconnection">
<input id="buttonconnection" type="submit" value="Deconnexion" /><br /></div>
</form>
<div><a href>Mon profil</a><br />
<a href>Ma galerie</a></div>
</div>
<!-- fin "menu deconnexion" -->

si on est deconnecté, le menu connexion est affiché :
CODE
<!-- début "menu connexion" -->
<div id="menuconnection">
<form>
<div id="formconnection">
<label id="pseudo" for="inputpseudo">pseudo :</label><input id="inputpseudo" type="text" size="13"/><br />
<label id="password" for="inputpassword">mot de passe :</label><input id="inputpassword" type="password" size="13"/><br />
<input id="buttonconnection" type="submit" value="Connexion" /><br />
</div>
</form>
<div>
<a href>Inscription</a><br />
<a href>Mot de passe</a>
</div>
</div>
<!-- fin "menu connexion" -->


[à venir]

REMPLACER DU TEXTE PAR UNE IMAGE

Exemple : dans le thème "BDA bleu & simple", le titre du site ("www.BDAmateur.com") est remplacé par un logo.

Pour remplacer du texte par une image, il faut tout d'abord connaitre "l'identifiant" du texte que l'on veut remplacer.
Pour ce faire, utilisez le thème "Vide", repérez le texte que vous voulez remplacer (par exemple : le titre "www.BDAmateur.com") et affichez la source du document (l'opération est différente selon votre navigateur. Sous Mozilla et assimilés, il suffit de faire "Ctrl + u" ou menu "Affichage > Code source de la page")

[à venir : démarche sous Internet Explorer ! si vous avez IE merci de faire un post avec le numéro de version de votre IE et la façon dont vous affichez la source d'un document]

Une fois la source affichée, il vous faut retrouver le texte que vous voulez remplacer (faites une recherche) puis repérer les "id" des balises entourant le texte à remplacer.

Dans notre exemple (remplacer le titre) nous allons trouver le texte suivant :
CODE
<div id="logo"><h1><a href="[lien]" title="www.BDAmateur.com"><span>www.BDAmateur.com</span></a></h1></div>


Nous voulons remplacer "www.BDAmateur.com" par une image.
Dans notre fichier bda.css nous allons ajouter les lignes suivantes :
CODE
/** tout d'abord nous rendons invisible le texte dans le "span" du "h1" du "logo" **/
#logo h1 span {display: none;}

/** puis nous affichons l'image **/
#logo {
/*la hauteur de l'image :*/
height: 154px;

/*la largeur de l'image*/
width: 154px;

/*l'adresse de votre image*/
background-image: url([lien]);
}


Nota Bene : il existe plusieurs techniques pour remplacer du texte par une image en CSS, n'hésitez pas à nous faire part de vos découvertes et trouvailles.

LE MOT DE LA FIN

Un conseil d'ami : si ce n'est déjà le cas, utilisez le navigateur Mozilla Firebird, il propose une fonctionnalité des plus sympathiques : après avoir selectionné une partie d'une page, le "clic droit > Code source de la selection" affichera ... le code source de la selection ! et c'est bien pratique pour connaitre les noms des éléments HTML dont vous voulez modifier la présentation !
(de plus, le fait que Firebird ait moins de problème de sécurité qu'Internet Explorer ne gache rien à son utilisation ;oD)

Ce didactitiel n'est pas figé, il évoluera en fonction de vos commentaires et remarques.

N'hésitez pas à poster les adresses de vos CSS, ainsi que vos questions sur le sujet !

egg -- didactitiel thème CSS BDA v0.03

Vous pouvez suivre ce sujet directement sur le forum à l'adresse suivante : [lien]

"Faire un thème CSS pour BDA" par SwaN (06/02/2004)