Form Setup‎ > ‎Look and Feel‎ > ‎

Working with Style Sheets

Style Sheet - General
 
 For users that are familiar with CSS to format web-pages, styles can easily be applied to specific sections of a form.  Virtually all elements of a form are CSS accessible when using the new rendering style of forms (all new forms created as of January/2014).  The steps are as follows:

 Applying Custom styles to elements

  1. Add the styles to the 'Page Style Sheet' (on the Options page).  Do not enter the opening, or closing script tags when inserting the styles.

    Example: To add a style called 'style1', paste the following into the 'page Style Sheet' window and click 'Save'.

    .style1

    {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 18px;
    }

  2. If the element for the CSS selector being referenced already exists on the form, then you are done.
    If a class needs to be added to the form, then go to the field where you want to apply the style and use the 'HTML' view of the HTML Editor.  Then paste in the appropriate code that refers to the style sheet.
    Example: To apply the above style to a caption label for a Plain Text item, select HTML view of the editor, and paste the following in and save it:

          <span class="style1">Breakout Sessions</span>

 

EXAMPLES

Changing the Font Style

To override the Font Family presets available in the "Look and Feel" section, insert the following code to change the font style.  By applying the following code, the font style will be applied to the entire form.

body { font-family: FONT NAME !important; }
  1. Note: where FONT NAME appears, insert the font style as appropriate.

    A list of websafe fonts and the CSS to use

 
Style Sheet - Background Images
 
To insert a background image on a form, insert the following code into the page style sheet field on the options page and add any of the attributes below to control how the image is positioned, repeated, etc.

Code to insert a background image

#TopErrorSpacer {
      display: none;
}

body {
background-image: url('enter path of image');
}


Code example with other attributes

#TopErrorSpacer {

      display: none;

}

body {

background-image: url( 'enter path of image');
background-repeat:no-repeat;
background-position: center top;
}


Fixed Background Image

#TopErrorSpacer {

      display: none;

}

body {

background-image: url( 'enter path of image'); 

background-repeat:repeat;

background-attachment:fixed;

background-position: center top;

}

Layering background images

It's possible to layer multiple background images, you just need to separate the urls and the attributes using a comma.  The first url/attribute refers to the top image.  In the example below, the top image (image1) will not repeat and be positioned at the top and centered and the lower image (image2) will repeat across the screen.


#TopErrorSpacer {

      display: none;

}

body {

background-image: url('image1'), url('image2');

background-repeat:no-repeat, repeat-x;

background-position: top center;

}


Adding space above a form to accommodate a background image

In some cases when you are using a background image, you will want the form to start lower down on the screen so that the form doesn't cover up the image.  Add the following code to the style sheet and adjust the value as needed.


#TopErrorSpacer {

      display: none;

}

body {
 margin: 100px;
}



Making a background image span across the whole screen above the top of the form
 
Make a background image as wide as you need it (1680 pixels should work in most cases).

Use the following code:



#TopErrorSpacer {

      display: none;

}

#bg_pattern {

                padding-top: 174px;

                background-image: url(/Images/pathofyourimage.png);

                background-repeat: no-repeat;

                background-position:center;

}

body {
 margin: 0px;
}

"padding-top" must match the height of the image.



All CSS Background Attributes
Property Description Values
Background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
Background-color Sets the background color of an element color-hex
color-name
transparent
Background-image Sets the background image for an element url(URL)
none
Background-position Sets the starting position of a background image left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
100px 200px - this is 100 pixels from the left and 200 from the top
Background-repeat Sets if/how a background image will be repeated

repeat will repeat across and down the screen
repeat-x will repeat across the screen only
repeat-y will repeat down the screen only
repeat
repeat-x
repeat-y
no-repeat
Form starting position Sets how far down from the top of the screen the form will start margin-top: 120px;


Adding Images to Section Divider Rows


Example code to insert an image into the section rows, adjust as needed:

  1. On the look and feel page, set the section title background colour to match the colour of the page background.

  2. Make a 1 pixel wide image of the bar you want to see on the form – the code below will repeat it across the screen.

  3. Upload the image to the header, but don’t save (this is the easiest way to get an image on the server), go into HTML mode on the editor and scroll to the bottom and copy the path to the image.

  4. Add and modify this code to the style sheet on the look and feel page.  You will need to adjust the height and width settings, paste in the path to your image, etc.

  5. .panel-title {
        background-image:  url(..//Images/b0134d58-efa5-4275-ad5b-d15cb08d7e5d.png);
        background-repeat: repeat-x;
        height: 38px;
        padding-top: 12px;
        padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;    
    font-style: Normal;
    font-size:18px;
    }

    .panel-heading {
    padding: 0px;
    border: 0px;
    }


Adjust Form Border Size

Add this into the page style sheet:

form { margin-left: auto; margin-right: auto; width:759px; background-color: #ffffff; border-right: #e7a614 thick solid; border-top: #e7a614 thick solid; border-left: #e7a614 thick solid; border-bottom: #e7a614 thick solid; }


Changing the colour of the Submit button

.btn-success {
color: #ffffff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #47a447;
border-color: #398439;
}

Changing the colour of the Add Registration Group and File Upload button

.btn-info {
color: #ffffff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-success.active, .open .dropdown-toggle.btn-info {
color: #ffffff;
background-color: #39b3d7;
border-color: #269abc;
}

Comments