Styling GoConnect Widget

Overview

In this guide, we will demonstrate how to use the CSS Code Editor to style your GoConnect widget.

GoConnect HTML Templates

The GoConnect widget has 3 pre-defined templates, these templates render the content submission processes in the GoConnect widget. You can find the templates under the Configure Tab. Click “Custom Template” to bring up the default Template, from here you can customise the default template.

The GoConnect widget follows the bootstrap 3 fluid grid system which renders a responsive page layout by default. The below diagram illustrates the structure of the HTML element.

Notice that there are some Mustache markups in the templates, these are used to show or hide form fields in the GoConnect widget. They are related to the form field configuration on the General Tab and therefore need to be left in the template – please do not remove these.

CSS Code Editor

You can find CSS Editor under the Customize Tab, select Custom CSS Tab to enter your custom css there.

Sample

The following is an example of a customized GoConnect widget.

Below is the css used in this example


    body{
        font-family: "HelveticaNeueLTStd-Cn", "Helvetica", "arial", "sans-serif";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-transform: uppercase;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: bold;
        line-height: 1;
    }

    ::-webkit-input-placeholder { color:#444; text-transform: uppercase; }
    ::-moz-placeholder { color:#444; text-transform: uppercase; } /* firefox 19+ */
    :-ms-input-placeholder { color:#444; text-transform: uppercase; } /* ie */
    input:-moz-placeholder { color:#444; text-transform: uppercase; }

    .container{
        width: 100%;
    }
    .st-form-group{
        margin: 0 auto;
    }
    .st-progress{
        border-radius: 0;
    }
    .st-progress-bar{
        background-color: #444444;
        border-radius: 0;
    }

    .st-btn.st-btn-primary{
        background: #000000;
        color: #ffffff;
        border: 0;
        border-radius: 0;
    }

    .thank-you-message{
        color: #444444;
    }

    .st-btn.st-btn-primary:hover, .st-btn.st-btn-primary:active{
        background: #444444;
    }
    [type=checkbox].st-form-control:before, .alpaca-controlfield-text input[type=checkbox]:before, .alpaca-controlfield-select select[type=checkbox]:before{
        color: #000000;
    }
    [type=checkbox].st-form-control, .alpaca-controlfield-text input[type=checkbox], .alpaca-controlfield-select select[type=checkbox]{
        border-radius: 0;
        margin: 0;
    }
    [type=checkbox].st-form-control:focus, .alpaca-controlfield-text input[type=checkbox]:focus, .alpaca-controlfield-select select[type=checkbox]:focus, [type=radio].st-form-control:focus, .alpaca-controlfield-text input[type=radio]:focus, .alpaca-controlfield-select select[type=radio]:focus{
        border-color: #444444;
    }
    select.st-form-control, .alpaca-controlfield-select select, textarea.st-form-control, input[type=text].st-form-control, .alpaca-controlfield-text input[type=text], input[type=password].st-form-control, .alpaca-controlfield-text input[type=password], input[type=datetime].st-form-control, .alpaca-controlfield-text input[type=datetime], input[type=datetime-local].st-form-control, .alpaca-controlfield-text input[type=datetime-local], input[type=date].st-form-control, .alpaca-controlfield-text input[type=date], input[type=month].st-form-control, .alpaca-controlfield-text input[type=month], input[type=time].st-form-control, .alpaca-controlfield-text input[type=time], input[type=week].st-form-control, .alpaca-controlfield-text input[type=week], input[type=number].st-form-control, .alpaca-controlfield-text input[type=number], input[type=email].st-form-control, .alpaca-controlfield-text input[type=email], input[type=url].st-form-control, .alpaca-controlfield-text input[type=url], input[type=search].st-form-control, .alpaca-controlfield-text input[type=search], input[type=tel].st-form-control, .alpaca-controlfield-text input[type=tel], input[type=color].st-form-control, .alpaca-controlfield-text input[type=color]{
        border-radius: 0;
    }
    select.st-form-control:focus, .alpaca-controlfield-select select:focus, textarea.st-form-control:focus, input[type=text].st-form-control:focus, .alpaca-controlfield-text input[type=text]:focus, input[type=password].st-form-control:focus, .alpaca-controlfield-text input[type=password]:focus, input[type=datetime].st-form-control:focus, .alpaca-controlfield-text input[type=datetime]:focus, input[type=datetime-local].st-form-control:focus, .alpaca-controlfield-text input[type=datetime-local]:focus, input[type=date].st-form-control:focus, .alpaca-controlfield-text input[type=date]:focus, input[type=month].st-form-control:focus, .alpaca-controlfield-text input[type=month]:focus, input[type=time].st-form-control:focus, .alpaca-controlfield-text input[type=time]:focus, input[type=week].st-form-control:focus, .alpaca-controlfield-text input[type=week]:focus, input[type=number].st-form-control:focus, .alpaca-controlfield-text input[type=number]:focus, input[type=email].st-form-control:focus, .alpaca-controlfield-text input[type=email]:focus, input[type=url].st-form-control:focus, .alpaca-controlfield-text input[type=url]:focus, input[type=search].st-form-control:focus, .alpaca-controlfield-text input[type=search]:focus, input[type=tel].st-form-control:focus, .alpaca-controlfield-text input[type=tel]:focus, input[type=color].st-form-control:focus, .alpaca-controlfield-text input[type=color]:focus{
        border-color: #000000;
    }

    .st-uploader-prompt{
        font-weight: bold;
    }
    a:link, a:visited, [type=checkbox].st-form-control:focus, .alpaca-controlfield-text input[type=checkbox]:focus, .alpaca-controlfield-select select[type=checkbox]:focus, [type=radio].st-form-control:focus, .alpaca-controlfield-text input[type=radio]:focus, .alpaca-controlfield-select select[type=radio]:focus{
        color: #999999;
    }
    .st-title.st-title-h1, .st-title.st-title-h2, .st-title.st-title-h3, .st-title.st-title-h4, .st-title.st-title-h5, .st-title.st-title-h6{
        font-family: "HelveticaNeueLTStd-Cn", "Helvetica", "arial", "sans-serif";
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    @font-face {
        font-family: 'HelveticaNeueLTStd-Cn';
        src: url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-BdCn.eot?#iefix') format('embedded-opentype'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-BdCn.otf')  format('opentype'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-BdCn.woff') format('woff'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-BdCn.ttf')  format('truetype'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-BdCn.svg#HelveticaNeueLTStd-BdCn') format('svg');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'HelveticaNeueLTStd-Cn';
        src: url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-Cn.eot?#iefix') format('embedded-opentype'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-Cn.otf')  format('opentype'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-Cn.woff') format('woff'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-Cn.ttf')  format('truetype'),
        url('//stackla-web-assets.s3.amazonaws.com/alexanderwang.stackla.com/fonts/HelveticaNeueLTStd-Cn.svg#HelveticaNeueLTStd-BdCn') format('svg');
        font-weight: normal;
        font-style: normal;
    }

Want to stay up to date with all the latest Stackla developer news? Sign up!