alui Collaboration UI Customizing

Wir haben unser ALUI-System vor kurzem auf Version 6.5 MP1 gehoben. Dabei haben wir auch gleich das Add-On Collaboration auf die aktuellste BEA-Version 4.5 gebracht. Bei den neuen Features – die meisten davon sind ja ganz ok – hat mich eins wirklich geärgert: Die neue Übersichtsseite. BEA hat hier per DoJo-Toolkit einige tolle Möglichkeiten integriert – Drag’n’drop, inline-refresh und einige andere DHTML/Ajax-Spielereien. Das Ärgerliche daran? Unser angepasster Stylesheet greift nicht mehr. Das mitgelieferte Template bringt auch keine Erleichterung – die Überschriften der dargestellten Bereiche bleiben hellblau mit Farbverlauf nach weiss.

Wie kann man diese Farben ändern, wenn das Corporate Design nicht zufällig gerade hellblau ist? Ich habe zuerst das Collab.war-File ein wenig angepasst (vorher Sicherungskopie machen!). Das ist nicht unbedingt notwendig, hat aber die Konfiguration des Kopfbereichs in der Collaboration-AppView wesentlich erleichtert, da es nach meiner Anpassung keine Nebeneffekte zum restlichen Portal geben kann. Öffnet das war-file, zum Beispiel mit WinRAR. Klickt Euch in den Ordner \layout\templates und öffnet dort die Datei appViewLayout.jsp. In der Zeile 107 ändert Ihr den Eintrag</p>

<div class="collab">

in

<div id="collab">

ab. Nun könnt Ihr im Stylesheet den Block portal styles entsprechend ändern und habt m.E. besseren Einfluß auf die optische Gestaltung. Der geänderte Block (mit ein paar farblichen Anpassungen von mir…):

/* portal styles */
#collab a					{color:#666666;}
#collab td					{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;}
#collab .objectHeader 		{color: #000000; font: bold 10px arial,helvetica,"sans-serif"; text-decoration: none; padding: 0px 0px 0px 5px;}
#collab .objectHeaderBg 	{background-color: #c72820;}
#collab .objectContentBg	{background-color: #EDEDED;}
#collab .objectText			{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;}

#collab .listSortHeaderBg	{background-color: #666666;}
#collab .listSortHeader		{color: #fff; font: bold 10px arial,helvetica,"sans-serif"; text-decoration: none; padding: 0px 3px 0px 3px;}
#collab .listText			{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;}
#collab .listText A			{color: #003399; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;}

#collab .formTextboxText	{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;}
#collab .formBtnText		{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none; background-color: #efefef;} /* copy to clipboard */
#collab .formPulldownText	{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;}
#collab .formInputBoxText	{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;}
#collab .formEditorBtnText	{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none; background-color: #efefef;} /* close button with bluish background */


#collab .banTopbarBg		{background-color: #c72820; border-top: 1pt solid #777777;border-left: 1pt solid #777777;border-right: 1pt solid #777777;} /*used for collab tabs background*/
#collab .actionbarText		{color: #000000; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;} /*used for collab tabs text*/
#collab .banHeaderBg		{background-color: #a0261d;} /* used for displaying project name banner */
#collab .banHeader			{background-color: #a0261d; color: #ffffff; font: bold 14px arial,helvetica,"sans-serif"; margin-top: 0px; margin-bottom: 0px;} /* used for project name title */

#collab .banText			{color: #FFFFFF; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;} /*search text */
#collab .banText A			{color: #fff; font: 10px arial,helvetica,"sans-serif"; text-decoration: none;} /*links within tabs and help link */

Nun aber zu den lästigen blauen Titelbalken: Im war-file könnt Ihr ohne Probleme die Datei \js\collab\widget\templates\images\titlebar_bg.png umbenennen, löschen oder ersetzen. Im Stylesheet könnt Ihr alternativ auch eine andere Datei als Hintergrund angeben, wenn ihr die Balken mit Farbverlauf – wie beim BEA-Original – abbilden wollt oder müsst oder natürlich hier den Hintergrundverweis (wie ich) einfach weglassen. Nun sind es nur noch ein paar Zeilen bis zum gewünschten UI. In Eurem aktuell verwendeten Stylesheet, bzw. in der cssmill-Vorlage, fügt Ihr diese Zeilen ein (ich zeige der Einfachheit halber den fertigen Stylesheet):

.modulecontent  div .dojoModuleTitle {
    color: #fff;
    padding:1px 2px;
    vertical-align: center;
    font: bold 10px verdana,arial,helvetica,"sans-serif";
    height:20px; 
    background-color: #c72820;}

Fertig! Speichern, AppView neu aufrufen und Eure neue Gestaltungsfreiheit genießen :-)