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

Transcrição

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

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

3 Customização Intermediário 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 Avançado 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 3

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 4

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 / ". 5

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. 6

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. 7

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. 8

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. 9

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: portal_skins >> plone_styles >> base_properties O arquivo de propriedades básicas pode ser identificado pelo ícone No caso de o template escolhido ser o UFRGSTemplate3, o caminho é: portal_skins >> ufrgs_template3_styles >> template3 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 As propriedades básicas são: Propriedade title plone_skin logoname fontfamily fontbasesize fontcolor fontsmallsize backgroundcolor linkcolor linkactivecolor linkvisitedcolor borderwidth borderstyle borderstyleannotations globalbordercolor globalbackgroundcolor globalfontcolor headingfontfamily 10 Descrição o título do arquivo de propriedades básicas o nome do template a que se refere nome do arquivo de imagem do logotipo as fontes, em ordem de preferência o tamanho da fonte, servirá de tamanho referência para a maioria das fontes do site a cor da fonte principal o tamanho da fonte pequena, usada em elementos como botões a cor de fundo cor dos links cor do link ativo cor do link que já foi visitado largura de borda estilo de borda estilo de borda de elementos como comentários e anotações a cor da borda utilizada nas guias/abas principais, portlets cor de fundo nas guias/abas selecionadas, títulos e portlets a cor da fonte nas guias/abas e cabeçalhos dos portlets fontes para cabeçalhos/títulos, são aplicadas às tags h1, h2, h3, h4, h5 e h6

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 globalbackgroundimage backgroundimage minwidth maxwidth Descrição 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) imagem de fundo do site (para não exibir nenhuma imagem mude o valor para none) largura mínima do corpo do site 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 11

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: 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. 12

13 Estilos CSS 13

14 Arquivos de Customização Avançado portal_skins >> plone_styles Nome do Arquivo authoring.css base.css columns.css IEFixes.css navtree.css portlets.css print.css public.css Descrição Estilos para edição de interface para quando o usuário está logado. Estiliza as principais tags (body, a, img) sem classes ou id s, apenas as tags puras Estruturas das três colunas do layout Ajustes especiais para compatibilidade com o navegador Internet Explorer. Estililiza as estruturas da árvore de navegação (lateral) Estiliza os elementos formadores dos portlets Estilos para impressão Mais abrangente de todos, engloba todos os estilos que não estão em outras folhas de estilo mais específicas 14