PDA

View Full Version : Apple style bottom tab bar



lsstacc
11 Feb 2011, 6:05 AM
For those who just want to modify the theme via style sheet.
Here is an example to get you start with.

you can include the style in your index.html file.
or
create a new css file and included in your head for the style override.





.x-tabbar-dark.x-docked-bottom .x-tab{
color: #787878;
}

.x-tabbar-dark.x-docked-bottom .x-tab-active{
color: #fff;
background-color:#1c2a3a;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#454545), color-stop(2%, #454545), color-stop(50%, #2c2c2c), color-stop(51%, #121212), to(#0d0d0d));
background-image:linear-gradient(top, #4e74a2 0%, #2d435d 2%, #111922 100%);text-shadow:rgba(0, 0, 0, 0.5) 0 -0.08em 0
}

.x-tabbar-dark.x-docked-bottom {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#434343), color-stop(2%, #2d2d2d), color-stop(50%, #151515), color-stop(51%, #000), to(#000));
background-image:linear-gradient(top, #466890 0%, #24364c 2%, #080c11 100%);
}

.x-tabbar-dark.x-docked-bottom .x-tab img{
background-color:#787878;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #a2a2a2), color-stop(2%, #9a9a9a), color-stop(100%, #585858));
background-image:linear-gradient(top, #7c7c7c 0%, #464646 2%, #292929 100%)
}

.x-tabbar-dark.x-docked-bottom .x-tab-active img{
background-color:#0a7aff;
/*
background-image:-webkit-gradient(linear, 0% 0%, 20% 100%, color-stop(0%, #e0f1ff), color-stop(60%, #98c5ee), color-stop(61%, #1d96f7), color-stop(100%, #46e9ff));
*/
background-image:-webkit-gradient(radial, 60% 90%, 0, 120% 390%, 120, from(#46e9ff), color-stop(50%, #1d96f7), color-stop(51%, #98c5ee), color-stop(100%, #e0f1ff));
background-image:linear-gradient(top, #57a3ff 0%, #2488ff 50%, #0a7aff 51%, #006df0 100%)
}

AndreaCammarata
11 Feb 2011, 6:44 AM
Hi lsstacc.
Thank you for sharing.
However I don't suggest to edit Sencha Theme CSS directly, but use SASS and Compass to generate your own theme.
It's really simple to use and it have to be a must to know if you want to learn at best how to develope mobile application with Sencha Touch.

Hope this helps

lsstacc
11 Feb 2011, 7:03 AM
I apologize if i didn't make it clear.
you can override the style by including it in the index.html or a new css file.
I wouldn't suggest to modify the sencha-touch-css file directly as well.

Thus it will still load the default style if your style sheet isn't readable on different environment.

AndreaCammarata
11 Feb 2011, 7:18 AM
I apologize if i didn't make it clear.
you can override the style by including it in the index.html or a new css file.
I wouldn't suggest to modify the sencha-touch-css file directly as well.

Thus it will still load the default style if your style sheet isn't readable on different environment.

That's not even the best way to do it.
Your way even work to customize the style, but if you want do to a "perfect work" you have to recompile the SASS file with all your custom style applied.

I suggest you to read this blog article
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/

or watch this video to know how to do this
http://vimeo.com/17879651

Hope this helps

lsstacc
11 Feb 2011, 7:34 AM
i am just not a fan of SASS & Compass, and ideally it is generating a new style sheet to override the original. Which is not much differ then creating the style sheet our-own.

AndreaCammarata
11 Feb 2011, 7:58 AM
i am just not a fan of SASS & Compass, and ideally it is generating a new style sheet to override the original. Which is not much differ then creating the style sheet our-own.

That's your choice, but you never know what you are missing.

davidkaneda
11 Feb 2011, 3:39 PM
There are a lot of differences, actually, especially in regard to optimization. Also, the SASS comes with tools to do some of these things for you. For an example, check out the included apple.scss (which I think accomplishes what you're looking for), and is a good demo of a custom stylesheet-

gcallaghan
11 Feb 2011, 3:52 PM
Once you go sass you never go back! ;)

davidkaneda
11 Feb 2011, 3:55 PM
Couldn't agree more. Anecdotally, take a look at how easily we added animations to the new website this week: http://www.sencha.com/scss/inc/_animations.scss