voyent
Custom Mobile Themes  XML
Forum Index -> ICEmobile General
Author Message
bryanpugh

Joined: 05/Oct/2009 00:00:00
Messages: 46
Offline


I would like to create a custom skin for my ICEmobile website. I couldn't find the documentation for doing this, but from looking through the jsp project it appears that I will need to edit the build.xml, and put my files in the resources directory, or create my own separate project. What is the suggested method?

Could point me at any resources?

Thanks.
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


Hi,

Was the new theme for a particular device or did you want to override several device themes, or just add a new theme that would apply to all devices? Is this project just using JSP? Currently we have different themes for iphone, ipad, blackberry, as well as different themes for android phones and tablets. There's also a new theme called Lightning designed for CSS2 or older browsers, like IE.

I would suggest starting with one of our themes, copying the CSS (just grab the CSS that's served to the browser, or you can get it from the src bundle, after a build, under /jsp/build/skins/out or jsf/components/component/build/skins/out).

You'll see the definitions for all the components in the CSS file. So, for instance, if you want to customize the <mobi:pagePanel> component, you can modify any blocks starting with .mobi-pagePanel, etc.

If you want to create custom themes for any of the supported platforms, you can also prefix the CSS classes with the device theme name:

html.android .mobi-pagePanel{...
html.honeycomb .mobi-pagePanel{...
html.bberry .mobi-pagePanel{...
html.iphone .mobi-pagePanel{...
html.ipad .mobi-pagePanel{...

Once you've created your custom CSS file, you can just include it in your pages with a <link> <h:outputStylesheet> or <mobi:deviceResource> component.

We're also starting work on integrating Theme Roller support for ICEmobile, so please let us know if you'd be interested in this as well.

Thanks!
Philip

.
bryanpugh

Joined: 05/Oct/2009 00:00:00
Messages: 46
Offline


Thank you for the information.

My project is to create a mobile site that matches the theme of an existing site. I need it to look the same on all devices and all resolutions at or below 320px wide. I had considered just overriding pieces of one of the existing themes, but because my theme, for the most part, is very simple I would have to start by overriding a 'lot' of the base theme.

So, as an alternate, I am just taking little pieces from the theme that is closest and not actually using a theme as a base per say.

PS I like the direction of using a theming tool/framework. I don't know Theme Roller, but I expect it is good if you have chosen it.

Thanks.
vnidan

Joined: 09/Feb/2009 00:00:00
Messages: 17
Offline


Looks like you guy went with ThemeRoller for ICEMobile which great, but I can't seem to find any documentation on it. I am currently using ICEFaces with a custom theme using the entry org.icefaces.ace.theme, which works like a charms. So how do I make my theme work for ICEMobile?
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


Hi,
Yes, jQuery Mobile Theme classes were introduced in 1.3.0, making it possible to use custom ThemeRoller (mobile) themes, but this is still preliminary support. There is information on the CSS class mappings here:

http://www.icesoft.org/wiki/display/icemobile/Theming

Essentially, we currently support the default jqm CSS classes, but do not support changing the default swatch modes. To use a custom theme just add your theme CSS and then set the following base ICEmobile theme, which will bring in the minimal structural CSS:

<mobi:deviceResources theme="base"/>

I would also suggest using the latest snapshot build:

http://res.icesoft.org/snapshots/icemobile/

You can also test a basic ThemeRoller theme in the Mobile Showcase by setting the theme switcher dropdown to 'jqm':

http://labs.icesoft.com/mobileshowcase/showcase.jsf
http://labs.icesoft.com/mobileshowcase/simulator

Thanks,
Philip

.
 
Forum Index -> ICEmobile General
Go to:   
Powered by JForum 2.1.7ice © JForum Team