Dostosowywanie pasków narzędzi widgetu w obszarach panelu kontrolnego

Pasek narzędzi widgetu jest częścią widgetu, która zawiera tytuł, ikonę menu kontekstowego (strzałka w dół) oraz ikony minimalizowania i maksymalizowania. Dostosowanie paska narzędzi widgetu polega na zmianie obrazków ikon używanych w obszarach.

Poniżej przedstawiono przykład podstawowego paska narzędzi widgetu:

Kiedy nad paskiem narzędzi umieszczony jest kursor myszy, wyświetlany jest inny obrazek. Jeszcze inny obrazek paska narzędzi jest wyświetlany, kiedy kursor jest umieszczony nad ikoną paska narzędzi. Domyślne ikony i paski narzędzi oraz ich warianty wyróżnione znajdują się w pliku Sprite_01.png. Więcej informacji o obrazkach przemieszczalnych i ich używaniu można znaleźć w sekcji Tworzenie niestandardowych obrazków na potrzeby obszarów panelu kontrolnego.

Ikonami paska narzędzi sterują reguły CSS, które można modyfikować w celu ukrycia ikon lub określenia innych ikon na potrzeby tych części paska narzędzi. Pewna liczba reguł CSS, związanych z ikonami minimalizowania, maksymalizowania, odtwarzania oraz ikonami menu i ich stanami wyróżnionymi, znajduje się w pliku folder_webDAV/public/themes/bspaceTheme/theme.css . Reguły te odwołują się do ścieżki względnej fodler_webDAV/public/themes/bspaceTheme/images/Sprite_01.png.

Aby dostosować pasek narzędzi:

Poniższa lista zawiera typowe reguły, które można dostosować.

Wygląd ikony maksymalizacji

Następująca reguła decyduje o normalnym wyglądzie ikony maksymalizacji:

  
.customStyle .bspaceMaxIcon { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1300px; 
} 

Dodanie parametru bspaceOverEditBar do nazwy klasy bspaceMaxIcon powoduje, że reguła jest używana w przypadku ikony paska narzędzi, nad którą umieszczony jest wskaźnik myszy.

.customStyle .bspaceOverEditBar .bspaceMaxIcon { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1250px; 
} 

Modyfikator hover umożliwia sterowanie pomarańczową ikoną, która jest używana w momencie umieszczenia wskaźnika myszy nad ikoną maksymalizacji.

.customStyle .bspaceMaxIcon:hover { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1350px; 
} 

Wygląd ikony minimalizacji

Następujące reguły sterują wyglądem ikony minimalizacji w stanach normalnym, wyróżnionego paska narzędzi i wyróżnionej ikony:

 .customStyle .bspaceMinIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1450px; 
} 
.customStyle .bspaceOverEditBar .bspaceMinIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1400px; 
} 
.customStyle .bspaceMinIcon:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1500px; 
} 

Wygląd ikony odtwarzania

Następujące reguły sterują wyglądem ikony odtwarzania w stanach normalnym, wyróżnionego paska narzędzi i wyróżnionej ikony:

 .customStyle .bspaceRestoreIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1600px; 
} 
.customStyle .bspaceOverEditBar .bspaceRestoreIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1550px; 
} 
.customStyle .bspaceRestoreIcon:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1700px; 
} 

Wygląd separatora

Następujące reguły sterują wyglądem obrazka separatora w stanach normalnym i wyróżnionego paska narzędzi:

 .customStyle .bspaceSeparatorIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1900px; 
} 

.customStyle .bspaceOverEditBar .bspaceSeparatorIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1850px; 
} 

Wygląd ikony strzałki w dół menu kontekstowego

Następujące reguły sterują wyglądem ikony strzałki w dół menu kontekstowego w stanach normalnym, wyróżnionego paska narzędzi i wyróżnionej ikony:

 .customStyle .bspaceTheme .lotusWidget2 a.lotusActionMenu { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1100px; 
} 

.customStyle .bspaceTheme .bspaceOverEditBar a.lotusActionMenu { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1050px; 
} 

.customStyle .bspaceTheme .lotusWidget2 a.lotusActionMenu:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1150px; 
} 

Kolor tytułu paska narzędzi widgetu

Dla uzyskania lepszej czytelności można również zmodyfikować kolor tytułu widgetu, który jest wyświetlany na pasku tytułu widgetu.

.customStyle .decoration-titlebar { 
color: #FFFFFF; 
} 

Po zmodyfikowaniu pliku customStyle.css należy go zapisać, a następnie przesłać styl niestandardowy do folderu WebDav.