Using CSS Themes in HTML5 Uploader

Supported technologies: HTML 5

HTML5 Uploader allows changing its appearance using a CSS theme file.

As an example, you can use the SampleTheme.css skin included in Upload Suite SDK. To change HTML5 Uploader appearance just add a link to your CSS file.

<link rel="stylesheet" type="text/css" href="Scripts/css/aurigma.htmluploader.control.css" />
<link rel="stylesheet" type="text/css" href="Html5UploaderThemes/SampleTheme.css" />
<script type="text/javascript">
var fu = $au.imageUploaderFlash({
    id: 'Uploader1'
<link rel="stylesheet" type="text/css" href="Html5UploaderThemes/SampleTheme.css" />

<aur:ImageUploaderFlash ID="Uploader1" runat="server">
      require_once 'ImageUploaderFlashPHP/ImageUploaderFlash.class.php';
    <link rel="stylesheet" type="text/css" href="Html5UploaderThemes/SampleTheme.css" />

    $uploader = new ImageUploaderFlash("Uploader1");

As the result, HTML5 Uploader will look like the following screenshot.

Customizing HTML5 Uploader Skin

You can use SampleTheme.css as a base to create your own skin. To do this, find SampleTheme.css in the C:\Program Files\Aurigma\Upload Suite 8.5.81\HTML5-Flash\Html5UploaderThemes\ folder and modify styles. The following steps demonstrate how it can be done.

  1. Modify styles in SampleTheme.css and put images or fonts, used in a new look and feel, on your website. Classes in the CSS file, which contain settings of a user interface, are self-documented. It will not be so hard to understand settings of what element are stored in a particular class. As an example, we change the title font, make the Send button bigger, and change the Upload Pane background color. See snippets of the SampleTheme.css file below.

    /* Change font of the title */
    .titleText {font-weight: bold;}
    /* Make the Upload button wider */
    .sendButton {width: 150;}
    /* Change the Upload Panel background */
    .tileList{background-color: #b68f72;}
  2. Upload the SampleTheme.css file on your website.
  3. Specify a URL to this file as a value of the flashControl.themeUrlThemeUrl (ASP.NET)ThemeUrl (PHP)themeUrl (JavaScript) property. See code samples above.
  4. Run your application and make sure that HTML5 Uploader looks like the following screenshot.

See Also