• Nenhum resultado encontrado

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:

N/A
N/A
Protected

Academic year: 2021

Share "O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:"

Copied!
26
0
0

Texto

(1)

Este artigo tem por objetivo mostrar de maneira simples e direta o passo-a-passo de como criar um tema para XOOPS de maneira rápida e simples.

Não vou adentrar a explicação de código, vou postando as estruturas de repetição responsáveis por trazer cada informação como os blocos do XOOPS e as informações de cabeçalho, rodapé e variáveis internas.

(2)

Capítulo 1: Variáveis do tema.

Vamos começar com uma lista de variáveis que você terá que conhecer antes de começar a criar seu template, são elas:

<{$xoops_module_header}>

Carrega o cabeçalho dos módulos XOOPS, como scripts e arquivos de CSS. É inserido antes da tag </head>, ou seja, dentro do

cabeçalho do documento.

<{$xoops_sitename}> Exibe o nome do site, deve ficar dentro da tag <title>

<{$xoops_pagetitle}> Exibe o título da página, slogan e titulo de páginas. Deve ficar dentro da tag <title>

<{$xoops_charset}>

Define o Charset do seu tema, não colocar esta variável corretamente ou deixa-la ausente causa um velho problema conhecido de todos nós, ou seja, o seu site com icones

desconfigurados. De ver inserida no cabeçalho do documento. <{$xoops_langcode}> Esta variável define a linguagem do seu site. Deve estar presente

também no cabeçalho do documento.

<{$xoops_meta_keywords}> Exibe as palavras chave do seu site. A mesma fica dentro do cabeçalho.

<{$xoops_meta_description}> Exibe a descrição de seu site, a mesma fica dentro do cabeçalho e é imprescindível sua presença.

<{$meta_copyright}> Exibe o copyright do site. <{$xoops_meta_author}> Exibe o nome do autor do site.

<{$meta_rating}> Exibe a classificação etária do seu site. <{$meta_robots}> Define o que será indexado em seu site.

<{$xoops_themecss}> Carrega o caminho da folha de estilo do seu tema.

<{$xoops_banner}> Exibe o Banner do XOOPS, escolha uma área no tema para inserir esta variável.

<{$xoops_footer}> Carrega a mensagem do rodapé de seu tema.

<{$xoops_imageurl}> Carrega o caminho de uma imagem dentro do diretório do seu tema, não necessita de “/” após a variável. <{$xoops_url}> Carrega a url do site, necessita de “/” após a variável.

<{$block.title}> Exibe o título de um bloco. <{$block.content}> Exibe o conteúdo de um bloco. <{$xoops_contents}> Carrega o conteúdo da página.

(3)

Capítulo 2: Estrutura do Cabeçalho

Vamos começar mostrando como é a estrutura de um cabeçalho de uma página HTML comum: <!-- Declaração do tipo do documento -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt_BR" lang="pt_BR"> <!-- Início do cabeçalho -->

<head>

<!-- Declaração do charset da página -->

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- Linguagem da página -->

<meta http-equiv="content-language" content="pt_BR" /> <!-- O que os robôs de busca podem indexar -->

<meta name="robots" content="index,follow" /> <!-- Palavras chave -->

<meta name="keywords" content="palavras chave do site aqui" />

<!-- Descrição da página -->

<meta name="description" content="descrição do site aqui" /> <!-- Classificação etária do site -->

<meta name="rating" content="classificação do site" /> <!-- Autor do site -->

<meta name="author" content="autor do site" /> <!-- Creditos do site -->

<meta name="copyright" content="Copyright do site" /> <!-- Título do site -->

<title>Meu Site - XOOPS</title> <!-- Caminho da sua folha de estilo -->

<link rel="stylesheet" type="text/css" media="all" href="caminho da folha de estilo aqui" /> </head>

(4)

Vamos agora adequar isso ao padrão do XOOPS, fazer com que ele preencha essas informações dinamicamente através do painel de controle adicionando as variáveis que citamos no capitulo 1, o cabeçalho ficaria assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">

<head>

<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" /> <meta http-equiv="content-language" content="<{$xoops_langcode}>" />

<meta name="robots" content="<{$xoops_meta_robots}>" /> <meta name="keywords" content="<{$xoops_meta_keywords}>" /> <meta name="description" content="<{$xoops_meta_description}>" /> <meta name="rating" content="<{$xoops_meta_rating}>" />

<meta name="author" content="<{$xoops_meta_author}>" /> <meta name="copyright" content="<{$xoops_meta_copyright}>" /> <meta name="generator" content="XOOPS" />

<!-- É necessário para forçar o IEca 8 a usar o modo de compatibilidade, ou seja, fazer o navegador se comportar como um Browser mais ou menos descente. -->

<meta http-equiv="X-UA-Compatible" content="IE=100" />

<title><{$xoops_sitename}> <{if $xoops_pagetitle !=''}> - <{$xoops_pagetitle}><{/if}></title> <link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />

<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url}>/xoops.css" /> <link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>" /> <{$xoops_module_header}>

</head>

Pronto, feito isso temos uma estrutura de um cabeçalho no formato do XOOPS, assim poderemos editar seus valores dentro da administração do XOOPS sem precisar editar diretamente o HTML do

(5)

Capítulo 3: Os Blocos do XOOPS!

Sabemos que no XOOPS utilizamos blocos para exibir o conteúdo do nosso site, ao todo são 8

(oito) blocos, são eles:

● Bloco da Esquerda ● Bloco da Direita ● Bloco Central

● Bloco Central Esquerda ● Bloco Central Direita ● Bloco Central Inferior

● Bloco Central Inferior da Esquerda ● Bloco Central Inferior da Direita

Podemos customizar a forma de exibição destes bloco infinitamente, mais no tutorial vou abordar a transposição do conteúdo em colunas, onde o conteúdo vai se dividir em:

1. Coluna da Esquerda: Será exibido os blocos da esquerda 2. Coluna da Direita: Será exibido os blocos da direita

3. Coluna central: Serão exibidos os blocos central, central direita e esquerda, central inferior e central inferior direita e esquerda.

Qualquer duvida quanto a transposição da informação basta ver o gráfico que simboliza esta estrutura no topo deste tutorial.

Um bloco XOOPS contem as seguintes informações:

1. Uma estrutura de repetição que diz que enquanto existir blocos ele vai exibi-los.

2. Dentro da estrutura de repetição de um bloco é exibido um título e um conteúdo distinto de cada bloco, cada bloco tem uma identificação única, o que torna possível trazer estas informações.

(6)

Abaixo podemos ver o código de cada posição de bloco XOOPS: ● Bloco da Esquerda:

<{foreach item=block from=$xoBlocks.canvas_left}> <{$block.title}>

<{$block.content}> <{/foreach}> ● Bloco da Direita:

<{foreach item=block from=$xoBlocks.canvas_right}> <{$block.title}>

<{$block.content}> <{/foreach}> ● Bloco do Centro:

<{foreach item=block from=$xoBlocks.page_topcenter}> <{$block.title}>

<{$block.content}> <{/foreach}>

Bloco Esquerdo do Centro:

<{foreach item=block from=$xoBlocks.page_topleft}> <{$block.title}>

<{$block.content}> <{/foreach}>

Bloco Direito do Centro:

<{foreach item=block from=$xoBlocks.page_topright}> <{$block.title}>

<{$block.content}> <{/foreach}>

Bloco Central Inferior:

<{foreach item=block from=$xoBlocks.page_bottomcenter}> <{$block.title}>

<{$block.content}> <{/foreach}>

Bloco Central Inferior Esquerdo:

<{foreach item=block from=$xoBlocks.page_bottomright}> <{$block.title}>

<{$block.content}> <{/foreach}>

Bloco Central Inferior Direito:

<{foreach item=block from=$xoBlocks.page_bottomleft}> <{$block.title}>

<{$block.content}> <{/foreach}>

(7)

● O bloco propriamente dito, onde cada bloco é indicado após a variável

$xoBlocks(canvas_left, canvas_right, page_topcenter, page_topleft, page_topright,

page_bottomcenter, page_bottomright, page_bottomleft) e esta devidamente dentro de uma estrutura de repetição(foreach).

● O título do bloco ● O conteúdo do bloco

Favor ver a imagem do início do capítulo para melhor entendimento.

Agora que já temos os códigos necessários para montar a estrutura de blocos do nosso tema XOOPS podemos partir para o próximo capitulo onde iremos ver como criar a seção de conteúdo, que é onde serão exibidos os conteúdos de suas páginas e como criar o rodapé do site.

Vale lembrar que não é obrigatório o uso de todas as posições dos blocos do XOOPS, o webdesign pode escolher quais ele vai trabalhar minimizando ainda mais a tarefa de criação de um tema simples, que não necessite de tantas posições.

(8)

Capítulo 4: Área de Conteúdo, Banner e Rodapé

Estamos quase finalizando a parte teórica e em breve vamos ver como montar tudo, neste capitulo iremos ver como inserir a área de conteúdo, que é onde os textos gerados pelos módulos como conteúdos, imagens e etc... irão aparecer dentro do tema.

Para inserir uma área de conteúdo iremos usar a variável <{$xoops_contents}>, a localização dela deve estar no topo dos blocos centrais, ou seja, acima do primeiro bloco central, mais na frente vamos ver onde a colocar, para exibir os banners nativos do XOOPS usaremos a variável

<{$xoops_banner}>, esta variável deverá ficar em uma área de sua preferência, geralmente é

inserida no topo, o uso da mesma não é obrigatório. Para inserir o rodapé basta utilizar a variável

<{$xoops_footer}>, a mesma fica na parte inferior do site e é responsável por exibir as informações

inseridas no rodapé de seu site no painel administrativo. A transposição das informações ficará desta forma:

(9)

Capítulo 5: Criando um Novo Tema

Neste capitulo iremos criar um template para XOOPS com as informações que já foram passadas até aqui, para começar vá até a pasta “themes” de sua instalação XOOPS e crie uma nova pasta com o nome de seu tema, escolha o nome que mais lhe agradar e mãos a obra!

Após criar a pasta do seu tema no diretório themes crie um arquivo chamado “theme.html” e outro chamado “style.css”, ou seja, o arquivo fonte de seu tema e sua folha de estilo, neste artigo não vou abordar a criação de temas com imagens, faremos tudo via HTML e CSS, é imprescindível o conhecimento mínimo dessas duas linguagens para que possamos prosseguir daqui.

(10)

Agora vamos editar os arquivos de nosso novo tema, para iniciar é bom usar um editor de texto mais limpo, recomendo o “Notepad++” que pode ser baixado aqui:

http://notepad-plus-plus.org/download/v6.1.2.html

Depois de baixar e instalar, clique com o botão direito do mouse em cima do arquivo “theme.html” e escolha a opção “Editar com Notepad++”, vamos agora começar a codificar o tema, iniciaremos obviamente inserindo o cabeçalho do template:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">

<head>

<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" /> <meta http-equiv="content-language" content="<{$xoops_langcode}>" />

<meta name="robots" content="<{$xoops_meta_robots}>" /> <meta name="keywords" content="<{$xoops_meta_keywords}>" /> <meta name="description" content="<{$xoops_meta_description}>" /> <meta name="rating" content="<{$xoops_meta_rating}>" />

<meta name="author" content="<{$xoops_meta_author}>" /> <meta name="copyright" content="<{$xoops_meta_copyright}>" /> <meta name="generator" content="XOOPS" />

<meta http-equiv="X-UA-Compatible" content="IE=100" /> <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>

<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />

<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>" /> <{$xoops_module_header}>

(11)

Agora vamos criar o corpo do nosso documento, nele ficam os banners, blocos, área de conteúdo e rodapé. Código: <body> <{$xoops_sitename}> <{$xoops_banner}> <!-- Bloco da Esquerda: -->

<{foreach item=block from=$xoBlocks.canvas_left}> <{$block.title}>

<{$block.content}> <{/foreach}>

<!-- Bloco da Direita:-->

<{foreach item=block from=$xoBlocks.canvas_right}> <{$block.title}>

<{$block.content}> <{/foreach}>

<!-- Área de Conteúdo --> <{$xoops_contents}>

(12)

<!-- Bloco do Centro: -->

<{foreach item=block from=$xoBlocks.page_topcenter}> <{$block.title}>

<{$block.content}> <{/foreach}>

<!-- Bloco Esquerdo do Centro: -->

<{foreach item=block from=$xoBlocks.page_topleft}> <{$block.title}>

<{$block.content}> <{/foreach}>

<!-- Bloco Direito do Centro: -->

<{foreach item=block from=$xoBlocks.page_topright}> <{$block.title}>

<{$block.content}> <{/foreach}>

<!-- Bloco Central Inferior: -->

<{foreach item=block from=$xoBlocks.page_bottomcenter}> <{$block.title}>

<{$block.content}> <{/foreach}>

<!-- Bloco Central Inferior Esquerdo: -->

<{foreach item=block from=$xoBlocks.page_bottomright}> <{$block.title}>

<{$block.content}> <{/foreach}>

<!-- Bloco Central Inferior Direito: -->

<{foreach item=block from=$xoBlocks.page_bottomleft}> <{$block.title}> <{$block.content}> <{/foreach}> <{$xoops_footer}> </body> </hmtl>

Pronto, o tema está criado! Agora é só começar a estilizar ele, para isso iremos criar a estrutura tableless que vai alinhar todas as informações, lembram do nosso prototipo do início do artigo? Então, baseado nele iremos criar a nossa estrutura de divs para deixar o resultado final igual ao planejado.

Lembrando, o conhecimento básico de HTML e CSS são necessários, pois neste tutorial não vou adentrar a explicações sobre as linguagens, então se tiver duvidas quanto algum termo citado aqui, por favor, acesse o site: http://www.maujor.com/

.

(13)

Capítulo 6: Aplicando o Estilo ao Tema

Vamos começar estruturando o corpo do tema, antes de qualquer coisa precisamos criar uma estrutura de DIVs seguindo a ordem abaixo:

1. Uma DIV que engloba todo o tema, vou chama-la de “corpo”;

2. Uma DIV com o nome “cabecalho” onde vai ficar o titulo do site e o banner; 3. Fecharemos a div “cabecalho”;

4. Criaremos uma div com o nome “menu” e fecharemos; 5. Abaixo de menu criaremos a div da esquerda;

6. Abaixo da div da esquerda criaremos a div da direita;

7. Agora criaremos uma div com o nome “centro”, dentro dela ficarão todas as demais divs centrais, são elas: conteudo, blocoCentro, blocoCentroEsq, blocoCentroDir,

centroInferior, inferiorDireito, inferiorEsquerdo. 8. Fecharemos a div centro;

9. Criaremos uma div com o nome “rodape”; 10. Fecharemos a DIV Corpo;

Abaixo os códigos das DIVs, vejam como deverá ficar: <div id="corpo"> <!-- Div principal -->

<div id="cabecalho"> <!-- DIV Cabeçalho -->

</div> <!-- Fim da DIV Cabeçalho --> <div id="menu"> <!-- DIV do menu -->

</div> <!-- Fim da DIV do menu → <div id="esquerda"> <!-- Div da Esquerda -->

</div> <!-- Fim da Div da Esquerda --> <div id="direita"> <!-- Div da Direita -->

</div> <!-- Fim da Div da Direita-->

<div id="centro"> <!-- Div Central - Todas as divs centrais ficam aqui --> <div id="conteudo"> <!-- DIV Conteúdo -->

</div> <!-- Fim da DIV Conteúdo --> <div id="blocoCentro"> <!-- Div para o Bloco Central --> </div> <!-- Fim da DIV do Bloco Central -->

(14)

<div id="blocoCentroEsq"> <!-- Div para o bloco central da esquerda --> </div> <!-- Fim da DIV central esquerda -->

<div id="blocoCentroDir"> <!-- Div para o bloco central da direita --> </div> <!-- Fim da div central direita -->

<div id="centroInferior"> <!-- DIV central inferior -->

</div> <!-- Fim da DIV central inferior --> <div id="inferiorEsquerdo"> <!-- DIV Inferior Esquerda --> </div> <!-- Fim da Div Inferior Esquerda --> <div id="inferiorDireito"> <!-- DIV Inferior Direita -->

</div> <!-- Fim da div Inferior Direita → <div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da DIV Central -->

<div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da Div principal --> <div id="rodape"> <!-- DIV do rodapé --> </div> <!-- Fim da DIV rodapé -->

(15)

Lembrando que essa é nossa estrutura de DIVs, ainda esta faltando o estilo, vamos abrir o nosso arquivo “style.css” e criar as IDs e Classes que referenciamos no nosso “theme.html”, o codigo do “style.css” ficará assim por enquanto:

*{ margin:0; padding:0; } body{ background:#6D6D6D; } div{

margin-bottom:5px; /*Somente para vizualizar as divs, depois removeremos*/ }

.clear{clear:both; margin:0; padding:0; width:auto; height:0px;} #corpo{ background:#ACACAC; width:800px; margin:0 auto; } #cabecalho{ background:#EBEBEB; width:auto; height:100px; } #menu{ background:#EBEBEB; width:auto; height:30px; } #esquerda{ background:#EBEBEB; width:150px; float:left; min-height:150px; }

(16)

#direita{ background:#EBEBEB; width:150px; min-height:150px; float:right; } #centro{ background:#FFF; margin:0 auto; width:490px; min-height:150px; } #conteudo{

/*Sera inserido mais a frente*/ } #blocoCentro{ background:#D6D6D6; width:480px; min-height:50px; margin:0 auto; } #blocoCentroEsq{ background:#D6D6D6; float:left; width:235px; min-height:50px; margin-left:5px; margin-top:5px; } #blocoCentroDir{ background:#D6D6D6; float:right; width:235px; min-height:50px; margin-right:5px; margin-top:5px;} #centroInferior{ background:#D6D6D6; width:480px;

(17)

float:left; margin-left:5px; } #inferiorEsquerdo{ background:#D6D6D6; float:left; width:235px; min-height:50px; margin-left:5px; } #inferiorDireito{ background:#D6D6D6; float:right; width:235px; min-height:50px; margin-right:5px; } #rodape{ background:#EBEBEB; margin:5px auto; width:800px; height:30px; line-height:30px; text-align:center; }

(18)

Lembrando que esta estrutura é apenas para exemplificar como deverá ficar o alinhamento das DIVs que irão abrigar os seus devidos blocos ou elementos do tema, cada ID esta com um nome que sugere o bloco ou elemento que ela irá carregar. Vamos agora montar tudo, alimentar cada DIV com seu devido bloco/elemento.

<div id="corpo"> <!-- Div principal --> <div id="cabecalho"> <!-- DIV Cabeçalho -->

<{$xoops_sitename}> <{$xoops_banner}>

</div> <!-- Fim da DIV Cabeçalho --> <div id="menu"> <!-- DIV do menu →

<a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 2</a> <a href=”#”>Link 4</a>

</div> <!-- Fim da DIV do menu → <div id="esquerda"> <!-- Div da Esquerda -->

<{foreach item=block from=$xoBlocks.canvas_left}> <{$block.title}>

<{$block.content}> <{/foreach}>

</div> <!-- Fim da Div da Esquerda --> <div id="direita"> <!-- Div da Direita →

<{foreach item=block from=$xoBlocks.canvas_right}> <{$block.title}>

<{$block.content}> <{/foreach}>

</div> <!-- Fim da Div da Direita-->

<div id="centro"> <!-- Div Central - Todas as divs centrais ficam aqui --> <div id=”conteudo”> <!-- DIV Conteudo -->

<{$xoops_contents}>

</div> <!-- Fim da DIV Conteúdo --> <div id="blocoCentro"> <!-- Div para o Bloco Central -->

<{foreach item=block from=$xoBlocks.page_topcenter}> <{$block.title}>

<{$block.content}> <{/foreach}>

(19)

<div id="blocoCentroEsq"> <!-- Div para o bloco central da esquerda --> <{foreach item=block from=$xoBlocks.page_topleft}>

<{$block.title}> <{$block.content}> <{/foreach}>

</div> <!-- Fim da DIV central esquerda → <div id="blocoCentroDir"> <!-- Div para o bloco central da direita -->

<{foreach item=block from=$xoBlocks.page_topright}> <{$block.title}>

<{$block.content}> <{/foreach}>

</div> <!-- Fim da div central direita --> <div id="centroInferior"> <!-- DIV central inferior -->

<{foreach item=block from=$xoBlocks.page_bottomcenter}> <{$block.title}>

<{$block.content}> <{/foreach}>

</div> <!-- Fim da DIV central inferior --> <div id="inferiorEsquerdo"> <!-- DIV Inferior Esquerda -->

<{foreach item=block from=$xoBlocks.page_bottomleft}> <{$block.title}>

<{$block.content}> <{/foreach}>

</div> <!-- Fim da Div Inferior Esquerda --> <div id="inferiorDireito"> <!-- DIV Inferior Direita -->

<{foreach item=block from=$xoBlocks.page_bottomright}> <{$block.title}>

<{$block.content}> <{/foreach}>

</div> <!-- Fim da div Inferior Direita → <div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da DIV Central -->

<div class="clear"></div> <!-- Limpa os objetos com float --> </div> <!-- Fim da Div principal --> <div id="rodape"> <!-- DIV do rodapé -->

<{$xoops_footer}>

(20)

Só para lembrar, o código citado acima deve estar dentro do corpo do seu “theme.html”, ou seja, entre as tags: <body> ...código... </body>.

Feito isso já está quase tudo pronto, se você alterar o tema padrão do XOOPS para o tema que acabou de criar, ele vai exibir o seu conteúdo normalmente no seu site. No próximo capitulo iremos aplicar o estilo aos títulos dos blocos e ao elementos do XOOPS, como títulos de noticias e as suas tabelas internas.

(21)

Capítulo 7: Aplicando Estilo aos Elementos

Neste capitulo iremos customizar o banner, logo, titulo dos blocos, conteudo dos blocos, área de conteúdo, rodapé, menu principal e pessoal, notícias e tabelas.

Se você criou o seu “theme.html” e “style.css” corretamente seguindo todas as informações contidas aqui seu tema estará parecido com este:

(22)

Nenhum pouco atraente ainda, concordam? Vamos começar a deixa-lo com uma cara mais amigável, começaremos pelo cabeçalho, alinhando o banner e o logo do site.

Vá para sua folha de estilo (style.css) e crie duas classes: “logo” e “banner”

No “theme.html” na variável “<{$xoops_sitename}>” atribua a ela um “H1” com a classe “logo” e na váriavel “<{$xoops_banner}>” coloque a mesma em uma div atribuindo a mesma a classe “banner”.

Seu código irá ficar assim:

theme.html ⇢ <h1 class="logo"><{$xoops_sitename}></h1> <div class="banner"><{$xoops_banner}></div> style.css ⇢ .logo{ float:left; margin-left:5px; line-height:100px; } .banner{ width:468px; height:60px; margin:0; position:relative; float:right; margin-right:5px; margin-top:20px; }

Vejam o resultado abaixo:

Bem melhor não é verdade? Vamos Agora arrumar o Menu, na sua folha de estilo procure a ID “menu”, para deixar organizado, abaixo dela crie mais duas ID’s: “menu a” e “menu a:hover” que nada mais é do que o estilo do seu link ativo e do link quando o mouse passar por cima do mesmo. Código: #menu a{ float:left; width:90px; line-height:30px; text-decoration:none; text-align:center; color:#0080C0; font-variant:small-caps; } #menu a:hover{ background:#FFF; color:#005279;

(23)

Vejam abaixo o resultado desta alteração:

Agora vamos aplicar estilo aos blocos. Notem que os links do menu principal estão alinhados lado a lado e que os titulos dos blocos não se diferenciam de seu texto, para mudar isso vá até sua folha de estilo e crie as ID’s:

1. #mainmenu a > Estilo dos links ativos do menu principal do XOOPS.

2. #usermenu a > Estilo dos links ativos do menu pessoal do XOOPS.

3. #mainmenu a:hover > Estilo do menu principal do XOOPS quando o mouse esta em cima do Link.

4. #usermenu a:hover > Estilo do menu pessoal do XOOPS quando o mouse esta em cima do Link.

5. #blocoTitulo > Este será o estilo dos títulos de todos os blocos de seu tema, é importante que você vá em cada variável “<{$block.title}>” e atribua a ela uma div com a ID “#blocoTitulo”. O resultado será este:

<div id=”blocoTitulo”> <{$block.title}> </div>”, não esqueça de fazer isso em todos os blocos de seu tema.

6. #conteudoBloco > Faça o mesmo procedimento que fez com os títulos dos blocos, neste caso vá em todas as variáveis “<{$block.content}>” e atribua a cada uma div com um ID “#conteudoBloco”. O Resultado será este:

<div id=”conteudoBloco”> <{$block.content}> </div>”, não esqueça de fazer isso em todos os blocos de seu tema.

Após aplicar as ID’s #blocoTitulo e #conteudoBloco as suas devidas variáveis em todo o tema vamos aplicar os atributos na nossa folha de estilo (style.css), o código ficará assim:

(24)

color:#09C; display:block; text-decoration:none; line-height:25px; border-bottom:1px dashed #09C; padding-left:3px; }

#mainmenu a:hover, #usermenu a:hover{ color:#069; border-bottom:1px dotted #069; } #blocoTitulo{ color:#6D6D6D; font-size:1.2em; } #conteudoBloco{ padding-left:3px; padding-right:3px; text-align:justify; }

(25)

Agora vamos editar a área de conteúdo do nosso tema, não há muito o que fazer nesta parte, no meu caso vou apenas dar algumas margens pois como podem ver o conteudo esta muito colado nas laterais da DIV, vejam:

Então é só ir na sua folha de estilo e aplicar o seguinte código na ID #conteudo:

#conteudo{ width:480px; margin:0 auto; }

(26)

Notem que agora há um espaçamento entre as laterais da área de conteúdo, é possível ainda notar uma div vazia do lado direito, isso ocorre porque nesta seção não existe um bloco definido, ou seja, não tratarei neste artigo sobre temas com centro fluído, isso ficará para próximos artigos, aos mais ansiosos aconselho visitar a documentação do “Theme Factory” para ver como trabalhar com este recurso.

Bom, aqui finaliza o artigo, isso é basicamente o que você precisa saber para criar um tema para XOOPS, afim de conhecer mais a estrutura de um template aconselho que baixem templates e analisem os códigos dos mesmos para aperfeiçoar seus conhecimentos, ainda é válido e indicado verificar a documentação do Smarty PHP para aprender mais sobre todos os recursos que esta linguagem tem a oferecer, não se limitem ao que esta escrito neste tutorial, busquem mais conhecimento e compartilhem o que aprenderem, isso é software livre!

Links Úteis:

Documentação Smarty em Português: http://www.smarty.net/docsv2/pt_BR Tudo sobre CSS: http://www.maujor.com

Site oficial do XOOPS: http://xoops.org Site oficial de suporte brasileiro: http://guxbrasil.org

Referências

Documentos relacionados

Foi possível, através deste trabalho, tomando como referência o estudo de caso, observar e relatar a relevância da sistematização da prática da assistência de enfermagem

Este trabalho buscou, através de pesquisa de campo, estudar o efeito de diferentes alternativas de adubações de cobertura, quanto ao tipo de adubo e época de

No entanto, maiores lucros com publicidade e um crescimento no uso da plataforma em smartphones e tablets não serão suficientes para o mercado se a maior rede social do mundo

esta espécie foi encontrada em borda de mata ciliar, savana graminosa, savana parque e área de transição mata ciliar e savana.. Observações: Esta espécie ocorre

O valor da reputação dos pseudônimos é igual a 0,8 devido aos fal- sos positivos do mecanismo auxiliar, que acabam por fazer com que a reputação mesmo dos usuários que enviam

Seja o operador linear tal que. Considere o operador identidade tal que. Pela definição de multiplicação por escalar em transformações lineares,. Pela definição de adição

Os resultados deste estudo mostram que entre os grupos pesquisados de diferentes faixas etárias não há diferenças nos envoltórios lineares normalizados das três porções do

Podem treinar tropas (fornecidas pelo cliente) ou levá-las para combate. Geralmente, organizam-se de forma ad-hoc, que respondem a solicitações de Estados; 2)