How to View Interactive CSS3 Demos - dummies

How to View Interactive CSS3 Demos

By John Paul Mueller

The CSS3 development-bundle folder on jQuery contains a lot of useful material. One of the first pieces you should look at is the contents of the development-bundledemos folder, which contains examples of how to use the various jQuery UI features with your theme.

Unfortunately, none of these examples actually use the theme you created unless you modify them to do so. For example, the custom-icons.html example in the development-bundledemosaccordion folder shows how to perform this task, but doesn’t use your theme by default.


Fortunately, it’s easy to modify the example so that it does appear with your theme in place. The following procedure tells you how to modify the custom-icons.html example — other examples follow the same pattern.

  1. Remove the existing jQuery, jQuery UI, and style tags.

    You need to remove the general tags shown here for this example.

    <link rel="stylesheet"
    <script src="../../jquery-1.9.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.accordion.js">
    <script src="../../ui/jquery.ui.button.js"></script>
    <link rel="stylesheet" href="../demos.css">
  2. Add the updated jQuery, jQuery UI, and style tags shown here.

    Make sure you use the links provided in index.html. Because this example is several layers deep in the hierarchy, you must add ../ for each folder level that the example is below the main level (normally three levels, as shown here).

     href="../../../css/le-frog/jquery-ui-1.10.3.custom.css" />
  3. Reload the page.

    You see the themed output. This is a typical example of what themed output might look like.