cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

how to change hybrid web container html code

Go to solution
Former Member

on ‎06-19-2012 11:19 PM

0 Kudos

Hello all.

After generating an app, in generated workflow directory I can see several files, including CSS, JS and HTML. In "workflow_jQueryMobileLookAndFeel.html" I can see all the app DIV's included.

My goal is to change some colors and shapes in generated html (none of the 5 jQuery Themes suites our needs). For example, I want to change the color of an inserted button and the color of the input field labels.

First of all, I can add a CSS file to the project and (I think) it will not be deleted next time I regenerate it and will be passed to SUP server and subsequently to the device.

Next, I would want to change workflow_jQueryMobileLookAndFeel.html, to use MY CSS definitions, but how can I send those changes to SUP server? And how can I avoid these changes do be deleted when regenerating the workflow?

Regards,

Sup Starter

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Vlad
Advisor
Advisor
‎06-20-2012 10:17 AM
0 Kudos

Hello,

I think you cannot change the HTML or CSS file directly, because it will be regenerated by Workspace. However, if you change the page layout using JavaScript (in the custom.js file), you will achieve the goal. This file is not affected by the Web Package generator.

Kind regards,

Vlad

Show replies
Show replies
Former Member
‎06-20-2012 10:35 AM
0 Kudos

Thanks Vladislav.

And should I be able to change, in custom.js, the css that the app will use in runtime?

The idea is to copy the default CSS to another one, with different colors, and then, in custom.js, change the CSS file name.

Regards,

Sup Starter

Vlad
Advisor
Advisor
‎06-20-2012 12:13 PM
0 Kudos

Well, acdording to the help link: http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc60009.0212/doc/html/vhu13... you should have an access to create a custom theme.

> Ability to choose themes when you generate the files for the mobile workflow package. You can choose JQM standard themes for the generated application or enter a name for a custom theme.

Because for JS solutions, you cannot change CSS files downloaded from web, but you can change some CSS rules on the active page (I assume that it would be possible to add a link into the hybrid application which points to the CSS file from the internet). And then add this link into the <head> section.

Answers (1)

Answers (1)

Former Member
‎07-06-2012 12:43 AM
0 Kudos

Hello Sup Starter,

Have you tried the ThemeRoller of jQuery Mobile? You can drag and drop colors on the buttons, links, backgrounds, etc.

http://jquerymobile.com/themeroller/index.php

Regards,

Daniel

PD: Please reward points if useful

Show replies
Show replies
Former Member
‎10-26-2012 7:22 PM
0 Kudos

Daniel, how i can use the themes generated by ThemeRoller on my sup Workflow? Where i set the created theme? in which the project file?


Can you create a simple tutorial for me?

Thanks

Former Member
‎11-05-2012 5:27 PM
0 Kudos

Hello Martini,

When you download your theme from theme roller you will get:

1) your theme as a ".min.css file"

2) and as a ".css file",

So, open your Theme  .CSS File (the second option above) and you would see something like this...

What i did was.. i copied the code for the theme "A", and replace the "theme A" code in this file at the generated workflow code:

And the next time you build & upload your HWC app, (if you are careful with the regenerate classes option) you will have your brand new theme

Regards,

Daniel Yrigoyen.

Former Member
‎11-06-2012 5:48 PM
0 Kudos

Hi Daniel, thanks

You solved my problem

Ask a Question