Results 1 to 9 of 9

Thread: Apple style bottom tab bar

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    12
    Vote Rating
    0
      0  

    Default Apple style bottom tab bar

    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.



    Code:
    .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%)
    }

  2. #2
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Vote Rating
    22
      0  

    Default

    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
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    12
    Vote Rating
    0
      0  

    Default

    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.

  4. #4
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Vote Rating
    22
      0  

    Default

    Quote Originally Posted by lsstacc View Post
    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-introd...-sencha-touch/

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

    Hope this helps
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    12
    Vote Rating
    0
      0  

    Default

    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.

  6. #6
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395
    Vote Rating
    22
      0  

    Default

    Quote Originally Posted by lsstacc View Post
    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  7. #7
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
      0  

    Default

    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-

  8. #8
    Sencha User gcallaghan's Avatar
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247
    Vote Rating
    0
      0  

    Default

    Once you go sass you never go back!

  9. #9
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
      0  

    Default

    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

Similar Threads

  1. The new Apple and Android themes (0.97)
    By lasseok in forum Sencha Touch 1.x: Discussion
    Replies: 7
    Last Post: 28 Dec 2010, 12:46 PM
  2. Replies: 2
    Last Post: 30 Jul 2010, 6:50 PM
  3. [FNR] TabPanel - Bottom Position and Plain Style CSS Wrong
    By thejoker101 in forum Ext GWT: Bugs (2.x)
    Replies: 1
    Last Post: 22 Mar 2010, 1:16 PM
  4. Replies: 2
    Last Post: 4 Feb 2009, 12:58 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •