Jazz Forum Welcome to the Jazz Community Forum Connect and collaborate with IBM Engineering experts and users

Web UI theme customization - images upload?

Hello guys,

I'm playing with web UI theme customization. I haven't been able to add images to my customizations (nor html neither css), it seems that the images are not located in the zip file.

Any tip on how to do this?

Thanks in advance.

Regards,

Jorge.

1

0 votes



8 answers

Permanent link
Hello Joan,

sorry for the late reply ... Here I post a sample code to replace the Rational logo with one of your enterprise:

dojo.provide("jazz.theme.FooterRightWidget");


dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.require("jazz.util.theming");

(function () {

dojo.declare("jazz.theme.FooterRightWidget", [dijit._Widget, dijit._Templated], {
templatePath: jazz.util.theming.themeFileUrl("<yourlogopage>.html"),

constructor: function () {
this._imagePath = jazz.util.theming.themeFileUrl("<image>.GIF");
}
});

})();


Note that in this example, the html defines a variable in the src attribute for the image ("_imagePath"), which is filled with the themeFileUrl.

Hope this helps.

Regards,

Jorge.

1 vote

Comments

Thanks, Jorge!

Appreciate your guidance, I was able to make this work. For those interested in seeing the HTML side of this:

Two points: 1. This reply format is super wonky and I'm too tired to figure it out right now, and 2. I removed the '<' from the front of each line html due to same formatting issues, pardon.

div class="custom-js-ThemeWidget"> div class="image">${_imagePath} div class="button-site" dojoAttachPoint="_buttonSite"> /div> body> img src="${_imagePath}" width="51" height="40"/> /body>

Simple for those that know... I however way overthought it.

Cheers again, Joel


Permanent link
Hello guys,

the code I'm trying to &quot;footerRight.html&quot; is quite simple:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Strict//EN&quot; &quot;http&#58;//www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src=&quot;pic.GIF&quot; alt=&quot;image&quot;/&gt;
&lt;/body&gt;
&lt;/html&gt;


But when loading this as theme customization, I can see the alternate text but I can't the image.
Executing this code as standalone html page works fine.

Any tip?

Regards,

Jorge.

0 votes


Permanent link
Hi Jorge,

try: http://jazz.net/forums/viewtopic.php?t=7011

it's not much, but ...

Robert

0 votes


Permanent link
Hi Robert,

thanks for your reply. I solved this issue with a bit of code to translate the image path basically.

Anyway, all the tips in that post are worth to remember xD.

Regards,

Jorge.

0 votes


Permanent link
Hi Jen,

I used this same function to translate the image path. I declared a new definition for &quot;jazz.theme.FooterRightWidget&quot; within a dojo function and I used the same &quot;jazz.util.theming.themeFileUrl&quot; to translate the image location.

Regards,

Jorge.

0 votes


Permanent link
Jorge, would you be willing to post a basic .js file that replaces the IBM logo with another picture? I've been trying to make this work for hours now, and apparently I don't know the magical dojo incantation.

thx...

0 votes


Permanent link
Hi,

I've followed the information of this post and used the snnipet to put another image instead of the Jazz logo, but I still can't get it working...

It seems it still 'translates' the scr attribute to an invalid url:
/ccm/_theming/resource/logo.GIF which doesn't exist.

I've added the logo.gif in all the folders of my theme.zip, just in case... and My snippet ( almost copy/pasted) for FooterRightWidjet.js is:


dojo.provide&#40;&quot;jazz.theme.FooterRightWidget&quot;&#41;;
dojo.require&#40;&quot;dijit._Widget&quot;&#41;;
dojo.require&#40;&quot;dijit._Templated&quot;&#41;;
dojo.require&#40;&quot;jazz.util.theming&quot;&#41;;

&#40;function&#40;&#41; &#123;
dojo.declare&#40;&quot;jazz.theme.FooterRightWidget&quot;,
&#91;dijit._Widget, dijit._Templated&#93;, &#123;

templatePath&#58; jazz.util.theming.themeFileUrl&#40;&quot;templates/ThemeWidget_mod.html&quot;&#41;,
constructor&#58; function&#40;args&#41; &#123;
this._label = &quot;blabla&quot;;
this._imagePath = jazz.util.theming.themeFileUrl&#40;&quot;logo.GIF&quot;&#41;;
&#125;

&#125;&#41;;

&#125;&#41;&#40;&#41;;



Any idea why it resolves it that way? Any help will appreciated :)

0 votes


Permanent link
Hi,

I've followed the information of this post and used the snnipet to put another image instead of the Jazz logo, but I still can't get it working...

It seems it still 'translates' the scr attribute to an invalid url:
/ccm/_theming/resource/logo.GIF which doesn't exist.

I've added the logo.gif in all the folders of my theme.zip, just in case... and My snippet ( almost copy/pasted) for FooterRightWidjet.js is:


dojo.provide&#40;&quot;jazz.theme.FooterRightWidget&quot;&#41;;
dojo.require&#40;&quot;dijit._Widget&quot;&#41;;
dojo.require&#40;&quot;dijit._Templated&quot;&#41;;
dojo.require&#40;&quot;jazz.util.theming&quot;&#41;;

&#40;function&#40;&#41; &#123;
dojo.declare&#40;&quot;jazz.theme.FooterRightWidget&quot;,
&#91;dijit._Widget, dijit._Templated&#93;, &#123;

templatePath&#58; jazz.util.theming.themeFileUrl&#40;&quot;templates/ThemeWidget_mod.html&quot;&#41;,
constructor&#58; function&#40;args&#41; &#123;
this._label = &quot;blabla&quot;;
this._imagePath = jazz.util.theming.themeFileUrl&#40;&quot;logo.GIF&quot;&#41;;
&#125;

&#125;&#41;;

&#125;&#41;&#40;&#41;;



Any idea why it resolves it that way? Any help will appreciated :)


One quick clarification. Is the file actually named &quot;logo.GIF&quot;, is it possible that it's &quot;logo.gif&quot;

If so our code doesn't change the case of the filename, but could you check for logo.gif to see if that works?

Second clarification would be to verify which version of the product you're using? 1.x is different than 3.x.

0 votes

Your answer

Register or log in 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.

Search context
Follow this question

By Email: 

Once you sign in you will be able to subscribe for any updates here.

By RSS:

Answers
Answers and Comments
Question details

Question asked: Sep 28 '09, 7:23 p.m.

Question was seen: 9,533 times

Last updated: Sep 14 '12, 12:15 a.m.

Confirmation Cancel Confirm