cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

We are happy to announce the new Windchill Customization board! Learn more.

Rebranding Windchill

tstacy
1-Newbie

Rebranding Windchill

Hi.

I'm trying to find out how to change the image at the top of the Windchill UI. I need to "rebrand" the header in Windchill to match my user community colors and images. I did this in our V9.1 environment, but haven't found out how to do this in V10.2 yet. Also, I would like to customize the colors used by the browser.

Not the right shade of blue for our customers. Something like this:

Anyone have an idea where I need to look?

1 ACCEPTED SOLUTION

Accepted Solutions
TomU
23-Emerald IV
(To:tstacy)

Take a look at Customizing UI Branding.

Something else you can do is manually alter the colors in some key files. (You won't find this in the documentation.) Here is a picture of what my test system looks like and the files I changed to get there. (This is for 10.2)

11.png

codebase\netmarkets\themes\windchill\Header\

- back_tile.png

- left_gradient.png

- slash.png

codebase\netmarkets\themes\windchill\navigator\

- navbackground.png

- navbackground_over.png

codebase\netmarkets\themes\windchill\panel\

- BG_stripe.png

- BG_stripe_gradient.png

- BG_stripe_tile.png

View solution in original post

16 REPLIES 16
tstacy
1-Newbie
(To:tstacy)

Looks like the images didn't come out.V10_header.JPG

V9.1_header.JPG

TomU
23-Emerald IV
(To:tstacy)

Take a look at Customizing UI Branding.

Something else you can do is manually alter the colors in some key files. (You won't find this in the documentation.) Here is a picture of what my test system looks like and the files I changed to get there. (This is for 10.2)

11.png

codebase\netmarkets\themes\windchill\Header\

- back_tile.png

- left_gradient.png

- slash.png

codebase\netmarkets\themes\windchill\navigator\

- navbackground.png

- navbackground_over.png

codebase\netmarkets\themes\windchill\panel\

- BG_stripe.png

- BG_stripe_gradient.png

- BG_stripe_tile.png

Hey Tom,

How did you get the "Windchill Test System" to come up? I have looked at the files you posted and they don't pertain to this text on your pic.

Thanks in advance,

Buddy Hudson

TomU
23-Emerald IV
(To:BuddyHudson)

Sorry about that. The concept is covered in "System Banner Alert Message".

Basically you add a single line to begin_custom.jspf and then put something in banner.txt.

My banner.txt file contains the following:

<style>
#bannerID{
font-size:15px;
cursor:default;
float:left;
clear:both;
position:absolute;
margin:2px 170px;
padding:3px;
top:0px;
z-index:1000;
}
</style>

<span id="bannerID">
<!-- Banner begins here -->
<b><a style="color:#FFFFFF">Windchill 10.2 Test System</a></b>
<!-- Banner ends here -->
</span>

<script type="text/javascript">
//START--The tooltip for the top banner
Ext.onReady(function(){
Ext.QuickTips.init();
new Ext.ToolTip({
target: 'bannerID',
html: '10.2 M010 Test (05/23/2014)'
});
});
//END--The tooltip for the top banner
</script>

Awesome! Works great thanks again Tom!

Buddy

Hey Tom,

This is an excellent example and a really good looking windchill.

Thanks for providing that!!

BenPerry
13-Aquamarine
(To:TomU)

Tom Uminn‌, do you find that the background of the navigator is still blue when you expand it? I have a screenshot below.

FYI...I really like your method. Grab these files and just open in IrfanView. Select Image > Swap > and then one of the options there. The dark pink is RGB -> GBR. Very simple but very effective.

2015-05-15_10-28-34.png

TomU
23-Emerald IV
(To:BenPerry)

Here is the list of the folders and files I'm changing:

Header

  • back_tile.png
  • left_gradient.png
  • slash.png

navigator

  • navbackground.png
  • navbackground_over.png

panel

  • BG_stripe.png
  • BG_stripe_gradient.png
  • BG_stripe_gradient_wizard.png
  • BG_stripe_tile.png
  • BG_stripe_tile_nav.png
  • BG_stripe_tile_wizard.png

I automatically replace these after each rehost with these commands:

copy /y E:\Stage\Dev_Changes\Header\*.* E:\ptc\Windchill_10.2\Windchill\codebase\netmarkets\themes\windchill\Header\*.*

copy /y E:\Stage\Dev_Changes\navigator\*.* E:\ptc\Windchill_10.2\Windchill\codebase\netmarkets\themes\windchill\navigator\*.*

copy /y E:\Stage\Dev_Changes\panel\*.* E:\ptc\Windchill_10.2\Windchill\codebase\netmarkets\themes\windchill\panel\*.*

BenPerry
13-Aquamarine
(To:TomU)

Ah, I see! BG_stripe_tile_nav.png I actually can't swap RGB with that one, presumably because it is so small. 4px x 4px. Not in IrfanView anyway.

TomU
23-Emerald IV
(To:BenPerry)

I vaguely remember having to change a couple of them in paint. Looks like maybe all of the panel *tile* images.

aacciano3
13-Aquamarine
(To:TomU)

@TomU 

Have you tried this on 11 or 11.1?

Any luck?

 

Thanks!

TomU
23-Emerald IV
(To:aacciano3)

I had not until 15 minutes ago.  😉

 

Windchill 11.0 doesn't use images for the background so changing it is actually easier.  Just alter a few values in the main css file:  <Windchill Home>\codebase\netmarkets\themes\windchill\xtheme-windchill.css

 

For example, try changing the background colors on lines 3188, 3193, and 3288 to #FFFF00 (yellow):

clipboard_image_0.png

clipboard_image_1.png

 

Changing these three values will make Windchill look like this:

clipboard_image_2.png

aacciano3
13-Aquamarine
(To:TomU)

Thank you Tom!

BenLoosli
23-Emerald II
(To:TomU)

I changed the background color on line 3188 to a dark blue (#0000FF).

When I open Windchill in Bing, it did not change the color, but in IE and Chrome it did.

 

TomU
23-Emerald IV
(To:BenLoosli)

Bing is a search engine...  Do you mean Microsoft Edge?  My guess is that the CSS is cached.  Try reloading the page while pressing F5, CTRL + F5, SHIFT + F5, etc.

BenLoosli
23-Emerald II
(To:TomU)

Yes Edge!

Ctrl-F5 did it.

Top Tags