Mouk Membre sympa

 Age : 18 Inscrit le : 23 Fév 2008 Messages : 128 Localisation : Saint Gaudens 31
| Sujet: Le CSS du journal francophone! Lun 16 Juin 2008 - 0:53 | |
| Voilou voilou le fameux CSS, je me suis dit que ça pourrait aider un paquet de gens, donc autant le poster ici 
Par contre je suis crevé maintenant alors j'ai pas distingué les éléments par couleur, si vous voulez un truc plus détaillé (et compréhensible) cliquez ici
| Code: | Les différents éléments :
.title c'est les paramètres des titres dans Bienvenue, Concours, Déviations de la semaine, Collaborations, Le Staff .title2 c'est les paramètres des sous-titres dans dans Collaborations (Babascope, Mosaique - The Past, Auto-portrait méconnaissable...) .journalbox c'est la couleur de l'arrière plan et la bordure du journal .journalbox .journaltop paramètres du haut du journal (banière et co) .journalbox h2 réglages du titre du journal .list li.a paramètres de la section Mood (happy) .list li même chose mais pour quand il y a plus d'une ligne .forumfrbox1 c'est les paramètres des fenêtres contenant les textes (le cadre, la couleur de fond...) .corps c'est le paramètre de la scrollbar de la section Collaborations .corps2 c'est le paramètre de la scrollbar de l'image "Colonne Commune"
Le code avec explications (si tu veut modifier un peu le design)
.title { background-image:url(http://i46.servimg.com/u/f46/11/16/88/98/backti10.png); Le lien vers l'image de fond des titres background-position:top center; Position de cette dernière background-repeat:repeat-x; Paramètres de répétition (repeat-x = répéter sur l'axe x, pareil pour l'axe y) height:29px; Hauteur du bandeau du titre (ici, la taille de l'image pour que ça soit clean) border:1px #2b1d1d solid !important; Taille de la bordure et couleur (en héxadécimal) font-size:20px; Taille de la police d'écriture font-family:'Trebuchet MS' !important; Famille de la typo font-weight:bold; tu précise ici si tu veut que la typo soit grasse ou non (supprimer la ligne pour avoir le texte en mode normal) color:#2b1d1d !important; Couleur héxadécimal du texte du titre text-align:center; Alignement du texte (left ou right pour aligner a gauche ou à droite) } .title2 { même chose background-image:url(http://i46.servimg.com/u/f46/11/16/88/98/backti11.png); background-position:top center; background-repeat:repeat-x; height:29px; font-size:15px; font-family:'Trebuchet MS' !important; font-weight:bold; color:#2b1d1d !important; text-align:center; } .journalbox { background-color:#615b5b !important; Couleur du fond en hexadécimal border:1px #BAC6BA solid !important; Taille et couleur de la bordure du journal } .journalbox .journaltop { background-color:#615b5b !important; Couleur du fond en hexadécimal text-align:right !important; Alignement du texte (left ou righ pour aligner a gauche ou à droite) color:#2b1d1d !important; Couleur héxadécimal du texte "Journal Entry: Thu Jun 12, 2008, 11:21 PM" background-image:url(http://ns5.freeheberg.com/~mouk/forum-fr/uploads/1213266267.jpg); Image de fond background-position:top center; Position de cette dernière background-repeat:no-repeat; Paramètres de répétition (repeat-x = répéter sur l'axe x, pareil pour l'axe y) height:150px; Taille du haut du journal (plus grand que l'image pour que le texte y entre) } .journalbox h2 { padding:113px 5px 5px 20px; Position du texte "Forum Francophone (CSS)" text-align:left; Alignement du texte (left ou right pour aligner a gauche ou à droite) color:#2b1d1d !important; Couleur héxadécimal du texte "Forum Francophone (CSS)" font-family:'Verdana' !important; Famille de la typo font-weight:bold; tu précise ici si tu veut que la typo soit grasse ou non (supprimer la ligne pour avoir le texte en mode normal) font-size:16pt; Taille de la police d'écriture } .journalbox a { color:#2b1d1d !important; Couleur des liens } .journalbox a:hover { color:#ffffff !important; Couleur des liens quand la souris passe dessus } .list li.a { background-color:#787272 !important; Couleur du fond color:#d8e4d8 !important; Couleur du texte font-family:'Verdana' !important; Famille de la typo font-weight:normal; tu précise ici si tu veut que la typo soit grasse ou non (supprimer la ligne pour avoir le texte en mode normal) font-size:x-small; Taille de la police d'écriture text-align:left; Alignement du texte (left ou right pour aligner a gauche ou à droite) margin:0px 18px 0px 18px; Marges } .list li { même chose background-color:#d8e4d8 !important; color:#787272 !important; font-family:'Verdana' !important; font-weight:normal; font-size:x-small; text-align:left; margin:0px 18px 0px 18px; } .forumfrbox1 { background:#787272; Couleur du fond border:1px #2b1d1d solid !important; Taille de la bordure et couleur (en héxadécimal) margin-top:0px; Marge du haut padding:8px; Marges à l'interieur de la fenêtre color:#2b1d1d !important; Couleur du texte font-weight:normal; tu précise ici si tu veut que la typo soit grasse ou non (supprimer la ligne pour avoir le texte en mode normal) font-family:'Verdana' !important; Famille de la typo font-size:x-small; Taille de la police d'écriture text-align:left; Alignement du texte (left ou right pour aligner a gauche ou à droite) } .corps { overflow:auto; Ne pas supprimer, c'est la scrollbar width:316px; Largeur height:300px; Hauteur background:#787272; Couleur du fond } .corps2 { même chose overflow:auto; height:500px; background:#615b5b; }
Le code brut (à mettre dans la section CSS du journal)
.title { background-image:url(http://i46.servimg.com/u/f46/11/16/88/98/backti10.png); background-position:top center; background-repeat:repeat-x; height:29px; border:1px #2b1d1d solid !important; font-size:20px; font-family:'Trebuchet MS' !important; font-weight:bold; color:#2b1d1d !important; text-align:center; } .title2 { background-image:url(http://i46.servimg.com/u/f46/11/16/88/98/backti11.png); background-position:top center; background-repeat:repeat-x; height:29px; font-size:15px; font-family:'Trebuchet MS' !important; font-weight:bold; color:#2b1d1d !important; text-align:center; } .journalbox { background-color:#615b5b !important; border:1px #BAC6BA solid !important; } .journalbox .journaltop { background-color:#615b5b !important; text-align:right !important; color:#2b1d1d !important; background-image:url(http://ns5.freeheberg.com/~mouk/forum-fr/uploads/1213266267.jpg); background-position:top center; background-repeat:no-repeat; height:150px; } .journalbox h2 { padding:113px 5px 5px 20px; text-align:left; color:#2b1d1d !important; font-family:'Verdana' !important; font-weight:bold; font-size:16pt; } .journalbox a { color:#2b1d1d !important; } .journalbox a:hover { color:#ffffff !important; } .list li.a { background-color:#787272 !important; color:#d8e4d8 !important; font-family:'Verdana' !important; font-weight:normal; font-size:x-small; text-align:left; margin:0px 18px 0px 18px; } .list li { background-color:#d8e4d8 !important; color:#787272 !important; font-family:'Verdana' !important; font-weight:normal; font-size:x-small; text-align:left; margin:0px 18px 0px 18px; } .forumfrbox1 { background:#787272; border:1px #2b1d1d solid !important; margin-top:0px; padding:8px; color:#2b1d1d !important; font-weight:normal; font-family:'Verdana' !important; font-size:x-small; text-align:left; } .corps { overflow:auto; width:316px; height:300px; background:#787272; } .corps2 { overflow:auto; height:500px; background:#615b5b; }
Le corps du journal :
He oui, une fois l'interface paramétrée, il faut faire la mise en page... Le plus dur commence il faut donc faire les renvoi sur le journal vers les différents paramètres, ce qui donne par exemple pour les titres
<div class="title">Le texte du titre</div>
Il en va de même pour les fenêtres contenant les textes :
<div class="forumfrbox1"><div class="featureinfo>Le texte, les liens et tous le reste ici</div></div>
Ce qui nous donne ici le foutoir suivant : Légende : NE PAS TOUCHER | EDITABLE
<div class="title">Bienvenue</div><div class="forumfrbox1"><div class="featureinfo>Ami déviant
Te voici, errant dans les méandres de cet immense site au gré des courants, qui arrives (volontairement ou pas) sur le journal CSS du <a href="http://deviantart.fr-bb.com">forum francophone</a>. Bienvenue en ces lieux, infatigable voyageur.
Un forum francophone. Mais pour quoi faire ? Pour échanger autour de dA, tout dabord. Se partager nos coups de cur. Avoir des avis sur nos travaux en cours. Demander des conseils techniques. Venir pleurer quand deviantART est planté et que lon est au bord du désespoir, ne sachant que faire, limité par ses connaissances en informatiques ou son piètre niveau dangliche.
Eh oui, cest tout ça le forum. Mais pas que. On y parle aussi dart en général. La peinture, la sculpture, la musique, le macramé
ça tintéresse ? Viens en discuter avec nous. On y cause aussi de tout, et de rien (mais que dans les topics ad hoc, le flood, cest le mal).
Afin de stimuler notre créativité, des concours ouverts à tous les membres sont lancés régulièrement. Dans un esprit moins compétitif, des collaborations ont aussi lieu. Photos, dessins, écriture, et même parfois un peu de tout ça, il y en a pour tous les goûts.
Ce dA sort donc de sa torpeur afin de partager le palmarès de ces concours. De publier le résultat donné par certaine collaborations. De donner un aperçu de ce quil se passe, tout simplement, sur ce fameux forum.
N'hesite pas à faire un détour par notre dA commun :devforumfrancophone: et sinon, ben le principal en fait, viens nous rejoindre sur <a href="http://deviantart.fr-bb.com">le forum</a>!</div></div>
<div class="title">Concours</div><div class="forumfrbox1"><div class="featureinfo> <a href="#"><b>Vieux concours, c'est ici (mais pas encore :D)</b></a>
Nous avons l'honneur de vous annoncer le nom du vainqueur du concours N° 11, sur le thème du Sentiment.
This is the end, Beautiful friend, This is the end...
Tadam ! Le gagnant est... Dr Sock ( :devguimouth: ) avec un total de 9 voix!
:thumb75500546:
Vous pouvez vous rendre sur sa galerie ici : :devguimouth:
A sa suite Zaam avec 7 voix, Puis Naexii 6 voix.
Les oeuvres des autres participant sont visibles <a href="http://deviantart.fr-bb.com/les-concours-f15/concours-n11-sentiments-vote-t2186.htm">ici</a>. ;)
Encore merci et Bravo à tous les participants, c'était vraiment tout beau !
<b>Nouveau concours! : <a href="http://deviantart.fr-bb.com/les-concours-f15/concours-_-illustre-moi-une-chanson-t2288.htm">"Illustre moi une chanson"</a>, viens faire un tour!</b></div></div>
<div class="title">Déviations de la semaine</div><div class="forumfrbox1"><div class="featureinfo> L'élue de la semaine dernière je nomme : addict-coke (:devaddict-coke:) nous fais part de ses deviations préférées :thumb39674608::thumb51491044:
C'est maintenant à toi :devFeverforever: de nous faire part de tes deviations préférés (<a href="http://deviantart.fr-bb.com/deviations-preferees-de-la-semaine-f19/deviations-de-la-semaine-n16-feverforeverdu-20au-27-juin-t2300.htm">ici</a>)</div></div>
<div class="title">Collaborations</div><div class="corps2"><div class="forumfrbox1"><div class="featureinfo><div align="center"><a href="#"><b>Vieilles collabs, ici (mais pas encore non plus :XD:</b></a>
<div class="title2"><b><a href="http://deviantart.fr-bb.com/les-collaborations-f21/le-babascope-t2215.htm">Babascope</b></a></div>
:thumb87247738::thumb87247855::thumb87247964::thumb87248064::thumb87251550::thumb87251633::thumb87251707::thumb87251793::thumb87258173::thumb87258313::thumb87258425::thumb87258519:
<div class="title2"><b><a href="http://deviantart.fr-bb.com/les-collaborations-f21/mosaique-t1954-0.htm">Mosaique - The Past</b></a></div>
:thumb87260308:
Participants (de gauche à droite, et de haut en bas):
:icontxft::iconJacob-K::iconPsykoMarvin::iconConfettis::iconeosen::iconjo0o::icontim-grave::iconZaaMaMuZ::iconDeadIrishMan::iconFetish-Ginkgo:
<div class="title2"><a href="http://deviantart.fr-bb.com/les-collaborations-f21/une-autre-encore-idee-auto-portrait-meconnaissable-t2174.htm"><b>Auto-portrait méconnaissable</b></a></div>
:thumb88462797:
Participants :
:iconhelenegrasset::iconDeadIrishMan::icontim-grave::iconDavidGRochette::iconZaaMaMuZ::iconZiisko::iconConfettis::iconkadah::iconJacob-K:
<div class="title2"><b><a href="http://deviantart.fr-bb.com/les-collaborations-f21/colonne-commune-t2219.htm">Colonne commune (en cours)</b></a></div>
<div class="corps"><a href="http://ns5.freeheberg.com/~mouk//forum-fr/uploads/1213442971.jpg" title="Clic pour agrandir"><img src="http://ns5.freeheberg.com/~mouk//forum-fr/uploads/1213442971.jpg" alt="Clic pour agrandir" border="0" width="300" /></a> </div>
Participants (du bas au haut de l'image):
:iconNormanette::iconDavidGRochette::iconZaaMaMuZ::iconeosen::iconPsykoMarvin::icontim-grave::iconsteelcity::iconThePins::iconpatateman::iconmef::iconjacob-k::iconSilverwolf4000::iconziisko:</div></div></div></div>
<div class="title">Le Staff</div><div class="forumfrbox1"><div class="featureinfo><b>Fondateur : Moumine (:devmoumine:)</b>
<b>Administrateurs :</b>
K : kiky270281 (:devkiky270281:) Le gentil admin M : Moumine (:devmoumine:) La bienveillante créatrice N : Nine (:dev9-Nine-9:) La tyrannique admin
<b>Modérateurs</b> (Les vilains modos) :
C : Confettis (:devconfettis:) F : FeverForever (:devfeverforever:) J : Jacob (:devjacob-k:) K : Kaukatsu (:devkaukatsu:) M : marvin (:devpsykomarvin:) S : steelcity (:devsteelcity:) Y : Yamamura (:devyamamura:), Yessaameh (:devbroken-by-cycles:)</div></div> |
Sur ce bonne chance, moi je crois que je vais faire une pause sur le code maintenant  _________________ deviantART|MySpace
Futur journal CSS du forum? : ICI Besoin d'héberger des images pour le forum, c'est ICI |
|
addict-coke Habitué

 Age : 22 Inscrit le : 23 Mai 2006 Messages : 276 Localisation : Caen
| |
Mouk Membre sympa

 Age : 18 Inscrit le : 23 Fév 2008 Messages : 128 Localisation : Saint Gaudens 31
| |
ZaaM Pilier du Forum

 Age : 108 Inscrit le : 03 Mai 2007 Messages : 829 Localisation : Savoie
| Sujet: Re: Le CSS du journal francophone! Lun 16 Juin 2008 - 7:09 | |
| Effectivement, ça peut bien aider (surtout le .doc). Merci Mouk _________________ ...de passage Membre de la BBBBBBHS (Brigade Bour Bouter la BBB Hors d'iSi )
 |
|
kadah Pilier du Forum

 Age : 30 Inscrit le : 24 Aoû 2007 Messages : 1162
| Sujet: Re: Le CSS du journal francophone! Lun 16 Juin 2008 - 9:13 | |
| bravo hyper impressionnant toutes ces lettres! je plaisante au reveil, c'est pas forcement drôle _________________ Membre novice de la BBBBBBHS (Brigade Bour Bouter la BBB Hors d'iSi ) Membre expérimentée du comité unanime des glandeurs de France et d'ailleurs |
|
Tim-Grave Rebelle de la foret


 Age : 21 Inscrit le : 08 Juil 2007 Messages : 2188 Localisation : Bord'eau
| Sujet: Re: Le CSS du journal francophone! Lun 16 Juin 2008 - 9:41 | |
| ah ben ça m'a l'air assez clair tous ça, beau boulot Mouk ! _________________ Mon Deviant-Art | Mon BlogBD
je suis un type bien |
|
omentie Déesse Sarasvatî


 Age : 50 Inscrit le : 03 Avr 2008 Messages : 3284 Localisation : near Marseille
| Sujet: Re: Le CSS du journal francophone! Lun 16 Juin 2008 - 11:13 | |
| | Tim-Grave a écrit: | | ah ben ça m'a l'air assez clair tous ça, beau boulot Mouk ! |
ah oui j'allais le dire !! !!!! _________________

membre de la CDCQNSPEEQSF (Confrérie De Ceux Qui Ne Savent Pas Editer Et Qui S'en Foutent) |
|
Mouk Membre sympa

 Age : 18 Inscrit le : 23 Fév 2008 Messages : 128 Localisation : Saint Gaudens 31
| |
Joss54 Membre sympa

 Age : 18 Inscrit le : 08 Juil 2008 Messages : 184 Localisation : Nancy
| |
Yzabel Membre occasionnel

 Age : 29 Inscrit le : 28 Mai 2008 Messages : 68
| Sujet: Re: Le CSS du journal francophone! Jeu 10 Juil 2008 - 10:41 | |
| Merci d'avoir partagé cette CSS, elle m'a bien aidée pour redonner un petit coup de neuf à mon journal.  _________________ Et un bout de dA, un La Pierre de l'Ange |
|