It's all about the answers!

Ask a question

Web UI theme customization - images upload?


0
1
Jorge Diaz (8664434) | asked Sep 28 '09, 7:23 p.m.
JAZZ DEVELOPER
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.

8 answers



permanent link
Jorge Diaz (8664434) | answered Jan 11 '10, 5:28 p.m.
JAZZ DEVELOPER
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.

Comments
Joel Lonneker commented Sep 14 '12, 12:04 a.m. | edited Sep 14 '12, 12:15 a.m.

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
Jorge Diaz (8664434) | answered Oct 01 '09, 2:02 p.m.
JAZZ DEVELOPER
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.

permanent link
Robert Stanko (112) | answered Oct 16 '09, 3:12 p.m.
Hi Jorge,

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

it's not much, but ...

Robert

permanent link
Jorge Diaz (8664434) | answered Oct 19 '09, 4:19 a.m.
JAZZ DEVELOPER
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.

permanent link
Jorge Diaz (8664434) | answered Dec 10 '09, 6:43 p.m.
JAZZ DEVELOPER
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.

permanent link
Joan Touzet (111) | answered Dec 21 '09, 1:40 p.m.
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...

permanent link
pere irazusta (2062120) | answered Aug 09 '11, 9:39 a.m.
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 :)

permanent link
David Boyer (812) | answered Aug 18 '11, 2:28 p.m.
FORUM MODERATOR / JAZZ DEVELOPER
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.

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.