3.6 Styling the Page

Hello everyone, this is Reggie Dawson. Welcome to the Building an App with Cordova course with tuts plus. In this video we will apply some styling to our app. First go over to the jQuery mobile site. If you click on Themes, you'll be taken to the ThemeRoller. This allows you to create multiple themes you can change on the fly in your app. It also helps by providing a WizzyWig environment for creating your theme. We also have the option of using Adobe Color to choose our colors. Adobe Color are color schemes created by the community that uses this tool. Color is useful as it comes with a theme with colors that compliment each other. First I will set the header color. It's as simple as dragging your color to the component you wanna change. Next, I will set the body color. I won't go too in depth, but rest assured there are numerous possible combinations. After we have something we like we can download the theme zip. Here it gives you the option to name your theme as well as instructions to add your theme to your project. After you have downloaded and unzipped the theme, copy the contents of the themes folder into your CSS folder inside of your WWW folder in your project. We will also need the jquery.mobile.structure.css from the jQuery mobile download. After that we need to replace our references we have to our css file in our index.html file. Then we will replace our css file we have in our index.html file with references to our custom theme, icons, and structure css file. Make sure the structure css file comes last. After we've added the references to our theme, I have a small graphic that I am gonna use for the branding of our ad. Again, this is just an example, and a final app would have way more polish. I'm just trying to give you an idea of what you can do. I'm gonna copy this file into the img folder inside of the www folder. And then I will add a reference to it on our first page. One last thing we need to do as apply the them to our header bar. Since it is outside the page container it does not grab the theme. To add it we go to index.js and add. This theme, colon a inside of curly braces, tells this toolbar it will adopt the a theme. Remember, I told you we could create multiple themes. In this way we can specify different components to use different themes in the same app. After that we can save and preview our work. As you can see, it's not gonna win any awards, but it is a full app. That's everything you need to know to create an app with Cordova. Now go out and create the next great app.