curso de capacitação em gerenciador de conteúdo plone · avançado intermediário. universidade...

Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados

Departamento de Sistemas de Informações

1

Curso de Capacitação em Gerenciador de Conteúdo

PLONE



2

Índice

Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15



3

Customização

Com a definição do posicionamento das diversas camadas da estrutura do Plone, se torna mais fácil a customização visual a partir de então. Caso você ainda não tenha visitado a seção de Posicionamento e Estrutura, recomenda-se fortemente que vonte até lá e leia atentamente as dicas sobre realocação, ocultação ou exibição dos componentes estruturais antes de seguir adiante.

Nesta seção você vai conhecer como funciona a customização visual do Plone, ou seja, a seleção de cores, tamanhos e tipos de letras, imagens, cores e imagens de fundo, ou seja, tudo o que diz respeito a aparência do seu site.

O Plone conta com uma interface de configuração de Propriedades Básicas capaz de facilitar bastante este processo de personalização. Para os usuários mais avançados e desenvolvedores, há também a possibilidade de modificar os padrões de estilo do site nos arquivos CSS (Cascading Style Sheets) que serão descritos em relação a suas funcionalidades no item Arquivos de Customização.

Interface de Gerência do Zope

ZOPE é um servidor de aplicações web de código aberto escrito na linguagem Python, em cima do qual o Plone funciona. É através da interface de gerência desse servidor que o administrador faz as alterações estruturais do site.

A interface de gerência do Zope também pode ser acessada através da URL

http://paginas.ufrgs.br/seusite/manage_main

Avançado

Intermediário



4

Ou pela interface do Plone, seguindo dois passos básicos:

1) Sendo administrador, você deve autenticar-se e acessar no menu de ações do site o link Configuração do Site. Nele há acesso a uma espécie de painel de controle onde você poderá então realizar algumas alterações em diversas funcionalidades disponíveis no Plone.

2) No painel de controle disponível, acesse o link Interface de Gerência do Zope.

Ao longo do tutorial aparecerão situações específicas onde os devidos procedimentos serão explicados passo a passo.

Acionar Modo Debug

Para que sua customização do CSS funcione é preciso antes acionar o modo Debug.

Basta seguir os seguintes passos:

1 - Estando logado no seu site clique em "Configuração do Site" no topo da tela

http://paginas.ufrgs.br/nome_do_seu_site/plone



5

2 - Em seguida clique em "interface de Gerência do Zope".

3 - Abrirá uma tela com uma listagem. Primeiramente certifique-se de que você está na raiz do site. Ela é indicada no caminho de navegação que há no topo da tela. Se você estiver na raiz, aparecerá o nome do seu site logo após a frase "Plone Site at / ".



6

4 - Procure a pasta "Portal_css (CSS registry)" e clique.

5 - Clique no botão de checkbox do item "Debug/ development mode" que se encontra no topo da tela.



7

6 - Vá até o final dessa mesma página e clique em "Save".

O modo Debug será acionado!

Customização de Imagens

As principais imagens que compõe a identidade visual de um site são as de cabeçalho. Portanto, usaremos como exemplo a customização dessas imagens.

Nos templates Plone Default e UFRGS1 o cabeçalho é composto por uma única imagem, que atua também como logotipo. Essa imagem possui link de redirecionamento para a página inicial. No template 3 o cabeçalho é composto por duas imagens distintas: logotipo e cabeçalho. Portanto, no passo-a-passo que segue, dependendo do tema usado, segue-se um caminho diferente.

Modificando o cabeçalho: Na listagem da raiz da interface de gerência encontre o link portal_skins.



8

Utilizando o tema padrão do Plone

Em portal_skins, localize a pasta plone_images como mostra a imagem a seguir.

Ao entrar nesta pasta você deve localizar o arquivo logo.jpg e seguir o procedimento de customização de imagens.

Utilizando o temas fornecido pelo CPD/UFRGS UFRGS1 ou UFRGS 2

O procedimento de alteração de cabeçalho destes templates é quase idêntico ao descrito acima, porém, ao invés de localizar a pasta referida na explicação anterior, você deve buscar a pasta template_custom_images do template UFRGS que você está utilizando. Ex. ufrgs_template1_custom_images.

Ao entrar nesta pasta você deve localizar o arquivo logo.jpg e seguir o procedimento de customização de imagens.



9

Utilizando os temas fornecido pelo CPD/UFRGS UFRGS3

Em portal_skins, clique em ufrgs_template3_custom_images. Aperecerão as imagens utilizadas na construção do template.

Atenção: Aqui você terá que modificar duas imagens diferentes. Note que a imagem header.jpg corresponde a imagem de fundo do topo da sua página, você pode personalizá-lo da maneira que achar melhor. A imagem do logotipo é logo.jpg. Em outros templates não há separação entre imagem de logotipo e cabeçalho, a imagem do cabeçalho e logo com link é a mesma: logo.jpg.

Siga o tópico a seguir para o processo de upload das novas imagens.

Procedimento de customização de imagens

Uma vez escolhida a imagem que você deseja customizar, você deve clique em Customize, posteriormente em Escolher arquivo, localizar no seu computador a imagem e fazer o Upload do novo arquivo.



10

Propriedades Básicas

As propriedades básicas são um recurso de customização do template Plone, evitando a alteração diretamente em códigos. Para acessá-las é preciso primeiro entrar na interface de gerência do Zope de seu site e seguindo o caminho:

O arquivo de propriedades básicas pode ser identificado pelo ícone No caso de o template escolhido ser o UFRGSTemplate3, o caminho é:

As propriedades básicas são:

Propriedade Descrição title o título do arquivo de propriedades básicas

plone_skin o nome do template a que se refere

logoName nome do arquivo de imagem do logotipo

fontFamily as fontes, em ordem de preferência

fontBaseSize o tamanho da fonte, servirá de tamanho referência para a maioria das fontes do site

fontColor a cor da fonte principal

fontSmallSize o tamanho da fonte pequena, usada em elementos como botões

backgroundColor a cor de fundo

linkColor cor dos links

linkActiveColor cor do link ativo

linkVisitedColor cor do link que já foi visitado

borderWidth largura de borda

borderStyle estilo de borda

borderStyleAnnotations estilo de borda de elementos como comentários e anotações

globalBorderColor a cor da borda utilizada nas guias/abas principais, portlets

globalBackgroundColor cor de fundo nas guias/abas selecionadas, títulos e portlets

globalFontColor a cor da fonte nas guias/abas e cabeçalhos dos portlets

headingFontFamily fontes para cabeçalhos/títulos, são aplicadas às tags h1, h2, h3, h4, h5 e h6

portal_skins >> ufrgs_template3_styles >> template3

portal_skins >> plone_styles >> base_properties

O efeito ou comportamento das propriedades pode variar de acordo com o template usado. Nos arquivos .css as propriedade são referenciadas por &dtml-nomePropriedade



11

contentViewBorderColor a cor da borda da tabela de conteúdos no modo de edição (logado)

contentViewBackgroundColor cor do fundo da tabela de conteúdos no modo de edição (logado)

contentViewFontColor cor da fonte da tabela de conteúdos no modo de edição (logado)

inputFontColor cor da fonte de elementos input

textTransform define a capitalização (caixa alta ou caixa baixa) do texto das guias/abas e portlets

evenRowBackgroundColor cor de fundo das linhas pares dos portlets que utilizam listas em sua composição

oddRowBackgroundColor cor de fundo das linhas ímpares dos portlets que utilizam listas em sua composição

notifyBorderColor cor da borda dos elementos de comunicação como a mensagem de status, o foco do calendário

notifyBackgroundColor cor de fundo dos elementos de comunicação como a mensagem de status, o foco do calendário

discreetColor cor da classe "Discreet", disponível no editor de texto

helpBackgroundColor cor do pop-up do calendário

portalMinWidth largura mínima do site

columnOneWidth largura da coluna da esquerda

columnTwoWidth largura da coluna da direita

O template UFRGSTemplate3 poosui quatro propriedades adicionais:

Propriedade Descrição globalBackgroundImage imagem de fundo usada nos cabeçalhos de portlets e na divisória entre o menu

horizontal e as colunas de conteúdo (para não exibir nenhuma imagem mude o valor para none)

backgroundImage imagem de fundo do site (para não exibir nenhuma imagem mude o valor para none)

minWidth largura mínima do corpo do site

maxWidth largura máxima do corpo do site (mude o valor para 100% se quiser que o site ocupe toda a largura da tela)

Fontes

Para estilizar as fontes, escolhemos uma família (lista de fontes) que represente melhor graficamente para um maior número de usuários. Não podemos simplesmente escolher uma fonte disponível em nosso computador pois não sabemos se o usuário que acessa o site possui a mesma fonte instalada. Portanto, precisamos dar opções. Porém, as fontes contidas na família devem ser semelhantes. Caso contrário, o site terá estilos bastante distantes em computadores diferentes. Para facilitar, usamos fontes e famílias de fonte chamadas web safe, ou seja, fontes comuns a maioria dos usuários.

• Verdana,Geneva, sans-serif

• Tahoma,Arial,Helvetica, sans-serif

• Georgia,Utopia,Palatino,'Palatino Linotype', serif

• 'Times New Roman',Times, serif

• 'Courier New','Courier', monospace



12

Fontes cujos nomes contenham mais de uma palavra devem ficar entres aspas. O último item da lista deve ser o tipo da fonte: sans-serif, serif, monospace ou cursive

Cores

As cores são definidas pelo nome em inglês ou pelo código hexadecimal correspondente. Porém, costumamos usar a representação hexadecimal devido a maior variedade de cores. O código hexadecimal de uma cor é formado por 6 caracteres que podem ser números de 0 a 9 ou letras de A a F e devem vir sempre antecedidos do caractere sustenido #. Você pode descobrir o código hexadecimal da(s) cor(es) que deseja em softwares de edição de imagens ou em sites como:

• http://www.colorschemer.com

• http://www.colourlovers.com

Assim como as fontes, as cores também aparecem de maneira diferente em telas diferentes. Portanto, recomenda-se que sempre que possível utilize-se cores seguras. Quanto mais simples for o código da cor, mais segura ela é.

Tamanhos

• em: relativo ao tamanho da fonte ('font-size') herdada;

• ex: relativo a altura da letra x (xis) da fonte herdada;

• px: relativo ao dispositivo (midia) de exibição;

• %: relativo a uma medida previamente definida.



13

Estilos CSS



14

Arquivos de Customização

Nome do Arquivo Descrição authoring.css Estilos para edição de interface para quando o usuário está logado.

base.css Estiliza as principais tags (body, a, img) sem classes ou id’s, apenas as tags puras

columns.css Estruturas das três colunas do layout

IEFixes.css Ajustes especiais para compatibilidade com o navegador Internet Explorer.

navtree.css Estililiza as estruturas da árvore de navegação (lateral)

portlets.css Estiliza os elementos formadores dos portlets

print.css Estilos para impressão

public.css Mais abrangente de todos, engloba todos os estilos que não estão em outras folhas de estilo mais específicas

portal_skins >> plone_styles

Avançado

curso de capacitação em gerenciador de conteúdo plone · avançado intermediário. universidade...

Documents