PDA

View Full Version : Custom Toolbar & Button Gradients



GigabyteJack
23 Jun 2010, 10:30 PM
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?



<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

TommyMaintz
24 Jun 2010, 11:09 AM
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.

GigabyteJack
24 Jun 2010, 4:59 PM
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.

SimonFlack
12 Jul 2010, 5:45 AM
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.

http://lh5.ggpht.com/_yBxLihSnjhA/TDsagPDlhdI/AAAAAAAAA6o/kFtUNXnyqUU/s800/Untitled-1.jpg

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

SimonFlack
13 Jul 2010, 3:16 AM
Got it working... Sort of.

http://lh6.ggpht.com/_yBxLihSnjhA/TDxFlIOZTMI/AAAAAAAAA7I/5W4QIbu7A3E/s800/Untitled-1.jpg

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.

http://lh3.ggpht.com/_yBxLihSnjhA/TDwreUDl8ZI/AAAAAAAAA6w/RNptgzLOVJs/s800/Untitled-2.jpg

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"

http://lh6.ggpht.com/_yBxLihSnjhA/TDxImYu08FI/AAAAAAAAA7Q/rVxgVb6F8pc/s800/Untitled-3.jpg

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

http://lh6.ggpht.com/_yBxLihSnjhA/TDxJKshLIII/AAAAAAAAA7U/FlkFdbtRaq8/s800/Untitled-4.jpg

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.

TommyMaintz
14 Jul 2010, 11:25 AM
Is it actually generating sencha-touch.css or just the individual css files? Btw, your app looks really nice.

SimonFlack
15 Jul 2010, 10:10 PM
It is just generating individual css files. How do I get it to make a single sencha-touch.css?

Thanks for the comment.