Ícones forex png cognos

Práticas comprovadas do IBM Cognos: Branding IBM Cognos 10.1.1 Business Insight Interface do usuário Introdução Este documento fornece uma visão geral dos conceitos, esquemas de cores e arquivos usados ​​para esfoliar no IBM Cognos Business Insight. Também explica o método de esfregaço baseado em tema Dojo usado para a pele padrão do produto. Informações adicionais sobre como substituir textos e logotipos também são fornecidas para que você possa personalizar ainda mais a interface do usuário (UI). Um exemplo é dado para ilustrar todas as mudanças necessárias para rebrand IBM Cognos Business Insight para uma empresa imaginária. Aplicabilidade O método de esfoliação descrito neste documento aplica-se apenas ao IBM Cognos Business Insight versão 10.1.1. Qualquer trabalho de esfoliação feito para esta versão pode precisar ser re-feito para futuras versões. Exclusões e Exceções Este documento pressupõe que o leitor possui algum conhecimento de HTML, DOM e servidor IBM Cognos 10. Um bom conhecimento das propriedades de CSS e das prioridades das regras também é assumido. Antecedentes A UI do IBM Cognos Business Insight foi desenvolvida usando o kit de ferramentas Dojo. Portanto, ter uma compreensão básica dos temas do Dojo e das classes CSS é muito útil no processo de esfoliação. Nesta seção, é dada uma introdução básica a esses conceitos. Para obter mais informações sobre o Dojo, consulte o seguinte link dojotoolkit. orgdocumentation Dojo themes Dojo bibliotecas suporta quatro temas fora da caixa: Claro, Tundra, Soria e Nihilo. Um aplicativo baseado no Dojo pode escolher usar um dos temas como é para sua pele, ou eles podem personalizar um dos temas determinados, ou eles podem desenvolver sua própria pele a partir do zero. O IBM Cognos Business Insight usa uma versão personalizada do tema Claro. Isso é feito configurando o atributo de classe do elemento HTML ltbodygt para claro como mostrado na Figura 1. Figura 1. Código HTML que mostra o atributo de classe do elemento ltbodygt definido como claro CSS herança Dojo usa herança CSS para proteger seus componentes UI (ie Componentes dijit). Como o IBM Cognos Business Insight usa componentes Dojo UI, você precisa entender a herança CSS para personalizar os estilos e a pele do IBM Cognos Business Insight. Os exemplos a seguir ilustram como funciona a herança CSS. A classe claro. dijitDialogTitleBar define a cor de fundo dos títulos de diálogo no tema claro. Observe a ordem dos nomes das classes, que. dijitDialogTitleBar é após. claro. Isso significa que a cor de fundo, ABD6FF, será aplicada a qualquer nó DOM com classe. dijitDialogTitleBar e é descendente de outro nó DOM com a classe. claro. No fragmento HTML mostrado abaixo na Figura 2, esse estilo de cor de fundo será aplicado a uma classe ltdivgt especificando dijitDialogTitleBar como o valor para o atributo de classe. Note-se que a classe ltdivgt é descendente de ltbodygt que usa a classe clear. Figura 2. Código HTML com uma classe div destacada No IBM Cognos Business Insight, essa definição específica significa que qualquer nó DOM na página que usa a classe dijitDialogTitleBar usará ABD6FF como sua cor de plano de fundo, uma vez que a classe para seu elemento ltbodygt é claro. Este exemplo também define a cor de fundo CSS para títulos de diálogo, mas funciona somente quando o tema tundra é usado para um aplicativo. Por outras palavras, aplica-se apenas ao nó com a classe. dijitDialogTitleBar se os antepassados ​​incluem um nó que usa a classe. tundra. Substituir os estilos Dojo padrão O Dojo carrega os arquivos e as classes CSS necessários para o tema especificado por padrão. No IBM Cognos Business Insight, os arquivos CSS personalizados são carregados em cima dos arquivos Dojo CSS padrão para substituir as definições de estilo padrão para o tema. Para substituir uma regra padrão, você deve duplicar a regra em um arquivo CSS personalizado e alterar seus valores. O exemplo a seguir mostra como isso é feito. A árvore DOM representada na Figura 3 mostra uma página, ltBody classe clarogt. Que é dividido em duas seções, esquerda e direita, usando elementos ltdivgt, classe Itdiv, leftgt e ltdiv classe rightgt. De lá, as seções esquerda e direita então definem outras classes de nó. Neste exemplo, as seções esquerda e direita definem a classe ltspan de dijitButtongt do nó que, por sua vez, define o nó ltspan Classe dijitButtonNodegt. Figura 3. Uma árvore DOM consistindo em duas seções que contêm seus próprios nós Para alterar a cor de fundo de todos os botões da página, encontre a classe CSS padrão usada para definir a cor de fundo dos botões. Neste caso, é. claro. dijitButton. dijitButtonNode. Duplique a classe e adicione ao arquivo CSS personalizado com o novo valor 2D5C3D. Para alterar a cor de fundo dos botões no lado esquerdo da página, duplique a seguinte classe e adicione ao arquivo CSS personalizado com novo valor, 2D5C3D. Observe que a ordem dos nomes de classe em ambos os exemplos acima está na mesma ordem que os nós na hierarquia de árvore DOM. Isso é importante para garantir que os estilos sejam aplicados ou substituídos corretamente. Dicas e técnicas Esta seção descreve os arquivos usados ​​para esconder o IBM Cognos Business Insight, a convenção de nomenclatura utilizada para os nomes dos arquivos e a localização desses arquivos. Esses arquivos incluem CSS, imagens e arquivos de string. O IBM Cognos Business Insight é instalado com o servidor IBM Cognos 10 BI. Todos os arquivos necessários para branding podem ser encontrados em ltC10 installgtwebcontenticd. A tabela a seguir mostra os tipos de arquivos usados ​​no skinning, suas localizações no sistema de arquivos e a convenção do nome da abreviatura que será usada no restante deste documento para se referir aos vários locais. Localizações de arquivos ltUI strings locationgt Informações gerais sobre arquivos CSS Todos os arquivos CSS no local de localização do ltCSS foram compactados em um arquivo, bux. css. Se você estiver fazendo uma pequena alteração na pele e nos estilos (como modificar ou adicionar algumas regras), você pode modificar o bux. css diretamente. Se você estiver mudando a aparência do IBM Cognos Business Insight, você precisará modificar outros arquivos CSS e, em seguida, gerar um novo bux. css. Veja as seções intituladas Gerar CSS otimizado e Adicione seus próprios arquivos CSS para obter informações sobre como fazer isso. A tabela abaixo descreve os arquivos no status do ltCSS e para o que eles são usados. Formato de nome de arquivo Os arquivos com este formato de nome contêm as regras CSS relacionadas à pele, como cores, imagens de fundo e estilos. Os arquivos com este formato de nome contêm as regras CSS relacionadas ao modo de alto contraste para deficientes visuais. Não é necessário alterar esses arquivos se você estiver modificando apenas imagens e cores. Os arquivos com este formato de nome contêm as regras CSS usadas para posicionar e dimensionar os controles de UI. Recomendamos que não edite os arquivos com este formato de nome. Você arrisca tornar a UI inutilizável ao alterar esses arquivos. Para descobrir qual arquivo você precisa fazer as mudanças, você precisa, Identifique o componente que deseja proteger. Procure um arquivo CSS relevante com o formato de nome de arquivo acima mencionado. Para alterar a caixa de diálogo, o arquivo a ser modificado é buxdialogskinclaro. css. Para alterar a pele do banner, modifique o arquivo buxbannerskinclaro. css. Antes de iniciar o processo de esfoliação É altamente recomendável que você faça backup da pasta ltCSS locationgt antes de começar a modificar os arquivos CSS. Isto é, caso você encontre problemas durante o esfoliante e precise restaurar os arquivos originais. Gerar CSS otimizado No IBM Cognos Business Insight, todos os arquivos CSS são compactados em um arquivo chamado bux. css para minimizar o tráfego HTTP. Se você modificou arquivos CSS, você precisa regenerar o bux. css. Esta seção descreve como isso é feito. Se a plataforma for Windows, em uma janela do prompt de comando, vá para a pasta de localização do ltCSS. Digite o comando copy dojo. css bux. css bux. css. Se a plataforma for LinuxUnix, em um prompt de shell, vá para a pasta de localização do ltCSS. Digite o comando cat dojo. css bux. css gt bux. css. Adicione seus próprios arquivos CSS É mais fácil gerenciar sua personalização se você criar seus próprios arquivos CSS e aplicar os arquivos em cima da regra CSS do IBM Cognos Business Insights. Para fazer isso, você precisa ter certeza de que esses arquivos são anexados ao final do bux. css. Por exemplo, para adicionar mybank. css ou uma série de arquivos como mybankdialog. css. Mybankbutton. css para o final do bux. css, se a plataforma for Windows, em uma janela do prompt de comando, vá para a pasta de localização do ltCSS. Digite o comando copy dojo. css bux. css mybank. css bux. css. Se a plataforma for LinuxUnix, em um prompt de shell, vá para a pasta de localização do ltCSS. Digite o comando cat dojo. css bux. css mybank. css gt bux. css. Rebranding IBM Cognos Business Insight Cores do Skin Padrão IBM Cognos Business Insight A tabela a seguir mostra todas as cores padrão usadas para o skin do IBM Cognos Business Insight. O uso de um conjunto limitado de cores na pele foi intencional, de modo a manter a UI limpa e organizada. A tabela também mostra o mapeamento das cores padrão para os usados ​​nos exemplos de skin personalizados nas seções a seguir. Dica: ao percorrer a prática esfoliante, é uma boa ideia criar uma tabela de mapeamento entre as cores padrão e as cores alvo. Isso o ajudará a seguir os mesmos princípios de design para manter a UI limpa. Isso ajuda a tornar as cores consistentes com as cores corporativas e também ajuda a simplificar as cores usadas para a pele. Fundo do painel de navegação para o painel de conteúdo e a caixa de diálogo de abertura. Na próxima seção abaixo, os arquivos de imagem estão sendo substituídos são o mesmo arquivo, exceto que eles foram modificados para ter uma cor mais verde para ele. Os arquivos foram então salvos com o prefixo mb. Os arquivos de prefixo mb não existem no produto. Página Introdução Esta seção descreve as etapas tomadas para re-brandar a página Getting Started. A página de Introdução padrão é mostrada na Figura 4. Figura 4. A página padrão do IBM Cognos Business Insight Getting Started Após a marcação novamente, a tonalidade de toda a página mudará de azul para verde e o texto IBM Cognos Business Insight será personalizado para ler My Bank Business Insight. Figura 5. Uma página modificada de IBM Cognos Business Insight Getting Started que usa texto personalizado e um matiz verde Neste documento, nós prefixamos todos os nomes de imagens originais com o mb quando mudamos as imagens porque o nome da nossa empresa imaginária é My Bank. Não discutiremos como criar as imagens usadas nos exemplos. Supõe-se que as imagens estão prontas para serem usadas nas regras CSS. Introdução de cor de fundo Esta seção mostrará como alterar a página de Introdução com novas cores de fundo e imagem. Este é o fundo por trás do painel de trabalho. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxguidancePageskinclaro. css O seletor que será modificado é:.bux-guidancePageContainer-outer Altere o seguinte a partir desta: Introdução imagem de plano de fundo Esta seção mostrará como alterar a imagem de fundo das Primeiras Iniciativas . Figura 6. A imagem de fundo padrão na página de Introdução O arquivo. CSS a ser modificado é: ltCSS locationgtbuxguidancePageskinclaro. css O seletor que será modificado é:.bux-guidancePage Altere o seguinte a partir desta: Neste exemplo, adicionamos um Sobreponha a cor para a imagem, mas você pode usar sua própria imagem ou um fundo simples sem qualquer imagem. Criar novos botões e abrir botões existentes Esta seção mostrará como alterar a cor do botão e a cor do rótulo dos botões Criar Novo e Abrir Existentes na página Introdução. Figura 7. Botões grandes para criar novas e abrir funções existentes O arquivo. CSS a ser modificado é: ltCSS locationgtbuxguidancePageskinclaro. css Os seguintes seletores precisarão ser modificados: Para a cor do botão -.claro. dijitButton. dijitButtonNode Para a cor do rótulo do botão -.icdGettingStartedLargeButton. dijitButtonText Para alterar a cor dos dois botões, adicione a seguinte nova regra na parte inferior do arquivo buxguidancePageskinclaro. cssOs botões Criar Novo e Abrir existentes usam o estilo Dojo padrão para definir a cor do botão. Se você alterasse o estilo padrão, todos os botões que usam esse estilo padrão também serão alterados. Para alterar o estilo de apenas esses dois botões, você deve restringir a regra de substituição especificando uma classe que só aparece no recipiente desses dois botões. Nesse caso, o contêiner é. claro. bux-guidancePage-createDashboard-button-container. dijitButton. Para alterar a cor dos dois rótulos de botões, atualize a seguinte classe a partir desta: Esta seção irá mostrar como alterar o botão "Introduzir páginas mais". Figura 8. Mais botão na Página de Introdução O arquivo. CSS a ser modificado é: ltCSS locationgtbuxguidancePageskinclaro. css O seletor que precisará ser modificado é:.bux-guidancePage-more-icon Mude o seguinte a partir desta: Esta seção será Mostre como alterar o nome do aplicativo do IBM Cognos Business Insight para o My Bank Business Insight. Não há. CSS para modificar. Em vez disso, o arquivo de JavaScript a ser modificado é ltUI Strings Locationgtbuxuimsgen. js No arquivo buxuimsg. js, procure IDSGENAPPLICATIONNAME: IBM Cognos Business Insight e altere-o para IDSGENAPPLICATIONNAME: My Bank Business Insight Esta alteração é apenas para idioma inglês. Se quiser alterar o nome do aplicativo para outros idiomas, é necessário fazer a alteração nos arquivos específicos para esses idiomas. O formato do nome do arquivo é buxuimsgltlanggt. js. Então, se você deseja alterar o nome do aplicativo para francês, é necessário alterar a string em buxuimsgfr. js. É importante que você não altere o formato do arquivo. js. Caso contrário, o aplicativo pode não ser carregado. Para estar seguro, faça um backup do arquivo. js que você vai modificar. Esta seção mostrará como alterar a propriedade de borda da miniatura do item Favoritos. Figura 9. Miniatura do item de favoritos O arquivo. CSS a ser modificado é: ltCSS locationgtbuxguidancePageskinclaro. css O seletor que será modificado é:.bux-guidancePage-thumbnail-span. bux-thumbnail-frame A borda de uma miniatura de itens favoritos usa imagens , Então você deve configurar a exibição da imagem existente para nenhum, adicionando o seguinte na parte inferior do arquivo. Você tem duas opções para adicionar suas próprias bordas personalizadas. A primeira opção usa imagens ea segunda opção usa bordas CSS e propriedades CSS3 para criar bordas arredondadas. Se você usar a segunda opção, os cantos arredondados não aparecerão nos navegadores do Internet Explorer. Opção 1 Esta seção mostrará como alterar as cores do título do Favorito das Favoritas e do Vídeo. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxguidancePageskinclaro. css Os seguintes seletores precisarão ser modificados: Para o título de Favoritos -.bux-guidancePage-section-title Para o título de Vídeos de instruções -.bux-guidancePage-CBT - Item-title Altere o seguinte a partir deste: Barra de aplicação Esta seção descreve as etapas tomadas para re-brandar a barra de aplicativos. A barra de aplicativos padrão é mostrada na Figura 10. Figura 10. A barra de aplicativos padrão no IBM Cognos Business Insight Depois de executar o re-branding, a barra de aplicativos terá a nova tonalidade verde como mostrado na Figura 11. Figura 11. A barra de aplicativos Que foi modificado para usar o novo formato verde. Os arquivos. CSS que serão necessários para esta modificação são: ltCSS locationgtbuxbannerskinclaro. css ltCSS locationgtbuxcontrolsskinclaro. css As localizações dos arquivos de imagem são: ltUI imagem locationgtbanner ltUI image locationgticons Esta seção irá mostrar como Para alterar a imagem de fundo da barra de aplicativos. Em vez de múltiplos arquivos de imagens pequenas, todas as imagens estão contidas em um arquivo de imagem (veja a Figura 12) e referenciadas por coordenadas. Figura 12. As imagens de fundo para a barra de aplicativos padrão O arquivo. CSS a ser modificado é: ltCSS locationgtbuxbannerskinclaro. css O seletor que será modificado é:.buxBannerbar. buxBannerSection. Altere o seguinte a partir desta: Esta seção irá mostrar como alterar os ícones para a barra de aplicativos. Todos os ícones referem o mesmo sprite de imagem. Cada ícone tem sua própria classe definida porque eles precisam de valores de posição de fundo diferentes. Aqui, apenas o sprite de imagem é atualizado, então você precisa ter certeza de manter exatamente as mesmas posições e tamanhos se estiver usando um sprite de imagem diferente. Figura 13. Os ícones para a barra de aplicativos padrão O arquivo. CSS a ser modificado é: ltCSS locationgtbuxbannerskinclaro. css Para alterar os ícones usados ​​na barra de aplicativos, a classe CSS específica para cada um dos ícones deve ser atualizada. Esta atualização pode ser feita para todas as classes de uma vez como mostrado abaixo. Altere o seguinte a partir desta: Esta seção irá mostrar como alterar a cor dos rótulos de controle, como Layout e Style. Figura 14. O rótulo de controle Layout e Style O arquivo. CSS a ser modificado é: ltCSS locationgtbuxbannerskinclaro. css Esta atualização pode ser feita para todas as classes CSS de uma só vez usando a regra mostrada abaixo. Altere o seguinte a partir desta: Indicadores do menu suspenso Esta seção mostrará como alterar os indicadores do menu suspenso na barra de aplicativos. É importante notar que esta alteração atualizará todos os indicadores do menu suspenso no IBM Cognos Business Insight. Figura 15. Indicador do menu suspenso O arquivo. CSS a ser modificado é: ltCSS locationgtbuxcontrolskinclaro. css O seletor que será modificado é:.claro. dijitArrowButtonInner Altere o seguinte a partir deste: Painel de Conteúdo Esta seção descreve as etapas tomadas para re - Marca o painel de conteúdo. O Painel de Conteúdo padrão aparece na Figura 16. Figura 16. O Painel de Conteúdo padrão Depois de executar a re-branding, o Painel de Conteúdo terá a nova tonalidade verde e aparecerá como mostrado na Figura 17. Figura 17. O Painel de Conteúdo modificado para usar o Novo matiz verde Os arquivos. CSS que serão necessários para esta modificação são: ltCSS locationgtbuxcontentPaneskinclaro. css ltCSS locationgtbuxbordercontainerskinclaro. css As localizações dos arquivos de imagem para o Painel de Conteúdo são: ltUI imagem locationgtimagesicons ltUI imagem locationgtformicons ltUI imagem locationgtcollapsablepane Mouse over e seleção destaca This A seção mostrará como alterar a cor de fundo para os itens destacados na árvore. Figura 18. O item Minhas pastas no painel de conteúdo com um realce azul O arquivo. CSS a ser modificado é: ltCSS locationgtbuxtreeskinclaro. css Os seletores que precisam ser modificados são:.claro. dijitTreeRowSelected. claro. dijitTreeRowActive. claro. dijitTreeRowHover To Atualize a cor da borda e as cores de fundo, adicione o seguinte na parte inferior do arquivo. Compartilhamento e divisão Esta seção mostrará como alterar a cor de fundo nova, a cor de fundo nova para o divisor do painel de conteúdo e a nova cor de plano de fundo para o painel de conteúdo do Openclose botão. Os arquivos. CSS a serem modificados são: ltCSS locationgtbuxcontentPaneskinclaro. css ltCSS locationgtbuxbordercontainerskinclaro. css Os seguintes seletores precisarão ser modificados: para a cor de fundo principal:.bux-contentpane-controls-section. icdContentpaneToolbarContainer. bux-contentpane-border-container Para o divisor:.icdUI. dijitSplitterV. icdUI. dijitSplitterVHover. icdUI. dijitSplitterH. icdUI. dijitSplitterHHover Para o botão openclose:.icdUI. dijitSplitterV. dijitSplitterThumb Para atualizar a cor de fundo, no arquivo buxcontentPaneskinclaro. css, altere o seguinte a partir deste: Para Atualize o plano de fundo do divisor do painel de conteúdo, no arquivo buxbordercontainerskinclaro. css altere o seguinte a partir deste: Para atualizar o botão Openclose do divisor de tela de conteúdo, no arquivo buxbordercontainerskinclaro. css, altere o seguinte a partir desta: Esta seção mostrará como alterar o Cor de fundo das abas no mouse. Observe que isso também alterará as guias nas diálogos de propriedades. Figura 19. Menu Tabs O arquivo. CSS a ser modificado é: ltCSS locationgtbuxcontentPaneskinclaro. css Os seguintes seletores precisarão ser modificados: Para estado normal -.claro. dijitTab. dijitTabContent Para o estado do mouse -.claro. dijitTabHover. dijitTabContent Para ativo (Clique em) estado -.claro. DijitTabActive. dijitTabContent Para atualizar a cor de fundo para o estado normal, adicione o seguinte à parte inferior do arquivo: Para atualizar a cor de fundo para o mouse e o estado ativo, adicione o seguinte na parte inferior do arquivo: Esta seção mostrará como alterar o Ícones para os controles de exibição no Painel de Conteúdo. Todos os ícones referem o mesmo sprite de imagem. Cada ícone tem sua própria classe definida porque eles precisam de valores de posição de fundo diferentes. Aqui, estamos apenas atualizando o sprite da imagem, então você precisa ter certeza de manter exatamente as mesmas posições e tamanhos ao usar um sprite de imagem diferente. Figura 20. Exemplo de ícones no painel de conteúdo O arquivo. CSS a ser modificado é: ltCSS locationgt buxcontentPaneskinclaro. css Para alterar os ícones usados ​​para os controles de exibição no Painel de Conteúdo, a classe CSS específica para cada um dos ícones deve ser Atualizada. Esta atualização pode ser feita para todas as classes ao mesmo tempo usando a regra mostrada abaixo. Altere o seguinte a partir desta: Esta seção mostrará como alterar o estilo do menu suspenso no Painel de Conteúdo. Figura 21. Menu suspenso no painel de conteúdo O arquivo. CSS a ser modificado é: ltCSS locationgtbuxcontentPaneskinclaro. css O seletor que precisará ser modificado é:.icdContentpaneTabContainer. dijitDropDownButton. dijitButtonNode Para atualizar a cor de fundo e a borda para o Menu suspenso, adicione o seguinte ao final do arquivo. Esta seção descreve como reconfigurar as caixas de diálogo. Isso mudará todos os diálogos ao mesmo tempo. Uma caixa de diálogo padrão do link de e-mail é mostrada é Figura 22. Figura 22. A caixa de diálogo padrão do link de e-mail Depois de executar a re-branding, a caixa de diálogo Link de e-mail terá a nova tonalidade verde e aparecerá como mostrado na Figura 23. Figura 23. O Email Caixa de diálogo de link modificada para usar a nova tonalidade verde. O arquivo. CSS que será necessário para esta modificação é: A localização dos arquivos de imagem para os diálogos é: diretório de localização de imagem ltUI Esta seção mostrará como alterar a cor da linha de borda e a sombra. Observe que a sombra não é suportada no Internet Explorer. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxdialogskinclaro. css Os seguintes seletores precisarão ser modificados:.icdUI. dijitDialog. icdBorder. icdBorderPopup Para atualizar a cor da borda e sombra adicione o seguinte na parte inferior do arquivo. Observe que a caixa-sombra precisa de uma cor RGB. A cor é a mesma que 8BB093. Essa alteração também se aplicará às bordas do menu popup. Texto do título e diálogo Esta seção mostrará como alterar a cor do texto do título e a cor do texto da caixa de diálogo. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxdialogskinclaro. css Os seguintes seletores precisarão ser modificados:.bux-InformationDialog-mainMessage. claro. dijitDialogTitle Altere o seguinte a partir disso: Além disso, altere o seguinte a partir desta: Esta seção irá mostrar Como alterar a cor de fundo para os botões, a cor de fundo para os botões no mouse e a cor da borda dos botões. Figura 24. Exemplo de botões em uma caixa de diálogo O arquivo. CSS a ser modificado é: ltCSS locationgtbuxdialogskinclaro. css O seletor a ser modificado é:.claro. icdDialogButtonBar. dijitButtonNode Altere o seguinte a partir desta: Observe que a cor de fundo dos botões em O mouse está definido usando a propriedade background-image. Esta seção mostrará como alterar a cor de fundo e a linha de borda para as seções de cabeçalho e rodapé das caixas de diálogo. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxdialogskinclaro. css Os seguintes seletores precisarão ser modificados:.claro. dijitDialogTitleBar. claro. dijitDialogPaneActionBar Para atualizar a cor de fundo e a borda inferior para o cabeçalho, altere o seguinte a partir desta: Para atualizar O cor de fundo e o limite superior para o rodapé alteram o seguinte a partir desta: Esta seção mostrará como mudar o estilo do ícone Fechar nos diálogos. Figura 25. O ícone Fechar usado nas caixas de diálogo O arquivo. CSS a ser modificado é: ltCSS locationgtbuxdialogskinclaro. css O seletor a ser modificado é:.claro. dijitDialogCloseIcon Altere o seguinte a partir desta: Esta seção descreve as etapas tomadas para re-marca o Barra de ferramentas on-demand em cima de widgets. Uma caixa de exemplo padrão de widgets é mostrada é Figura 26. Figura 26. A caixa de widget padrão Depois de executar a re-branding, a caixa de widget terá a nova tonalidade verde e aparecerá como mostrado na Figura 27. Figura 27. A caixa de widget modificada para Use o novo formato verde. O arquivo. CSS que será necessário para esta modificação é: ltCSS locationgtbuxwidget skinclaro. css As localizações de arquivos de imagem para a caixa de widget: ltUI image locationgtimageswidgets Esta seção irá mostrar como alterar a cor de fundo do on - Barra de ferramentas de demanda. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxtoolbarskinclaro. css O seletor que será modificado é:.bux-toolbar Altere o seguinte a partir desta: Esta seção mostrará como alterar a imagem para o botão do menu ponto azul mostrado na Figura 28 Figura 28. O botão padrão do menu de pontos Depois de executar o re-branding, o botão do menu de pontos terá a nova tonalidade verde, como ilustrado na Figura 29. Figura 29. O botão do menu ponto no novo matiz verde O arquivo. CSS a ser Modificado é: ltCSS locationgtbuxtoolbarskinclaro. css O seletor que será modificado é:.bux-toolbar-dropdown-section. dijitArrowButtonInner Altere o seguinte a partir desta: Esta seção irá mostrar como alterar a cor da borda e a sombra. O. O arquivo CSS a ser modificado é: ltCSS locationgtbuxwidgetskinclaro. css Os seguintes seletores precisarão ser modificados,.widget-border. bux-toolbar-inner Adicione o seguinte ao final do arquivo: Esta seção descreve as etapas tomadas para re-brand As dicas de ferramentas. A figura 30. A caixa de informação de origem padrão Após a nova marca, a caixa de texto e o texto terão a nova tonalidade verde e aparecerão como mostrado na Figura 31. Figura 31. A página de informações do link do email na tonalidade azul padrão é mostrada na Figura 30. Figura 30. A caixa de dica padrão. Caixa de dica de modificação na nova tonalidade verde. O arquivo. CSS que será necessário para esta modificação é: ltCSS locationgtbuxtooltip skinclaro. css Esta seção mostrará como alterar a cor de fundo da dica de ferramenta. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxwidgetskinclaro. css O seletor que será modificado é:.claro. dijitTooltip. dijitToolbar Para atualizar a cor de fundo e a borda inferior, adicione o seguinte na parte inferior do arquivo: Esta seção será Mostre como alterar a cor do título da ferramenta e a cor do texto da descrição. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxtooltipskinclaro. css. Os seguintes seletores precisarão ser modificados:.bux-tooltip-title. bux-tooltip-text Altere o seguinte a partir desta: Esta seção irá mostrar como mudar a cor para a borda. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxwidgetskinclaro. css O seletor que será modificado é:.claro. dijitTooltipContainer Para atualizar a cor do plano de fundo e a borda topbottom adicionar, a seguir ao final do arquivo: Esta seção descreve as etapas Levado para voltar a marcar os menus. O menu principal padrão do IBM Cognos Business Insight é mostrado na Figura 32. Figura 32. O menu principal padrão do IBM Cognos Business Insight Após o re-branding, o menu principal terá a nova tonalidade verde e aparecerá como mostrado na Figura 33. Figura 33 O menu principal do IBM Cognos Business Insight foi modificado para usar o novo matiz verde. O arquivo. CSS que será necessário para esta modificação é: As localizações dos arquivos de imagem para os menus: itens do menu efeito do mouse Esta seção mostrará como alterar o Cor do mouse no item do menu. O arquivo. CSS a ser modificado é: ltCSS locationgtbuxmenu. css Os seguintes seletores precisarão ser modificados:.claro. dijitMenuActive. dijitMenuItemHover. claro. dijitMenuActive. dijitMenuItemSeleccionado Altere o seguinte a partir desta: Esta seção irá mostrar como mudar a cor de O indicador do sub-menu O arquivo. CSS a ser modificado é: ltCSS locationgtbuxmenu. css O seletor que será modificado é:.claro. dijitMenuExpandgt Altere o seguinte a partir deste: Apêndice A - Exemplo A amostra utilizada neste documento está disponível para uso Como orientação ou como ponto de partida. Para implantar a amostra, extraia os arquivos para ltC10 install locationgtwebcontent. Deve haver uma série de arquivos mb. css em ltCSS locationgt e as imagens mencionadas neste documento devem estar em suas respectivas pastas. Para aplicar o skin MyBank, você precisa regenerar o arquivo CSS otimizado conforme descrito na seção rotulada Gerar CSS otimizado. Uma maneira fácil de começar seria criar sua própria tabela de cores e atualizar nossa amostra do MyBank, fazendo uma busca e substituindo as cores antigas pelas novas cores. Iniciando Iconfinder Pro - Flatrate, ícones de vetor premium. Saber mais. Iniciar sessão Inscreva-se Navegar Designers O que oferecemos Iconfinder Pro Obtenha acesso instantâneo à maior coleção de ícones do mundo. Custom Icon Design Contrate os melhores designers de ícones do mundo para o seu próximo design de ícones personalizados. Biblioteca estendida Hospeda uma biblioteca de ícones dentro de sua própria interface de usuário. Programa de referência Convide amigos para o Iconfinder e ganhe dinheiro por cada inscrição e depósito. Solução API Dê aos seus usuários acesso instantâneo à maior biblioteca de ícones do mundo. Torne-se um Colaborador Participe da comunidade de ilustradores profissionais de mais rápido crescimento. Formato de ícone Qualquer tipo de licença Premium grátis Sem filtragem de licença Sem filtragem de licença Sempre leia a licença dos ícones antes de usá-los. Para uso comercial, pode incluir restrições, como a adição de um link ao site dos designers. Nenhum link para uso comercial e não requer para ligação de volta ao site dos designers. Leia mais sobre as licenças Background Ícones Forex encontrados