How to Add a CSS3 Theme to Your Project

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).

<script
 src="js/jquery-1.9.1.js">
</script>
<script
 src="js/jquery-ui-1.10.3.custom.js">
</script>
<link
 rel="stylesheet"
 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.

image0.jpg

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">
 $(function()
 {
  $("#Configuration").accordion();
  $("input[type=submit]").button();
 });
</script>

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.

blog comments powered by Disqus
Advertisement

Inside Dummies.com