A criação de temas para o PHP-Fusion 6.01 é uma tarefa consideravelmente simples, sendo apenas a edição de 2 arquivos. Para este tutorial vamos usar como base o tema Similitude06, por este ser incluido como padrão no PHP-Fusion.
Antes de começarmos é fundamental o conhecimento básico de HTML e CSS. PHP não é necessário, mas é recomendado para melhor entendimento do arquivo themes.php. Para a edição dos arquivos recomendo um software que trabalhe com as linguagens, afim de evitar erros de sintaxe. Uma boa opção para usuários Windows é o Notepad++, já para usuários GNU/Linux há editores como o Gedit (GNOME) e Kate (KDE), geralmente incluídos nas distribuições.
theme.php
O arquivo theme.php define a marcação HTML do tema. Ele é organizado em funções e variáveis de definição.
Obs.: Em PHP, para exibir o HTML, utilizamos a função echo. O código HTML, dentro desta função, não pode utilizar aspas duplas, sendo a forma correta a utilização de aspas simples. \n representa uma quebra de linha no HTML final.
Descrição das variáveis (em verde):
// theme settings
$body_text = "#555555"; // Cor padrão do texto
$body_bg = "#006600"; // Cor de fundo
$theme_width = "100%"; // Largura do tema
$theme_width_l = "175"; // Largura da coluna esquerda
$theme_width_r = "175"; // Largura da coluna direita
Todas elas são chamadas por arquivos do núcleo, com excessão a variável $theme_width.
Descrição das funções do theme.php:
- render_header($header_content): Contém a renderização do topo e sub-cabeçalho. Deve terminar abrindo a tabela principal com uma linha:
echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
A variável $header_content é o banner do site definido pela administração.
- render_footer($license=false): Contém a renderização do rodapé. Obrigatoriamente deve iniciar fechando a tabela principal e sua linha:
echo "</tr>\n</table>\n";
Valorize o trabalho dos outros que é distribuído livremente para todos, não remova os créditos do PHP-Fusion.
- render_news($subject, $news, $info): Responsável pela renderização das notícias em uma coluna. A variável $subject é o assunto e $news o conteúdo da notícia.
- render_article($subject, $article, $info): Responsável pela renderização dos artigos. A variável $subject é o assunto do artigo. A linha a seguir insere o conteúdo do artigo, com ou sem quebras de linha automáticas, conforme definido pelo administrador:
".($info['article_breaks'] == "y" ? nl2br($article) : $article)."
- opentable($title): Abre um painel central. A variável $title é o título do painel.
- closetable(): Fecha um painel central.
- openside($title): Abre um painel lateral. A variável $title é o título do painel.
- closetable(): Fecha um painel lateral. A função tablebreak() é adicionada no final para o espaçamento entre o painel e o que vir abaixo.
- opensidex($title,$state="on"): Abre um painel lateral que pode ser enrolado e desenrolado. A variável $title é o título do painel.
Deve ser declarada a variável $boxname no início da função:
$boxname = str_replace(" ", "", $title);
A linha abaixo deve ser colocada no final do HTML para o funcionamento correto do painel:
<div id='box_$boxname'".($state=="off"?" style='display:none'":"").">
- closesidex(): Fecha o painel lateral que pode ser enrolado e desenrolado.
- tablebreak(): Define o espaçamento entre paineis.
Funções para serem usadas no themes.php
No início do arquivo themes.php incluimos o /includes/theme_functions_include.php, que contém funções para auxiliar na criação do tema. As funções devem ser utilizadas no HTML, colocando as mesmas no seguinte formato:
".função(valor1, valor2)."
Descrição das funções:
- showsublinks(separador, classe): Utilizada para exibir os links do menu do topo. Separador é o elemento colocado entre os links, e classe, a classe declarada no CSS que definirá o estilo dos links.
- showsubdate(): Exibe a data no topo.
- newsposter($info, separador, classe): Exibe o membro que enviou a notícia. $info é o array que contém os dados da notícia, e separador e classe são utilizados da mesma forma da função showsublinks().
- newsopts($info, separador, classe): Exibe informações e links no rodapé da notícia. Os valores são os mesmos da função newsposter().
- articleposter($info, separador, classe): Exibe o membro que enviou o artigo. Os valores são os mesmos da função newsposter().
- articleopts($info, separador, classe): Exibe informações e links no rodapé do artigo. Os valores são os mesmos da função newsposter().
- openform(tipo, $info) e closeform(): Aglomeram as funções para exibir informações do artigo ou notícia. Tipo é N para notícia e A para artigos, e a variável $info declara o id. Exemplo de utilização:
openform("N",$info['news_id']).newsposter($info," ·").newsopts($info,"·").closeform("N",$info['news_id'])
- showcopyright(classe): Exibe a nota de copyright do PHP-Fusion. O valor classe é empregado tal como na função newsposter().
- showcounter(): Exibe o número de visitas únicas.
- panelbutton($state,$boxname): Exibe o botão para enrolar/desenrolar um painel. Deve ser colocada dentro da função opensidex() desta mesma forma.
Classes do CSS
Abaixo a utilidade de classes utilizadas no styles.css no tema:
a.side: Links dos menus laterais.
a.side:hover: Links dos menus laterais ao passar o mouse.
a.white: Links do menu do topo.
a.white:hover: Links do menu do topo ao passar o mouse.
hr.side-hr: Separador do menu lateral.
.alt: Fonte alternativa.
.sub-header: Sub-cabeçalho.
.full-header: Topo.
.footer: Rodapé.
.button: Botões de formulários.
.textbox: Campos de texto dos formulários.
.main-body: Conteúdo de painéis centrais.
.side-body: Conteúdo de painéis laterais.
.main-bg: Fundo da coluna principal/central.
.border: Borda utilizada em painéis.
.side-border-left: Coluna esquerda de painéis.
.side-border-right: Coluna direita de painéis.
.news-footer: Rodapé de notícias e artigos.
.capmain: Título de painéis centrais.
.scapmain: Título de painéis laterais.
.tbl-border: Borda utilizada em tabelas (fórum, downloads, etc).
.tbl: Célula padrão de tabelas.
.tbl1: Célula número 1 para tabelas com células de estilo aleatório, como em comentários, downloads.
.tbl2: Célula número 2 para tabelas com células de estilo aleatório.
.forum-caption: Categorias do fórum e título de downloads.
.quote: Estilo para o BBcode [quote].
.poll: Resultados de enquetes.
.comment-name: Nome do autor do comentário (para visitantes).
.shoutboxname: Nome do autor do recado (para visitantes).
.shoutbox: Recados no mural.
.shoutboxdate: Datas do mural de recados.
.small: Classe para fonte pequena.
.small2: Classe alternativa para fonte pequena.
.side-small: Fonte pequena em paineis laterais.
.side-label: Separadores utilizados no menu de navegação lateral.
A pasta images/ contém as imagens gerais utilizadas pelo tema e pelo PHP-Fusion, e a pasta forum/ contém as imagens para o fórum.
Um dos problemas da atual versão é a falta de flexibilidade para desenvolver temas, além de não ser possível um layout tableless sem editar alguns arquivos do núcleo, mas há temas criados com o máximo de DIVs no lugar de tabelas, otimizando a estrutura para um maior desempenho. Na futura versão 7 do PHP-Fusion esta limitação não existirá mais.
Encerro aqui o tutorial sobre criação de temas. Se você quiser, poderá contribuir compartilhando a sua criação com a comunidade enviando o seu tema para o nosso sistema de projetos, ou enviando-o no PHP-Fusion Themes, o site oficial de temas. |
