Apply Custom CSS Files to Web Skins

You can use custom CSS files with web skins. Creating a CSS file requires web designer expertise; however, applying a CSS file to web skin does not require web designer expertise.

The below instructions are for using a CSS file and assume the Template Web Skin already exists. If you are using a full HTML file, see Custom HTML Section Files for Web Skins for instructions on using the Upload a custom HTML section file option in the Add/Edit Web Skin screen.

The below instructions are also for updating a Template Web Skin but you can use the same process for Custom Web Skins using the Edit link next to the Web Skin drop-down on the appropriate online application configuration screen.

1. Click the Web Skins link from the Main Menu. The Web Skins screen opens.
2. Select the web skin to update with the CSS file.
3. Right-click and select Edit. The Edit Web Skin screen opens.
4. If you want to display the registration set within an iFrame, set the values in the Page Settings section to the below. If you do not want to display registration within an iFrame, you can leave the Page Settings section set to the default values. 
   • Page Width - 100
   • Alignment - Center
   • Page Width Unit - Percent
   • Content Width - 100
5. Expand the Page Sections section.
6. Select Design the page sections using the editor in the Web Skin Options. Top, Left, Right and Bottom sections display.
7. Expand the Bottom section.
8. Select Create using the editor in the Content Type - Bottom Presentation. A text editor displays.
9. Click the Source button to view the HTML of the text editor.
10. Paste the following HTML-tag into the text editor:
    

    <style type="text/css">
    <!--/* ... CSS-Section ... */-->
    </style>

11. Copy all the text from the CSS file.
12. Paste it into the text editor, overriding the <!--/* ... CSS-Section ... */--> line.
13. Click OK.