Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

12. Improving Forms > Time for action – adding uniform for styling the unstylab...

Time for action – adding uniform for styling the unstylable

Time for action – adding uniform for styling the unstylable Follow these steps to use the Uniform plugin to gain styling control over your form elements: Let's get the Uniform plugin and take a look at how that works. Head over to http://uniformjs.com/ and click on the big Download Uniform button. Unzip the folder and take a look inside. This is pretty straightforward, right? Some styles, a demo, some images, and two versions of the Uniform plugin—one minified and one not. We've seen this before. By default, Uniform comes with a default stylesheet and images. However, other styles are available. Back on uniformjs.com, if you click on Themes in the navigation, you'll see the themes that are currently available. I really like the look of Aristo, so I'm going to download that. This gets me a simple ZIP file with just some css and images inside: Next, we need to get these files into our own project and attached to our HTML page. Let's start with the JavaScript. Copy jquery.uniform.min.js to your own scripts folder and attach the Uniform script between jQuery and your own scripts.js file: <script src="scripts/jquery.js"></script> <script src="scripts/jquery.uniform.min.js"></script> <script src="scripts/scripts.js"></script> </body> Now copy the CSS file for the theme you'd like to use to your own styles folder and attach it in the head of the document: <head> <title>Chapter 12: Improving Forms</title> <link rel="stylesheet" href="styles/uniform.aristo.css"/> <link rel="stylesheet" href="styles/styles.css"/> The last thing we need to grab is the associated images. Copy the contents of your chosen theme's images folder to your own images folder. Your own project's structure should now look similar to the following screenshot: Now, we're ready to call the uniform() method to style our unstylable form elements. Open up your scripts.js file, and insert a document ready statement: $(document).ready(function(){ //our code will go here }); Uniform allows us to pick and choose which form elements we'd like to style. In this case, we want to style all four stubborn elements, so our selector will be: $(document).ready(function(){ $('select, input:checkbox, input:radio, input:file'); }); Then, all that's left to do is call the uniform() method: $(document).ready(function(){ $('select, input:checkbox, input:radio, input:file').uniform(); }); Now if you refresh the page in the browser, you'll see these stubborn and unstylable form elements now match the Uniform theme that you've selected. There are still some funky CSS things to take care of, and our fieldsets, legends, buttons, and text inputs don't match. Let's write a bit of CSS to bring it all together. Styles for all We still have some CSS things to clean up—our lists of checkboxes and radio buttons still have their bullets and our text inputs, buttons, fieldsets, and so on are still unstyled. Let's style everything to match the Uniform theme we've selected.

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint