[TUTORIAL] 5 passos Convertendo HTML Template para Joomla • Joomla Clube Fórum - O fórum de Joomla mais completo do Brasil, com a melhor equipe de suporte do Brasil •

Fórum Registrar Entrar Pesquisar Top Membros Administração Pesquisar Regras

Índice do fórum » Suporte Joomla » Documentação

Ler mensagens sem resposta | Pesquisar por tópicos ativos

Título: [TUTORIAL] 5 passos Convertendo HTML Template para Joomla Enviado: 19 Set 2009, 02:31

[TUTORIAL] 5 passos Convertendo HTML Template para Joomla

Página 1 de 1 [ 3 mensagens ]

Imprimir pág. Exibir tópico anterior | Exibir próximo tópico

Autor Mensagem

Neo*

JCB! Iniciante

Mensagens: 7

Pessoal resolvi postar este tutorial para ajudar o povo, pois sem que muito é pedido esse assunto...Esse tutorial é só um quebra galho... Não é uma solução... |Mas sim para vc tirar noções melhores de comoproceder na conversão.E visto também que sou novato no Joomla isso tambem me limita bastante...

5 Easy Steps Convertendo HTML Template para Joomla Template

Convertendo um modelo HTML de um template Joomla não é tão duro como você pensa. Only five easy steps, andyou can create and use your Joomla template. Apenas cinco passos simples, e você pode criar e usar o seu templateJoomla.

Por que você quer saber isso? porque talvez você tropeça em html livre lindos modelos enquanto navega na net erealmente quiser usá-lo para o seu site com joomla.

Passo 1

Prepare o seu modelo. O modelo deve ser (X) HTML e CSS compliant. Existem muitos modelos HTML na internet,basta procurar-los usando o tio Google. Verifique se o arquivo HTML, imagens e arquivos CSS estão dentro de umúnico diretório criado em pasta de modelos. Por exemplo, dê uma olhada no template do Joomla estrutura abaixo:

Joomla Template Estrutura de Diretórios

Joomla irá procurar index.php dentro do diretório template. So, rename the index.html file to index.php. Então,renomeie o arquivo index.html para index.php.

Passo 2

Substituir o código HTML antes da tag do corpo do seu arquivo HTML com este código.

Código:

#

<? php

#

#

// no direct access / / No acesso directo

Voce esta aqui: Inicio Fórum

Seu Nome ●●●●●● ENTRAR

Esqueceu Senha? | Registrar-se

Inicio Fórum Comunidade Templates Extensões Cursos Joomla Docs Matérias

[TUTORIAL] 5 passos Convertendo HTML Template para Joomla • Jo... http://www.joomlaclube.com.br/site/forum/viewtopic.php?f=15&t=3159

1 de 5 16/5/2012 15:21

#

defined( '_JEXEC' ) or die( 'Restricted access' ); defined ( '_JEXEC') or die ( 'Acesso restrito');

#

?> ?>

#

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

transitional.dtd"> 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="<?php echo $this->language; ?>" lang="<?php echo

$this->language; ?>" > <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "<? php echo $ this->

language;?>" lang = "<? php echo $ this-> language; ?> ">

#

<head> <head>

#

<jdoc:include type="head" /> <jdoc:include type="head" />

#

#

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css"

type="text/css" /> <link rel = "stylesheet" href = "<? php echo $ this-> baseurl?> / templates / system

/ CSS / system.css" type = "text / css" />

#

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css"

type="text/css" /> <link rel = "stylesheet" href = "<? php echo $ this-> baseurl?> / templates / system

/ CSS / general.css" type = "text / css" />

#

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/your_template_name

/your_css_directory/your_css_file.css" type="text/css" /> <link rel = "stylesheet" href = "<? php echo

$ this-> baseurl?> / templates / your_template_name / your_css_directory / your_css_file.css" type =

"text / css" />

#

#

</head> </ head>

Você deve notar neste código:

Alterar your_template_name "para o nome do seu modelo", your_css_directory "ao nome do seu diretório do CSS, eoúltimo," mudança your_css_file.css "ao nome do seu arquivo CSS. Se você tiver mais de um css, você devedeclará-los um por um.

Se você tem alguns arquivos javascript, você deve declará-los com a mesma forma.

Código:

<link rel = "stylesheet" href = "<? php echo $ this-> baseurl?> / templates / your_template_name /

your_css_directory / your_css_file.css" type = "text / css" />

Passo 3

O padrão Joomla modelo tem algumas posições módulo, como trilha, esquerda, direita, superior, user1, user2, user3,user4, rodapé, depurar sindicato. As posições joomla módulo são mostradas abaixo.

Joomla Module Position

Para criar uma posição de módulo, temos de colocar este código <jdoc:include type="modules"name="your_module_position_name" /> a adequá posição. O atributo name é o nome da posição do módulo. Otrecho de código para criar uma posição do módulo é:


2 de 5 16/5/2012 15:21

Código:

#

<div id="header_r">

#

<div id="logo"></div> <div id="logo"> </ div>

#

<jdoc:include type="modules" name="top" /> <jdoc:include type="modules" name="top" />

#

</div> </ div>

Após isso, você precisa colocar um componente. O código é mostrado abaixo.

Código:

<jdoc:include type="component" />

Se você precisa incluir a mensagem, você só precisa incluir este código:

Código:

<jdoc:include type="message" />

Passo 4

Criar um arquivo XML. Você precisa criar um arquivo de manifesto para listar todos os arquivos que você usou. Sevocê não criá-lo, ele irá causar erro durante a instalação do seu modelo. Aqui está o exemplo de um arquivo demanifesto:

Código:

#

<? xml version = "1.0" encoding = "UTF-8"?

#

<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5

/template-install.dtd"> DOCTYPE instalar PUBLIC "- / / Joomla! 1,5 / / DTD modelo 1.0 / / EN"

"http://dev.joomla.org/xml/1.5/template-install.dtd">

#

<install version = "1.5" type = "template" > versão <install = tipo "1.5" = "template">

#

<name > your_template_name </name > <nome> your_template_name </ name>

#

<creationDate > 25/01/2009 </creationDate > <creationDate> 25/01/2009 </ creationDate>

#

<author > Dani Gunawan </author > <author> Dani Gunawan </ author>

#

<authorEmail > [email protected] </authorEmail > <authorEmail> dani.gunawan @ yahoo.com </

authorEmail>

#

<authorUrl > http://tobacamp.com </authorUrl > <authorUrl> http://tobacamp.com </ authorUrl>

#

<copyright > </copyright > <copyright> </ copyright>

#

<license > GNU/GPL </license > <license> GNU / GPL </ license>

#

<version > 1.0.0 </version > <version> 1.0.0 </ version>

#

<description > template description goes here </description > <description> template descrição vai aqui

</ description>

#

<files > <arquivos>

#

<filename > index.php </filename > <filename> index.php </ filename>

#

<filename > templateDetails.xml </filename > <filename> templateDetails.xml </ filename>

#

<filename > template_thumbnail.png </filename > <filename> template_thumbnail.png </ filename>

#

<filename > images/arrow.png </filename > <filename> images / arrow.png </ filename>

#

<filename > images/logo.png </filename > <filename> images / logo.png </ filename>

#

<filename > css/template.css </filename > <filename> CSS / template.css </ filename>

#

</files > </ files>


3 de 5 16/5/2012 15:21

Título: Re: [TUTORIAL] 5 passos Convertendo HTML Template para Joomla Enviado: 19 Set 2009, 11:48

Título: Re: [TUTORIAL] 5 passos Convertendo HTML Template para Joomla Enviado: 19 Set 2009, 13:57

#

<positions > <positions>

#

<position > breadcrumb </position > <position> breadcrumb </ position>

#

<position > left </position > <position> left </ position>

#

<position > right </position > <position> right </ position>

#

<position > top </position > <position> top </ position>

#

<position > user1 </position > <position> user1 </ position>

#


#


#


#

<position > footer </position > <position> footer </ position>

#

<position > debug </position > <position> debug </ position>

#

<position > syndicate </position > <position> syndicate </ position>

#

</positions > </ posições>

#

</install > </ install>

Não se esqueça de inscrever todos os seus arquivos usado em seu recém-feito modelo tag arquivos dentro. Se vocêperdeu, os arquivos não serão copiados para Joomla template diretório durante o processo de instalação. positionstag is used to declare the position name used in your template. tag posições é usado para declarar o nome daposição usada em seu modelo.

Passo 5

Pacote-lo. Você pode criar uma miniatura (thumbnail) do seu modelo antes de embalá-lo. Ela deve ter 206px delargura e 150px de altura e, finalmente, comprimir o seu modelo para um arquivo zip e seu modelo está pronto parair. Não se esqueça de testá-lo antes de compartilhá-lo à Internet no caso de você sentir como ele.

Fonte: http://www.tobacamp.com/tutorial/5-easy ... -template/

Voltar ao topo

uriel

Time Suporte

Mensagens: 3258

otima iniciativa, meu parabens !!seria otimo ter mais usuarios assim !!o JCB seria ainda melhor !!abraço

_________________Presto consultoria em Joomla. Basta mandar uma MP.Twitter = UrielSouza

Quer uma boa hospedagem?Com 60 dias grátis para testar seu Joomla?basta utilizar o código: *60diasgratis* com os 2 asteriscos>> Super hospedagem

Voltar ao topo

Rickschaves

Administrador Muito bom! Valeu pela contribuição!

_________________Abraço,Rick Chaves

LEIA AS REGRAS DO FÓRUM!!!Hospedagem Joomla 1º mês grátis pra testar!!!


4 de 5 16/5/2012 15:21

Mensagens: 1532

Voltar ao topo

Exibir mensagens anteriores: Todas as mensagens Ordenar por Data da mensagem Crescente Ir

Página 1 de 1 [ 3 mensagens ]

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 3 visitantes

Enviar mensagens: ProibidoResponder mensagens: Proibido

Editar mensagens: ProibidoExcluir mensagens: Proibido

Enviar anexos: Proibido

Procurar por: Ir Ir para: Documentação Ir


5 de 5 16/5/2012 15:21

Documents

[TUTORIAL] 5 passos Convertendo HTML Template para Joomla • Joomla Clube Fórum - O fórum de Joomla mais completo do Brasil, com a melhor equipe de suporte do Brasil •