Hi Gudmund,

I've not used Contour for a while but I know you can disable the default stylesheet and then roll your own, can you see this option to disable the default stylesheet?

Rich

Yes you can change the layout of your form and removed all spaces when using Contour Forms.

For this you just need to check "Disable default stylesheet" under the settings tab after creating a form.

Usually Contour will create a stylesheet like this

#contour
{
    padding: 10px 0px 10px 0px;
}
#contour .contourPageName
{
    font-size: 2em !important;
    line-height: 2em !important;
}

#contour .contourField div label
{
    display: inline;
}

#contour label.fieldLabel
{
    font-weight: bold;
    display: block;
    width: 200px;
    float: left;
    clear: left;
    background: transparent !important;
}
#contour small
{
    display: block;
    float: left;
    clear: both;
    padding: 5px 5px 5px 200px;
}


#contour fieldset
{
    padding: 1.4em;
    margin: 0 0 1.5em 0;
    border: none !Important;
}

#contour legend
{
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.2em;
    display: block;
}

#contour input.text, #contour input.title, #contour textarea, #contour select
{
    margin: 0.5em 0;
    border: 1px solid #bbb;
}
#contour input.text:focus, #contour input.title:focus, #contour textarea:focus, #contour select:focus
{
    border: 1px solid #666;
}
#contour input.text, #contour textarea
{
    width: 300px !important;
    padding: 5px;
}
#contour textarea
{
    height: 250px;
}
#contour input.fileupload
{
    height: auto !important;
}

#contour span.checkboxlist, #contour span.radiobuttonlist, #contour span.checkbox
{
    display: block;
    float: left;
    padding: 10px;
}

#contour .checkboxlist input, #contour .radiobuttonlist input, #contour .checkbox input
{
    width: auto !important;
    height: auto !important;
    border: none !important;
    display: inline !important;
}

#contour .hiddenfield
{
    display:none;
}

#contour .contourButton
{
    margin-right: 10px;
    padding: 2px 10px;
}
#contour .contourErrorMessage
{
    padding: .8em;
    margin-bottom: .5em;
    border: 2px solid #FBC2C4;
}
#contour .contourErrorMessage, #contour .contourError
{
    background: #FBE3E4;
    color: #8a1f11;
}
#contour input.contourError, #contour textarea.contourError
{
    background: #FBE3E4;
    border-color: #FBC2C4;
}

#contour span.contourError
{
    color: #8a1f11 !important;
    background: transparent !important;
}

with the following url

umbraco/plugins/umbracoContour/css/defaultform.css

What you can do is overwrite it and changed the css as you would want to.

Hi Rich and Fuji

Thank you for these replies. I'll start testing right away (even though I am not totally sure where to start/adjust)

By the way - is it possible to setup separate stylesheets for the Contour forms without doing to much special coding (that might break on an Contour update)?

Cheers

Gudmund

If am right, i truely think that this can be done if you create  different stylesheet but the the ids and classes would still be the same inside your css.

You could then call the stylesheet depending on what page you want to make use of Contour.

I havent try it to be honest but i think it should work.

//fuji

is working on a reply...