Forum
Forum :: Aide en CSS
Aide à l'inspiration pour personnaliser un forum
<< Sujet précédent | Sujet suivant >>
Moderateurs: Alexis
Auteur Message
dj clash
Messages: 493
Site internet
Salut Jiix (ou autre graphiste)

Voilà j'essaye en ce moment de personnaliser le design d'un forum mais je manque cruellement d'inspiration... j'aurai bien besoin d'un peu d'aide

Si quelqu'un peut m'aider à le personnaliser ce serait tip top

Merci

ATTENTION CHANGEMENT !
Nouveau pseudo ! : Julien.
Me contacter par Message privé : Cliquez ici
image
Coach'Animation, un site pour vous aider à faire de votre évènement
un évènement inoubliable et surtout dans les règles de l'art !...
Alexis

Messages: 1136
Site internet
C'est pas évident de donner des conseils comme ça dans le vide...

C'est pour quel forum ?

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

dj clash
Messages: 493
Site internet
désolé, c'est pour le site coachanimation

si tu peut éventuellement me proposer un design simple tout prêt car j'ai fait trop de boulot

Merci

ATTENTION CHANGEMENT !
Nouveau pseudo ! : Julien.
Me contacter par Message privé : Cliquez ici
image
Coach'Animation, un site pour vous aider à faire de votre évènement
un évènement inoubliable et surtout dans les règles de l'art !...
Nicolaspp
Messages: 21
Site internet
Edit: Ooops O_o

- Edité le 27/02/2010 à 12:34 -

image
dj clash
Messages: 493
Site internet
Bonjour Nicolaspp
 
Le nom est dans mon message précédant le tiens...

ATTENTION CHANGEMENT !
Nouveau pseudo ! : Julien.
Me contacter par Message privé : Cliquez ici
image
Coach'Animation, un site pour vous aider à faire de votre évènement
un évènement inoubliable et surtout dans les règles de l'art !...
Alexis

Messages: 1136
Site internet
Voilà, dis moi ce que tu en penses :


body {
    margin: 0;
    padding: 0; 
    font-size: 12px; 
    font-family: verdana, arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background-color: #333333; }

td {
    background: none;
    font-family: verdana,arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #FFFFFF;
    padding: 0px;
    text-align:left; }

a {
    color: #FFFFFF;
    text-decoration: none; }

a:hover {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: none; }

a img {
    border: none; }

.hidden{
    display: none; }

#page {
    margin-top: 0px;
    margin-bottom: 0px; 
    padding: 0;
    width: 990px;
    text-align: left;
    background-color: #000000; }

#header {
    padding: 0px;
    margin: 0px;
    height: 280px;
    width: 100%;
    background-color: #000000;
    background-image: url(http://www.upload-perso.net/coach-animation/images/header.jpg); 
    background-repeat: no-repeat; }

#header h1{
    text-align: right;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    color: #FFFFFF; }

#header h1 a, #header h1 a:hover{
    color: #FFFFFF; }

#header h2 {
    display: block;
    margin-top: 233px;
    padding: 0px;
    font-size: 16px;
    text-align: center;
    color: justify; }

#header h2 a {
    color: #FFFFFF;  }

#header h2 a:hover {
    color: #F689EF;
    text-decoration: bold; }

.body1 {
    background-color: #000000;
    padding: 0px;
 }

.news {
    width: 96%; }

.titrenews {
    padding: 10px;
    margin: 0px;
    height: 10px;
    width: 0%;
    background-color: #000000;
    color: #FF671C;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    font-family: verdana;
    border-bottom: 0px #FFFFFF solid; }

.corpsnews {
    background-color: #000000;
    text-align: justify;
    color: #FFFFFF;
    padding: 2px; }

.piednews {
    background-color : #000000;
    color : #B4AF91;
    font-size : 9px;
    height : 0px;
    padding : 0px;
    vertical-align : bottom; }

.imagenews {
    max-width : 120px;
    max-height : 120px;
    float : left;
    padding : 4px; }

#menugauche {
    padding-left : 10px;
    width : 185px;
    height : 100%;
    font-size : 14px;
    font-family : verdana;
    vertical-align : top;
    background-repeat : no-repeat; }

#menugauche a:hover {
    color : #ed07ff;
    text-decoration : none; }

#menugauche .titre {
    padding-top : 8px;
    min-height : 23px; 
    display : block;
    color : #9C24AA;
    background-color : #000000;
    font-size : 15px;
    font-family : Verdana;
    vertical-align : bottom;
    font-weight : bold;
    text-align : center; }

#menudroite {
    width : 175px;
    height : 100%;
    font-size : 14px ;
    padding-right : 12px;
    font-family : verdana;
    vertical-align : top; }

#menudroite a:hover {
    color : #0100c8;
    text-decoration : none; }

#menudroite .titre {
    padding-top : 8px;
    min-height : 20px; 
    display : block;
    color : #A25AA;
    background-color : #000000;
    font-size : 15px;
    font-family : Verdana;
    vertical-align : bottom;
    text-align : center;
    font-weight : bold; }

#main {
    text-align : left;
    vertical-align : top;
    padding-top : 15px;
    padding-bottom : 5px;
    padding-left : 2px;
    padding-right : 2px;
    height : 100%; }

#main .titre {
min-height: 15px;
}

#footer {
    padding-top: 0px;
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 14px;
    background-image: url(http://www.upload-perso.net/coach-animation/images/footer.jpg);
    height: 145px;
    vertical-align:bottom;
    background-color : #011856;
    text-align: center;}
#footer p {
    margin: 0;
    padding: 10px;
    text-align: center;}
.button{
    font-size: 12px;
    text-align:center;}
.tbox.chatbox {
    width: 60%;
    margin-left: auto;
    margin-right: auto;}
.spacer {
    padding: 0px 0 0px 0;}
.indent{
    padding:4px;
    border: 1px solid #000000;
    background-color: #000000;}
.spoiler{
    background-color: #000000;
    color : #FFFFFF;
    padding : 4px;
    border: 1px #000000 solid;}
.spoiler input{color: #FFFFFF;}
.mediumtext {
    font-size: 12px;
    font-family:verdana,arial, Helvetica, sans-serif;}
.tbox{
    background-color: #ffffff;
    border: #000000 1px solid;
    color: #000000;
    font-size: 12px;
    font-family:verdana,arial, Helvetica, sans-serif;}
.helpbox {
    border: 0px;
    background-color: transparent;
    color:#FFFFFF;
    font-size: 10px;
    font-family:verdana,arial, Helvetica, sans-serif;}
.fborder {
    border: #000000 0px solid;
    width: 99% !important; }

.forumheader{
    background-color: #9C24AA;
    font-size: 14px;
    font-family: verdana,arial, Helvetica, sans-serif;
    color:#FFFFFF;
    border-top: 15px #000000 solid;
    text-align : center;
    font-weight : bold;
    padding:2px;
    height: 40px;
    background-image:url(http://www.ptp-images.com/img/hhmrhbf0d6.jpg);

}

.forumheader A {
    font-size: 12px;
    color:#FFFFFF;
    font-variant:small-caps;
    font-weight : bold;




.blocforum {
    border : 0px #000000 outset;
}

.fcaption {
    background-color: #000000;
    font-size: 13px;
    font-family:verdana,arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-weight:bold;
    padding: 3px;
    text-align: center;
}

.fcaption a{
    padding-right:4px;
    color:#FFFFFF;
}

.forumcolonne1 {
    background-color : #7c4a94;
    border-top : 1px #9865b0 solid;
}

.forumcolonne2 {
    background-color:#7c4a94;
    border-top : 1px #9865b0 solid;
    text-align : left;
    padding : 2px;

}

.forumcolonne2 A{ 
    font-size: 13px;
    font-weight:bold;
    text-align:center;
}

.forumcolonne2:hover {
    background-color: #421b55;
    border-top : 1px #9865b0 dashed;
    color:#b184c6;
}

.forumcolonne3 {
    background-color: #743093;
    border-top : 1px #9865b0 solid;
    padding : 2px;

}

.forumcolonne4 {
    background-color:#7c4a94;
    border-top : 1px #9865b0 solid;
}


.forumcolonne5 {
    background-color: #743093;
    border-top : 1px #9865b0 solid;
}


.forumcolonne6 {
    background-color:#7c4a94;
    border-top : 1px #9865b0 solid;
}


    .foruminfo {
    background-color : #000000;
    border : 1px #001243 solid;
    padding-top : 1px;
    padding-bottom : 1px;
}

.casetype1 {
    background-color:#f005ff;
    padding: 2px;
}

.casetype2 {
    border : 1px #000000 solid;
    background-color: #000000;
    padding: 2px;
}

.casetype3 {
        background-image:url(http://www.upload-perso.net/coach-animation/images/casetype3.jpg);
    background-color: #f005ff;
    font-size: 12px;
    padding:2px;}
.commentaire {
    border-bottom: #f005ff 1px solid;
    width : 75%;}

/* Affichage du sujet du forum */

#colonneavatar a b {height: 8px; display: block; margin:auto;}

#colonneavatar {
    width : 130px !important;
        border-right : 1px #9865b0 solid;
    background-color : #8f1ac1;
        background-image:url(http://www.upload-perso.net/coach-animation/images/casetype3.jpg);
    background-repeat:repeat-x;
    text-align : center;
    padding : 2px;
    vertical-align : top;
        border-left: 3px #b212f4 solid;

}
#corpsforum { 
    text-align : left; 
    background-color : #8f1ac1;
    color : #FFFFFF;
    border-right: 3px #b212f4 solid;
    vertical-align : top;
}

#menumessage {
background-color : #8f1ac1;
background-image:url(http://www.upload-perso.net/coach-animation/images/casetype3.jpg);
    background-repeat:repeat-x;
    height : 24px;
    padding : 1px;
}

#corpsmessage {
    background : #8f1ac1;
    padding : 4px;
}
#signature { 
        border-top : 1px #9865b0 dotted;
    vertical-align : bottom;
    padding : 4px;
    background-color : #8f1ac1;
}


#reponserapide {
    background-color : #000000;
}
.legende {
    text-align: center;
    width : 95%;
    border : 1px #252525 solid;
    background-color : #000000;
    padding : 2px;
    margin-top : 5px;
}
.caselegende {
    text-align : center;
}
.titre {
    font-size: 14px;
    text-align : center;
}
.smalltext {
    font-size : 11px;
    color : #FFFFFF ;
}
.smallblacktext {
    font-size : 11px;
    color : #FFFFFF ;
}
hr
{display : none}
#main .titre {
    font-size : 18px; 
    font-weight : bold;
    color : #FFFFFF;
}
.cpage_title {
    text-align : center;
    font-weight : bold;
}
.tableaubb {
    border: 0px #000000 solid;
}
.cpage_body {
    padding:18px;
    width:750px !important;
}

.miniature {
max-width:130px !important; 
max-height:130px !important; 
}

#GB_window {
    border: 5px #FFFFFF solid;
position:fixed;
}

#GB_window .casetype3 {
    font-weight: bold;
    text-align: center;
    img-align: center;
    width: 400px;
    color: #TRANSP !important;
}

#GB_window .casetype1 {
    background-color : #7a15b3;
}


- Edité le 27/02/2010 à 11:13 -

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

dj clash
Messages: 493
Site internet
Sympa, j'en attendez pas autant... j'ai quand même apporté quelques petites améliorations : 

body {
    margin: 0;
    padding: 0; 
    font-size: 12px; 
    font-family: verdana, arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background-color: #333333; }

td {
    background: none;
    font-family: verdana,arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #FFFFFF;
    padding: 0px;
    text-align:left; }

a {
    color: #FFFFFF;
    text-decoration: none; }

a:hover {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: none; }

a img {
    border: none; }

.hidden {
    display: none; }

#page {
    margin-top: 0px;
    margin-bottom: 0px; 
    padding: 0;
    width: 990px;
    text-align: left;
    background-color: #000000; }

#header {
    padding: 0px;
    margin: 0px;
    height: 280px;
    width: 100%;
    background-color: #000000;
    background-image: url(http://www.upload-perso.net/coach-animation/images/header.jpg); 
    background-repeat: no-repeat; }

#header h1 {
    text-align: right;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    color: #FFFFFF; }

#header h1 a, #header h1 a:hover {
    color: #FFFFFF; }

#header h2 {
    display: block;
    margin-top: 233px;
    padding: 0px;
    font-size: 16px;
    text-align: center;
    color: justify; }

#header h2 a {
    color: #FFFFFF; }

#header h2 a:hover {
    color: #F689EF;
    text-decoration: bold; }

.body1 {
    background-color: #000000;
    padding: 0px; }

.news {
    width: 96%; }

.titrenews {
    padding: 10px;
    margin: 0px;
    height: 10px;
    width: 0%;
    background-color: #000000;
    color: #FF671C;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    font-family: verdana;
    border-bottom: 0px #FFFFFF solid; }

.corpsnews {
    background-color: #000000;
    text-align: justify;
    color: #FFFFFF;
    padding: 2px; }

.piednews {
    background-color: #000000;
    color : #B4AF91;
    font-size: 9px;
    height: 0px;
    padding: 0px;
    vertical-align: bottom; }

.imagenews {
    max-width: 120px;
    max-height: 120px;
    float: left;
    padding: 4px; }

#menugauche {
    padding-left: 10px;
    width: 185px;
    height: 100%;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    background-repeat: no-repeat; }

#menugauche a:hover {
    color: #ed07ff;
    text-decoration: none; }

#menugauche .titre {
    padding-top: 8px;
    min-height: 23px; 
    display: block;
    color: #9C24AA;
    background-color: #000000;
    font-size: 15px;
    font-family: Verdana;
    vertical-align: bottom;
    font-weight: bold;
    text-align: center; }

#menudroite {
    width: 175px;
    height: 100%;
    font-size: 14px;
    padding-right: 12px;
    font-family: verdana;
    vertical-align: top; }

#menudroite a:hover {
    color: #0100c8;
    text-decoration: none; }

#menudroite .titre {
    padding-top: 8px;
    min-height: 20px; 
    display: block;
    color: #9C24AA;
    background-color: #000000;
    font-size: 15px;
    font-family: Verdana;
    vertical-align: bottom;
    text-align: center;
    font-weight: bold; }

#main {
    text-align: left;
    vertical-align: top;
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 2px;
    padding-right: 2px;
    height: 100%; }

#main .titre {
    min-height: 15px; }

#footer {
    padding-top: 0px;
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 14px;
    background-image: url(http://www.upload-perso.net/coach-animation/images/footer.jpg);
    height: 145px;
    vertical-align: bottom;
    background-color: #011856;
    text-align: center; }

#footer p {
    margin: 0;
    padding: 10px;
    text-align: center; }

.button{
    font-size: 12px;
    text-align: center; }

.tbox.chatbox {
    width: 60%;
    margin-left: auto;
    margin-right: auto; }

.spacer {
    padding: 0px 0 0px 0; }

.indent {
    padding: 4px;
    border: 1px solid #000000;
    background-color: #000000; }

.spoiler{
    background-color: #000000;
    color: #FFFFFF;
    padding: 4px;
    border: 1px #000000 solid; }

.spoiler input{
    color: #FFFFFF; }

.mediumtext {
    font-size: 12px;
    font-family: verdana,arial, Helvetica, sans-serif; }

.tbox {
    background-color: #ffffff;
    border: #000000 1px solid;
    color: #000000;
    font-size: 12px;
    font-family: verdana,arial, Helvetica, sans-serif; }

.helpbox {
    border: 0px;
    background-color: transparent;
    color: #FFFFFF;
    font-size: 10px;
    font-family: verdana,arial, Helvetica, sans-serif; }

.fborder {
    border: #000000 0px solid;
    width: 99% !important; }

.forumheader {
    background-color: #9C24AA;
    font-size: 14px;
    font-family: verdana,arial, Helvetica, sans-serif;
    color: #FFFFFF;
    border-top: 15px #000000 solid;
    text-align: center;
    font-weight: bold;
    padding: 2px;
    height: 40px;
    background-image: url(http://www.upload-perso.net/coach-animation/images/forumheader.jpg); }

.forumheader A {
    font-size: 12px;
    color: #FFFFFF;
    font-variant: small-caps;
    font-weight: bold; } 

.blocforum {
    border: 0px #000000 outset; }

.fcaption {
    background-color: #000000;
    font-size: 13px;
    font-family: verdana,arial,Helvetica,sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    padding: 3px;
    text-align: center; }

.fcaption a {
    padding-right: 4px;
    color: #FFFFFF; }

.forumcolonne1 {
    background-color: #7c4a94;
    border-top: 1px #9865b0 solid; }

.forumcolonne2 {
    background-color: #7c4a94;
    border-top: 1px #9865b0 solid;
    text-align: left;
    padding: 2px; }

.forumcolonne2 A { 
    font-size: 13px;
    font-weight: bold;
    text-align: center; }

.forumcolonne2 a:hover {
    color: #FB9FFF;
    text-decoration: none; }

.forumcolonne2:hover {
    background-color: #421b55;
    border-top: 1px #9865b0 dashed;
    color: #b184c6; }

.forumcolonne3 {
    background-color: #743093;
    border-top: 1px #9865b0 solid;
    padding: 2px; }

.forumcolonne4 {
    background-color: #7c4a94;
    border-top: 1px #9865b0 solid; }

.forumcolonne5 {
    background-color: #743093;
    border-top: 1px #9865b0 solid; }

.forumcolonne6 {
    background-color: #7c4a94;
    border-top: 1px #9865b0 solid; }

.foruminfo {
    background-color: #000000;
    border: 1px #001243 solid;
    padding-top: 1px;
    padding-bottom: 1px; }

.casetype1 {
    background-color: #743093;
    padding: 2px; }

.casetype2 {
    border: 1px #000000 solid;
    background-color: #000000;
    padding: 2px; }

.casetype3 {
    background-image: url(http://www.upload-perso.net/coach-animation/images/casetype3.jpg);
    background-color: #743093;
    font-size: 12px;
    padding: 2px; }

.commentaire {
    border-bottom: #f005ff 0px solid;
    width: 75%; }

/* Affichage du sujet du forum */

#colonneavatar a b {
    height: 8px; 
    display: block; 
    margin: auto; }

#colonneavatar {
    width: 130px !important;
    border-right: 1px #9865b0 solid;
    background-color: #8f1ac1;
    background-image: url(http://www.upload-perso.net/coach-animation/images/casetype3.jpg);
    background-repeat: repeat-x;
    text-align: center;
    padding: 2px;
    vertical-align: top;
    border-left: 0px #b212f4 solid; }

#corpsforum { 
    text-align: left; 
    background-color: #8f1ac1;
    color: #FFFFFF;
    border-right: 0px #b212f4 solid;
    vertical-align: top; }

#menumessage {
    background-color: #8f1ac1;
    background-image: url(http://www.upload-perso.net/coach-animation/images/casetype3.jpg);
    background-repeat: repeat-x;
    height: 24px;
    padding: 1px; }

#corpsmessage {
    background: #8f1ac1;
    padding: 4px; }

#signature { 
    border-top: 1px #9865b0 dotted;
    vertical-align: bottom;
    padding: 4px;
    background-color: #8f1ac1; }

#reponserapide {
    background-color: #000000; }

.legende {
    text-align: center;
    width: 95%;
    border: 1px #252525 solid;
    background-color: #000000;
    padding: 2px;
    margin-top: 5px; }

.caselegende {
    text-align: center; }

.titre {
    font-size: 14px;
    text-align: center; }

.smalltext {
    font-size: 11px;
    color: #FFFFFF; }

.smallblacktext {
    font-size: 11px;
    color: #FFFFFF; }

hr {
    display : none; }

#main .titre {
    font-size: 18px; 
    font-weight: bold;
    color: #FFFFFF; }

.cpage_title {
    text-align: center;
    font-weight: bold; }

.tableaubb {
    border: 0px #000000 solid; }

.cpage_body {
    padding: 18px;
    width: 750px !important; }

.miniature {
    max-width: 130px !important; 
    max-height: 130px !important; }

#GB_window {
    border: 5px #FFFFFF solid;
    position: fixed; }

#GB_window .casetype3 {
    font-weight: bold;
    text-align: center;
    img-align: center;
    width: 400px;
    color: #TRANSP !important; }

#GB_window .casetype1 {
    background-color: #7a15b3; }

Qu'en pense-tu ? Amélioration au niveau forum (modification du code couleur lors du passage de la souris sur les liens du forum..., et quelques modif's sur la partie forum)

- Edité le 27/02/2010 à 17:51 -

ATTENTION CHANGEMENT !
Nouveau pseudo ! : Julien.
Me contacter par Message privé : Cliquez ici
image
Coach'Animation, un site pour vous aider à faire de votre évènement
un évènement inoubliable et surtout dans les règles de l'art !...
Alexis

Messages: 1136
Site internet
C'est vrai que j'ai oublié de regarder ce que ça donnait pour la case de sondages

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

dj clash
Messages: 493
Site internet
J'ai édité mon post...
 
T'inquiète pas, j'ai fais, comme j'ai dis quelques images (tu as déjà fais pas mal de chose pour moi, c'est déjà bien fort sympa car je n'avais pas du tout d'idée pour les différentes couleurs...

EDIT : trouve le resultat sur http://julien.utiliweb.fr/forum.html

- Edité le 27/02/2010 à 17:56 -

ATTENTION CHANGEMENT !
Nouveau pseudo ! : Julien.
Me contacter par Message privé : Cliquez ici
image
Coach'Animation, un site pour vous aider à faire de votre évènement
un évènement inoubliable et surtout dans les règles de l'art !...
Alexis

Messages: 1136
Site internet
C'est mieux comme ça .

Pa contre plutôt que poster un message pour dire que tu as édité ton message précédent, tu aurais mieux fait de poster ton css direrctement dans un nouveau message.


image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

dj clash
Messages: 493
Site internet
Oui, mais j'avais commencé à éditer mon post et il m'a pris l'envie de mettre le CSS au propre, bien classé comme tu peut le voir...

et entre temps tu m'a répondu... Enfin excuse moi

ATTENTION CHANGEMENT !
Nouveau pseudo ! : Julien.
Me contacter par Message privé : Cliquez ici
image
Coach'Animation, un site pour vous aider à faire de votre évènement
un évènement inoubliable et surtout dans les règles de l'art !...
 

Aller à:     Haut de page