Desmembrando o tema padrão do XOOPS

Breve referência descrita pelo Mikhail sobre o tema padrão do XOOPSArquivos que o tema padrão contém:

theme.html (arquivo central)
theme_blockleft.html (bloco lateral esquerdo)
theme_blockright.html (bloco lateral direito)
theme_blockcenter_c.html (bloco central centro)
theme_blockcenter_l.html (bloco central esquerdo)
theme_blockcenter_r.html (bloco central direito)
style.css (onde contera as informações de cores, fontes de tabelas do site)

Vamos iniciar colocando um exemplo básico de um theme.html

Baseado no thema default.

  <META DADOS AQUI NÃO PRECISA ALTERAR> <!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" /> <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title> <link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" /> <link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" /> <link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" /> <!-- RMV: added module header --> <{$xoops_module_header}> <script type="text/javascript"> <!-- <{$xoops_js}> //--> </script> </head> <body> <FIM DOS META DADOS> <INICIO DAS TABELAS DO SITE> <TOPO DO SITE ONDE CONTEM LOGO TIPO E BANNER> <table cellspacing="0"> <tr id="header"> <td id="headerlogo"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>logo.gif" width="150" height="80" alt="" /></a></td> <td id="headerbanner"><{$xoops_banner}></td> </tr> <tr> <td id="headerbar" colspan="2">&nbsp;</td> </tr> </table> <FIM DO TOPO DO SITE> <INICIO DO BLOCO ESQUERDO> <table cellspacing="0"> <tr> <td id="leftcolumn"> <!-- Start left blocks loop --> <{foreach item=block from=$xoops_lblocks}> <{include file="default/theme_blockleft.html"}> <{/foreach}> <!-- End left blocks loop --> </td> <FIM DO BLOCO ESQUERDO> <INICIO DO BLOCO CENTRAL> <td id="centercolumn"> <!-- Display center blocks if any --> <{if $xoops_showcblock == 1}> <table cellspacing="0"> <tr> <td id="centerCcolumn" colspan="2"> <!-- Start center-center blocks loop --> <{foreach item=block from=$xoops_ccblocks}> <{include file="default/theme_blockcenter_c.html"}> <{/foreach}> <!-- End center-center blocks loop --> </td> <FIM DO BLOCO CENTRAL> </tr> <tr> <INICIO DO BLOCO CENTRAL ESQUERDO> <td id="centerLcolumn"> <!-- Start center-left blocks loop --> <{foreach item=block from=$xoops_clblocks}> <{include file="default/theme_blockcenter_l.html"}> <{/foreach}> <!-- End center-left blocks loop --> </td> <FIM DO BLOCO CENTRAL ESQUERDO> <INICIO DO BLOCO CENTRAL DIREITO> <td id="centerRcolumn"> <!-- Start center-right blocks loop --> <{foreach item=block from=$xoops_crblocks}> <{include file="default/theme_blockcenter_r.html"}> <{/foreach}> <!-- End center-right blocks loop --> </td> </tr> </table> <{/if}> <!-- End display center blocks --> <FIM DO BLOCO CENTRAL DIREITO> <INICIO DO BLOCO ONDE CONTERA O CONTEUDO> <div id="content"> <{$xoops_contents}> </div> </td> <FIM DO BLOCO ONDE CONTERA O CONTEUDO> <{if $xoops_showrblock == 1}> <INICIO DO BLOCO DIREITO> <td id="rightcolumn"> <!-- Start right blocks loop --> <{foreach item=block from=$xoops_rblocks}> <{include file="default/theme_blockright.html"}> <{/foreach}> <!-- End right blocks loop --> </td> <{/if}> </tr> </table> <FIM DO BLOCO DIREITO> <INICIO DO RODAPf#8240; DO SITE> <table cellspacing="0"> <tr id="footerbar"> <td><a href="http://www.xoops.org/" target="_blank"><img src="<{$xoops_imageurl}>poweredby.gif" alt="" /></a></td> </tr> </table> </body> </html> <FIM DO RODAPf#8240; DO SITE>

Nos arquivos:
theme_blockleft.html (bloco lateral esquerdo)
theme_blockright.html (bloco lateral direito)
theme_blockcenter_c.html (bloco central centro)
theme_blockcenter_l.html (bloco central esquerdo)
theme_blockcenter_r.html (bloco central direito)

Deve conter as seguintes linhas:

  <div class="blockTitle"><{$block.title}></div> <div class="blockContent"><{$block.content}></div>

Na proxima página colocarei as funções do style.css
[pagebreak]
style.css do thema default (versão 2.1.13)

  /* Inicio do CSS */ /* Informações gerais do theme cor de fundo e cor de texto */ body {color: black; background: white; margin: 0; padding: 0;} /* Informações gerais das tabelas como tamanho, margem e fonte */ table {width: 100%; margin: 5; padding: 5; font-size: small} /*Informações das colunas de uma tabela como tamanho, margem, cor e tamanho de fonte */ table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;} /* Cor dos links do portal */ a {color: #666666; text-decoration: none; font-weight: bold; background-color: transparent;} /* Cor dos links quando o mouse passa por cima */ a:hover {color: #ff6600;} h1 {} h2 {} h3 {} h4 {} h5 {} /* Informações da tag UL */ ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} /* Informações da tag LI */ li { margin-left: 2px; list-style: square inside; color: #2F5376} input.formButton {} /* Bordas das noticias */ .item {border: 1px solid #cccccc;} /* Cor de fundo do titulo da noticia */ .itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;} /* Cor de fundo da info de envio da noticia */ .itemInfo {text-align: right; padding: 3px; background-color: #efefef} /* Tamanho de fonte e cor do titulo da noticia */ .itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;} /* Tamanho de fonte e cor do texto de info de quem enviou a noticia */ .itemPoster {font-size: 90%; font-style:italic;} /* Tamanho e cor do texto da data de publicação da novidade */ .itemPostDate {font-size: 90%; font-style:italic;} /* Tamanho e cor do texto do status da novidade */ .itemStats {font-size: 90%; font-style:italic;} /* Cor de fundo */ .itemBody {padding-left: 5px;} /* Tamanho, cor do texto da noticia */ .itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;} /* Tamanho, cor da primeira letra da noticia */ .itemText:first-letter {font-size: 133%; font-weight: bold;} /* Cor de fundo da parte inferior da noticia */ .itemFoot {text-align: right; padding: 3px; background-color: #efefef} /* Tamanho dos links [Editar - Excluir] da noticia */ .itemAdminLink {font-size: 90%;} /* Tamanho do texto de informações de bytes da noticia */ .itemPermaLink {font-size: 90%;} /* Tamanho, cor das fontes, cor de fundo de algumas tabelas como a do topo do Avisos e de algumas partes do forum */ th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;} /* Cor de fundo e tamanho da tabela do banner */ td#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;} /* Imagem mostrada abaixo do topo do portal */ td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);} /* Tamanho e cor das bordas do bloco esquerdo */ td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:12px;} /* Cor de fundo e de texto de algumas tabelas do bloco esquerdo */ td#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;} /* Tamanho e cor de fontes e cor de fundo do titulo dos blocos esquerdos*/ td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;} /* Tamanho e cor de fontes do conteudo do bloco esquerdo e cor de fundo */ td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;} /* Tamanho da fonte do bloco central */ td#centercolumn {font-size: 12px;} /* Cor de fundo e de texto de algumas tabelas do bloco central */ td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;} td#centerCcolumn {padding: 0px 3px 1px 3px;} /* Cor de fundo e de texto do titulo do bloco central */ td#centerCcolumn div.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;} /* Cor de fundo, bordas e tamanho de fonte do conteudo do bloco central */ td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;} /* Tamanho da tabela central esquerda */ td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;} /* Cor de fundo e de texto do Titulo da tabela central esquerda */ td#centerLcolumn div.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;} /* Tamanho, cor do texto e borda do bloco central esquerdo */ td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;} /* Tamanho da tabela central direita */ td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;} /* Cor de fundo e de texto do Titulo da tabela central direita */ td#centerRcolumn div.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;} /* Tamanho, cor do texto e borda do bloco central direito */ td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;} /* Alinhamento do texto do conteudo do portal */ div#content {text-align: left; padding: 8px;} /* Tamanho e cor das bordas do bloco direito */ td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:12px;} /* Cor de fundo e de texto de algumas tabelas do bloco direito */ td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;} /* Cor de texto e de fundo do titulo do bloco direito */ td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;} /* Cor de texto e de fundo do conteudo do bloco direito */ td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;} /* Imagem de fundo do rodapé */ tr#footerbar {text-align:center; background-image: url(hbar.gif);} /* Cor de fundo do menu */ td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px;} /* Cor de fundo do menu quando o mouse esta em cima */ td#mainmenu a:hover {background-color: #ffffff;} /* Bordas do menu */ td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} /* Bordas do menu principal */ td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} /* Bordas dos menus sublinks */ td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} /* Cor de fundo do menu */ td#usermenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} /* Cor de fundo do menu usuario quando o mouse esta em cima */ td#usermenu a:hover {background-color: #ffffff;} /* Bordas do menu usuario */ td#usermenu a.menuTop {border-top: 1px solid silver;} /* Quando ouver informações confidencias no menu do usuario */ td#usermenu a.highlight {background-color: #fcc;} /* Cor das bordas do forum */ .outer {border: 1px solid silver;} /* Cor de fundo do cabeçalho do forum */ .head {background-color: #c2cdd6; padding: 5px; font-weight: bold;} /* Cor de fundo das tabelas de topicos e cartinha indicando sobre novas noticias e ultima mensagem no forum */ .even {background-color: #dee3e7; padding: 5px;} /* Cor de fundo das tabelas de Forum e Mensagens do forum */ .odd {background-color: #E9E9E9; padding: 5px;} /* Cor de fundo da parte inferior do forum */ .foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;} /* Cores internas do forum */ tr.even td {background-color: #dee3e7; padding: 5px;} tr.odd td {background-color: #E9E9E9; padding: 5px;} div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;} div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;} div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;} div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;} div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;} .comTitle {font-weight: bold; margin-bottom: 2px;} .comText {padding: 2px;} .comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;} .comUserStatCaption {font-weight: normal;} .comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;} .comUserRank {margin: 2px;} .comUserRankText {font-size: 10px;font-weight:bold;} .comUserRankImg {border: 0;} .comUserName {} .comUserImg {margin: 2px;} .comDate {font-weight: normal; font-style: italic; font-size: smaller} .comDateCaption {font-weight: bold; font-style: normal;}

Na proxima página irei mostrar como editar as imagens do tema padrão conforme seu jeito!

[pagebreak]
Esta imagens que você irá criar deverão ficar dentro da pasta principal do seu theme!

hbar.gif
Crie uma imagem que sera o mostrada abaixo do cabeçalho do portal e no rodapé com as seguintes tamanhos: 10px por 23px

logo.gif
Crie seu logo tipo com o tamanho: 148px por 80px

poweredby.gif
Crie uma imagem com tamanho 230px por 23px que será os creditos do seu portal que ficaraão no rodapé!

Não esqueça de alterar no theme.html os textos default pelo nome do seu theme, que devera ser o mesmo nome da pasta!

postado por mikhail # 9/15/2003 02:50:00 PM