O'Reilly logo

jQuery UI Themes Beginner's Guide by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action - placing elements on the page

Let's modify our todo list widget to include a due date. It's great to have a todo list; it's even better if it eventually gets done. We'll update our widget theme styles to position the due date element within the widget.

  1. Open the index.html file from the previous todo list examples and replace the content with the following:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Todo List</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="todo-list">
    <div class="due-date">Due - Last Week</div>
    <h3>TODO</h3>
    <ul>
    <li>Design user interface</li>
    <li>Implement form validation</li>
    <li>Deploy</li>
    </ul>
    </div>
    </body>
    </html>
    
  2. Open the style.css file from the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required