Idéia, Tópico no Fórum exclusivo

  • Identifique-se para criar novos tópicos neste fórum
  • Visitantes anônimos não podem postar neste fórum
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Costaria de ministrar uns tutoriais de CSS, HTML e criação de themas para XOOPS, não sei muito sobre a criação dos mesmos, mais jah fiz alguma e sei que nada mais rico do que várias pessoas compartilhando juntas as suas experiencias com relação a este assunto, o design!

Uma coisa que sinto falta no universo XOOPS é uma documentação boa em português para a parte gráfica do XOOPS, isto é, tutoriais, videos aulas e tecnicas para desenvolver temas profissionais, fiquei maravilhado quando navegando pela internet me bati com um carinha chamado "LOGALLOL", no dia em questão eu vi um curso completo feito por ele para a criação de WordPress themes, eu não sabia nada de wordpress, depois que vi o video até acrescentei um serviço a mais ao meu portfolio. Bom, o resultado foi esse: www.eitadiabo.com.br Tema em WordPress totalmente desenvolvido por mim.

O que estou propondo é que os designers saiam da toca! Isso mesmo, vamos mostrar que o XOOPS alem de funcional pode ficar lindão! Abaixo vou postar o básico de um thema XOOPS! Ao decorrer deste tópico peço que alimentem o código para vermos o que vai sair depois de todos contribuirem, vou começar abaixo. Lembrando, não sei de tudo! O que faltar por favor postem.
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Este abaixo é o código do arquivo "theme.html" que tem que ser criado dentro da pasta "themes/meu_thema" do XOOPS.

A pasta "meu_thema" pode ter qualquer nome.

 <!-- Começo do código abaixo --> <!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 content="2 days" name="revisit-after" /> <TITLE><{$xoops_sitename}> - <{$xoops_pagetitle}></TITLE> <link href="<{$xoops_url}>/ico.png" 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}>" /> <!-- Acima temos o cabeçalho do nosso thema --> </head> 

<body> <div id="principal"> <div id="banner"> Meu Thema </div> <div class="bloco_esquerda"> <!-- Neste bloco o XOOPS vai mostrar os blocos da Esquerda --> <{foreach item=block from=$xoops_lblocks}> <div class="leftblockTitle"><{$block.title}></div> <div class="leftblockContent"><{$block.content}></div> <{/foreach}> <!-- Fim dos blocos da Esquerda --> </div>

<div class="bloco_direita"> <!-- Neste bloco o XOOPS vai mostrar os blocos da Direita --> <{foreach item=block from=$xoops_rblocks}> <div class="rightblockTitle"><{$block.title}></div> <div class="rightblockContent"><{$block.content}></div> <{/foreach}> <!-- Fim dos blocos da Direita --> </div>

<div class="bloco_centro"> <!-- Neste bloco o XOOPS vai mostrar os blocos do centro --> <{foreach item=block from=$xoops_ccblocks}> <div class="blockTitle"><{$block.title}></div> <div class="blockContent"><{$block.content}></div> <{/foreach}> <!-- Fim dos blocos do centro --> </div> <div class="footer"> <{$xoops_footer}> </div> </div> </body> </html> < <!-- FIM -->
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Da mesma forma que foi criado o arquivo THEME.HTML você cria agora o "style.css" e cola este código:

body{ background:#333; font-size:12px; } 

#principal{ margin-left:auto; margin-right:auto; width:800px; background:#CCC; height:auto; padding:5px; float: left }

#banner{ height:150; font-size:6em; text-align:center; background:#006; color:#CF0; }

.bloco_esquerda{ width:150px; float:left; } .leftblockTitle{

}

.leftblockContent{

}

.bloco_direita{ width:150px; float:right; }

.rightblockTitle{

}

.rightblockContent{

}

.bloco_centro{ width:450px; margin-left:auto; margin-right:auto; }

.footer{ clear:both; text-align:right }
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
O código citado acima é apenas um wireframe do que seria o esboço do thema XOOPS, não há elementos graficos, apenas uma demonstração de como inserir os objetos do XOOPS dentro de sua página HTML.

No meu Style.CSS existem classes que eu não coloquei nenhum atributo. O que é para fazer?

Alimentem a folha de estilo e vao postando aqui os resultados para que possamos ver como vai ficar no final. Não usem imagens ainda.

para quem não sabe como iniciar o projeto de um novo thema, vou dar o toque:

No diretório do XOOPS existe uma pasta chamada "THEMES" (jura), dentro dela crie uma pasta e nomeie ela como "novo_thema". Dentro da pasta "novo_thema" crie uma pasta chamada "images" que é onde vao ficar as imagens usadas no seu thema. Crie dois arquivos, o primeiro tem que ter o nome:

theme.html

O segundo o nome:

style.css

Ambos os dois tem que ficar no seguinte caminho:

xoops/theme/novo_thema

até mais.
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Tutorial para quem já tem o conhecimento de HTML e CSS mais não sabe como utilizar o mesmo na criação de temas para XOOPS.
Andrax  Ocasional   Postagens: 27
Excelente iniciativa Angelo, em breve acompanharei mais de perto a evolução do tópico
Guilherme  Regular De: Contagem-MG  Postagens: 50
Pode contar comigo para incrementar essa ideia aí. Muito bem explicado e detalhado. Parabéns.
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Essa aqui é para quem não sabe muito do que se trata HTML e CSS, bom se você não entendeu muito o código do thema que eu mandei acima, ai vai uma página toda pranta para você estudar, comentei o código inteiro, copie e cole o código abaixo no bloco de notas, salva como qualquer coisa.html e executa do teu navegador, PS.: mostra o código fonte depois e veja os comentarios do que se trata cada TAG.

<html> <!-- Determina o inicio do código HTML --> <head> <!-- Inicia o cabeçalho da Página --> <TITLE>Eu sou um site</TITLE> <!-- Intitula a página, altere o "Eu Sou um Site" para o titulo que desejar --> <style type="text/css"> /** Nesta Seção começa as definiçoes dos objetos da página, ou seja, como vai ser exibido cada**/ body{ /** Elemento de nossa página da internet**/ background:#222; /** Define a cor do fundo de nosso portal, este #222 é o código de um cinza escuro**/ font-size:12px; /** Neste atributo informamos que o tamanho padrão do nesso texto é de 12 Pixels**/ font-family:arial; /** O Atributo Font-Family informa o tipo de fonte a ser utilizada no documento**/ } 

.whrap{ /** Classe criada para ser atribuida a um elemento DIV do Site, mais abaixo irão ver**/ width:600px; /** Determina uma largura para nossa DIV de 600PX **/ border:0px; /** Informa que nossa DIV não tem borda **/ height:auto; /** Determina a altura da nossa DIV como automatica **/ margin-right:auto; /** Combinado com o atributo abaixo centraliza nossa div na página **/ margin-left:auto; /** Conbinado com o atributo acima centraliza a nossa div na página **/ -moz-border-radius:20px; /** Esse atributo informa um valor de 20 px de arredondamento nos cantos de nossa DIV **/ padding:3px; /** Informa um espaçamento de 3 pixels entre a DIV e os objetos dentro dela **/ background:#888; /** Informa a cor do fundo da DIV, o #888 é o código Exadecimal da COR **/ margin-top:50px; /** Adciona uma margem (distancia) de 50 Pixels da borda superior**/ }

.content{ /** Esse atributo irá ser inserido na DIV responsável pelo conteúdo das páginas**/ background:#CCC; /** Informa a cor do fundo da DIV, neste caso um cinza Claro**/ width:430px; /** Largura da DIV**/ height:250px; /** Altura da DIV**/ -moz-border-radius:20px; /** 20 Pixels de arredondamento nos cantos da DIV**/ }

.content p { /** Essa classe informa as caracteristicas do Paragrafo dentro da DIV CONTENT**/ padding:8px; /** Define o comportamento do paragrafo, neste caso uma distancia de 8 pixels das margens**/ text-align:justify; /** Alinhamento do texto do paragrafo Justificado**/

}

.menu{ /** Essa classe é responsavel pelos atributos da DIV do MENU**/ width:160px; /** largura da DIV**/ height:250px; /** Altura da DIV**/ border:0px; /** DIV sem Bordas**/ float:right; /** Informa que esta div vai se deslocar, flutuar para a Direita**/ -moz-border-radius:20px; /** Arredondamento de 20 pixels nos cantos da DIV**/ background:#CCC; /** Cor do fundo da DIV, esse #CCC é o código Hexadecimal de um Cinza Bem Claro**/ }

.menu li{ /** Classe responsável pelos atributos das listas dentro do Menu <li>**/ margin-left:15px; /** 15 Pixels de distancia da borda esquerda**/ margin-top:5px; /** 5 Pixels de distância do topo**/ margin-right:10px; /** 10 Pixels de distância da direita, faz com que a borda de baixo não encoste no canto direito**/ border-bottom: dashed 1px #000; /** Esse atributo acrescente uma borda tracejada de 1pixel na cor Preta em baixo dos Itens da <li>**/ list-style:none; /** Elimina o simbolo que fica ao lado dos itens da <li>**/ }

.menu a{ /** Esta classe é responsavel pelas caracteristicas dos endereços dentro da DIV MENU**/ text-decoration:none; /** Informa que o texto não terá aquele sublinhado típico de links**/ color:#551A8B; /** Cor Hexadecimal do LINK**/ border-left: 4px solid #8B8B00; /** acrescente uma borda na esquerda de 4 Pixels solida e de uma cor amarela escura**/ }

.menu a:hover{ /** Informa o comportamento do endereço dentro da DIV MENU quando o mouse passar por cima dele**/ color:#AB82FF; /** Informa o código Hexadecimal da cor, quando o mouse passar ele mudará para esta cor**/ border-left: 4px solid #FFFF00; /** Muda a cor da borda Esquerda para um amarelo mais claro**/ }

.banner{ /** Essa classe define os atributos do Banner do Site**/ text-align:center; /** Centraliza o Texto**/ font-size:3em; /** informa que o texto vai ter 3vezes o tamanho do texto definido pelo elemento Body**/ color:#CDCDCD; /** Cor do texto do Banner**/ } </style> <!-- Fechamos a seção de Estilo da Página --> </head> <!-- Fechamos o cabeçalho do nosso documento --> <body> <!-- Aqui começa o corpo do nosso site --> <div class="whrap"> <!-- Essa é a div onde ficarão todos os elementos do nosso site --> <p class="banner"> <!-- Este é o paragrafo que contém o texto do nosso banner --> Logo Aqui! <!-- Texto que vai aparecer para o visitante do seu site --> </p> <!-- Aqui fechamos a TAG do Paragrafo --> <div class="menu"> <!-- Esta é a div responsável pelo menu do site --> <li><a href="#">Início</a></li> <!-- Aqui é a lista <li> de endereços <a> do nosso menu --> <li><a href="#">Quem Somos</a></li> <!-- Para acrescentar um endereço ao endereço de seu menu basta retirar o "#" depois do href e por --> <li><a href="#">Projetos</a></li> <!-- um endereço para o portal que deseja,

Exemplo:

http://www.google.com.br, não remova o "" e nem --> <li><a href="#">Lançamentos</a></li> <!-- http:// caso faça isso o endereço não vai funcionar --> <li><a href="#">Contato</a></li> <!-- Para linkar suas proprias páginas é só colocar no lugar do "#" O caminho do seu arquivo --> <li><a href="#">Notícias</a></li> <!-- E.: <a href="/nome_do_seu_arquivo.html"> Texto que aparece </a> --> </div> <!-- Fechamos a DIV do MENU --> <div class="content"> <!-- Aqui começa a DIV do Conteudo, responsavel pelos textos do SITE --> <p> <!-- Neste paragrafo <p> fica todo o conteúdo DO NOSSO SITE --> Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, Bla, </p> <!-- Aqui é fechado a tag do paragrafo do conteúdo --> <div class="letreiro"> </div> </div> <!-- Fechamos a div do CONTEUDO --> </div> <!-- Fechamos a nossa DIV central --> </body> <!-- Fechamos a TAG Body, ou seja, o corpo do portal --> </html> <!-- Fechamos nosso HTML -->
Rmarx  Iniciante   Postagens: 0
Gostei da ideia! Olhem a página "Site fechado" que desenvolvi para um site: http://www.acafraorestaurante.com.br/
fernando  Iniciante   Postagens: 0
Que tal acontecer uma vaquinha aqui na comunidade?

Extensão par DW

acredito que todos (ou quase) trabalhem com dreamweaver?
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Extenção do XOOPS para DW, boa, tenho ela armazenada aqui e nem passou pela minha cabeça postar, sou deslechado me desculpem.
Andrax  Ocasional   Postagens: 27
Há séculos que não uso o DW, mas lembro muito bem dessa extensão, testei ela nas primeiras versões, é uma mão na roda para quem vai desenvolver seu tema do zero.
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Você também utiliza o editor Quanta?
Andrax  Ocasional   Postagens: 27
Linux na veia, graças ao bom Deus consegui me livrar das dores de cabeça do (r)Windows

Quanto a ide, não me acostumei ao Quanta não, é meio esquisito... nesse quesito ainda não conheço nada para linux como o DW(se bem que ele também tem as esquisitice dele), mas não faz falta... eu uso o kate(um editor de texto muito bom do kde) e/ou gedit... na falta dos 2 vai no terminal mesmo
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Terminal é foda, eu uso o quanta e o aptana no Eclipse, acho uma boa para quem e acostumado com o dreamweaver e quizer virar um Ubunteiro da vida usar o Quanta, quanto ao Gedit e massa e tals, só que gosto de ver os códigos coloridos.
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Embora odeie admintir isso, quanto a visual não tem jeito, uso o flash e o fireworks ainda, bendito homem que inventou o wine.
Carlos Eduardo Santana Lorenzon  Participativo De: Florianópolis - SC - Brasil  Postagens: 123
O gedit identa os códigos com cores também!

uso ele tanto para html/css como para PHP e python

Imagens que não só bom nem em Linux nem em Windows.

Quando vou editar portais já online também uso o terminal, uso o vi dai.
leomissao  Iniciante   Postagens: 0
Usei algumas vezes o gPHPEdit e o Screem Editor HTML/XML. mas acabei trocando eles pelo gedit, acho mais prático.
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
Até hoje não tinha entendido o que você quis dizer com vaquinha!

Demorou mais a ficha caiu! Machu essa extensão está na versão 3 alguma coisa, se a 1.0 quebra um galho essa ai deve derrubar uma floresta toda, será que se um de nós comprar ela pode ser usada por todos na mesma licença?
Angelo Rocha  Membro De: Fortaleza - CE - Brasil  Postagens: 613
O interessante é a agilidade na qual trabalhamos quando auxiliados por essa extensão, principalmente no meu caso que costumo criar tudo do "0".

  Pesquisa avançada






Entrada

Codinome:


Senha:





Perdeu a senha?  |Cadastre-se!


Quem nos visita
Há 18 visitantes neste momento... (12 na seção Fóruns)

Associados: 0
Anônimos: 18

outros...

Banner XOOPS Cube