Customizando as Barras de Ferramentas de Widget para Espaços de Painel

A barra de ferramentas de widget é parte de um widget que contém o título, o ícone do menu de contexto (seta para baixo) e os ícones minimizar e maximizar. É possível customizar barras de ferramentas de widget para alterar as imagens de ícones usadas em seus espaços.

Aqui está um exemplo de uma barra de ferramentas do widget básica:

Quando você passa o mouse sobre a barra de ferramentas, uma imagem diferente é exibida. Quando você passa o mouse sobre um ícone na barra de ferramentas, mas outra imagem de barra de ferramentas é exibida. As variações padrão e de passar o mouse sobre dos ícones e barras de ferramentas estão localizadas no Sprite_01.png. Para obter informações adicionais sobre sprites e seus usos, consulte Criando imagens customizadas para espaços de painel.

Os ícones da barra de ferramentas são controlados pelas regras CSS que podem ser modificadas para ocultar os ícones ou fornecer ícones diferentes para essas partes da barra de ferramentas. Várias regras CSS para minimizar, maximizar e restaurar ícones do menu e seus estados de ajuda instantânea estão contidas no arquivo webDAV_folder/public/themes/bspaceTheme/theme.css . Essas regras se referem ao caminho relativo, webDAV_folder/public/themes/bspaceTheme/images/Sprite_01.png.

Para customizar sua barra de ferramentas:

A lista a seguir inclui regras comuns que você pode customizar.

Maximizar a aparência do ícone

A seguinte regra controla a aparência normal do ícone de maximização:

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

Além de bspaceOverEditBar para bspaceMaxIcon, o nome de classe controla o ícone usado ao passar o mouse sobre a barra de ferramentas.

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

O modificador ao passar o mouse sobre é utilizado para controlar o ícone laranja utilizado quando se passa o mouse sobre o ícone de maximizar.

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

Minimizar a aparência do ícone

A seguinte regra controla a aparência do ícone de minimização nos estados normal, passar o mouse sobre a barra de ferramentas, e de ícone:

 .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; 
} 

Restaurar a aparência do ícone

A seguinte regra controla a aparência do ícone de restauração nos estados normal, passar o mouse sobre a barra de ferramentas, e de ícone:

 .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; 
} 

Aparência do separador

A seguinte regra controla a aparência do gráfico separador nos estados normal e passar o mouse sobre a barra de ferramentas:

 .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; 
} 

Aparência do ícone seta para baixo de menu de contexto

A seguinte regra controla a aparência do ícone da seta para baixo do menu de contexto nos estados normal, passar o mouse sobre a barra de ferramentas, e de ícone:

 .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; 
} 

Cor do título da barra de ferramentas do widget

Para a capacidade de leitura, é possível que você deseje modificar a cor do título do widget exibido na barra de título do widget.

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

Depois de ter modificado o arquivo customStyle.css, salve-o e faça upload do seu estilo customizado para a pasta WebDav.