Gurus, Really Need Help on Theming

[ivonivon]

Dear gurus,

I'm new to sencha, and currently designing mobile site for iphone.
Need guide on styling my web:
1. I'm using TabPanel to navigate through site.
Default style for TabPanel is gradient color using css: background-image: -webkit-gradient right?
Question: How do you insert logo in TabPanel? Because if I use background: url(mylogo), the gradient then dissapear (I want the gradient as background color for my logo).

2. Logo in TabPanel
I'm aware that css style for dock: bottom and dock: top of TabPanel result in different look.
What if I want to show icon even though dock: top is used? I can copy the dock: bottom style to dock: top css, but I need 'smarter' way to do this.

3. Centering a content inside panel
I'm currently using style: margin: 0 10% to centered content.
Is there way to center a content in sencha way?

4. Stretch image to fit width
For every image in content, is there a way to fit maximum width of screen, and not overlaps with next image when I swipe? (i'm using carousel layout).

template_ios.jpg

I'd very grateful if one can give example with code snippet in real example.
Thanks much for support!

Regards,

[Bunchofstring]

I'm not a guru at all, but this is interesting so I'll contribute what I can.

"Default style for TabPanel is gradient color using css: background-image: -webkit-gradient right?"
Answer: Yes

"How do you insert logo in TabPanel?"
Answer: Haven't tried this, but looking at the docs (http://docs.sencha.com/touch/2-0/#!/...nel-cfg-tabBar), you should be able to configure the tabBar with an Ext.Img item

"What if I want to show icon even though dock: top is used?"
Answer: Your method of using the style from dock: bottom seems smart to me. Just remember that typically, classes are better than copying the styles inline. You could create a custom tabBar (extend the one in the framework) to apply the appropriate class from doc: bottom even when dock:top is used. Then just use that custom tabBar in your TabPanel.

"Is there way to center a content in sencha way?"
Answer: http://docs.sencha.com/touch/2-0/#!/guide/layouts

"For every image in content, is there a way to fit maximum width of screen, and not overlaps with next image when I swipe?"
Answer: Each item in your carousel could be an Ext.Img. Use Web Inspector or some other desktop browser tool to view the resulting markup. From there, you should be able to use background-size: cover in the CSS to get the effect you want.

Last thing: Remember that the documentation is your friend. I hope this helps.