It's all about the answers!

Ask a question
QuestionsTagsUsersBadges
Follow this question
Question details

×42,788

question asked: Sep 25 '09, 8:27 a.m.
question was seen: 10,310 times
last updated: Jun 11 '15, 11:17 a.m.

Related questions

FAQ - How this Forum works

Jazz Server Web GUI Themes Templates

0
Danijel Saban (21●1●3●2) | asked Sep 25 '09, 8:27 a.m.
Hi

I would like to have more information about new Themes feature in 2.0.0.1 version.

1. What is the structure of themes template that can be used to upload (HTML, CSS, Ajax structure)

2. Where can be found (system files) default themes template that is shown in Themes under Server configuration

3. What parts of theme template can be modified (header, footer, left menu, main area ...)

4. Is it possible to download some finished themes templates from IBM Jazz Community site

Best regards
Danijel

5 answers

Most liked answers ↑|Newest answers|Oldest answers

0
permanent link
Jakub Jurkiewicz (596●3●2) | answered Oct 16 '09, 5:12 a.m.
During the investigation we got the following answers from the Jazz development:

* It doesn't matter what the CSS files in a theme are named. All *.css files in the theme .zip will be applied to every page.
* The themable nodes are spots in the DOM where the user can inject either custom HTML or a JavaScript widget. If they're using HTML (for example, html/aboveBanner.html), the contents of the .html file are simply set to the innerHTML property of the themable node. If they're using a JavaScript widget (for example, jazz.theme.AboveBannerWidget), the widget is instantiated and appended as a child node of the themable node.
* The user can create any widgets that could be built using the Jazz Foundation... Since Foundation 1.0.x.x ships with Dojo 1.2.3, they can use any of the Dojo 1.2.3 libraries or any of the Foundation libraries that are not marked internal. For example, they could use jazz.client.xhr to send XHR requests from their widget. However, this means we wouldn't support widgets that would require other external libraries.
* All *.js files in the theme .zip are eval'ed when the page loads. This means it is possible to define *and instantiate* widgets in the JavaScript code included in theme... so the user isn't limited to placing widgets in the themable nodes. Their JavaScript code could define a widget, create an instance of it, and add it anywhere in the DOM tree.
* The default look and feel of the Web UI isn't done with a theme right now, so there is no original theme template we could give to the customer. The default look and feel is hard-coded into the product... Theming gives the customer the ability to override some of that default look and feel.
0
permanent link
Danijel Saban (21●1●3●2) | answered Oct 22 '09, 12:06 p.m.
Hi Jakub

I was experimenting with changing themes options and I have some questions -> It is all about header and banner. https://jazz.net/wiki/bin/view/Main/WebUITheming

1. According to this image https://jazz.net/wiki/bin/viewfile/Main/WebUITheming?rev=1;filename=theming_hotspots.jpg there should be opportunity to implement banner.

I tried to change (implement) banner with html/aboveBanner.html part, but this adds banner above header without any content inside.

This is our Jazz Server preview after theme.zip was uploaded:

http://www.innundo.net/reactor/01.jpg

Our uploaded theme html and css source preview:

http://www.innundo.net/reactor/02.jpg
http://www.innundo.net/reactor/03.jpg

After all, we have try normal browser preview of aboveBanner.html page everything is OK:

http://www.innundo.net/reactor/04.jpg

All files went to Jazz server in this file tree composition:

http://www.innundo.net/reactor/05.jpg
http://www.innundo.net/reactor/06.jpg

My questions are:
    1. Why this is not working?
    2. Is this file tree order OK (in contexts of uploading to Jazz server) ?
    3. Are html & css OK (doctype, utf-8, ..).
    4. What type of images we can use (jpg, gif, PNG (8,16,32bit with or without transparency, ). I know that lots of things about what you see depend from browser to browser, but this question is about Jazz framework.


2. Also, I picked up part of the header CSS with Firebug. All is associated with blue header image in Jazz default theme. This part I took from Jazz UI with help of Firebug: 

.banner .middle {

-moz-background-clip:border;

	-moz-background-inline-policy:continuous;

	-moz-background-origin:padding;

	background:transparent url(/jazz/web/jazz.app/graphics/JazzUI/banner-bottom.png/_ver-657087559) repeat-x scroll center bottom;

	color:white;

	max-height:46px;

	min-height:31px;

	padding:0 0 4px;

	position:relative;

}


Next, I have made my CSS file (changed original) with changed background image: 

.banner .middle {

-moz-background-clip:border;

	-moz-background-inline-policy:continuous;

	-moz-background-origin:padding;

	background:transparent url(/jazz/web/jazz.app/graphics/JazzUI/bannerApis.png) repeat-x scroll center bottom;

	color:white;

	max-height:46px;

	min-height:31px;

	padding:0 0 4px;

	position:relative;

}


and I have also made img folder with new image inside(bannerApis.png - 32bit PNG). Packed all together to apisTheme.zip file and uploaded to themes inside server theme manager page.
Images are the same in dimensions. New one is PNG 32.

Original blue image:
http://www.innundo.net/reactor/07.jpg

New image:
http://www.innundo.net/reactor/08.jpg

Nothing happened. Old blue background disappeared, and new (yellow) was not showed.

Before:

http://www.innundo.net/reactor/09.jpg

After:

http://www.innundo.net/reactor/10.jpg

Using this files:

http://www.innundo.net/reactor/11.jpg

http://www.innundo.net/reactor/12.jpg

My questions are:
    1. Is it possible to add background images (in this example), other elements as flash video and other objects, divs etc., or we can just affect all elements in complete UI with CSS but without adding pictures and other elements. Talking about full UI area. How far can we go?
    2. Part of upper question (your answer) about images and flash video animations and other similar elements (maybe everything divs, objects,) can be also connected to custom HTML and custom JavaScript implementation. How far can we go?:


html/aboveBanner.html

html/footerLeft.html

html/footerCenter.html

html/footerRight.html 

jazz.theme.AboveBannerWidget

jazz.theme.FooterLeftWidget

jazz.theme.FooterCenterWidget

jazz.theme.FooterRightWidget


Thanks in advance,
Danijel
0
permanent link
Matthew Jarvis (241●1) | answered Oct 23 '09, 10:27 a.m.
JAZZ DEVELOPER
Hi Danijel,

The hotspot for the banner is actually a node above the banner. The thinking behind this was to give you the option of creating a custom menu bar above the existing application like we did on jazz.net... If you look at the theming_hotspots.jpg carefully, you will see that the default banner is still there, but a new menu has been added above it. Right now, it isn't possible to edit the existing banner using a hotspot, but you should be able to do it with some JavaScript code and/or custom CSS.

You have the right idea with your custom HTML and CSS... The problem is that the way files in a theme.zip need to reference each other isn't very intuitive right now... A simple relative path in one of your custom HTML or CSS files won't resolve correctly because it will be interpreted as a path relative to the page you're on rather than relative to your HTML or CSS file. You should be able to work around this by using JavaScript instead of static HTML or CSS. I have filed this enhancement that we hope to address for Foundation 2.0: https://jazz.net/jazz/resource/itemName/com.ibm.team.workitem.WorkItem/97406

For now, I have a few recommendations:

1.) Whenever you need to reference another file in your theme.zip, use the JavaScript "jazz.util.theming.themeFileUrl" method. The path you pass into the method should be the path to the file from your theme.zip root (without the leading "/") For example:

jazz.util.theming.themeFileUrl("images/someImage.gif").

If you have a CSS rule that needs to reference a background image, add the rule to the page using JavaScript.

2.) If you're using HTML, you don't want a full HTML page... just an HTML snippet. The contents are added inline into the page, so you don't want a DOCTYPE or tags like <html>, <meta>, etc

3.) Your HTML file doesn't need to link to any CSS in your theme. All *.css files in your theme will be automatically applied to every page.

4.) With regard to flash animations, etc... I think you should be able to do just about anything you want by writing some custom JavaScript. All *.js code in your theme will run with every page load. I'm not too familiar with Flash, but I think you should probably be able to create the DOM node for the Flash animation using JavaScript. Just make sure you reference the Flash animation in your theme.zip using the jazz.util.theming.themeFileUrl method. Then you just need to add that DOM node as a child to an existing node in the page.

Also, one other thing to be aware of... The only API commitments that we have made around theming are the jazz.util.theming methods and the theming hotspots. If you're depending on the existence of a certain DOM node or you're overriding a CSS definition, there is no guarantee that your theme will still work if you upgrade your server to a new version.

Let me know if you have any other questions.

Thanks,
Matt Jarvis
Jazz Foundation - Web UI Frameworks
0
permanent link
Danijel Saban (21●1●3●2) | answered Oct 23 '09, 3:27 p.m.
Hi Matt

Thanks for this brief and useful explanation.
Im glad that you have point deeply and more clearly into the concept of theming for Jazz UI.

As I can see, the best (and the safest) way to do customizing is the to take a walk with JavaScript, as inside HTML or as standalone tweaks for CSS and other stuff.

Also, Im glad about opening Enhancement Working Item about files references and paths. Certainly, I subscribed to WI and will monitor enhancement progress.

I will try your suggestions and ask any further questions, if there will be any.

Best regards
Danijel
0
permanent link
Marie Michelin (14●3●17) | answered Jun 11 '15, 11:17 a.m.
Dear all,

I'm trying to do a simple thing (it seems to me) : replacing an already existing background image.
I tried a lot of things but I'm not able to do that.
1.) Whenever you need to reference another file in your theme.zip, use the JavaScript "jazz.util.theming.themeFileUrl" method. The path you pass into the method should be the path to the file from your theme.zip root (without the leading "/") For example: jazz.util.theming.themeFileUrl("images/someImage.gif"). If you have a CSS rule that needs to reference a background image, add the rule to the page using JavaScript.
I'm in the case of the last sentence and I really don't know how to call the function : jazz.util.theming.themeFileUrl("images/banner-sprites_red.png")

I tried directly in the CSS, or in a js file. But I don't know how to specify on which class it must apply.

Can someone help me ?

Thanks so much,
Regards,

Marie


Your answer

Register or to post your answer.


Dashboards and work items are no longer publicly available, so some links may be invalid. We now provide similar information through other means. Learn more here.