Carl Tyler's Blog

Category None
So lets see how else we can make it easier to change a few things with the Sametime Meeting Center. So far we have Part 1, Part 2 and Part 3.

Now with Part,4 we are going to modify the forms and views etc. to use a single StyleSheet which is also going to make life much much easier for us to change things. Versus having to edit lots of forms and views when the company changes their colours. This is going to allow us with a change to a single stylesheet change the background image, colour, font etc. globally within a single document.

First let's create the new StyleSheet

Open the STConf template with Domino Designer

Click on the Pages section

Click the "New Page" button

In the page put:

BODY { font-family: Arial, Helvetica, sans-serif;
background-color: #FFCC00;
background-image: URL(../sametime/images/stbackground.gif);
background-repeat: no-repeat;
}
TR, TD, TH { font-family: Arial, Helvetica, sans-serif; }

During testing I like to change the "background-color: #FFCC00" to something like "background-color: #CCCC00" so I can easily see where the changes are taking effect.

Bring up the page properties

Chage the content type to "other" and enter "text/css"

Save the page and call it "StyleSheet"

Now we need to change a HTML Head Content fiels in a few forms to reference the stylesheet versus the hardcoded values. First lets change the default view template that we setup in Part 3.

Open the Form $$ViewTemplateDefault and go to the "HTML Head Content" section. At the bottom of the HTML Head Content you will find

"<style type=\"text/css\">" + @NewLine +
"<!--" + @NewLine +
"BODY { font-family: Arial, Helvetica, sans-serif; " + @NewLine +
" background-color: #FFCC00; " + @NewLine +
" background-image: URL(" + PathRelRoot + "sametime/images/stbackground.gif); " + @NewLine +
" background-repeat: no-repeat; " + @NewLine +
"}" + @NewLine +
"TD { font-family: Arial, Helvetica, sans-serif; }" + @NewLine +
"-->" + @NewLine +
"</style>"

Change this section of the HTML Head Content (keep the rest the same) to :

"<link rel='stylesheet' type='text/css' href='" + PathRelDB + "StyleSheet?OpenPage'>"+@NewLine

Now make the same changes to the forms:
"$$ViewTemplate for vwCalendar"
"$$ViewTemplate for ($WebSearch) | webSearch"
"webConference | frmConference"

OK, so now all the forms are using the colours and background from the stylesheet. But if you end a meeting, you'll see that the pages are still referring to the old hard coded values. These values are populated by an agent which uses the database script "ConferenceLibrary" and specifially the function "PrintHTMLPage", so let's change that script to make that thos pages also use the stylesheet.

1. Open the Script Library "ConferenceLibrary"
2. Find the function "PrintHTMLPage"
3. Find the section of code:
   
   Print |<style type="text/css">|
   Print |<!--|
   Print |BODY { font-family: Arial, Helvetica, sans-serif; |
   Print | background-color: #FFCC00; |
   Print | background-image: URL(| & pathrelroot & |sametime/images/stbackground.gif); |
   Print | background-repeat: no-repeat; |
   Print |}|
   Print |TR, TD, TH { font-family: Arial, Helvetica, sans-serif; }|
   Print |-->|
   Print |</style>|
   
   
4. Replace with the code
   
   Print |<link rel='stylesheet' type='text/css' href='StyleSheet?OpenPage'>|
   
   

There now we can easily get rid of the lovely yellow that is used in the Sametime Conference application with a colour of our choice by changing a single location in the StyleSheet.

If we're lucky IBM might make changes like these to the Sametime 7.5 web application.

Copyright 2006 Carl Tyler

Update Tim E Browne was kind enough to let me know I had not mentioned the Login Form. He kindly posted the instructions as a comment, but here they are to keep them in one place:

Open the Form STLogon form in stcenter.nsf and go to the "HTML Head Content" section. At the bottom of the HTML Head Content you will find

"<style type=\"text/css\">" + @NewLine +
"<!--" + @NewLine +
"BODY { font-family: Arial, Helvetica, sans-serif; " + @NewLine +
" background-color: #FFCC00; " + @NewLine +
" background-image: URL(" + PathRelRoot + "sametime/images/stbackground.gif); " + @NewLine +
" background-repeat: no-repeat; " + @NewLine +
"}" + @NewLine +
"TD { font-family: Arial, Helvetica, sans-serif; }" + @NewLine +
"-->" + @NewLine +
"</style>"


Change this section of the HTML Head Content (keep the rest the same) to :


"<link rel='stylesheet' type='text/css' href='" + PathRelDB + "StyleSheet?OpenPage'>"+@NewLine

fyi....if this is not done, you will see the yellow background flash at the login screen.

Thanks Tim