How to Add a CSS3 Theme to Your Project - dummies

How to Add a CSS3 Theme to Your Project

By John Paul Mueller

Seeing the vendor samples and working through the documentation are helpful, but most developers want to see a CSS3 theme in action. In every case, the only thing you really need to modify is the <style> link. However, to ensure that the example works completely and reliably, you need to modify the jQuery and jQuery UI links as well.

Copy the Accordion.HTML example to the same folder you’ve used for your theme. The following code shows the tags you should use to replace those used in Part IV when using the Le Frog theme (make sure you include the appropriate changes for your theme).

 href="css/le-frog/jquery-ui-1.10.3.custom.css" />

Load the example in your browser to see if the changes have worked. In most cases, you’ll see something like the example.


The first thing you should notice is that the jQuery UI control does indeed use the new theme. However, the submission button doesn’t use the style. This is because the example used a standard <input> button to perform the task. When working with themes, you need to use the full assortment of jQuery UI controls.

You can fix this problem by adding a jQuery UI button to the script, as shown here:

<script language="JavaScript">

The page will now present the correct appearance. Because you haven’t attached any jQuery UI behaviors to the button, it will continue to work as it did before.