Scribd Logo
Importer

Bienvenue sur Scribd !

  • Como Fazer Template Personalizado em Joomla

    Transféré par

    EdisonLuizTimotio
    23 vues5 pages

    Titre original

    Como Fazer Template Personalizado Em Joomla

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    23 vues5 pages

    Como Fazer Template Personalizado em Joomla

    Transféré par

    EdisonLuizTimotio

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    COMO FAZER TEMPLATE

    PERSONALIZADO EM JOOMLA?
    Rate this item

    1
    2
    3
    4
    5
    (16 votes)

    [Atualizado 23/07/2014]
    Ol amigos, criar um template Joomla uma tarefa relativamente simples, basta saber
    estruturar um site em XHTML + CSS normal e conhecer alguns cdigos da estrutura do
    Joomla, mais uns macetes bsicos.
    Primeiro Passo
    1. Vamos fazer o download do template EM BRANCO chamado Blank
    Template ou Blank Template + Bootstrap;
    2. Ao fazer o download teremos toda a estrutura de arquivos necessria para fazer
    seu prprio template;
    Personalizando o back-end do Template
    Joomla
    Agora que fizemos o download da nossa base para o desenvolvimento do nosso template,
    vamos personaliz-lo.
    Abra o arquivo templateDetails.xml que est dentro da pasta do Blank Template e vamos
    editar as informaes usando um editor HTML.
    1. <name> Nome do Template.
    2. <creationDate> Data de criao do template.
    3. <author> Autor.
    4. <copyright> Direitos do template.
    5. <authorEmail> Email de contato.
    6. <authorUrl> Site onde est sendo usado.
    7. <version> Pode dar um nmero para verso do template.
    8. <description> So os dados que descrevem o template no painel, coloque em h1 o
    nome do template e edite o html com mais informaes.
    9. <files> So as pastas utilizadas pelo template, no modifique caso no saiba o que
    est fazendo.
    10. <languages> So as chamadas dos arquivos de traduo do template, no precisa
    mexer se no quiser, mas pode personalizar.
    11. <positions> Muito importante, aqui iremos informar o nome das posies do
    template para aparecer quando ativarmos algum mdulo.
    12. <config> No modifique, aqui so as configuraes do template para integrar com
    bibliotecas CSS como o Bootstrap.
    Thumbnail do template
    Na pasta do template tem 2
    arquivos: template_preview.png e template_thumbnail.png edite essas imagens no seu
    editor de imagem preferido para ter uma miniatura que represente o site no painel do
    Joomla. Assim quando passar o mouse em cima do nome do template ter essa imagem
    exibindo.
    Favicon do template
    Dentro da pasta do template tem o arquivo favicon.ico, voc pode criar um cone
    personalizado para ser o cone do seu site no navegador.
    Se no sabe o que Favicon, clique aqui que falo mais a respeito.
    Instalando o template no Joomla para
    comear a modificar o front-end
    Depois de fazer essas personalizaes, salve tudo bvio para no perder, copie a pasta do
    template (se quiser renomeie para o nome que quiser, mas no esquea de informar no
    item 1 do XML.
    Agora v at sua instalao Joomla, na pasta templates e cole o seu template.
    Exemplo: /www/templates/MEUTEMPLATE
    Ativando o template no painel
    1. Agora entre no painel administrativo do seu Joomla
    (exemplo: www.meusite.com/administrator)
    2. V no menu Extenses > Gerenciar extenses;
    3. Clique em Descobrir;
    4. E depois no boto Descobrir;
    5. Vai aparecer na lista o seu template com o nome e dados personalizados;
    6. Selecione o template e depois clique em INSTALAR.
    Vai aparecer mensagem de instalado com sucesso, agora vamos editar o visual do
    template!
    Personalizando o visual front-end do
    template Joomla
    1. Abra o arquivo index.php da pasta do seu template que est na sua instalao
    Joomla;
    2. Note que basta voc editar o contedo HTML dentro do <body> para chamar os
    mdulos do Joomla;
    3. Na pasta CSS tem um arquivo chamado template.css que onde voc edita o
    estilo do seu HTML;
    Cdigos para integrao do seu template Joomla com extenses
    instaladas no painel:
    1. <jdoc:include type=head /> carregar dinamicamente o ttulo da
    pgina, scripts, tags meta entre outros.
    2. <jdoc:include type=modules name=nav /> carregar o mdulo da posio
    "nav"
    3. <jdoc:include type=component /> carregar o contedo dos artigos
    4. As declaraes (jdoc:include) do tipo mdulos (type=modules) podem ter
    qualquer nome (name). No caso, eles so relacionados com a posio real da
    declarao. Evite acentos, maisculas e espaos.
    Sabendo esses cdigos bsicos, basta por um nome para cada posio no seu template e
    por o cdigo pra carregar nele um mdulo, exemplo:
    < div class="topo" > <jdoc:include type=modules name=topo /> </ div>
    Nesse caso nessa div vai carregar o mdulo instalado e configurado para exibir na posio
    topo.
    Usando a biblioteca CSS do Bootstrap no
    meu template Joomla
    IMPORTANTE! Para ter essa opo voc tem que ter usado o Blank Template +
    Bootstrap, se usou apenas o Blank Template vazio ele no vem mais com vrias opes
    de frameworks integrados. (Atualizado 23/07/2014)
    Olha que legal, se voc chegou at aqui vai ter uma bela surpresa, pois esse template que
    usamos como base faz integrao automtica com o Boostrap e outras bibliotecas CSS e
    JS bastando ativarmos para utiliz-las.
    ----- A partir da verso 3.1.0 do Blank Template essa parte no existe mais -----
    Acesse seu painel, e v em gerenciar templates e localiza por seu template. Feito isso
    clique para editar.
    Veja que o template tem as opes para voc selecionar e usar, bastando ticar a opo e
    salvar para o template carregar no HEAD do seu template os arquivos.
    Opes disponveis:
    Modernizr
    Mtodos CSS de minificao
    Less.js
    Foundation (Made by ZURB)
    Bootstrap (incl. jQuery)
    Opes de fontes e mais umas funes.
    ----- Pule a parte acima se est usando Blank Template 3.1.0 ou superior -----
    Bom, ento ative o template.
    Volte ao index.php do template, no espao do corpo do site (body) voc vai colar o grid
    utilizado pelo Bootstrap, acesse:http://getbootstrap.com/css/#grid para pegar os cdigos
    HTML e definir seu grid.
    Copie e cole dentro do <body>, feito isso voc ter uma estrutura do Bootstrap rodando,
    basta personalizar colocando na sidebar por exemplo uma chamada de um mdulo etc.
    E a, gostou?
    Com certeza tem muita informao valiosa neste artigo, espero mesmo que tenha te
    ajudado e gostaria que comentasse abaixo a respeito!
    Grande Abs!

    Vous aimerez peut-être aussi