1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    GigabyteJack is on a distinguished road

      0  

    Default Custom Toolbar & Button Gradients

    Custom Toolbar & Button Gradients


    Hi Everyone,

    I am trying to apply a custom css gradient to the toolbar and button components, I have the toolbar working but I run into trouble with buttons (especially back or forward buttons), see screenshot.

    I am guessing that I am not doing this the best way, can someone show me a better way?

    Code:
    <style type="text/css">
    /* works =p */
    .x-toolbar{height:3em;
    		padding:0 0.5em;
    		overflow:hidden;
    		position:relative;
    		border-top:1px solid #000;
    		background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5083c4), 
    																  color-stop(2%, #2c5282), 
    																  color-stop(100%, #192e49))}
    
    /* does not work, especially for back buttons */
    .x-button
    {
    		background-color: #192e49;
    		background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5083c4), 
    																  color-stop(2%, #2c5282), 
    																  color-stop(100%, #192e49)) !important}
    </style>
    Thanks in advance!
    GJ
    Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    We are writing a blog post on how to style your Sencha Touch apps easily. By using SASS you can just change some variables and completely customize the look and feel of any component we ship. For now I would suggest googling SASS and Compass. In the SDK download you can find the scss files for each component.

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    GigabyteJack is on a distinguished road

      0  

    Default


    Thanks Tommy, will have a play around with the scss files. Looking forward to that blog post!

    Thanks for pointing me in the right direction.

  4. #4
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Hey Tommy.

    I am also struggling with styling toolbar buttons. (I only need to change the color of the gradient)

    I have installed Ruby/Compass modified button.scss and compiled it to button.css which i have included after ext-touch-debug.css

    <link rel="stylesheet" href="ext-touch-debug.css" type="text/css">
    <link href="css/button.css" rel="stylesheet" type="text/css">
    <link href="mobile.css" rel="stylesheet" type="text/css">

    If you look at the image I have attached you will see that I only have these "toolbar buttons" left to style but nothing I change seems to have any effect.



    Can you give me some pointers as to which styles I should be modifying.

  5. #5
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Got it working... Sort of.



    But I had to replace the "data:image/png;base 64..." that Compass produced in the compiled css files.

    This is what the compiled css gave me.



    Replacing the base 64 strings with new strings that I encoded myself or simply copying the original strings from ext-touch-debugg.css fixed the problem.

    Any idea what I may have done wrong? My config.rb file looks like this:

    css_dir = "../css"
    sass_dir = "../sass"
    images_dir ="../images"



    Everything seems to be compiling without error. (But I am new to this so I cant be certain)



    Any clues to I might be doing wrong would be great.

    Sencha Touch is really awsome... JS, AJAX, SASS, RUBY, Compass has been a bit of a change comming from .NET WPF and Winforms development but this is only my 7th day playing around with it and our new app is nearly finished.

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Is it actually generating sencha-touch.css or just the individual css files? Btw, your app looks really nice.

  7. #7
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    It is just generating individual css files. How do I get it to make a single sencha-touch.css?

    Thanks for the comment.

Similar Threads

  1. Button in Toolbar & save Record and select
    By Corina in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 20 Jan 2010, 2:01 AM
  2. Updating image on toolbar button and paging toolbar issues
    By Jangla in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Jul 2009, 1:21 AM
  3. Replies: 3
    Last Post: 28 Apr 2009, 1:11 AM
  4. insert button into toolbar wont update the toolbar.items
    By Dr. Flink in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Feb 2009, 11:13 PM
  5. [NEW] Custom Drag & Drop Tutorial - Parts 1 & 2 released
    By jsakalos in forum Ext 1.x: Help & Discussion
    Replies: 10
    Last Post: 21 Sep 2007, 9:47 AM

Thread Participants: 2