Connexion | Inscription | FAQ
Anonymous

changement couleur pour formulaire

+ Publier une réponse

2 messages Page 1 sur 1


changement couleur pour formulaire

par Amyitis » Jeu Déc 15, 2011 9:09 am

Bonjour à tous,

je suis traductrice de par ma profession et j'ai créé mon propre site gratuitement avec weebly. Ce dernier, ne fournissant pas de formulaires assez modulables pour mes besoins, je me suis tournée vers un partenaire qui propose ce que je veux mais n'y connaissant rien en css, j'aurais voulu avoir une aide pour modifier les couleurs du background car il me semble transparent ou mieux encore, de la police, mais je vous laisse regarder mon site pour que vous compreniez ce qui ne va pas... http://www.dts-traduction.com aller dans "Votre avis" puis dans "questionnaire de satisfaction".

ainsi que le code css :

#main_body
{
background:#fffff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:small;
margin:8px 0 16px;
text-align:center;
}

#form_container
{
background:#fffff;
border:1px solid #ccc;
margin:0 auto;
text-align:left;
width:640px;
}

#top
{
display:block;
height:10px;
margin:10px auto 0;
width:650px;
}

#footer
{
width:640px;
clear:both;
color:#ffffff;
text-align:center;
width:640px;
padding-bottom: 15px;
font-size: 85%;
}

#footer a{
color:#999999;
text-decoration: none;
border-bottom: 1px dotted #999999;
}

#bottom
{
display:block;
height:10px;
margin:0 auto;
width:650px;
}

form.appnitro
{
margin:20px 20px 0;
padding:0 0 20px;
}

/**** Logo Section *****/
#main_body h1
{
background-color:#dedede;
margin:0;
min-height:0;
padding:0;
text-decoration:none;
text-indent:-8000px;
background-image: url('../../../images/machform.gif');
background-repeat: no-repeat;
}

#main_body h1 a
{

display:block;
height:100%;
min-height:40px;
overflow:hidden;
}


#main_body img
{
behavior:url(css/iepngfix.htc);
border:none;
}


/**** Form Section ****/
.appnitro
{
font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
font-size:small;
}

.appnitro li
{
width:61%;
}

#main_body form ul
{
font-size:100%;
list-style-type:none;
margin:0;
padding:0;
width:100%;
}

#main_body form li
{
display:block;
margin:0;
padding:4px 5px 2px 9px;
position:relative;
}

#main_body form li:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

#main_body .buttons:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

#main_body .buttons
{
clear:both;
display:block;
margin-top:10px;
}

#main_body html form li div
{
display:inline-block;
}

#main_body form li div
{
color:#444;
margin:0 4px 0 0;
padding:0 0 8px;
}

#main_body form li span
{
color:#444;
float:left;
margin:0 4px 0 0;
padding:0 0 8px;
}

#main_body form li div.left
{
display:inline;
float:left;
width:48%;
}

#main_body form li div.right
{
display:inline;
float:right;
width:48%;
}

#main_body form li div.left .medium
{
width:100%;
}

#main_body form li div.right .medium
{
width:100%;
}

#main_body .clear
{
clear:both;
}

#main_body form li div label
{
clear:both;
color:#444;
display:block;
font-size:9px;
line-height:9px;
margin:0;
padding-top:3px;
}

#main_body form li span label
{
clear:both;
color:#444;
display:block;
font-size:9px;
line-height:9px;
margin:0;
padding-top:3px;
}

#main_body form li .datepicker
{
cursor:pointer !important;
float:left;
height:16px;
margin:.1em 5px 0 0;
padding:0;
width:16px;
}

#main_body .form_description
{
border-bottom:1px dotted #ccc;
clear:both;
display:inline-block;
margin:0 0 1em;
}

#main_body .form_description[class]
{
display:block;
}

#main_body .form_description h2
{
clear:left;
font-size:160%;
font-weight:400;
margin:0 0 3px;
}

#main_body .form_description p
{
font-size:95%;
line-height:130%;
margin:0 0 12px;
}

#main_body form hr
{
display:none;
}

#main_body form li.section_break
{
border-top:1px dotted #ccc;
margin-top:9px;
padding-bottom:0;
padding-left:9px;
padding-top:13px;
width:97% !important;
}

#main_body form ul li.first
{
border-top:none !important;
margin-top:0 !important;
padding-top:0 !important;
}

#main_body form .section_break h3
{
font-size:110%;
font-weight:400;
line-height:130%;
margin:0 0 2px;
}

#main_body form .section_break p
{
font-size:85%;

margin:0 0 10px;
}

/**** Buttons ****/
#main_body input.button_text
{
overflow:visible;
padding:0 7px;
width:auto;
}

#main_body .buttons input
{
font-size:120%;
margin-right:5px;
}

/**** Inputs and Labels ****/
#main_body label.description
{
border:none;
color:#222;
display:block;
font-size:95%;
font-weight:700;
line-height:150%;
padding:0 0 1px;
}

#main_body span.symbol
{
font-size:115%;
line-height:130%;
}

#main_body input.text
{
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
color:#333;
font-size:100%;
margin:0;
padding:2px 0;
}

#main_body input.file
{
color:#333;
font-size:100%;
margin:0;
padding:2px 0;
}

#main_body textarea.textarea
{
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
color:#333;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
margin:0;
width:99%;
}

#main_body select.select
{
color:#333;
font-size:100%;
margin:1px 0;
padding:1px 0 0;
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
}


#main_body input.currency
{
text-align:right;
padding-right:3px;
}

#main_body input.checkbox
{
display:block;
height:13px;
line-height:1.4em;
margin:6px 0 0 3px;
width:13px;
}

#main_body input.radio
{
display:block;
height:13px;
line-height:1.4em;
margin:6px 0 0 3px;
width:13px;
}

#main_body label.choice
{
color:#444;
display:block;
font-size:100%;
line-height:1.4em;
margin:-1.55em 0 0 25px;
padding:4px 0 5px;
width:90%;
}

#main_body select.select[class]
{
margin:0;
padding:1px 0;
}

*:first-child+html select.select[class]
{
margin:1px 0;
}

#main_body .safari select.select
{
font-size:120% !important;
margin-bottom:1px;
}

#main_body input.small
{
width:25%;
}

#main_body select.small
{
width:25%;
}

#main_body input.medium
{
width:50%;
}

#main_body select.medium
{
width:50%;
}

#main_body input.large
{
width:99%;
}

#main_body select.large
{
width:100%;
}

#main_body textarea.small
{
height:5.5em;
}

#main_body textarea.medium
{
height:10em;
}

#main_body textarea.large
{
height:20em;
}

/**** Errors ****/
#error_message
{
background:#fff;
border:1px dotted red;
margin-bottom:1em;
padding-left:0;
padding-right:0;
padding-top:4px;
text-align:center;
width:97%;
}

#error_message_title
{
color:#DF0000;
font-size:125%;
margin:7px 0 5px !important;
padding:0 !important;
}

#error_message_desc
{
color:#000;
font-size:100%;
margin:0 0 .8em !important;
}

#error_message_desc strong
{
background-color:#FFDFDF;
color:red;
padding:2px 3px;
}

#main_body form li.error
{
background-color:#FFDFDF !important;
border-bottom:1px solid #EACBCC;
border-right:1px solid #EACBCC;
margin:3px 0;
}

#main_body form li.error label
{
color:#DF0000 !important;
}

#main_body form p.error
{
clear:both;
color:red;
font-size:10px;
font-weight:700;
margin:0 0 5px !important;
}

#main_body form .required
{
color:red !important;
float:none !important;
font-weight:700;
}

/**** Guidelines and Error Highlight ****/
#main_body form li.highlighted
{
background-color:#fff7c0;
}

#main_body form .guidelines
{
background:#f5f5f5;
border:1px solid #e6e6e6;
color:#444;
font-size:80%;
left:100%;
line-height:130%;
margin:0 0 0 8px !important;
padding:8px 10px 9px;
position:absolute;
top:0;
visibility:hidden;
width:42%;
z-index:1000;
}

#main_body form .guidelines small
{
font-size:105%;
}

#main_body form li.highlighted .guidelines
{
visibility:visible;
}

#main_body form li:hover .guidelines
{
visibility:visible;
}

.no_guidelines .guidelines
{
display:none !important;
}

.no_guidelines form li
{
width:97%;
}

.no_guidelines li.section
{
padding-left:9px;
}

/*** Success Message ****/
.form_success
{
clear: both;
margin: 0;
padding: 90px 0pt 100px;
text-align: center
}

.form_success h2 {
clear:left;
font-size:160%;
font-weight:normal;
margin:0pt 0pt 3px;
}

/*** Password ****/
#main_body ul.password{
margin-top:60px;
margin-bottom: 60px;
text-align: center;
}
.password h2{
color:#DF0000;
font-weight:bold;
margin:0pt auto 10px;
}

.password input.text {
font-size:170% !important;
width:380px;
text-align: center;
}
.password label{
display:block;
font-size:120% !important;
padding-top:10px;
font-weight:bold;
}

#li_captcha{
padding-left: 5px;
}


#li_captcha span{
float:none;
padding: 0px !important;
}

#li_captcha div{
padding: 0px !important;
}
#captcha_image{
padding-top: 5px;
padding-bottom: 10px;
}
#captcha_response_field{
margin-bottom: 10px;
}
#dummy_captcha_internal{
height: 8px;
}
/** Embedded Form **/

.embed #top, .embed #bottom, .embed h1{
display: none;
}

.embed #form_container{
border: none;
width: 100%;
background: none;
}

.embed #footer{
text-align: left;
padding-left: 10px;
width: 99%;
}

.embed #footer.success{
text-align: center;
}

.embed form.appnitro
{
margin:0px 0px 0;

}

/** Integrated Form **/
.integrated *{
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
color: #000;
}

.integrated #top, .integrated #bottom, .integrated h1{
display: none;
}

.integrated #form_container{
border: none;
width: 99%;
background: none;
}

.integrated #footer{
text-align: left;
padding-left: 10px;
width: 99%;
}

.integrated #footer.success{
text-align: center;
}

.integrated form.appnitro
{
margin:0px 0px 0;

}

.integrated form .section_break h3
{
border: none !important;
}

.integrated #error_message h3
{
border: none !important;

}



/*** Calendar **********************/
div.calendar { position: relative; }


.calendar table {
cursor:pointer;
border:1px solid #ccc;
font-size: 11px;
color: #000;
background: #fff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.calendar table .title,.calendar table .button{
font-size: 11px;
}

.calendar * {
font-size: 11px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.calendar .button {
text-align: center;
padding: 2px;
}

.calendar .nav {
background:#f5f5f5;
}

.calendar thead .title {
font-weight: bold;
text-align: center;
background: #dedede;
color: #000;
padding: 2px 0 3px 0;
}

.calendar thead .headrow {
background: #f5f5f5;
color: #444;
font-weight:bold;
}

.calendar thead .daynames {
background: #fff;
color:#333;
font-weight:bold;
}

.calendar thead .name {
border-bottom: 1px dotted #ccc;
padding: 2px;
text-align: center;
color: #000;
}

.calendar thead .weekend {
color: #666;
}

.calendar thead .hilite {
background-color: #444;
color: #fff;
padding: 1px;
}

.calendar thead .active {
background-color: #d12f19;
color:#fff;
padding: 2px 0px 0px 2px;
}


.calendar tbody .day {
width:1.8em;
color: #222;
text-align: right;
padding: 2px 2px 2px 2px;
}
.calendar tbody .day.othermonth {
font-size: 80%;
color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
color: #fbb;
}

.calendar table .wn {
padding: 2px 2px 2px 2px;
border-right: 1px solid #000;
background: #666;
}

.calendar tbody .rowhilite td {
background: #FFF1AF;
}

.calendar tbody .rowhilite td.wn {
background: #FFF1AF;
}

.calendar tbody td.hilite {
padding: 1px 1px 1px 1px;
background:#444 !important;
color:#fff !important;
}

.calendar tbody td.active {
color:#fff;
background: #529214 !important;
padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected {
font-weight: bold;
border: 1px solid #888;
padding: 1px 1px 1px 1px;
background: #f5f5f5 !important;
color: #222 !important;
}

.calendar tbody td.weekend {
color: #666;
}

.calendar tbody td.today {
font-weight: bold;
color: #529214;
background:#D9EFC2;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell {
visibility: hidden;
}

.calendar tbody .emptyrow {
display: none;
}

.calendar tfoot .footrow {
text-align: center;
background: #556;
color: #fff;
}

.calendar tfoot .ttip {
background: #222;
color: #fff;
font-size:10px;
border-top: 1px solid #dedede;
padding: 3px;
}

.calendar tfoot .hilite {
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}

.calendar tfoot .active {
background: #77c;
padding: 2px 0px 0px 2px;
}

.calendar .combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
border: 1px solid #ccc;
background: #f5f5f5;
color: #222;
font-size: 90%;
z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}

.calendar .combo .label-IEfix {
width: 4em;
}

.calendar .combo .hilite {
background: #444;
color:#fff;
}

.calendar .combo .active {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background: #dedede;
font-weight: bold;
}

/** Form Review **/
#machform_review_table tbody tr:hover
{
background-color: #FFF7C0;
}
.alt{
background: #efefef;
}
#machform_review_table td
{
text-align: left;
border-bottom:1px solid #DEDEDE;
padding:5px 10px;
}

merci à vous,
sabrine
Avatar de l’utilisateur

Amyitis

  • Messages: 1
  • Inscrit le: Jeu Déc 15, 2011 9:00 am

Re: changement couleur pour formulaire

par atik » Jeu Déc 15, 2011 2:25 pm

Nice site. Si vous voulez changer le fond, vous avez à changer la properites suivants,
background:
background-color:
background-image:
pour plus, lire le tutoriel et la pratique du site pour le CSS.
Avatar de l’utilisateur

atik

  • Messages: 471
  • Inscrit le: Lun Oct 17, 2011 4:55 pm


+ Publier une réponse

Page 1 sur 1