Code, code and more code!

I've used a previous template that I used for a previous jQuery Mobile project, just so that I don't have to waste time writing code that I already have.

I've start off buying just building a simple nav panel with nothing more that a Music Player and About in. I plan to keep this through out my application.

Before I went further because I knew that I was going to create another page, I copied what I had and pasted it below. And shock it didn't work... but only because I had forgot to close off a div, once I had fixed that it worked fine.

I'm not the best at keeping my code tidy, so I am making an effort at trying to with this.


We can see here that all i've done is make a navigation panel which will pop out and have a little grid as it's icon. This is exactly what I want and don't plan to change this at the moment, I've also named the home page "home" in the id so when I refer to it in the controlgroup it know's where to look and will navigate to it.

I have done the same here, except I've just called the page About rather than Home.




This is all working fine now, I need to go to Themeroller for jQuery mobile and select my theme. I want a Blue head, and orange with everything else. I have also created a logo for my fictious company.

All I did was combine the word Music and Web Application to achieve this. I then created the tagline Soundtrack Your Day.

 This is how it is looking so far, I am happy with how it looks and will keep this theme throughout the whole application.

Themeroller is very simple to use all it requires is for you to drag and drop colours into places you want, you then download it, give it a name and import the CSS into your html page.

Inserting the img into the header was simple, it's the same as inserting an img in any webpage. I did make this responsive first by adding;
{
     Width: 100%;
     height: auto;
}

However, it scaled incredibly badly so I just kept it as it was.