How to Create a Media Query in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Apply CSS3 Effects and Transforms in Dreamweaver

How to View Interactive CSS3 Demos

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-bundle\demos 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-bundle\demos\accordion 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.

blog comments powered by Disqus
CSS Code Hinting in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel
How to Transform Objects with CSS3
How to View and Access Predefined CSS3 ThemeRoller Themes
How to Apply Custom Class Styles in Cascading Style Sheets (CSS)