Support de smfgratuit

Réservé aux forums smf officiel => Archives des demandes d'aides => Discussion démarrée par: Parano-Sprite le 10 Septembre 2008 à 17:23:36



Titre: Style.css
Posté par: Parano-Sprite le 10 Septembre 2008 à 17:23:36
Hello,

Comme je ne sais pas trop quoi demander pour m'aider, je viens d'avoir une idée ...
J'aimerai changer la tete de mon forum, rien qu'avec le fichier css.

Y'aurai-il moyen que tu me fasse un truc sympa pour l'apparence de mon forum, avec les couleurs de renault STP ?

Voici l'image avec les couleurs :

(http://www.renaultoloog.nl/formule%201%20ING%20Renault%20F1%20team%20logo.jpg)

et voici mon fichier style.css du theme Babylon :

Citation
/*formulairede presentation---------------------*/
#Modpresentation{width:100%;}
#Modpresentation input#prenom{background: white url(images/img_presentation/bigsmile.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#age{background: white url(images/img_presentation/calday.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#region{background: white url(images/img_presentation/day.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#passions{background: white url(images/img_presentation/heart.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation textarea#connu_ou{background: white url(images/img_presentation/search.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#forum{background: white url(images/img_presentation/arrow1_e.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation textarea#message_supl{background: white url(images/img_presentation/comment.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation p{margin: 2px 0;}
/* fieldset , legend */
#Modpresentation fieldset{margin-bottom: 10px; border: #CCC 2px solid;}
#Modpresentation fieldset legend{height:32px;padding: 0 10px;border-left: #CCC 2px solid;border-right: #CCC 2px solid;font-size: large;font-weight: bold ;color: #999;}
/* Label */
#Modpresentation label{display: block;width: 40%;float: left;padding-right: 1%;text-align: right;letter-spacing: 1px;}
/* Input */
#Modpresentation input, #Modpresentation select, #Modpresentation textarea{margin-left: 1%;border: #CCC 1px solid;padding: 2px;}
#Modpresentation input:hover, #Modpresentation select:hover,#Modpresentation textarea:hover, #Modpresentation input:focus, #Modpresentation select:focus, #Modpresentation textarea:focus
{border-left: #999 3px solid;}
/* button submit */
#Modpresentation input[type="submit"]{border: #CCC 2px solid;width: 15%;}
#Modpresentation input[type="submit"]:hover{background-color: #66CC33;cursor: pointer;}
/*------------------------------------------------------------------------------------*/   


/* Popup courrier par Garedo*/
#courrier
{
   background-image: url(images/carte.gif);
   background-repeat: no-repeat;
   font: 11px Tahoma;
   position: absolute;
   top: 15%;
   left: 50%;
   width: 350px;
   height: 220px;
   border: 1px solid silver;
   font-family:"Times New Roman", Times, serif;
   color: Navy;
}

/* Normal, standard links. */
a:link
{
   color: #000000;
   text-decoration: underline;
}
a:visited, a:hover
{
   color: #323232;
   text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #000000;
   text-decoration: none;
}
a.nav:hover
{
   font-weight: bold;
   color: #cc3333;
   text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
   empty-cells: show;
}

/* By default (td, body..) use Tahoma in black. */
body, td, th
{
   color: #000000;
   font-size: small;
   font-family: tahoma, sans-serif;
}

/* The main body of the entire forum. */
body
{
   background-color: white;
   margin: 0px;
   padding: 0px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
   font-size: 9pt;
   color: #000000;
   font-family: tahoma, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
   font-size: 8pt;
   font-weight: normal;
   color: #000000;
   font-family: tahoma, sans-serif;
}

/* Standard horizontal rule.. (
, etc.) */
hr, .hrcolor
{
   height: 1px;
   border: 0;
   color: #666666;
   background-color: #666666;
}

/* A quote, perhaps from another post. */
.quote
{
   color: #000000;
/*   background-color: #FFFFD3; */
   background-color: #F4D65E;
   border: 1px solid #000000;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
   line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
   color: #000000;
   background-color: #cccccc;
   font-family: "courier new", "times new roman", monospace;
   font-size: x-small;
   line-height: 1.3em;
   /* Put a nice border around it. */
   border: 1px solid #000000;
   margin: 1px auto 1px auto;
   padding: 1px;
   width: 99%;
   /* Don't wrap its contents, and show scrollbars. */
   white-space: nowrap;
   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
   line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
   cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
   color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
   color: #000000;
   background-color: #E1E1E1;
}
.windowbg2
{
   color: #000000;
   background-color: #F0F0F0;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
   color: white;
   font-style: normal;
   background-color: #6B8EAE;
}
.titlebg a:hover, .titlebg2 a:hover
{
   color: #dfdfdf;
}

/* This is used for categories, page indexes, and several other areas in the forum. */
.catbg, .catbg3
{
   background-image: url(images/catbg.jpg);
}

/* This is used for a category that has new posts in it... to make it light up. */
.catbg2
{
   background-image: url(images/catbg2.jpg);
}

.catbg, .catbg2, .catbg3
{
   font-weight: bold;
   background-color: silver;
   color: #000000;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
   background-color: #828181;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
   border: 1px solid #828181;
   background-color: #FFFFFF;
   padding: 2px;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
   font-size: x-small;
   font-family: tahoma, sans-serif;
}
.normaltext
{
   font-size: small;
}
.largetext
{
   font-size: large;
}

/* This is the white header area where the title, menu bars, and header boxes are. */
#headerarea
{
   background-color: white;
   border-bottom: 1px solid gray;
}
/* This is the main area of the forum, the part that's gray. */
#bodyarea
{
   background-color: #FDB731;
}
/* And this is the bottom, where the copyright is, etc. */
#footerarea
{
   color: black;
   background-color: white;
   border-top: 1px solid gray;
}

/* This is for the special header boxes on the top (user info, key stats, news box.) */
.headertitles
{
   background-color: #6B8EAE;
   border: 1px solid #6B8EAE;
   height: 12px;
}
.headerbodies
{
   border: 1px solid #7A7777;
   background-color: #EFEFEF;
   background-repeat: repeat-x;
   background-position: bottom;
}

/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
   width: 100%;
   overflow: auto;
   line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
   width: 100%;
   overflow: auto;
   padding-bottom: 3px;
   line-height: 1.3em;
}
/* No image should have a border when linked */
a img{
   border: 0;
}

/* The AJAX notifier */
#ajax_in_progress
{
   background: #32CD32;
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 18pt;
   padding: 3px;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
}

Bien sur, si tu vois d'autre choses a changer (Fonts, autres couleurs, ect ..., pas de soucis, je suis preneur ... ;)
Tu peux aussi garder la couleur du fond, qui est aussi la couleur de la banniere ...

Pour les boutons, ne t'inquiete pas, je ferai les modifications apres ...

Je t'en remercie d'avance.


Titre: Style.css
Posté par: Marc le 11 Septembre 2008 à 12:38:29
Bonjour,

Concernant ta demande spécifique je suis en train de réaliser le mod que tu as suggéré là: http://support.smfgratuit.org/Google_Analytics_sur_votre_site-topic-1288-0.html
Pour le thème, malheureusement je ne réalise pas de thème, en effet je ne suis pas designer, si tu veux un beau thème je t'oriente plutôt vers des gens comme Garedo/Artgraph/Domipedro ou encore Golden qui seront mieux que moi te personnaliser ton forum. Cependant je peux t'apporter un petit poil de réponse à ta question.

Les fond de section sont désignées par les classes suivantes, il te suffit donc de modifier les couleurs en rouge:
Citation
.windowbg
{
   color: #000000;
   background-color: #E1E1E1;
}
.windowbg2
{
   color: #000000;
   background-color: #F0F0F0;
}

Le bandeau des news lui c'est la classe suivante:
Citation
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
   color: white;
   font-style: normal;
   background-color: #6B8EAE;
}

Il ne te reste plus qu'à jouer avec les gouaches pour trouver ton bonheur  :-*


Titre: Style.css
Posté par: Garedo le 12 Septembre 2008 à 13:02:24
personnellement je fairais le fond bleu avec une police blanche

windowbg et windowbg2 aprochant du blanc avec une police bleu

et jaune et orange pour les titres des sections

j'ai 5 mn je teste ;)

voila ce que ça donne avec ce css
Code:
/*formulairede presentation---------------------*/
#Modpresentation{width:100%;}
#Modpresentation input#prenom{background: white url(images/img_presentation/bigsmile.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#age{background: white url(images/img_presentation/calday.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#region{background: white url(images/img_presentation/day.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#passions{background: white url(images/img_presentation/heart.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation textarea#connu_ou{background: white url(images/img_presentation/search.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation input#forum{background: white url(images/img_presentation/arrow1_e.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation textarea#message_supl{background: white url(images/img_presentation/comment.gif) no-repeat 2px 1px; padding-left: 20px;}
#Modpresentation p{margin: 2px 0;}
/* fieldset , legend */
#Modpresentation fieldset{margin-bottom: 10px; border: #CCC 2px solid;}
#Modpresentation fieldset legend{height:32px;padding: 0 10px;border-left: #CCC 2px solid;border-right: #CCC 2px solid;font-size: large;font-weight: bold ;color: #999;}
/* Label */
#Modpresentation label{display: block;width: 40%;float: left;padding-right: 1%;text-align: right;letter-spacing: 1px;}
/* Input */
#Modpresentation input, #Modpresentation select, #Modpresentation textarea{margin-left: 1%;border: #CCC 1px solid;padding: 2px;}
#Modpresentation input:hover, #Modpresentation select:hover,#Modpresentation textarea:hover, #Modpresentation input:focus, #Modpresentation select:focus, #Modpresentation textarea:focus
{border-left: #999 3px solid;}
/* button submit */
#Modpresentation input[type="submit"]{border: #CCC 2px solid;width: 15%;}
#Modpresentation input[type="submit"]:hover{background-color: #66CC33;cursor: pointer;}
/*------------------------------------------------------------------------------------*/


/* Popup courrier par Garedo*/
#courrier
{
background-image: url(images/carte.gif);
background-repeat: no-repeat;
font: 11px Tahoma;
position: absolute;
top: 15%;
left: 50%;
width: 350px;
height: 220px;
border: 1px solid silver;
font-family:"Times New Roman", Times, serif;
color: Navy;
}

/* Normal, standard links. */
a:link,a:visited
{
color: #010187;
text-decoration: underline;
}
a:hover
{
color: #323232;
text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #fff;
text-decoration: none;
}
a.nav:hover
{
font-weight: bold;
color: #cc3333;
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* By default (td, body..) use Tahoma in black. */
body, td, th
{
color: #fff;
font-size: small;
font-family: tahoma, sans-serif;
}

/* The main body of the entire forum. */
body
{
background-color: #01015B;
margin: 0px;
padding: 0px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
font-size: 9pt;
color: #000000;
font-family: tahoma, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 8pt;
font-weight: normal;
color: #000000;
font-family: tahoma, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}

/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #C3B8D0;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #cccccc;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
color: #01015B;
background-color: #ffffff;
}
.windowbg2
{
color: #01015B;
background-color: #fffff9;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
color: white;
font-style: normal;
background-color: #F25300;
}
.titlebg a:hover, .titlebg2 a:hover
{
color: #dfdfdf;
}

/* This is used for categories, page indexes, and several other areas in the forum. */
.catbg, .catbg3
{
background-image: url(images/catbg.jpg);
}

/* This is used for a category that has new posts in it... to make it light up. */
.catbg2
{
background-image: url(images/catbg2.jpg);
}

.catbg, .catbg2, .catbg3
{
font-weight: bold;
background-color: silver;
color: #000000;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #828181;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
border: 1px solid #828181;
background-color: #01015B;
padding: 2px;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: tahoma, sans-serif;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}

/* This is the white header area where the title, menu bars, and header boxes are. */
#headerarea
{
background-color: #FDB731;
border-bottom: 1px solid gray;
margin: 0px 20px 0px 20px;
}
/* This is the main area of the forum, the part that's gray. */
#bodyarea
{
background-color: #01015B;
}
/* And this is the bottom, where the copyright is, etc. */
#footerarea
{
color: black;
background-color: #FDB731;
border-top: 1px solid gray;
margin: 0px 20px 0px 20px;
}

/* This is for the special header boxes on the top (user info, key stats, news box.) */
.headertitles
{
background-color: #F25300;
border: 1px solid #6B8EAE;
height: 12px;
}
.headerbodies
{
border: 1px solid #7A7777;
background-color: #01015B;
background-repeat: repeat-x;
background-position: bottom;
}
.headerbodies a
{
color: #fff;
}
.headerbodies a:hover
{
color: #F25300;
}
/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}
/* No image should have a border when linked */
a img{
border: 0;
}

/* The AJAX notifier */
#ajax_in_progress
{
background: #32CD32;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 3px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}


(http://www.zimagez.com/miniature/test356.jpg) (http://www.zimagez.com/zimage/test356.php)


Titre: Style.css
Posté par: Parano-Sprite le 12 Septembre 2008 à 17:47:56
Hello,

Merci Garedo, c'est vraiment sympa ...

Bon, ben je crois que les couleurs choisi ne sont vraiment pas top ...
c'est pas tres beau en fait, c'est mon avis ... ;)

A la rigueur, si tu as envie de faire un CSS à ta sauce, n'hésite pas, ce sera surement plus beau... ;)
Garde juste le jaune orangé (#FDB731), qui est d'origine ...
Tu peux jouer avec des oranges, du pastel et autres ... ;)

Désolé de te dire que je n'aime pas, mais c'est une remarque constructive et je voulais voir ce que ca donne ...

Merci pour ton aide ...

-------------------------------

Je viens de teste le CSS, l'ecriture dans les topic est blanche sur le fond qui est presque blanc.
Il y a moyen de changer ca STP ?

-------------------------------

Et pourquoi pas essayer avec les couleurs de cette banniere ?

(http://www.golden-forum.powa.fr/images/Commandes/gn1234567/Banniere.png)


Titre: Style.css
Posté par: Garedo le 13 Septembre 2008 à 09:57:55
te fait pas de soucis si ça te plais pas ça me vexe pas ;)

j'avais un moment, ça te donne une idée de ce que ça rend les couleurs
j'ai pas tester de partout les polices c'etait pour avoir un aperçut de l'accueil avant d'aller plus loin.

par contre j'ai pas trop le temps de te regarder de nouvelles couleurs, j'ai trop de choses a faire ce week end, désolé.



Titre: Style.css
Posté par: Parano-Sprite le 13 Septembre 2008 à 12:45:38
Salut,

Ne t'inquiete pas, il n'y a pas de soucis, fait donc quand tu aura un peux de temps ... ;)
Pour le 1er theme, il y a du monde qui a l'air d'aimer, donc si tu peux voir au niveau de l'ecriture, je la garderai quand meme pour faire un theme specifique pour les VIP par exemple ... ;)

Je t'en remercie d'avance et te souhaite un bon Week-End.