Hi Anthony

Are you thinking about something specifically?

It seems to me that there should be enough id's and classes available as styling hooks in the rendered HTML so it should really just be a matter of overruling the default styling of the form, right?

/Jan

Hi Jan,

Yes I guess. I have these style definition rules for my contact form, and I would like them to be implemented to the Contour contactform:

#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#5f5f5f;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:3px 0; font:bold 12px Arial, Helvetica, sans-serif; color:#5f5f5f; text-transform:capitalize;}
#contactform label span { display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:540px; border:1px solid #d0d0d0; margin:3px 0; padding:5px 2px; height:16px; background:#ffffff;}
#contactform textarea { width:540px; border:1px solid #d0d0d0; margin:3px 0; padding:2px; background:#ffffff;}
#contactform li.buttons input { padding:3px 0; margin:0; border:0; color:#FFF;}
p.response { text-align:center; color:red; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}

I already found out that if I omit the css identifier (#contactforom), some of the styles get implemented, like for example:

label span { display:block; font:normal 10px Arial, Helvetica, sans-serif;}

But I didn't found out to implement all the styling rules yet. But I guess like you said, it's a matter of overruling the default definition style of the contour form.

greetings,

Anthony

Hi Anthony

If you don't have direct access to the contour stylesheet you can overwrite the declarations by adding your form styles AFTER the contour stylesheet has been linked. Then you can overrule them all by using the same selector and changing the properties you need to change.

If you for some reason run into an issue regarding specificity you can alwas use !important as a last resort. But prefferably it's better to use html in front of the selector like...html p.response{property:value}...

Hope this makes sense.

/Jan

is working on a reply...