Starter CSS - Inject Custom CSS

  • Profile Image
    newschool
    Asked on September 29, 2011 at 12:28 PM

    Can you post a copy of the starter CSS for your existing themes for us to use when using the Inject Custom CSS option.

    Most of what you have for the default is fine, but we would like to tweak it a bit to fit our site. Having a nice clean CSS with all the possible stypes already set out to use would be a great resource for me and others.

    My plan is to create our own style and then use it every time we create a new form for our site.

    cb

  • Profile Image
    idarktech
    Answered on September 29, 2011 at 12:59 PM

    Hi there,

     

    Let me share you a small compilation yet very useful CSS for your FORM. 

     

     

    To change the color of the heading text:

    .form-header-group, .form-collapse-table, .form-pagebreak {
        color: blue;
    }

    Button's default state:

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-pagebreak-back, .form-pagebreak-next {
        background: -moz-linear-gradient(center top ,#FAA84C 0%, #FF7B0D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #C64F00;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
        color: #FFFFFF;
        font-size: 12px;
        padding: 6px 18px;
        text-shadow: 0 -1px 0 #C64F00;
    }

    This is for the button's hover effect:

    .form-submit-button:hover, .form-submit-reset:hover, .form-submit-print:hover, .form-pagebreak-back:hover, .form-pagebreak-next:hover {
        background: -moz-linear-gradient(center top ,#FBCB5D 0%, #EFA003 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
    }

     

    This is for the button's active state:

    .form-submit-button:active, .form-submit-reset:active, .form-submit-print:active, .form-pagebreak-back:active, .form-pagebreak-next:active {
        background: -moz-linear-gradient(center top ,#EFA003 0%, #FBCB5D 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 4px rgba(0, 0, 0, 0.1) inset;

    }

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

    You can also check here for a full CSS declarations.

     

    I hope this helps.

     

    Kindest Regards,

    idarktech

     

     

     

  • Profile Image
    mliz
    Answered on September 29, 2011 at 01:29 PM

    Hi Cb,

    You may download the full source code together with the javascript and css files which were used in creating the form.

    To download the full source codes for your form:

    1.  Go to Setup & Embed
    2.  Click the Embed Form button
    3.  Choose Source
    4.  Click the link that says "here"

    Feel free to contact us again if you have other questions. Thank you!