Tema, Layout, WebSphere Portal e o IE7

  • 07 Jul, 2009

Fazer um tema para o WebSphere Portal é um desafio dependendo dos requisitos, normalmente do pessoal do marketing. São menus dinâmicos, um monte de CSS imagens etc. Outro problema é fazer o tema funcionar em vários browsers (nada de diferente para aplicativos comuns em ambiente web).
O difícil é ficar contornando bugs principalmente do nosso amigo IE7. Um bug conhecido é a forma como o IE7 interpreta o CSS quando queremos um layout centralizado, muito comum hoje. Desde o meu primeiro projeto com Portal 6 tive de implementar um layout assim só que os browsers onde testei o código eram IE6 e Firefox 2.0.
Novamente nosso time teve de fazer um tema com layout centralizado e tudo estava indo bem até os testes com IE7. O tema ficava correto no IE6,IE8,Firefox 2.x ,3.0 e 3.5 mas no IE7 ele ficava sempre a esquerda.

Solução:

1 - Editar o default.jsp do tema utilizado e colocar uma tag DIV após o BODY e antes da DIV id=FLYParent> como exemplo DIV CLASS=“NOME DA CLASSE”
e fechar esta DIV após o /BODY. O que isto faz é colocar a página do portal dentro de uma DIV

2 - Criar a referência desta DIV no styles-theme.jspf da forma como está abaixo

.NOME DA CLASSE {
background-color:#FFFFFF;
height:100%;
margin:0 auto;
padding:0;
width:940px;
}

3 -Formatar a id FLYParent com os seguintes itens, no mesmo arquivo:
#FLYParent {
background-color:#FFFFFF;
float:left;
width:940px;
}

Até aqui tudo certo conforme achei pesquisando na Web este contorno para o bug, mas somente centralizou no portal depois que foi feito o seguinte:

Acrescentar uma imagem (veja abaixo (neste caso ela está em branco pq o fundo é branco) na pasta do tema em colors/default/

Referenciar esta imagem no styles-theme.jspf da seguinte forma e acrescentar os itens caso não tenha:
body {
background:#FFFFFF url(./colors/default/fullBackground.jpg) repeat-y scroll center top;
color:#FFFFFF;
margin:0;
padding:0;
}

Editar body, html também da seguinte forma no mesmo styles-theme.jspf:
body, html {
height:100%;
margin:0;
padding:0;
width:100%;
}

Pronto!! Créditos para o Vinicius Afonso que trabalhou comigo para contornar este problema.

Related Posts

Proud to be an HCL Ambassador 2021

  • 15 Dec, 2020

​If you have a problem, and no-one else can help, and if you can find them, maybe you can ask an HCL Ambassador… !(http://www.mysphere.com.br/wp-content/uploads/2020/12/HCLAmbassaborlight4x.png) See

Proud to be an HCL Ambassador 2021Read More

WebSphere Application Server Configuration Comparison Tool

  • 06 Sep, 2019

The Configuration Comparison Tool (CCT) is a lightweight wsadmin script and Python report generation script which will produce HTML reports on configuration settings for the following types of resourc

WebSphere Application Server Configuration Comparison ToolRead More

IBM Support Community for Digital Experience Products

  • 07 Nov, 2017

In the next week Digital Experience products: • WebSphere Portal • Web Content Manager • Digital Experience Patterns • Digital Experience on Cloud • Forms Experience Builder • Forms Experience Builde

IBM Support Community for Digital Experience ProductsRead More