Forum Francophone deviantART
Forum francophone sur ce fameux Deviant-Art
 
AccueilAccueil  PortailPortail  CalendrierCalendrier  FAQFAQ  RechercherRechercher  S’enregistrerS’enregistrer  ConnexionConnexion  
Poster un nouveau sujet   Répondre au sujet
 

Le CSS du journal francophone!

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Mouk
Membre sympa


Sexe:Masculin
Age : 18
Inscrit le : 23 Fév 2008
Messages : 128
Localisation : Saint Gaudens 31

MessageSujet: 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 d’abord. Se partager nos coups de cœur. Avoir des avis sur nos travaux en cours. Demander des conseils techniques. Venir pleurer quand deviantART est planté et que l’on est au bord du désespoir, ne sachant que faire, limité par ses connaissances en informatiques ou son piètre niveau d’angliche.

Eh oui, c’est tout ça le forum. Mais pas que.
On y parle aussi d’art en général. La peinture, la sculpture, la musique, le macramé… ça t’intéresse ? Viens en discuter avec nous. On y cause aussi de tout, et de rien (mais que dans les topics ad hoc, le flood, c’est 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 qu’il 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
Revenir en haut Aller en bas
addict-coke
Habitué


Sexe:Masculin
Age : 22
Inscrit le : 23 Mai 2006
Messages : 276
Localisation : Caen

MessageSujet: Re: Le CSS du journal francophone!   Lun 16 Juin 2008 - 2:25

beau boulot le mouk
_________________
mon DA => http://addict-coke.deviantart.com/
mon stock => http://stock-coke.deviantart.com/
Revenir en haut Aller en bas
Mouk
Membre sympa


Sexe:Masculin
Age : 18
Inscrit le : 23 Fév 2008
Messages : 128
Localisation : Saint Gaudens 31

MessageSujet: Re: Le CSS du journal francophone!   Lun 16 Juin 2008 - 2:27

Hehe merci ^^ C'est qu'il s'en ai vu pour faire ça! (j'aime bien parler à la 18ième personne)
_________________
deviantART|MySpace

Futur journal CSS du forum? : ICI
Besoin d'héberger des images pour le forum, c'est ICI
Revenir en haut Aller en bas
ZaaM
Pilier du Forum


Sexe:Masculin
Age : 108
Inscrit le : 03 Mai 2007
Messages : 829
Localisation : Savoie

MessageSujet: 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 )
Revenir en haut Aller en bas
kadah
Pilier du Forum


Sexe:Féminin
Age : 30
Inscrit le : 24 Aoû 2007
Messages : 1162

MessageSujet: 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
Revenir en haut Aller en bas
Tim-Grave
Rebelle de la foret
Rebelle de la foret


Sexe:Masculin
Age : 21
Inscrit le : 08 Juil 2007
Messages : 2188
Localisation : Bord'eau

MessageSujet: 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
Revenir en haut Aller en bas
omentie
Déesse Sarasvatî
Déesse Sarasvatî


Sexe:Féminin
Age : 50
Inscrit le : 03 Avr 2008
Messages : 3284
Localisation : near Marseille

MessageSujet: 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)
Revenir en haut Aller en bas
Mouk
Membre sympa


Sexe:Masculin
Age : 18
Inscrit le : 23 Fév 2008
Messages : 128
Localisation : Saint Gaudens 31

MessageSujet: Re: Le CSS du journal francophone!   Lun 16 Juin 2008 - 13:37

Merci tout le monde! Bon alors apparemment j'ai fais ça de manière compréhensible (très rare chez moi ) mais si jamais quelqu'un à une question, je suis là
_________________
deviantART|MySpace

Futur journal CSS du forum? : ICI
Besoin d'héberger des images pour le forum, c'est ICI
Revenir en haut Aller en bas
Joss54
Membre sympa


Sexe:Masculin
Age : 18
Inscrit le : 08 Juil 2008
Messages : 184
Localisation : Nancy

MessageSujet: Re: Le CSS du journal francophone!   Mar 8 Juil 2008 - 12:22

ben pour ceux qui calle rien, un petit tour sur le site du zéro n'est pas exclu (non, c'est pas une insulte OH !!!)

cliquez-ici pour vous inicier à l'art du code incompréhensible au départ, facile à l'arrivée !
Revenir en haut Aller en bas
Yzabel
Membre occasionnel


Sexe:Féminin
Age : 29
Inscrit le : 28 Mai 2008
Messages : 68

MessageSujet: 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
Revenir en haut Aller en bas

Le CSS du journal francophone!

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Francophone deviantART :: Deviant ART :: CSS-
Poster un nouveau sujet   Répondre au sujet