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
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
2
Índice
Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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 / ".
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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.
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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.
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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.
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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.
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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.
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
13
Estilos CSS
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados
Departamento de Sistemas de Informações
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
Top Related