iTunes Festival – App like toolbars

This is a quick tutorial about how to emulate the style of the ‘original’ ios native apps: made similar to iTunes.

First we have to take some steps to turn the flat ui footer into a slick rounded app like navigation bar. Let’s start by counteracting the faded opacity that is applied to toolbars in jQuery mobile by default when using data-role=”fullscreen”

/* Apply gradient to footer and contents for app like navigation*/
.itunes .ui-footer-fullscreen {
opacity: 1;
}
.itunes .ui-navbar {
margin-top: -6px;
}

Next we want to change the font size of the text in our navbar tab, this needs to be very small to fit underneath an icon much like in an iTunes styled app.

/* Change text size and font color to create app like navigation*/
.itunes .ui-navbar .ui-btn-text {
font-size: 11px; color: #999;
}
.itunes .ui-navbar .ui-btn-active .ui-btn-text {
font-size: 11px; color: #fff;
}
.itunes .ui-navbar .ui-btn .ui-btn-inner {
padding-top: 34px !important;  
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4F4F4F), to(#1F1F1F), color-stop(.5,#000000));
}

Now we are going to add the icons, once again we need to prepare the tabs in the nav bar first. Adding width and height attributes to the ui-icon ensures that the icon is not cut off and given more space then the default icons have.

/* Overide usual icon size and display*/
.itunes .ui-navbar .ui-btn .ui-icon {
width: 34px!important; 
height: 30px!important; 
margin-left: -15px !important; 
box-shadow: none!important; 
-moz-box-shadow: none!important; 
-webkit-box-shadow: none!important; 
-webkit-border-radius: 0 !important; 
border-radius: 0 !important; 
}

Next we add the actual icons, there are two for each tab, one white icon and one blue icon for when the tab is active. To add these we use the ui-icon- and then the title of the icon, in this case section of the web app and the ui-btn-active class for the identicle blue versions.

/* Change icons to create app like navigation*/
.itunes .ui-icon {
background:  rgba(0,0,0,0);
}
.itunes .ui-icon-gigs {
	background-image: url(images/gigs.png);
	background-repeat: no-repeat;
}
.itunes .ui-btn-active .ui-icon-gigs {
	background-image: url(images/gigs-blue.png);
}
.itunes .ui-icon-live {
	background-image: url(images/live.png);
	background-repeat: no-repeat;
}
.itunes .ui-btn-active .ui-icon-live {
	background-image: url(images/live-blue.png);
}
.itunes .ui-icon-news {
	background-image: url(images/news.png);
	background-repeat: no-repeat;
}
.itunes .ui-btn-active .ui-icon-news {
	background-image: url(images/news-blue.png);
}
.itunes .ui-icon-about {
	background-image: url(images/about.png);
	background-repeat: no-repeat;
}
.itunes .ui-btn-active .ui-icon-about {
	background-image: url(images/about-blue.png);
}
.itunes .ui-navbar .ui-btn-active {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4F4F4F), to(#1F1F1F), color-stop(.5,#000000)); 
border-top: 1px solid #666;
}
.itunes .ui-navbar .ui-btn-active .ui-btn-inner {
background-color: #999999; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(.5,#0F0F0F)) !important; 
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Thats it, your web app should now have shiny slick toolbar and tabs thanks to a few css tweeks.

For a tutorial on creating a back button similar to that of the iTunes Festival App visit: http://appcropolis.com/how-to-make-iphone-back-button-in-jquery-mobile/