Na primeira vez que você efetua sign in no developerWorks, um perfil é criado para você. Informações selecionadas do seu perfil developerWorks são exibidas ao público, mas você pode editá-las a qualquer momento. Seu primeiro nome, sobrenome (a menos que escolha ocultá-los), e seu nome de exibição acompanharão o conteúdo que postar.

Todas as informações enviadas são seguras.

Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Todas as informações enviadas são seguras.

My developerWorks:

Minhas notificações:

Sair

Selecione um idioma:

Práticas comprovadas do IBM Cognos: Customizando a interface com o usuário do IBM Cognos 8.4.x

Natureza do documento: Dica ou técnica; Produto(s): IBM Cognos 8.4.1; Área de interesse: infraestrutura

Cognos Proven Practices Team, Cognos Proven Practices Team, IBM

Equipe de Práticas Comprovadas do Cognos

Resumo: Este documento fornece dicas e técnicas ao criar um estilo customizado (ou "aparência") no IBM Cognos 8.4.x.

Visualizar mais conteúdo nesta série

Marque isto!

Data: 06/Fev/2012
Nível: Intermediário
Atividade: 172 visualizações
Comentários:

Introdução

Este documento fornece dicas e técnicas ao criar um estilo customizado (ou "aparência") no IBM Cognos 8. Este documento fornece uma visão geral dos conceitos, esquemas de cores e arquivos usados para modificar a aparência do IBM Cognos 8. Fornece também alguns exemplos relacionados à tarefa a fim de ilustrar melhor todas as mudanças necessárias para criar seu próprio estilo customizado.

Voltar para parte superior

Entendendo o esquema de cores usado nos estilos

Cores padrão usadas com o estilo "Corporativo"

Conhecer o esquema de cores padrão permite combiná-las ao estilo desejado. Todos os componentes do IBM Cognos seguem o mesmo esquema de cores muito de perto. A figura abaixo fornece uma lista da maioria das cores usadas nos estilos "Corporativos" predefinidos. Alguns componentes do IBM Cognos talvez usem periodicamente uma cor não listada na figura abaixo.

Entendendo as cores hexadecimais

A melhor maneira de escolher cores é ir até o website, tirar uma captura instantânea da tela e levá-la para o Paint Shop Pro (PSP). Depois use a ferramenta de colorir para localizar os valores hexadecimais das cores clicando nelas e dando clique duplo na mesma cor no painel direito.

Mapeando cores em seções da interface com o usuário

Os diagramas abaixo fornecem exemplos do esquema de cores usado no estilo "corporativo" padrão. Ele pode ser usado como guia para determinar até que ponto seu esquema de cores combina com o predefinido.

IBM Cognos Connection

Query Studio

Analysis Studio

Voltar para parte superior

Customizando a interface com o usuário do IBM Cognos 8

O IBM Cognos 8 fornece arquivos CSS que controlam as cores de todas as interfaces com o usuário do IBM Cognos 8. É possível customizar a interface com o usuário modificando parâmetros dentro dos arquivos CSS adequados.

Importando novos estilos

Antes de criar um estilo, primeiro é preciso importar um.

Para importar um novo estilo:

Copie um estilo existente para usar como modelo. Todos os estilos residem no diretório <install location>/c8/webcontent/skins . Faça uma cópia da pasta "Corporate" e coloque-a no mesmo diretório. Renomeie essa pasta.
Efetue login no Cognos Connection e ative o IBM Cognos Administration
Clique na guia "Configuration" e depois em 'Styles'
Nessa página, aparece uma lista de todos os estilos existentes. Clique no ícone "New Style".
Com isso, será aberto o "New Style Wizard". Forneça um nome ao estilo. Clique em Next.
Em "Style Resource Location" forneça o nome da pasta exata. Pode-se usar uma página de visualização para visualizar o estilo. A localização dessa página de visualização é mostrada abaixo. Clique em Finish.
O novo estilo estará na lista.
Depois de o estilo ser importado, é possível visualizá-lo na lista suspensa em 'My Preferences'.

Voltar para parte superior

Arquivos usados com estilos do IBM Cognos 8

Todos os arquivos necessários para modificar estilos em todos os componentes do IBM Cognos se encontram na nossa pasta recém-criada "my_style"; <install location>/c8/webcontent/skins/my_style.

Componentes do IBM Cognos	Arquivos e localização	Imagens
IBM Cognos Connection	skins/my_style/portal/default.css /skins/my_style/shared/banner.css /c8/template/ps/portal/system.xml	/skins/my_style/portal/images /skins/my_style/branding
Report Studio	/skins/my_style/pat/skin.css /skins/my_style/pat/hal_skin_corportate.css	/skins/mystyle/hal/images
Analysis Studio	/skins/my_style/ans/background.css /skins/my_style/ans/explore.css	/skins/my_style/ans/images
Query Studio	/skins/my_style/qs/crn.css /skins/my_style/portal/default.css /skins/my_style/qs/QSRVCommonUI.css /skins/my_style/shared/banner.css /skins/my_style/prompting/QSReport.css	/skins/my_style/qs/images
Event Studio	/skins/my_style/portal/default.css /skins/my_style/prompting/promptCommon.css /skins/my_style/ags/ags.css /skins/my_style/ags/crn.css	/skins/my_style/ags/images
IBM Cognos Administration	<install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/cogadmin.xml

System.xml – O arquivo system.xml (<install location>\c8\templates\ps\portal directory) é usado para modificar a funcionalidade ou ocultar certas seções da interface com o usuário. A maior parte dos parâmetros desse arquivo se aplica a todos os usuários.

Alterando texto, tipos de fonte e imagens

Alterando nomes de componente e mensagens de texto – É possível mudar os nomes dos componentes do IBM Cognos 8 e modificar as mensagens de texto acompanhantes abrindo o arquivo de mensagens relevante em um editor de texto e executando uma busca e substituição de sequências de texto e chamadas que queremos mudar. Os arquivos de mensagens se localizam no diretório <install-location>/c8/msgsdk . Para que as mudanças entrem em vigor, é preciso executar o Localization Development Kit (LDK) em harmonia com o LDK Installation and User Guide.

Alterando fontes do IBM Cognos 8 – É possível mudar as fontes usadas no IBM Cognos 8 modificando a lista de famílias de fontes encontradas no arquivo <install-location>/c8/webcontent/skins/my_style/fonts.css. Modifique o arquivo fonts.css associado ao estilo desejado. Por exemplo, podemos mudar a fonte padrão usada em todas as interfaces HTML, exceto no Report Studio, para outra mais adequada à renderização de caracteres asiáticos especiais. Abra o arquivo fonts.css em um editor de texto, comente a seção que mostra Tahoma como o primeiro item na lista de família de fontes e remova o comentário de uma entrada mais adequada ao seus requisitos Unicode.

Alternado imagens do IBM Cognos – Todas as imagens se localizam no diretório de estilo. A tabela acima mostra a localização de todas as imagens por componente. É fácil alterar a localização da imagem colocando sua imagem customizada nesse diretório e usando o mesmo nome do arquivo.

Voltar para parte superior

Alterando a marca do IBM Cognos 8

É rápido alterar a marca do IBM Cognos 8 fazendo as cores padrão corresponder às suas cores desejadas e depois substituindo todas as instâncias dessas cores nos arquivos CSS apropriados. Por exemplo, suponhamos que temos o seguinte website.

Talvez queiramos alterar a marca IBM Cognos para corresponder ao mesmo esquema de cores. Para isso, primeiro mapeie as cores padrão no estilo "corporativo" para as cores desejadas.

A seguinte página HTML usa predominantemente as três cores a seguir:

Usando esse esquema de cores, substituiremos as cores padrão pelas seguintes cores, com algumas exceções.

Observação: ao escolher um esquema de cores, tente manter os destaques de cor, ou seja, combine cores escuras com cores escura e cores claras com cores claras.

As seções a seguir mostram que partes da interface com o usuário serão modificadas e que arquivo(s) precisa(m) ser alterado(s) para concluir a modificação. Esta seção não mostra todos os parâmetros, mas o ajuda a ter uma boa noção dos itens alterados com mais frequência.

Alterando a marca do IBM Cognos Connection

Arquivos utilizados

<install location>/c8/webcontent/skins/my_style/portal/default.css
<install location>/c8/webcontent/skins/my_style/shared/banner.css
<install location>/c8/templates/ps/portal/system.xml

Modificação do cabeçalho principal: banner.css

cor de plano de fundo

.mainHeader1 
{	
	padding: 1px;
	background-color: #2d5d3d; 
	border-bottom: #2d5d3d 3px solid; 
	height:28px;
	width:100%;
}

cor do título da barra

.headerTitle 
{
	padding-left: 5px;
	font-weight: bold; 
	background-color: #2d5d3d;
	font-size: 75%;
	color: #ffffff;
	vertical-align: middle;
	white-space:nowrap;
}

área em branco entre o título e os botões

.mainHeader1Middle
{
	width:100%;
	/* background-image: url(../shared/images/banner_middle.gif) */
	background-repeat: repeat-y;
}

Modificação das guias do portal: default.css

dentro da guia não selecionada

.tabNormal 
{
	padding-right: 20px; 
	padding-left: 20px; 
	font-size: 70%;
	text-align: center;
	background-color: #c8ddca;
	border-bottom:#999999 1px solid;
	border-top:#c8ddca 1px solid;
}

dentro da guia selecionada

.tabSelected
{
	padding-right: 20px;	 
	padding-left: 20px; 
	border-top:#999999 1px solid;
	font-weight: bold; 
	font-size: 70%;	 
	color: #ffffff;
	text-align: center;
	background-color:#8bb093;
}

espaço atrás das guias

.tabBarContainer
{
	width: 100%;
	height: 20px;
	background-color:#c8ddca;
}

plano de fundo das guias

.mainHeader3 
{
	padding-top: 5px; 
	background-color: #c8ddca;
}

laterais das guias (Na aparência corporativa, as laterais são imagens. No exemplo, vamos removê-las.)

.tabLeftSelected 	
{	
	height:100%; 
	width:7px; 
	background-image:/* url(../shared/images/tab_selected_l.gif) */ ; 
	background-repeat: no-repeat; 
}
.tabRightSelected	
{	
	height:100%; 
	width:7px; 
	background-image:/* url(../shared/images/tab_selected_r.gif) */ ; 
	background-repeat: no-repeat;
}
.tabLeftNormal 		
{	
	height:95%; 
	width:6px; 
	background-image:/* url(../shared/images/tab_normal_l.gif) */ ; 
	background-repeat: no-repeat;	
	border-bottom:#999999 1px solid; 
}
.tabRightNormal		
{	
	height:95%; 
	width:6px; 
	background-image:/* url(../shared/images/tab_normal_r.gif) */ ; 
	background-repeat: no-repeat;	
	border-bottom:#999999 1px solid;
}

botões

.tabMenuButtonNormal 
{
	border: #c8ddca 1px solid;
	padding:1px;
	cursor:pointer;
	background-color:#c8ddca;
}
.tabMenuButtonOver 
{
	border: #8bb093 1px solid;
	padding:1px;
	cursor:pointer;
	background-color:#8bb093;
}

cor da fonte da guia não selecionada

.tabAnchor
{
	color: #2d5d3d;
}

Modificação de caminho: default.css

Alterando a cor do nó-pai. (Isso muda todo o texto sublinhado.)

a 
{
	color: #2d5d3d;
}

cor do nó-filho

.pathLeafNode 
{
	font-weight: bold; 
	color: #2d5d3d;
}

Alterando a cor da tabela: default.css

cor do plano de fundo do cabeçalho da tabela

.tableHeader 
{
	background-color: #8bb093;
}

títulos de cabeçalho (.tableSortTitle muda todo o nome de cabeçalho que consegue classificar.)

.tableTitle 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}
.tableSortTitle
{
	font-weight: bold; 
	color: #2d5d3d;
	text-decoration: none;
}

texto selecionável na tabela

a 
{
	color: #2d5d3d;
}

texto não selecionável na tabela

.tableText 
{
	font-size: 70%; 
	color: #2d5d3d;
}

Menus flutuantes: default.css

texto

.text 
{
	font-size: 70%; 
	color: #2d5d3d;
}

plano de fundo do menu e das bordas

.flyOutMenu 
{
	border: #2d5d3d 1px solid; 
	font-weight: normal; 
	font-size: 100%; 
	overflow-x: hidden; 
	overflow: auto;
	background-color: #c8ddca;
}

cor da ajuda instantânea

.menuItemOver 
{ 
	text-decoration:underline;
	cursor:pointer;
	color: #000000;
	height: 20px; 
	background-color: #8bb093;
}

cor normal de exibição do link.

.menuItemNormal 
{ 
	text-decoration:underline;
	cursor:pointer;
	color: #000000;
	height: 20px; 
	background-color: #c8ddca;
}

Substituindo o texto do IBM Cognos Connection pelo logotipo corporativo

Para incluir seu próprio logotipo corporativo:

Coloque a imagem na pasta <install location>/c8\webcontent\skins\my_style\branding
Em /c8/template/ps/portal, edite o arquivo system.xml usando o Bloco de Notas ou um editor XML.
Procure "".
Note que essa seção está com a linha comentada. Remova o comentário dessa seção e inclua a seguinte seção no seu novo estilo:

<style styleFolderName="your_new_skin_name_here">
	<table style="background-color:#2d5d3d">
		<tr>
			<td><img src="../skins/classic/branding/my_logo.gif"/></td>
			<td class="headerTitle"
			  style="padding-right:2px;white-space:nowrap"></td>
		</tr>
	</table>				
</style>

Observação: Essa é a imagem usada para my_logo.gif.

É preciso reiniciar o serviço do IBM Cognos 8 para que as mudanças entrem em vigor.

Resultado final

Alterando a marca do Query Studio

Arquivos utilizados

<install location>/c8/webcontent/skins/my_style/qs/ crn.css
<install location>/c8/webcontent /skins/my_style/portal/default.css
<install location>/c8/webcontent /skins/my_style/qs/QSRVCommonUI.css
<install location>/c8/webcontent /skins/my_style /shared/banner.css
<install location>/c8/webcontent /skins/my_style/prompting/QSReport.css

Modificação do cabeçalho: banner.css

título de exibição

.headerTitle 
{
	background-color: #2d5d3d;
	padding-left: 5px;
	font-weight: bold;
	font-size: 75%;
	color: #ffffff;
	vertical-align: middle;
	white-space:nowrap;
}

seção média entre o nome do Studio e a barra de cor sólida

.mainHeader1Middle
{
	width:100%;
	background-image: /* url(../shared/images/banner_middle.gif) */ ;
	background-repeat: repeat-y;
}

barra de cor sólida

.mainHeader1
{	
	padding: 1px;
	background-color: #2d5d3d;
	border-bottom: #2d5d3d 3px solid; 
	height:28px;
	width:100%;
}

Modifica os botões de cabeçalho: CRN.css

plano de fundo e borda de um botão não selecionado

.headerButton
{
	border: #2d5d3d 1px solid;
	background-color: #2d5d3d;
	cursor:pointer;
	width: 22px;
}

plano de fundo e tabela de ajuda instantânea

.headerButtonRollover
{
	border: 1px solid #ffffff;
	background-color: #2d5d3d;
	cursor:pointer;
	width: 22px;
}

propriedade de plano de fundo e ajuda instantânea do botão More help

.headerButtonDropDown
{
	border: #2d5d3d 1px solid;
	background-color: #2d5d3d;
	cursor: pointer;
	width: 3px;
}
.headerButtonDropDownRollover
{
	border: #ffffff 1px solid;
	background-color: #2d5d3d;
	cursor: pointer;
	width: 3px;
}

Modificação do menu lateral: QSRVCommonUI.css

título de menu

.menuHeader {
	font-size: 70%;
	color: #2d5d3d;
	border-collapse: collapse;
	vertical-align: bottom;
	font-weight: bold;
	width:100%;
}

opções de menu

.menuItem,
.menuItemSpacer,
.menuItemSpacerTop {
	background-color: #8bb093;
	border: solid #2D5D3D;
	border-width: 0px 1px;
	border-collapse: collapse;
}

.menuItem
.menuAction {
	font-size: 70%;
	color: #2d5d3d;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}
.menuItemSelected {
	color: #2d5d3d;
	border-collapse: collapse;
	cursor: default;
	padding: 3px 10px;
	border: 1px solid #8bb093;
	height:20px;
	font-size: 70%;
	font-weight: bold;
}

Controla a janela Data Tree

.menuContent,
.menuContentCollapsed {
	color: #336699;
	border: 1px solid #2d5d3d;
	padding: 3px;
}

Janela de informações

.informationTitleHeader
{
	color: #2D5D3D;
	font-weight: bold;
	font-size: 70%;
}
.metaContent {
	background-color: #c8ddca;
	border: solid #2d5d3d;
	border-width: 0px 1px 1px;
	border-collapse: collapse;
	padding: 3px;
}

Cabeçalho da janela de informações: default.css

.dialogHeader
{
	border: #2D5D3D 1px solid;
	height: 24px;
	background-color: #8bb093;
}

Modificação da imagem "Select and insert item…": QSReport.ccs

.startPageListColumnTitle
{
	padding: 3px 5px;
	border: 1px solid #2d5d3d;
	line-break: strict;
	background-color: #8bb093;
}
.startPageListColumn
{
	padding: 3px 5px;
	border-color: #2d5d3d;
	border-width: 0px 1px 1px;
	border-style: solid;
	line-break: strict;
	background-color: none;
}

Modificação de janelas suspensas: CRN.css

text container
.menuItem_normal
{
	font-size: 70%;
	border-right: #ffffff 1px solid;
	padding-right: 1px;
	border-top: #ffffff 1px solid;
	padding-left: 1px;
	padding-bottom: 1px;
	border-left: #ffffff 1px solid;
	color: #2d5d3d;
	padding-top: 1px;
	border-bottom: #ffffff 1px solid;
	font-family: Tahoma;
	background-color: #ffffff;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}

ajuda instantânea sobre o contêiner de texto

.menuItem_hover
{
	font-size: 70%;
	border-right: #99aacc 1px solid;
	padding-right: 1px;
	border-top: #99aacc 1px solid;
	padding-left: 1px;
	padding-bottom: 1px;
	border-left: #99aacc 1px solid;
	color: 2d5d3d;
	padding-top: 1px;
	border-bottom: #99aacc 1px solid;
	font-family: Tahoma;
	background-color: #c8ddca;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
}

Voltar para parte superior

Alterando a marca do Analysis Studio

Arquivos utilizados

<install location>/c8/webcontent/skins/my_style/ans/background.css
<install location>/c8/webcontent/skins/my_style/ans/explore.css

Modificação da barra de menus: background.css

plano de fundo, borda

.menubar
{
	position: absolute;
	overflow: hidden;
	padding: 0px;
	background-color: #2d5d3d;
	border-bottom: 3px solid #2d5d3d;
	border-top: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}
.menubar_content_div
{
	background-image: url
		(../../../skins/corporate/ans/images/title_bar_graphic_studios.gif);
	padding: 2px;
	border: 0px;
	width: 582px;	
}

Modificação das configurações de ajuda instantânea e pressionamento dos itens de menu

.menu_hover
{
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color:#ffffff;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;

}
.menu_pressed
{
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #8cc092;
	border: 1px solid #2d5d3d;
	color:#ffffff;
}

Modificação da barra de botões: background.css

cor de plano de fundo

.main_toolbar
{
	position: absolute;
	white-space: nowrap;
	padding: 2px;
	background-color: #8bb093;
	border-bottom: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	overflow: hidden;
}

botões

.toolbar_dropdown_button_pressed
{
	border : 1px solid #8bb093;
	background-color: #8bb093;
	padding : 1px;	
	/* pointer for standards compliant browsers, hand for ie 5.5*/
	cursor: pointer;
	cursor: hand;	
	display: inline;
}
toolbar_arrow_combo_pressed
{
	background-color: #8bb092;
	border : 1px solid #8bb092;
	display: inline-block;
	padding: 1px;
	cursor: pointer;
	cursor: hand;
}
toolbar_arrow_combo_hover
{
	border : 1px solid #2d5d3d;
	background-color: #c8ddca;
}
toolbar_arrow_combo_pressed
{
	border : 1px solid #2d5d3d;
	background-color: #c8ddca;
}

Controlando as guias: background.css

Bordas, fonte

.tab_dummy_td_none_selected
{
	text-align: left;
	color: #0000CC;
	padding: 3px 15px 3px 15px;
	white-space: nowrap;
	border-collapse : collapse;	
	text-decoration: underline;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: normal;
	text-decoration: underline;
	border-top: 1px solid #2d5d3d;
	border-bottom: 1px solid #2d5d3d;
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}
.tab_td_none_selected
{
	border-top : 1px solid #2d5d3d;
}
.top_tab_td_none_selected
{
	border-bottom : 1px solid #2d5d3d;
}
.tab_right_border
{
	border-right: 1px solid #2d5d3d;
}
.tab_left_border
{
	border-left: 1px solid #2d5d3d;
}

Guia Controls selecionada

.tab_td_selected, .top_tab_td_selected
{
	text-align: left;
	white-space: nowrap;
	border-collapse : collapse;	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #336699;	
	background-color: #c8ddca;
	padding: 3px 15px 3px 15px;
	border : 1px solid #2d5d3d;

guia não selecionada (controla o plano de fundo atrás da área de janela Insertable Objects)

.pane
{
	text-align: left;
	position:absolute;
	padding: 3px;
	margin: 0px 0px 0px 0px;
	background-color: #c8ddca;
	border: 1px solid;
	border-color: #2d5d3d #2d5d3d #2d5d3d #2d5d3d;		
}

Controlando a área de janela de propriedade: diversos arquivos .css

botões: explore.css

.dialogbuttons,.blockproppanebutton
{
	border-top: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	border-left: 1px solid #2d5d3d;
	border-bottom: 1px solid #2d5d3d;
	background-color: #8bb093;
	width: 100%;
	padding: 2px 3px 2px 3px;
}
.dialogButton_hover
{
	background-color: #2d5d3d;
}

cabeçalho do contêiner: background.css

.ToggleBar,.DlgTitleBar
{
	overflow: hidden;
	table-layout: fixed;
	white-space:nowrap;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;	
	background-color: #8bb093;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

contêiner Properties: background.css

.BlockPropertiesContainer
{
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
	background-color: #c8ddca;
	overflow: auto;
}

área de janela Information: background.css

.InfoContainer
{
	background-color: #c8ddca;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color : #2d5d3d; 	
	overflow: auto;
	overflow-x: hidden;
}

área de janela Information: background.css

.InfoContainer
{
	background-color: #c8ddca;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color : #2d5d3d; 	
	overflow: auto;
	overflow-x: hidden;
}

menus de contexto: background.css

background

.contextMenu_body, .contextMenu_body_NS
{
	background-color: #c8ddca;
	padding: 3px;
	border: 1px solid #2d5d3d;
	font-size: 8pt;
	position: absolute;

	visibility: visible;
	left: -1000px;
	cursor: default;
	display: block;
	overflow-y: auto;
}

link sem destaque

contextMenu_item_default 
{
	font-size: 8pt;
	padding: 1px 0px 1px 3px;
	border: 1px solid #c8ddca;
	white-space: nowrap;
	text-align: left;
	cursor: default;
	text-decoration: underline;
	background-color: c8ddca;
	color: #2d5d3d;	
}

menu de ajuda instantânea

contextMenu_item_with_submenu_over 
{
	cursor: pointer;
	cursor: hand;
	background-color: #8bb093;
	border: 1px solid #;
}

Controle da janela Insertable Objects: diversos arquivos css

cabeçalho:background.css

.ins_obj_title_bar{
	overflow: hidden;
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;	
	background-color: #c8ddca;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

bordas: explore.css

.mdmetadata, .analysis_item
{
	color: #0000CC;
	left: 0px;
	position:absolute;
	font-size: 70%;
	font-family: Tahoma;
	padding: 3px 3px 3px 3px;
	overflow: auto;
	white-space: nowrap;
	vertical-align : middle;
	border-left: 1px solid #2d5d3d;
	border-right: 1px solid #2d5d3d;
}

botão Show/Hide: explore.css

.hide_show		
{	
	background-color: #c8ddca;
	border: 1px solid;
	border-color: #2d5d3d #2d5d3d #2d5d3d #2d5d3d;		
	position: absolute;
}
.hide_show_hover
{
	background-color: #8bb093;
}

Controle da barra de eixo: explore.css

axis labels

.axis_label, .rules_label
{
	padding-left: 4px;
	white-space: nowrap;
	color: #2d5d3d;
	font-size: 60%;
}

Controla as áreas de arrastar na tabela cruzada: explore.css

column cell

.ColMemberCellTemplate
{
	border-collapse: collapse;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #2d5d3d;
	text-align: center;
	font-weight: bold;
	color: #2d5d3d;
	background-color: #c8ddca;
	white-space: nowrap;
	cursor: default;
	padding: 5px 7px 5px 5px;
}

célula de linha

.RowMemberCellTemplate
{
	border-collapse: collapse;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #2d5d3d;
	text-align: center;
	font-weight: bold;
	color: #2d5d3d;
	background-color: #c8ddca;
	white-space: nowrap;
	cursor: default;
	padding: 5px 7px 5px 5px;
}

Resultado final

Alterando a marca do Report Studio

Arquivos utilizados

<install location>/c8/webcontent/skins/my_style/pat/skin.css
<install location>/c8/webcontent/skins/my_style/hal/hal_skin_corportate.css

Observe: Nesse arquivo css, boa parte da seção foi agrupada com várias entradas de estilo.

Controla a maior parte da área de janela do plano de fundo: skin.css

#idToolboxTabPanels_Pane,
#idToolboxTabBox_Pane,
#idProperties_Pane,
#idDescription_Pane,
.clsPane_Toolbox_active,
.clsPane_Toolbox_inactive,
.clsPane_Properties_inactive,
.clsPane_Workarea_inactive,
#idExplorerBar,
.clsBigButtonBar,
.clsQueryViewListViewHeader,
.clsQueryTabBackground,
DIV.clsFontComboBoxGroupListItem,
TD.clsGridHeader
{
	background-color: #c8ddca;
}

Controla as boas-vindas, todos os botões, a cor selecionada da guia e a coluna do Explorer de página: hal_skin_corporate.css

BODY,
BUTTON,
DIV.clsMenubar,
DIV.clsToolbar,
DIV.clsDlgToolbar,
TD.clsMenubarItem,
TD.clsToolbarButton,
.clsMenuPopup,
.clsPopupDialog,
.clsMenuItem,
TABLE.clsModalDlg,
BUTTON.clsDlgButton,
BUTTON.clsXButton_active,
BUTTON.clsXButton_inactive,
TD.clsExplorerButton,
.clsBigButtonBar,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
TD.clsTabBox_inactive,
TD.clsTabBox_active,
TD.clsTabBox_inactive_hover,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_inactive,
TD.clsBottomTabBox_active,
TD.clsBottomTabBox_inactive_hover,
TD.clsBottomTabBox_active_hover,
DIV.clsTabPanels,
DIV.clsBottomTabPanels,
TD.clsComboBoxArrow,
TD.clsComboBoxArrow_disabled,
DIV.clsListViewColumnHeader
{
	background-color: #8bb093;
}

Controla os cabeçalhos e a cor da ajuda instantânea do botão: hal_skin_corporate.css

BUTTON.clsCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
.clsMenuItem_selected,
DIV.clsPaneHeader_inactive,
.clsListItem_hover,
.clsListItem_tb_selected,
.clsTreeNode_hover,
TD.clsPropertySheetLabel_active,
.clsModalDlgHeader_inactive,
BUTTON.clsXButton_inactive,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_active_hover,
BUTTON.clsBigCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsBigCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsComboBoxArrow_down
{
	background-color: #2d5d3d;
}

Controla as guias e ajudas instantâneas inativas: hal_skin_corporate.css

TD.clsTabBox_inactive,
TD.clsBottomTabBox_inactive,
TD.clsTabBox_inactive_hover,
TD.clsBottomTabBox_inactive_hover
{
	color: #0000CC;
	text-decoration: underline;
	background-color: #c8ddca;
}

Controla os itens da barra de ferramentas: hal_skin_corporate.css

BUTTON.clsCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
BUTTON.clsBigCoolButton_hover,
TD.clsMenubarItem_up,
TD.clsToolbarButton_up,
BUTTON.clsBigCoolButton_pressed,
TD.clsMenubarItem_down,
TD.clsToolbarButton_down,
DIV.clsListViewColumnHeader
{
	border-top: solid #8bb093 1px;
	border-left: solid #8bb093 1px;
	border-right: solid #8bb093 1px;
	border-bottom: solid #8bb093 1px;
}

HR,
BUTTON.clsCoolButton,
TD.clsToolbarButton,
BUTTON.clsBigCoolButton,
TD.clsToolbarButton,
.clsListItem_colorCell_normal
{
	border: 1px solid #8bb093;
}

Controla a barra de menus: hal_skin_corporate.css

DIV.clsMenubar,
TD.clsMenubarItem
{
	background-color: #c8ddca;
}

TD.clsMenubarItem,
TD.clsMenubarItem_up,
TD.clsMenubarItem_down
{
	font-weight: #2d5d3d;
}

TD.clsMenubarItem
{
	color: #2d5d3d;
	border-top: 1px solid #c8ddca;
	border-left: 1px solid #c8ddca;
	border-right: 1px solid #c8ddca;
	border-bottom: 1px solid #c8ddca;
}
TD.clsMenubarItemLast
{
	/* background-image: url(images/menubar_background.gif); */
	background-repeat: no-repeat;
	background-position: right;
}

DIV.clsMenubar
{
	border-top: 1px solid /* #E7E7E7 */ ;
	border-right: 1px solid /* #E7E7E7 */ ;
	border-bottom: 2px solid /* #DEAC77*/ ;
	border-left: 1px solid /* #E7E7E7 */ ;
}
DIV.clsToolbar
{
	border-top: 1px solid /* #DEAC77*/ ;
}

Resultado final

Alterando a marca do Event Studio

Arquivos utilizados

<install location>/c8/webcontent /skins/my_style/portal/default.css
<install location>/c8/webcontent /skins/my_style/prompting/promptCommon.css
<install location>/c8/webcontent /skins/my_style/ags/ags.css
<install location>/c8/webcontent /skins/my_style/ags/crn.css

Controle da barra de menus: crn.css

imagem de plano de fundo e da barra de menus

.menuBar
{
	background-color: c8ddca;
	background-image: /* url(images/title_bar_graphic_studios.gif) */ ;
	background-repeat: no-repeat;
	background-position: left bottom;
	border-bottom: #2d5d3d 3px solid;
	border-left: #e7e7e7 0px solid;
	border-top: #e7e7e7 1px solid;
	border-right: #e7e7e7 1px solid;
	height: 25px;
	width:100%;
	padding: 1px
}

fonte do menu

.menuTitle_normal
{
	font-size: 70%;
	padding: 3px;
	/*background-color: #336699;*/
	color:#2d5d3d;
	font-family: Tahoma;
	font-weight: bold;
}

funções de ajuda instantânea do menu

.menuTitle_hover
{
	font-size: 70%;
	padding: 2px 3px 2px 3px;
	background-color: #8bb093;
	border: 0px solid #2d5d3d;
	color: #134679;
	font-family: Tahoma;
	font-weight: bold;
	cursor: hand;
}
.menuTitle_pressed
{
	padding: 2px;
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color: #134679;
	font-family: Tahoma;
	font-weight: bold;
	cursor: hand;
}

Controle da barra de botões: crn.css

plano de fundo

.toolbar_studio
{
	padding: 2px;
	background-color: #c8ddca;
	border-bottom: 1px solid #cccccc;
}
.toolbarImageNormal
{
	border : 1px solid #f3f3f3;
	background-color: #c8ddca;
	padding : 1px;	
}

botões com setas suspensas

.toolbarDropdownImageNormal_studio
{
	border : 1px solid #c8ddca;
	height:20px;
	width:30px;
	background-color: #c8ddca;
	padding: 0px;
}
.toolbarDropdownImageOver_studio
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:30px;
	background-color: #8bb093;
	padding: 0px;
	cursor: pointer;
	cursor: hand;
}
.dropDownArrow
{
	border : 1px solid #c8ddca;
	height:20px;
	width:11px;
	background-color: #c8ddca;
	padding: 0px;
	margin:0px;
	cursor: pointer;
	cursor: hand;
	align:center
}
.dropDownArrowOver
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:11px;
	background-color: #8bb093;
	padding: 0px;
	margin:0px;
	cursor: pointer;
	cursor: hand
	align:center
}

janelas suspensas

.menuItem_normal
{
	font-size: 70%;
	background-color: 8bb093;
	border: 1px solid 8bb093;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
}
.menuItem_hover
{
	font-size: 70%;
	background-color: #8bb093;
	border: 0px solid #2d5d3d;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
}
.menuItem_pressed
{
	font-size: 70%;
	background-color: #8bb093;
	border: 1px solid #2d5d3d;
	color:blue;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand;
	font-family: Tahoma;
	font-weight: normal;
	padding: 1px;
}
.menuContainer
{
	background-color: #8bb093;
	border: 1px solid #336699;
	padding: 2px;
}

botões

.toolbarImageNormal_studio
{
	border : 1px solid #c8ddca;
	height:20px;
	width:20px;
	background-color: #c8ddca;
	padding: 0px;
}
.toolbarImageOver_studio
{
	border : 1px solid #2d5d3d;
	height:20px;
	width:20px;
	background-color: #8bb093;
	padding: 0px;
	cursor: pointer;
	cursor: hand;
}

Controle da área de janela "I want to…": crn.css

Fonte

.formText
{
	font-size: 70%;
	color: #2d5d3d;
}
.task_inactive
{
	font-family: Tahoma;
    font-size: 70%;
	color: #8bb093;
	text-decoration: underline;
}
.task_active
{
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;
	color: #2d5d3d;
}

corpo principal da área de janela

.area		
{	
	background-color: #c8ddca;
	padding: 0px;
	border-top : 0px solid;
	border-bottom : 1px solid;
	border-left : 1px solid;
	border-right : 1px solid;
	border-color : #c8ddca; 	
}

cabeçalho da área de janela

.area_header	
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #f3f3f3;	
	background-color: #2d5d3d;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

botão mostrar/ocultar (seta dupla para baixo)

.hide_show_taskspane		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;
}
.hide_show_hover		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;			
}
.hide_show_pressed		
{	
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #c8ddca;		
}

Controle da área de janela Insertable Objects: crn.css

cabeçalho

.area_header	
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #f3f3f3;	
	background-color: #2d5d3d;
	padding: 3px;
	border : 1px solid;
	border-color : #2d5d3d;
}

guias

.insertableItemsPaneBorder{
    background-color: #8bb093 ;
}

Texto: promptCommon.css

.clsTreeNode_unselected
{
	cursor: pointer;
	cursor: hand;
	margin: 0px;
	padding: 0px;
	background-color: #c8ddca;
	color: #000000;
	vertical-align: middle;
}
.clsTreeNode_hover
{
	cursor: pointer;
	cursor: hand;
	margin: 0px;
	padding: 0px;
	color: #000000;
	background-color: #8bb093;
	vertical-align: middle;
}

plano de fundo e bordas: ags.css

.treeBorder {
	border-top: 0px solid;
	border-bottom: 0px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	border-color: #2d5d3d; 	
	background-color: c8ddca;
}

Barra de descisões: crn.css

tarefas

.item
{
	background-color: #c8ddca;
	border : 1px solid;
	border-color : #8bb093;
	
	padding-bottom: 1px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 1px;
}
.item_active
{
	background-color: #c8ddca;
	border : 2px solid;
	border-color: #2d5d3d;
	
	padding-bottom: 0px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
}

Modifica o texto:crn.css

.group_label
{
	font-family : Tahoma;
	font-size : 70%;
	font-weight : normal;
	color : #2d5d3d;
	padding : 3px;
}
.item_label_active		
{	
	font-family: Tahoma;
	font-size: 70%;
	font-weight: bold;		
	color: #2d5d3d;
}
.item_label
{
	font-family : Tahoma;
	font-size : 70%;
	font-weight : normal;
	color : #2d5d3d;
}

rótulos e texto de página:crn.css

.page_label
{
	font-family: Tahoma
	font-size: 110%;
	color: #2d5d3d;
	font-weight: bold;
}
.text2
{
	font-family: Tahoma;
	font-size: 70%;
	color: #2d5d3d;
}

barra de guias: diversos

Controla o texto do hiperlink:crn.css

a
{
	font-family: Tahoma;
	color: #2d5d3d;
	text-decoration: underline;
}

Default.css

.dialogHintText
{
	font-size: 70%;
	color: #2d5d3d;	
}
.tabLabel
{
	font-weight: bold;
	font-size: 70%;
	color: #2d5d3d;
}

Janela Expression and Information: default.css

texto

.formLabel 
{
	font-weight: bold; 
	font-size: 70%; 
	color: #2d5d3d;
}

Ags.css

TEXTAREA.hintText_active
{
    background-position: center center;
    background-image: url(images/arrow_template.gif);
    COLOR: #2d5d3d;
    background-repeat: no-repeat
}

.infoErrorTabText
{	
	font-family: Tahoma;
	margin: 2px;
	font-size: 70%;
	width: 100%;
	color: 2d5d3d;
}

.infoErrorTabTextBold
{
	font-family: Tahoma;
	font-weight: bold;
	margin: 2px;
	font-size: 70%;
	width: 100%;
	color: 2d5d3d;
}

Resultado final

Alterando a marca do IBM Cognos Administration

Para customizar o IBM Cognos Administration há uma técnica ligeiramente diferente. Essa interface usa uma mistura do método de fragmento e dos mesmos arquivos .css usados na modificação do IBM Cognos Connection.

Para obter mais informações sobre fragmentos, faça o download do documento IBM Cognos Fragment Framework.

Arquivo usado

<install location>/c8/webapps/p2pd/WEB-INF/fragments/styles/skins/corporate.xml

Com esse método de mudança do esquema de cores, vamos alterar a paleta de cores principal. Isso alterará a maior parte da interface com o usuário do Administration.

Alterando a paleta: cogadmin.xml

<palette>
		<!-- basic b/w  -->
		<color name="black">#000000</color>
		<color name="white">#ffffff</color>
		<!-- 5 shades of colours -->
		<color name="color.lighter">#c8ddca</color>
		<color name="color.light">#c8ddca</color>
		<color name="color.medium">#8bb093</color>
		<color name="color.normal">#8bb093</color>
		<color name="color.dark">#2d5d3d</color>
		<color name="color.darker">#2d5d3d</color>
		<!-- 4 shades of gray -->
		<color name="gray.light">#c8ddca</color>
		<color name="gray.medium">#8bb093</color>
		<color name="gray.normal">#8bb093</color>
		<color name="gray.dark">#2d5d3d</color>
		<!-- others colours -->
		<color name="tooltip">#2d5d3d</color>
		<color name="hyperlink">#2d5d3d</color>
		<color name="special1">#2d5d3d</color>
		<color name="special2">#2d5d3d</color>
	</palette>

Resultado final

Como se pode ver, basta alterar algumas linhas e a maior parte do estilo é alterada. Mas ainda há algumas coisas a mudar.

Banner: cogadmin.xml

<!-- Main -->
	<class name=".cogstyle-header-main">
		<set name="background-repeat">no-repeat</set>
		<set name="background-position">left top</set>
		<set name="border-bottom">
			<color name="headerBottomBorder"/> 3px solid</set>
	</class>
	<class name=".cogstyle-header-left-section">
		<set name="background-color">
			<color name="headerLeftBackground"/></set>
	</class>
	<class name=".cogstyle-header-middle-section">
		<set name="background-image"> 
			/* url($WEB$/skins/$SKIN$/shared/images/banner_middle.gif) */ 
			</set  >
		<set name="background-repeat">repeat-y</set>
		<set name="background-position">left top</set>
	</class>
	<class name=".cogstyle-header-middle-section-spacer">
		<set name="width">45px</set>
	</class>
	<class name=".cogstyle-header-logo">

	<class name=".cogstyle-fragmentHeader-titleText">
		<set name="font-weight">bold</set>
		<set name="color">#2d5d3d</set>
	</class>

Tabela: cogadmin.xml

<!-- tables -->
		<color name="tableText" paletteColor="black"/>
		<color name="tableTextHeader" paletteColor="color.dark"/>
		<color name="tableBackground" paletteColor="white"/>
		<color name="tableBackgroundHeader" paletteColor="gray.medium"/>
		<color name="tableBackgroundSelected" paletteColor="color.normal"/>
		<color name="tableBackgroundAlternate" paletteColor="gray.light"/>
		<color name="tableBackgroundSubHeader" paletteColor="color.light"/>

Guias horizontais: cogadmin.xml

<!-- horizontal tabs -->
		<color name="htabsScrollButton" paletteColor="white"/>
		<color name="htabsScrollButtonBorder" paletteColor="gray.dark"/>
		<color name="htabsScrollButtonHover" paletteColor="color.lighter"/>
		<color name="htabsScrollButtonDisabled" paletteColor="white"/>
		<color name="htabsScrollButtonBorderDisabled" paletteColor="gray.normal"/>

		<color name="htabsBarBackground" paletteColor="gray.light"/>
		<color name="htabsText" paletteColor="hyperlink"/>
		<color name="htabsBorder" paletteColor="color.light"/>
		<color name="htabsBackground" paletteColor="white"/>
		<color name="htabsTextActive" paletteColor="color.dark"/>
		<color name="htabsBorderActive" paletteColor="gray.dark"/>
		<color name="htabsBackgroundActive" paletteColor="grey.light"/>
		<color name="htabsAltBarBackground" paletteColor="gray.light"/>
		<color name="htabsAltBorder" paletteColor="white"/>
		<color name="htabsAltText" paletteColor="hyperlink"/>
		<color name="htabsAltBackground" paletteColor="gray.light"/>
		<color name="htabsAltTextActive" paletteColor="color.normal"/>
		<color name="htabsAltBackgroundActive" paletteColor="white"/>

Tabelas das guias Security e Configuration

As tabelas dessas guias são controladas pelos mesmos arquivos .css que controlam as tabelas do IBM Cognos Connection. Então, se o IBM Cognos Connection tiver sido modificado, o mesmo estilo deve estar visível aqui.

Consulte Alterando a cor da tabela na seção Alterando a marca do IBM Cognos Connection .

Resultado final

Sobre o autor

Equipe de Práticas Comprovadas do Cognos

Fechar [x]

Ajuda para Relatar Abuso

Relatar abuso

Obrigado. Esta entrada foi sinalizada para atenção do moderador.

Fechar [x]

Ajuda para Relatar Abuso

Relatar abuso

Falha no envio do Relatório de abuso. Tente novamente mais tarde.

Fechar [x]

developerWorks: Registre-se

Todas as informações enviadas são seguras.

Fechar [x]

Selecione seu nome de exibição

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Todas as informações enviadas são seguras.

Classificar este artigo

Comentários

Voltar para parte superior

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=80

Zone=Information Management

ArticleID=791460

ArticleTitle=Práticas comprovadas do IBM Cognos: Customizando a interface com o usuário do IBM Cognos 8.4.x

publish-date=02062012

Índice

Introdução
Entendendo o esquema de cores usado nos estilos
Customizando a interface com o usuário do IBM Cognos 8
Arquivos usados com estilos do IBM Cognos 8
Alterando a marca do IBM Cognos 8
Alterando a marca do Analysis Studio
Sobre o autor
Comentários

Conheça a IBM da sua cidade

A IBM está mais perto do que você imagina!

Saiba mais

My developerWorks:

Minhas notificações:

Selecione um idioma:

Itens Técnicos

Downloads e Trials

Comunidade

Práticas comprovadas do IBM Cognos: Customizando a interface com o usuário do IBM Cognos 8.4.x

Relatar abuso

Relatar abuso

developerWorks: Registre-se

Selecione seu nome de exibição

Índice

Conheça a IBM da sua cidade

Compartilhe esta página:

Siga o developerWorks:

My developerWorks:

Minhas notificações:

Selecione um idioma:

Itens Técnicos

Downloads e Trials

Comunidade

Práticas comprovadas do IBM Cognos: Customizando a interface com o usuário do IBM Cognos 8.4.x

Relatar abuso

Relatar abuso

developerWorks: Registre-se

Selecione seu nome de exibição

Índice

Conheça a IBM da sua cidade

Tags

Compartilhe esta página:

Siga o developerWorks: