Portal 6 Themes - The simple answer...

[karld1]

We simply want to know how to create our own theme in WebSphere Portal 6.0

I've seen "Creating your own theme" and "Using the color pallet in themes" in the Portal 6 Info Center and I must be missing something.

We don't want to make drastic changes. Basically, we just want to take the default IBM theme and modify some of the colors.

We copied the IBM theme and pasted it as our own Sheetz_v6. About the only thing we have done that produces visible results is changing the images in:

\\servername\wp_profile\installedApps\nodename\wps.ear\wps.war\themes\html\Sheetz_v6\colors\default

Making changes to default.properties and/or noGradient.properties appears to have no effect.

Making changes in styles_theme.jspf and other java server page fragments also appears to be useless. It looks to me like these pages are designed to read the colors from default.properties, but alas, nothing is changing on the page.

So for a simple example, what do I need to change to make the breadcrumb trail black instead of blue?

If we can accomplish that, we should also be able to change the font colors and backgrounds of other page elements.

[Jessica Garcia-Glennie]

Hello,

I've not worked with themes in 6 yet, but in 5, you have to "touch" default.jsp in order for WAS to recompile the fragment JSPs. In order to do this, open default.jsp, type a space anywhere in the file, remove the space, and save the file. Good luck.

[oliver]

There are two points:
1.Must set the wps to reloadingEnabled="true", the details in infocenter.
2.try to clear the temp directory , which locates in IBM\WebSphere\profiles\wp_profile\temp\sjnk\WebSphere_Portal\wps\wps.war\themes\html\yourthemename
,delete your theme directory of temp. to ensure the effect, you could add the System.out.println("XXXXX") in your modified file (such as *.jspf file).

enough is never enough

[Aravind]

I also haven't worked with WebSphere 6 . The following is my
explanation based on Websphere 5.1

Enable automatic reloading of JSP. Else you may have to restart the
servers every time you make modification tothe theme jsps.

To enable automatic reloading of JSPs,

1. Open the following files:
<AppServer>\config\cells\<your_host_name>\applications\wps.ear\deployments\wps\wps.war\WEB-INF\ibm-web-ext.xmi
and
<AppServer>\installedApps\<your_host_name>\wps.ear\wps.war\WEB-INF\ibm-web-ext.xmi

2. Change the parameter reloadingEnabled="false" to
reloadingEnabled="true".

3. Restart the server

[dirvine]

Also based on V5x. Much of this is controlled via CSS. The first
challenge is actually finding the css files that are controlling your
site (there are many that do nothing, thanks to multi-lingual,
multi-browser, multi-platform, and other abstraction layers that big
blue feels compelled to shove in our faces).

Here's where we eventually found them:
IBM/WebSphere/AppServer/installedApps/yourServerName/wps.ear/wps.war/themes/html/yourThemeName/ie/en

Whew! Check your html head or your default.jsp for your location.

Check Styles.css and you'll find entries like .wpsLinkBar. These often
have color attributes that you can change. Find the right entries and
you're in business.

So pick out some nice greens and reds and add some holiday cheer to
your site!

[Karl]

Thanks all. I have to post through Google Groups since the IBM Forums
are giving me an error today when I try to post....

The reloading of the files on the server was the issue. I set it to
automatic for now. I never knew about that, but I found the note in
default.jsp that explains it.

I also noted that I have to empty my local temp internet files with IE
7. Haven't tried with other browsers yet, but IE does not seem to
detect the change when you refresh, and thus uses the cached copy.

I hear what you are saying dirvine. If anything, it is even more
flexible and more powerful in v6 which means it is even more confusing.
Now it looks like it builds the css on the fly based on what your
browser, device, and locale is. All the styles now are in jsps and
jspfs. The styles will say something like color: ________; and then
have a reference to a color.properties file where all the colors are
stored instead of entering them directly into the style sheet itself.

Looks like it makes for a very flexible and dynamic way to create
custom themes, but it is definitely a little confusing at first. There
is a lot in the infocenter, but as usual, there is a little too much
for me to read everything.

Now that we figured out the basics, I'm passing it off to somebody
with a better sense of style and better color vision than me so she can
make it pretty.

[Michael Harris]

As mentioned in another post, changing the .jsp or .jspf files requires
a recompile of the page. By default, this is turned off for performance
reasons. Set reloadingEnabled=true using these instructions:

http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/index.jsp?topic=/com.ibm.wp.zos.doc/wps/dgn_reload.html

You do not need to recompile the page to load changes to
default.properties. However, the resulting CSS created using that file
is cached in your browser. In most browsers, you can just hold the
SHIFT key down while pressing the reload button and it will force a
reload. If that doesn't work, clear your browser's cache.

[obe...@hotmail.com]

Hello.

I've changed the reloading property, and tried the shift + reload (in IE 6), but any change I make in the default.properties still doesn't show up. The theme is loaded properly as I can see changes I make to the images in the default folder.

Is this temporary directory thing likely the cause? Can I get a bit more detail on that?

[obe...@hotmail.com]

Alright, I've done the following:

1. Changed the reload property to true (which I know works, I can modify images)
2. Modified all instances of text color in default.properties
3. Touched Default.jsp
4. Deleted the theme from the temp folder (as listed above)
5. Pressed shift + reload on my browser (IE 6) as well as logging out/in

And I still can't change the color of any of the text. What am I missing?

[obe...@hotmail.com]

Alright, I've also tried changing individual pages, but the text still doesn't appear differently.

[sta...@gmail.com]

On Feb 26, 6:02 pm, <ober...@hotmail.com> wrote:
> Alright, I've also tried changing individual pages, but the text still doesn't appear differently.

Started from scratch with themes development mid september and here is
my experiences around themes development for other beginners:

1. Don't set the reload property to true. At least remember to turn it
off when going into productions mode. Otherwise the server will be
slower.
2. Use Rational Software architect v 7 when developing themes and
skins.
3. Create new theme based on ibm theme and change the new theme to
what you like. Styles_theme.jspf and default.jsp is the files you
typically will change in as well as the color files.
4. the new theme must be copied to the portalservers html catalogue.
5. Add the theme in the portal administration tools.
6. Add the theme to the pages you like.
7. also adwised to create a administration link page so that if the
theme screws up the admin link section at the bottom you have access
to the administration consoll.

good luck :-)