PortailPortail  AccueilAccueil  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
{ What is the date today ? }

N'oubliez pas que l'histoire du forum suit le cours des saisons que nous vivons IRL à J+2 ans.

NOUS SOMMES EN 2017

Donc faites attention à vos dates de naissances et autres dates dans la chronologie de vos personnages.

{ Forum réservé aux membres déjà inscrits }


Le forum n'est plus administré.
Nous n'acceptons plus de nouvelles inscriptions pour le moment.
Pour toute demande de gestion
ouvrez un sujet dans la section réservée aux invités et un membre vous répondra.

{ Invité }

Si tu as cinq minutes
Fais un petit tour du côté du clic

Top Site #1 Top Site #2 Top Site #3 Top Site #4

"Ayez la clic attitude !"


Partagez | 
 

 Thème du forum & Charte Graphique

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2, 3  Suivant
AuteurMessage
Sacha de Lansley
● Magic Touch ●

avatar

Nombre de messages : 646
Age du personnage : 23 ans
Habitation : SDF, c'est un comble...
Occupation : Retraité surchargé
Avatar : Jugette
Date d'inscription : 03/05/2007
Coup de coeur : 251
Gallions : 8124

MessageSujet: Thème du forum & Charte Graphique   Jeu 25 Fév 2010 - 21:09





DESIGN & THEME

Ce sujet vous aide à mettre en forme vos messages et à comprendre le thème proposé par l'Alternatif. Vous trouverez en page 4 notre Charte Graphique, remise à jour à chaque changement de thème. Certaines balises HTML sont mises à votre disposition pour embellir vos présentations. Ces balises et l'ensemble du design, comprenant couleur, formes, choix esthétiques et images, de DP L'Alternatif sont la propriété de ses fondateurs et administrateurs, nous vous remercions de ne pas les reprendre en de hors de ce forum. Exception faites à la diffusion de publicité et d'acte de promotion positif directement lié à l'image de l'Alternatif.
L'Alternatif


Les traditionels - Ipsum Lorem
Qu'est-ce que ça donne quand on fait...


Visionner les effets des balises habituelles et quelques petits trucs simples que vous pouvez faire dans le forum en terme de mise en page.

Remarquez que toutes les images qui seront d'une largeur supérieure à 650px seront automatiquement redimensionnées afin de ne pas déformer le forum.


Gras

Integer ac tincidunt lorem. Vivamus scelerisque malesuada lorem, in dignissim lorem tincidunt id. Ut dui lectus, dictum non fringilla eget, consequat a felis. Aliquam eu est quis justo euismod luctus.

Italic

Integer ac tincidunt lorem. Vivamus scelerisque malesuada lorem, in dignissim lorem tincidunt id. Ut dui lectus, dictum non fringilla eget, consequat a felis. Aliquam eu est quis justo euismod luctus.

Souligné

Integer ac tincidunt lorem. Vivamus scelerisque malesuada lorem, in dignissim lorem tincidunt id. Ut dui lectus, dictum non fringilla eget, consequat a felis. Aliquam eu est quis justo euismod luctus.

Liens

[url=../]Integer ac tincidunt lorem. Vivamus scelerisque malesuada lorem, in dignissim lorem tincidunt id. Ut dui lectus, dictum non fringilla eget, consequat a felis. Aliquam eu est quis justo euismod luctus.[/url]

Citation

Citation :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id sem eget eros viverra varius vitae non tortor. Sed consequat accumsan condimentum. Curabitur euismod commodo erat sit amet blandit. Etiam eu arcu sed purus ultricies dignissim quis ut ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor egestas orci, sed adipiscing tellus malesuada et. Phasellus a congue sapien. Donec euismod, lacus et accumsan facilisis, metus est laoreet nulla, non fermentum magna nulla vitae nisi. Aenean eu mi eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fermentum placerat ligula, et dapibus urna scelerisque quis. Morbi aliquet ullamcorper quam, sed porttitor diam consequat ultrices.

Code

Code:
Aenean augue mi, euismod nec iaculis a, commodo nec lectus. Duis posuere felis sapien. Suspendisse vitae odio quis enim vehicula imperdiet et sed enim. Aenean mollis eleifend libero. Aliquam accumsan leo sem. In quis ligula enim, sit amet posuere nibh. In tortor felis, semper nec rutrum sit amet, mollis quis massa. Proin quis sollicitudin tellus. Donec condimentum nunc in augue porta consequat. Vivamus enim velit, mattis sit amet consequat pharetra, varius nec elit. Pellentesque eu sagittis nulla. Aliquam est urna, tincidunt at lobortis ac, volutpat ultrices sem. Nulla ornare, nisl nec sagittis feugiat, mauris diam interdum tortor, ac gravida arcu lectus eget dui. In pretium aliquet hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur cursus venenatis congue. Sed porta nunc ac felis eleifend molestie.

Spoiler

Titre du Spoiler:
 








Walked out this morning
Don't believe what I saw
A hundred billion bottles
Washed up on the shore
Seems I'm not alone at being alone
A hundred billion castaways
Are looking for a home
(Police)



Dernière édition par Sacha de Lansley le Lun 16 Aoû 2010 - 14:46, édité 3 fois
Revenir en haut Aller en bas
http://www.dpalternatif.com/forum
Egon Sutham
● Magic Touch ●

avatar

Nombre de messages : 334
Age du personnage : 24 ans
Habitation : Résidence Kaïtos (North London)
Occupation : Directeur de TASKS
Avatar : Jugette
Date d'inscription : 03/05/2007
Coup de coeur : 98
Gallions : 7723

MessageSujet: Re: Thème du forum & Charte Graphique   Ven 26 Fév 2010 - 19:06

HTML Les tableaux

Un cadre simple

TEXTE TEXTE
Code:
[table border="1" cellpadding="2" cellspacing="1"]
[tr]
[td]TEXTE TEXTE[/td]
[/tr]
[/table]

Cadre amélioré

Vous pouvez choisir la dimension, la couleur, la hauteur et la forme des bordures de votre cellule.
Vous pouvez même sélectionner les propriétés de son contenu.

TEXTE TEXTE TEXTE TEXTE
Code:
[table style="width: 350px; height: 150px; border: dashed 5px; border-color: #cc0000; background-color: orange;"]
[tr]
[td style="color: green; font-weight: bold; font-size: 18px; font-family: impact; letter-spacing: 2px; word-spacing: 10px; text-align: center; "]TEXTE TEXTE TEXTE TEXTE[/td]
[/tr]
[/table]

Tableau avec plusieurs cellules



ajoute une cellule horizontalement.

TEXTE CELLULE 1TEXTE CELLULE 2
Code:
[table border="1" cellpadding="2" cellspacing="1"]
[tr]
[td]TEXTE CELLULE 1[/td] [td]TEXTE CELLULE 2[/td]
[/tr]
[/table]


ajoute une colonne et dans cette colonne, il faut remettre les balises



TEXTE CELLULE 1TEXTE CELLULE 2
TEXTE CELLULE 3TEXTE CELLULE 4
Code:
[table border="1" cellpadding="2" cellspacing="1"]
[tr]
[td]TEXTE CELLULE 1[/td] [td]TEXTE CELLULE 2[/td]
[/tr]
[tr]
[td]TEXTE CELLULE 3[/td] [td]TEXTE CELLULE 4[/td]
[/tr]
[/table]

Et vous pouvez toujours personnaliser votre tableau comme expliqué ci-avant avec des propriétés telles que la hauteur "height:00px", la largeur "width:00px", la couleur du texte "color:#macouleur", la forme des bordures du tableau ou des cellules "border: #couleur 00px solid" etc.

HTML Les bordures des tableaux

Pour créer une bordure, il faut la signaler après le style=" ... ", comme ceci : style="border: red 1 px solid". Ce qui signifie que vous voulez une bordure rouge continue de 1 pixel d'épaisseur :

Bordure simple
Code:
[table style="border: red 1px solid"]
[tr]
[td]Bordure simple [/td]
[/tr]
[/table]

Vous pouvez personnaliser cette bordure à volonté en connaissant les différente variations ci-après :

Flèche Formes : solid, dotted, dashed, double, ridge, groove, inset, ouset etc.

SOLID

DOTTED

DASHED

DOUBLE

RIDGE

GROOVE

INSET

OUTSET
Code:
[table style="border: red 2px solid"]
[tr]
[td]SOLID[/td]
[/tr]
[/table][/td][td]

[table style="border: red 2px dotted"]
[tr]
[td]DOTTED[/td]
[/tr]
[/table]

[table style="border: red 2px dashed"]
[tr]
[td]DASHED[/td]
[/tr]
[/table]

[table style="border: red 4px double"]
[tr]
[td]DOUBLE[/td]
[/tr]
[/table]

[table style="border: red 4px ridge"]
[tr]
[td]RIDGE[/td]
[/tr]
[/table]

[table style="border: red 4px groove"]
[tr]
[td]GROOVE [/td]
[/tr]
[/table]

[table style="border: red 4px inset"]
[tr]
[td]INSET[/td]
[/tr]
[/table]

[table style="border: red 4px outset"]
[tr]
[td]OUTSET [/td]
[/tr]
[/table]
[td]






Flèche couleur : fastoche ! Dans la formule style="border: red 1px solid", il suffit de replacer le "rouge" par la couleur que vous souhaitez, sous forme de code couleur, d'hexadécimal ou de RVB.

Flèche l'épaisseur : Cette fois, on remplace le "1px" par l'épaisseur souhaitée, dans l'unité que vous préférez (px, em, cm)

HTML Le fond des cellules et du tableau

Pour personnaliser le fond, la formule magique est style="background-color: #macouleur" si vous souhaitez changer la couleur et style="background-image: url('adresse de l'image')".

Pour changer la couleur de fond du tableau, il faut appliquer la formule magique à [table][/table] ( [table style="background-color: red"] [/table] ) ; pour changer la couleur d'une cellule, il faut appliquer la formule à
(
).

Un exemple avec une couleur rouge pour la tableau et une couleur jaune-orange-vert-rose pour les cellules (huuu que ça va être moche ^^) :

CELLULE jauneCELLULE orange
CELLULE verteCELLULE rose

Vous pouvez aussi utiliser les class que nous mettons à disposition pour vos présentations.
Pour cela, il faut remplacer le style=" ... " par class="nom de votre class" ; par exemple : class="lara2" pour le tableau et class="frame" et class="pastille2" pour les cellules, ce qui donnera :

CELLULE frameCELLULE frame[/b]
CELLULE frameCELLULE pastille2

Alignement :

Et évidemment, dans les cellules, vous pouvez mettre des images, du texte, tout ce que vous voulez. AFin d'aligner le contenu, vous pouvez donner ces attributs aux cellules :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.

Code:
[table][tr][td style="text-align:center"]TEXTE[/td] [td style="text-align:justify"]TEXTE[/td][/tr]
[tr][td style="text-align:right"]TEXTE[/td] [td style="text-align:left"]TEXTE[/td][/tr][/table]

Attacher une image de fond aux cellule :

Nous avons vu que la formule magique était style="background-image: url('adresse de l'image')". Mais il faut préciser qu'on peut appliquer des effets à ce fond et, par exemple, situer spatialement l'image, lui demander de se reproduire horizontalement ou verticalement selon besoin etc.

  • background-image : appelle l'image

    • url('adresse de l'image');


  • background-repeat

    • Par défaut, si vous ne précisez pas, ça sera toujours "repeat". Autrement, il a :
    • repeat-x (l'image plusieurs fois horizontalement)
    • repeat-y (l'image plusieurs fois verticalement)
    • no-repeat (l'image ne se répète pas)


  • background-attachment (scrollou fixe mais dans les tableaux, je vois pas à quoi ça sert ! C'est bon pour les fond de page)
  • background-position

    • left top
    • left center
    • left bottom
    • right top
    • right center
    • right bottom
    • center top
    • center center
    • center bottom




Exemple :

Attachons cette image en fond : http://i68.tinypic.com/r7rkok.jpg

Mon bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Et cette image maintenant : http://oi51.tinypic.com/2hcdh6q.jpg

Mon bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

(c) Texture de wikimedia.org, gif de wikipedia

1er tableau
Code:
[table style="background-image: url('http://i68.tinypic.com/r7rkok.jpg'); background-repeat: repeat;"][tr]
[td] [color=black][size=18]<blockquote>Mon bla bla bla </blockquote>[/size][/color][/td]
[/tr][/table]

2ème tableau
Code:
[table border="2" style="background-image: url('http://oi51.tinypic.com/2hcdh6q.jpg'); background-repeat: no-repeat; background-position: bottom right;"][tr]
[td] Mon bla bla bla [/td]
[/tr][/table]

HTML Faire des tableaux relous
                   

     Je déteste les tableaux
   

     C'est horrible et ça déforme les forums, les tableaux
   

     C'est chiant les tableaux...
   


Code:
[table class="pastille4" width="50%" border="1" padding="1" cellspacing="1" valign="middle" align="center"]  [tr]    [td]
      Je déteste les tableaux
    [/td]    [td]
      C'est horribles et ça déforme les forums, les tableaux
    [/td]  [/tr]  [tr]    [td colspan=2]
      C'est chiant les tableaux...
    [/td]  [/tr][/table]

Pour ceux qui sont flémards, voici un petit générateur de tableau ^^ : http://www.quackit.com/html/html_table_generator.cfm

Attention Attention, les balises proposées par ce générateur son des balises HTML. Vous observerez un décalage vertical quand vous l'incorporerez dans un post. Si vous êtes très flémard comme moi, voici une astuce. Il faut simplement savoir manier le copier-coller et la fonctionner "remplacer par" dans "word" ^^
1. Copier-coller votre tableau et ses balises tr, td, table et tout le patacaisse dans un nouveau document word.
2. chercher la fonction "remplacer par" ou faites CTRL+H
3. taper < tr > dans la partie "rechercher" et taper dans la partie "remplacer par"
4. cliquer sur "remplacer tout".
5. réitérer pour chaque balise (td, table etc...)


Musique Faire écouter de la musique que vous avez hébergé



Code:
<embed src="http://klgallouet.free.fr/sound/son.mp3" height=20 width=140 ></embed>


[/td]




Iccam
Revenir en haut Aller en bas
Egon Sutham
● Magic Touch ●

avatar

Nombre de messages : 334
Age du personnage : 24 ans
Habitation : Résidence Kaïtos (North London)
Occupation : Directeur de TASKS
Avatar : Jugette
Date d'inscription : 03/05/2007
Coup de coeur : 98
Gallions : 7723

MessageSujet: Re: Thème du forum & Charte Graphique   Ven 26 Fév 2010 - 19:15




Images libres pour le forum
L'officiel du design du forum

Copyright Copyright DPA:



Code:
[img]http://klgallouet.free.fr/butt/acolade.gif[/img]



Code:
[img]http://klgallouet.free.fr/graf/sepcat.png[/img]



Code:
[img]http://klgallouet.free.fr/graf/sepcat2.png[/img]



Code:
[img]http://klgallouet.free.fr/graf/sepcat3.gif[/img]



Code:
[img]http://klgallouet.free.fr/graf/sepcat4.gif[/img]



Code:
[img]http://klgallouet.free.fr/graf/sepcat5.png[/img]



Code:
[img]http://klgallouet.free.fr/graf/sepcat6.png[/img]












Code:
[img]http://klgallouet.free.fr/graf/sep1a.gif[/img]

[img]http://klgallouet.free.fr/graf/sep1b.gif[/img]

[img]http://klgallouet.free.fr/graf/sep1c.gif[/img]

[img]http://klgallouet.free.fr/graf/sep1d.gif[/img]









Code:
[img]http://klgallouet.free.fr/graf/sep2a.gif[/img]

[img]http://klgallouet.free.fr/graf/sep2b.gif[/img]

[img]http://klgallouet.free.fr/graf/sep2c.gif[/img]

[img]http://klgallouet.free.fr/graf/sep2d.gif[/img]









Code:
[img]http://klgallouet.free.fr/graf/sep3a.gif[/img]

[img]http://klgallouet.free.fr/graf/sep3b.gif[/img]

[img]http://klgallouet.free.fr/graf/sep3c.gif[/img]

[img]http://klgallouet.free.fr/graf/sep3d.gif[/img]









Code:
[img]http://klgallouet.free.fr/graf/sep4a.gif[/img]

[img]http://klgallouet.free.fr/graf/sep4b.gif[/img]

[img]http://klgallouet.free.fr/graf/sep4c.gif[/img]

[img]http://klgallouet.free.fr/graf/sep4d.gif[/img]



Code:
[img]http://klgallouet.free.fr/graf/sep5a.gif[/img]









Code:
[img]http://klgallouet.free.fr/graf/sep6a.gif[/img]

[img]http://klgallouet.free.fr/graf/sep6b.gif[/img]

[img]http://klgallouet.free.fr/graf/sep6c.gif[/img]

[img]http://klgallouet.free.fr/graf/sep6d.gif[/img]





Code:
[img]http://img714.imageshack.us/img714/3446/empty2.png[/img]

[img]http://img193.imageshack.us/img193/9269/videcategv2.png[/img]


A partir d'ici, source: Copyright Le blog d'Athena



Code:
[img]http://klgallouet.free.fr/graf/separateur5.gif[/img]





Code:
[img]http://klgallouet.free.fr/graf/divider.png[/img]

[img]http://klgallouet.free.fr/graf/divider2.png[/img]





Code:
[img]http://klgallouet.free.fr/graf/separateur4.gif[/img]

[img]http://klgallouet.free.fr/graf/separateur10.gif[/img]







Code:
[img]http://klgallouet.free.fr/graf/separateur7.gif[/img]

[img]http://klgallouet.free.fr/graf/separateur8.gif[/img]

[img]http://klgallouet.free.fr/graf/separateur6.gif[/img]







Code:
[img]http://klgallouet.free.fr/graf/separateur11.gif[/img]

[img]http://klgallouet.free.fr/graf/separateur13.gif[/img]

[img]http://klgallouet.free.fr/graf/separateur14.gif[/img]

D'autres à venir...


© DPA





Iccam
Revenir en haut Aller en bas
Sacha de Lansley
● Magic Touch ●

avatar

Nombre de messages : 646
Age du personnage : 23 ans
Habitation : SDF, c'est un comble...
Occupation : Retraité surchargé
Avatar : Jugette
Date d'inscription : 03/05/2007
Coup de coeur : 251
Gallions : 8124

MessageSujet: Re: Thème du forum & Charte Graphique   Sam 27 Fév 2010 - 2:16




Et toujours, les codes couleurs
Qu'est-ce que ça donne dans le forum?


  • Liens pour les couleurs:


  • Noms des couleurs pour les balises et hexadécimal:

    olive olive #808000
    olivedrab olivedrab #6B8E23
    darkolivegreen darkolivegreen #556B2F

    darkgreen darkgreen #006400
    forestgreen forestgreen #228B22
    green green #008000
    lightgreen lightgreen #90EE90


    lawngreen lawngreen #7CFC00
    chartreuse chartreuse #7FFF00
    greenyellow greenyellow #ADFF2F
    yellowgreen yellowgreen #9ACD32


    lime lime #00FF00
    limegreen limegreen #32CD32


    darkseagreen darkseagreen #8FBC8F
    mediumseagreen mediumseagreen #3CB371
    seagreen seagreen #2E8B57
    lightseagreen lightseagreen #20B2AA


    springgreen springgreen #00FF7F
    mediumspringgreen mediumspringgreen #00FA9A
    palegreen palegreen #98FB98


    teal teal #008080
    darkcyan darkcyan #008B8B
    cyan cyan #00FFFF
    lightcyan lightcyan #E0FFFF


    darkturquoise darkturquoise #00CED1
    turquoise turquoise #40E0D0
    mediumturquoise mediumturquoise #48D1CC
    paleturquoise paleturquoise #AFEEEE


    aqua aqua #00FFFF
    aquamarine aquamarine #7FFFD4
    mediumaquamarine mediumaquamarine #66CDAA


    midnightblue midnightblue #191970
    darkblue darkblue #00008B
    navy navy #000080
    mediumblue mediumblue #0000CD
    blue blue #0000FF


    darkslateblue darkslateblue #483D8B
    mediumslateblue mediumslateblue #7B68EE
    slateblue slateblue #6A5ACD


    cornflowerblue cornflowerblue #6495ED
    royalblue royalblue #4169E1
    dodgerblue dodgerblue #1E90FF
    deepskyblue deepskyblue #00BFFF
    skyblue skyblue #87CEEB
    lightskyblue lightskyblue #87CEFA
    lightblue lightblue #ADD8E6


    cadetblue cadetblue #5F9EA0
    steelblue steelblue #4682B4
    lightsteelblue lightsteelblue #B0C4DE
    powderblue powderblue #B0E0E6
    aliceblue aliceblue #F0F8FF
    azure azure #F0FFFF
    lavender lavender #E6E6FA
    lavenderblush lavenderblush #FFF0F5


    blueviolet blueviolet #8A2BE2
    darkviolet darkviolet #9400D3
    violet violet #EE82EE
    mediumvioletred mediumvioletred #C71585
    palevioletred palevioletred #DB7093
    indianred indianred #CD5C5C
    darkred darkred #8B0000
    red red #FF0000
    orangered orangered #FF4500
    darkorange darkorange #FF8C00
    orange orange #FFA500


    fuchsia fuchsia #FF00FF
    indigo indigo #4B0082


    purple purple #800080
    mediumpurple mediumpurple #9370DB


    darkmagenta darkmagenta #8B008B
    magenta magenta #FF00FF


    deeppink deeppink #FF1493
    hotpink hotpink #FF69B4
    pink pink #FFC0CB
    lightpink lightpink #FFB6C1
    mistyrose mistyrose #FFE4E1
    plum plum #DDA0DD
    darkorchid darkorchid #9932CC
    mediumorchid mediumorchid #BA55D3
    orchid orchid #DA70D6


    crimson crimson #DC143C
    maroon maroon #800000
    firebrick firebrick #B22222
    tomato tomato #FF6347
    sienna sienna #A0522D
    chocolate chocolate #D2691E
    saddlebrown saddlebrown #8B4513
    brown brown #A52A2A
    sandybrown sandybrown #F4A460
    rosybrown rosybrown #BC8F8F
    thistle thistle #D8BFD8


    peru peru #CD853F
    coral coral #FF7F50
    lightcoral lightcoral #F08080
    darksalmon darksalmon #E9967A
    salmon salmon #FA8072
    lightsalmon lightsalmon #FFA07A


    burlywood burlywood #DEB887
    tan tan #D2B48C
    wheat wheat #F5DEB3
    peachpuff peachpuff #FFDAB9
    mintcream mintcream #F5FFFA
    cornsilk cornsilk #FFF8DC


    darkkhaki darkkhaki #BDB76B
    khaki khaki #F0E68C


    silver silver #C0C0C0
    darkgray darkgray #A9A9A9
    gray gray #808080
    dimgray dimgray #696969
    darkslategray darkslategray #2F4F4F
    slategray slategray #708090
    lightslategray lightslategray #778899
    lightgrey lightgrey #D3D3D3
    gainsboro gainsboro #DCDCDC


    navajowhite navajowhite #FFDEAD
    antiquewhite antiquewhite #FAEBD7
    ghostwhite ghostwhite #F8F8FF
    white white #FFFFFF
    whitesmoke whitesmoke #F5F5F5
    floralwhite floralwhite #FFFAF0
    snow snow #FFFAFA
    ivory ivory #FFFFF0


    yellow yellow #FFFF00
    gold gold #FFD700
    darkgoldenrod darkgoldenrod #B8860B
    goldenrod goldenrod #DAA520
    palegoldenrod palegoldenrod #EEE8AA
    lightgoldenrodyellow lightgoldenrodyellow #FAFAD2
    lightyellow lightyellow #FFFFE0
    beige beige #F5F5DC


    moccasin moccasin #FFE4B5
    lemonchiffon lemonchiffon #FFFACD
    blanchedalmond blanchedalmond #FFEBCD
    bisque bisque #FFE4C4
    papayawhip papayawhip #FFEFD5
    oldlace oldlace #FDF5E6
    linen linen #FAF0E6
    seashell seashell #FFF5EE
    honeydew honeydew #F0FFF0

    black black #000000










Walked out this morning
Don't believe what I saw
A hundred billion bottles
Washed up on the shore
Seems I'm not alone at being alone
A hundred billion castaways
Are looking for a home
(Police)

Revenir en haut Aller en bas
http://www.dpalternatif.com/forum
La Rose
● Admin ●

avatar

Nombre de messages : 703
Age du personnage : 5000 ans
Habitation : Poudlard University
Occupation : Dyade
Signature : Jugette - Christea
Avatar : Jugette - NeedChemical
Date d'inscription : 02/05/2007
Coup de coeur : 52
Gallions : 18314

MessageSujet: Re: Thème du forum & Charte Graphique   Lun 8 Mar 2010 - 3:04




Titres et présentation des messages


Pour commencer, vous vous conseillons d'activer le html dans les options des préférences de votre profil Lien vers sinon la plupart des présentations du forum ne fonctionnement pas.


HTML Effet du menu déroulant



Code:
  <div id="navme"><ul class="navlist2">
      <li><a href="#">bla bla bla</a></li></ul></div>


HTML Faire un soulignement personnalisé ou ligne

Pour faire des lignes droites, on utilise la propriété "border", comme dans les tableaux. Vous pouvez personnaliser les soulignements comme vous le voulez.

Pour appliquer cette fonction à du texte, il faut utiliser "span style="

exemples :

Mon texte souligné en continu

Mon texte souligné en double

Mon texte souligné en pointillé

Mon texte souligné en tirets

formules magiques :

Code:
<span style="border-bottom: 3px #FFF000 solid;">Mon texte souligné en continu</span>
<span style="border-bottom: 4px red double;">Mon texte souligné en double</span>
<span style="border-bottom: 1px #FFFFFF dotted;">Mon texte souligné en pointillé</span>
<span style="border-bottom: 2px dodgerblue dashed;">Mon texte souligné en tirets</span>

Ou encore :

Pour appliquer cette fonction à un paragraphe, il faut utiliser le "div style"

Mon texte souligné en continu


Mon texte souligné en double


Mon texte souligné en pointillé


Mon texte souligné en tirets


formules magiques :

Code:
<div style="border-bottom: 3px #FFF000 solid; padding-left:25px;">Mon texte souligné en continu</div>
<div style="border-bottom: 4px red double;">Mon texte souligné en double</div>
<div style="border-bottom: 1px #FFFFFF dotted; text-align:center;">Mon texte souligné en pointillé</div>
<div style="border-bottom: 2px dodgerblue dashed; text-align: right;">Mon texte souligné en tirets</div>


HTML Surligner et mettre en forme du texte surligné

Pour surligner, il faut utiliser la propriété "background-color".

bla bla bla bla


Hé hé, j'adore ces codes couleurs.

Code:
<div style="color: #696969; font-weight:bold; font-variant: small-caps; font-size:15px; background-color: #969696; padding-left: 5px;">bla bla bla bla</div>







Dernière édition par La Rose le Lun 23 Mai 2011 - 13:58, édité 2 fois
Revenir en haut Aller en bas
http://www.dpalternatif.com/
Elliot O'Malley
● Magic Touch ●

avatar

Nombre de messages : 323
Age du personnage : 21 ans
Habitation : Londres
Occupation : Interpète, acteur et compositeur
Avatar : Sonneper lol
Date d'inscription : 10/10/2007
Coup de coeur : 85
Gallions : 7481

MessageSujet: Re: Thème du forum & Charte Graphique   Sam 15 Jan 2011 - 0:44

HTML Des titres pour vos sujets

Balises selon votre utilisation:

Code:
<span class="style">Texte</span>
<div class="style">Texte</div>

Rappel : "span class" met en forme du texte. "div class" met en forme des paragraphes.

Vous pouvez aussi vous amuser à mettre les class que nous mettons à votre disposition pour embellir vos tableaux.

Exemple :

Texte cellule 1Texte cellule 2
Texte cellule 3Texte cellule 4

Code:
[table class="style"][tr][td class="style2"]Texte cellule 1[/td][td class="style2"]Texte cellule 2[/td][/tr]
[tr][td class="style2"]Texte cellule 3[/td][td class="style2"]Texte cellule 4[/td][/tr][/table]

Nous avons classé les balises suivantes par famille de "class"





21 ans
Sing Sing
Irlandais
Revenir en haut Aller en bas
Elliot O'Malley
● Magic Touch ●

avatar

Nombre de messages : 323
Age du personnage : 21 ans
Habitation : Londres
Occupation : Interpète, acteur et compositeur
Avatar : Sonneper lol
Date d'inscription : 10/10/2007
Coup de coeur : 85
Gallions : 7481

MessageSujet: Re: Thème du forum & Charte Graphique   Sam 15 Jan 2011 - 0:45

Les "Lara"

Formule magique :

Code:
<span class="lara#">Votre titre</span>
<div class="lara#">Votre texte</div>

●●● Lara 4 div

Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.


●●● Lara 3 div

Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.


●●● Lara 2 div

Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.


●●● Lara span

Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.





21 ans
Sing Sing
Irlandais
Revenir en haut Aller en bas
Elliot O'Malley
● Magic Touch ●

avatar

Nombre de messages : 323
Age du personnage : 21 ans
Habitation : Londres
Occupation : Interpète, acteur et compositeur
Avatar : Sonneper lol
Date d'inscription : 10/10/2007
Coup de coeur : 85
Gallions : 7481

MessageSujet: Re: Thème du forum & Charte Graphique   Sam 15 Jan 2011 - 0:45

Les "Kady"

Formule magique :

Code:
<span class="kady#">Votre titre</span>

●●● Kady span

Le texte de Kady : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Kady 2 span

Le texte de Kady2 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Kady 3 span

Le texte de Kady3 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Kady 4 span

Le texte de Kady4 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

Note ! Les deux dernières class sont à utiliser pour les class des liens. Exemple :

Ceci est un lien URL réalisé avec la class kady3
Ceci est un lien URL réalisé avec la class kady4

Code:
<a href="http://www.google.com" class="kady3"/>Ceci est un lien URL réalisé avec la class kady3</a>
<a href="http://www.google.com" class="kady4"/>Ceci est un lien URL réalisé avec la class kady4</a>





21 ans
Sing Sing
Irlandais
Revenir en haut Aller en bas
Elliot O'Malley
● Magic Touch ●

avatar

Nombre de messages : 323
Age du personnage : 21 ans
Habitation : Londres
Occupation : Interpète, acteur et compositeur
Avatar : Sonneper lol
Date d'inscription : 10/10/2007
Coup de coeur : 85
Gallions : 7481

MessageSujet: Re: Thème du forum & Charte Graphique   Sam 15 Jan 2011 - 0:45

Les "Théo"

Formule magique :

Code:
<span class="theo#">Votre titre</span>

●●● Théo span

Le texte de Théo : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Théo 2 span

Le texte de Théo2 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Théo 3 span

Le texte de Théo3 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Théo 4 span

Le texte de Théo4 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Théo 5 span

Le texte de Théo5 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Théo 6 span

Le texte de Théo6 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Théo 7 span

Le texte de Théo7 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

●●● Théo 8 span

Le texte de Théo8 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.

Note ! Les deux dernières class sont à utiliser pour les class des liens. Exemple :

Ceci est un lien URL réalisé avec la class theo5
Ceci est un lien URL réalisé avec la class theo6

Code:
<a href="http://www.google.com" class="theo5"/>Ceci est un lien URL réalisé avec la class theo5</a>
<a href="http://www.google.com" class="theo6"/>Ceci est un lien URL réalisé avec la class theo6</a>





21 ans
Sing Sing
Irlandais
Revenir en haut Aller en bas
Elliot O'Malley
● Magic Touch ●

avatar

Nombre de messages : 323
Age du personnage : 21 ans
Habitation : Londres
Occupation : Interpète, acteur et compositeur
Avatar : Sonneper lol
Date d'inscription : 10/10/2007
Coup de coeur : 85
Gallions : 7481

MessageSujet: Re: Thème du forum & Charte Graphique   Sam 15 Jan 2011 - 0:45

Les "Ludo"

Formule magique :

Code:
<span class="ludo#">Votre titre</span>
<div class="ludo#">Votre texte</div>

●●● Ludo span ou div

Le titre de Ludo

Le paragraphe de Ludo : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.


●●● Ludo 2 span ou div

Le titre de Ludo

Le paragraphe de Ludo2 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.


●●● Ludo 3 span ou div

Le titre de Ludo

Le paragraphe de Ludo3 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.


●●● Ludo 4 span ou div

Le titre de Ludo

Le paragraphe de Ludo3 : Cette suite de forums est une plateforme de communication pour interagir avec tous les acteurs de l'Alternatif (administrateurs, joueurs, invités, partenaires) autour de la gestion du forum, de votre personnage, de votre compte, de notre partenariat, des problèmes techniques, des évènements, des questions, des suggestions et de l'actualité etc. Si vous ouvrez un nouveau sujet, assurez-vous que le titre est clair et qu'il reflète bien votre problème. Évitez de mélanger dans un seul topic des discussions liées à un autre thème. Favorisez plutôt l'ouverture d'un nouveau topic.






21 ans
Sing Sing
Irlandais
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Thème du forum & Charte Graphique   

Revenir en haut Aller en bas
 
Thème du forum & Charte Graphique
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 3Aller à la page : 1, 2, 3  Suivant
 Sujets similaires
-
» Règlement du forum :
» CHICAGO - Forum RPG
» The Graphisma
» Indiana Teller, Le Forum Rpg
» CHARTE DU FORUM

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
L'Alternatif :: Contact avec un administrateur :: Autour du forum... :: Annonces & News-
Sauter vers: