[tutorial] criar template, com template blank + Bootstrap

  • Uriel
  • Avatar de Uriel Autor do Tópico
  • Offline
  • JCB! Legend
  • JCB! Legend
Mais
6 anos 7 meses atrás #76002 por Uriel
Uriel created the topic: [tutorial] criar template, com template blank + Bootstrap
Requisitos

Joomla! Instalado e funcionando!!

Algumas coisas que você irá precisar:

O Template Blank: http://blank.vc/
Para quem não conhece o Template Blank é um template em branco!! instalável e funcional, e você pode deixa-lo como quiser!!
Twitter Bootstrap: http://twitter.github.com/bootstrap
JQuery: http://jquery.com/
Template Bootstrap Amélia: http://bootswatch.com/
Será bom ter:



Trechos do template Blank: https://gist.github.com/2360208


Passos

Visualização

Neste tutorial você irá aprender como utilizar o Template Blank para construção de um web design ágil incluindo Twitter Bootstrap. No final o resultado deve ficar assim:



Sinta-se livre para assistir a demonstração online em: http://jab12.blank.vc/ . Ficaria muito grato se você apoiasse o meu trabalho. Se você gostar desse tutorial por favor, compre o e-book do Template Blank. Então sirva-se de uma boa xícara de chá ou café e vamos começar!

Preparação

Baixe o Template Blank. Descompacte e renomeie a pasta para jab12 (ou o que você quiser). Em seguida, você deve editar o arquivo templateDetaisl.xml e preencha todas as informações. Alterar o nome do arquivo dos arquivos de idioma ( en-GB.tpl_templatename.ini para en-GB.tpl_jab12.ini ) No nosso caso adicionaremos o arquivo pt-BR.tpl_jab12.ini e o nome do arquivo dos arquivos de linguagem na pasta language.

Opcionalmente, você pode substituir as imagens template_preview.png , template_thumbnail.png e favicon.ico . Por favor, feche a pasta template e instale o seu modelo através do Gerenciador de extensão no backend do Joomla. Após instalar com sucesso o modelo, vá para o Template Manager e torne-o o modelo padrão. Agora, se você ir para a sua interface, que só deve exibir uma página em branco, o ponto de partida para o desenvolvimento.

Template Blank

Para demonstrar o web design atraente do Template Blank, abra os seguintes arquivos: template.css e tablet.css e phone.css em / templates/jab12/css ( jab12 é a pasta do template). Copie toda a linha com as definições para o corpo no template.css ( body {...} ) e cole-o em tablet.css e phone.css . Alterar o background-color em tablet.css para vermelho e em phone.css para verde (você pode usar as palavras vermelho e verde para definição de cores em vez de códigos de cores hexadecimais). Depois de salvar os arquivos e recarregar o frontend você vai ver o efeito no seu navegador: A cor de fundo irá mudar de branco para vermelho depois para verde na janela do navegador se você redimensionar o navegador de grande para pequeno. O suporte para desktops, tablets e telefones funciona bem :).

Agora, se você dar uma olhada no template.css você verá uma seção chamada 'floats'. Aqui você encontra os seletores auxiliares ao código. Se o código do conteúdo e uma barra lateral no boxmodell, você pode usar a classe 'floats-left' para colocá-lo lado a lado e definir um arround tag div classe grupo para a limpeza correta.

<div class="group">
  <div id="content" class="float-left">
    <div class="incontent">
    
    </div>
  </div>
  <div id="sidebar" class="float-left">
    <div class="insidbar">
    
    </div>
  </div>
</div>


Isso funciona para todos os navegadores. Coloque esta linha de código no index.php do template. Após
<jdoc:include type="message" />
<jdoc:include type="component" />

. O conteúdo será carregado através da API do Joomla! Na tag div com a classe incontent não apenas as mensagens as mensagens do sistema são carregados também todos os componentes de saída (por exemplo artigos):
Na div tag com a classe insidebar você inclui um módulo chamado 'siderbar':
<jdoc:include type="modules" name="sidebar" style="xhtml" />

O módulo deve ser criado no arquivo templateDetaisl.xml também. Abra o arquivo e coloque
<position>sidebar</position>
sidebar
Entre as tags <position>e</position> e Depois de recarregar o frontend você vai ver a palavra 'Home' o título de seu web site. Ótimo! Mas, talvez você gostaria de ver mais informação relevantes como esta. No backend, vá para o conteúdo> Gerenciador de artigo> Adicionar Novo artigo escreva o título "Desenvolvimento de Template com Template Blank com twitter bootstrap" e o seguinte texto:


Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.


Defina-o como um destaque e salve! Como já estamos aqui, podemos também escrever um espaço reservado (texto fictício) texto com o título de "Lorem Ipsum" e um texto como o descrito acima. Este artigo vai, então, ser usado para as entradas de menu.

Você não gosta dos ícones para impressão e exibição de e-mail em cada artigo do frontend? A navegação 'Anterior' e 'proximo'? Esconda-as nas opções do Gerenciador de artigo.

Agora vá para Extensão> Module Manager e abra o "Formulário de Login '. É defina uma posição bastante desajeitada chamada posição-7 . Dê as posições nomes exclusivos e distintos ( barra lateral , do menu ou header são convenções ) e publique-os na barra lateral . Salve e recarreguer o frontend e você vai encontrar o artigo e o formulário de login não aparecem lado a lado como eles não têm largura definida. A largura você terá que definir no arquivo template.css :
#content {width:720px;}

#sidebar {width:260px;}


depois de #main {} alterar a largura do # geral seletor para 980px . Recarregue o frontend e você vai ver o seu conteúdo exibido lado a lado.



Twitter Bootstrap



Para um site protótipo você pode simplesmente usar o Twitter Bootstrap no Template Balnk. Prototipagem lhe dá a vantagem para definir a função do site em seu navegador. Após isso, você pode começar a desenhar. Segue a função.



Vá para http://twitter.github.com/bootstrap , baixe o bootstrap e descompacte-o. Copie os dois arquivos bootstrap.css e inicialização responsive.css- para a pasta css do seu modelo (ainda jab12 ). Para implementar os dois arquivos no template.css.php e inclua o seguinte:
require('bootstrap.css');

antes de todos os arquivos css e depois de tudo

require ("bootstrap responsive.css ');

A folha de reposição não é mais necessário, por isso use um comentário ( # ) para desativá-lo.
# Require ('reset.css');

Salve o arquivo, recarregue o frontend e você vai ver como ele funciona. Agora você pode usar uma grade de 12 colunas atraente de bootstrap. Abra o index.php e o código de uma classe de segundo atrás inmain chamado:
container

Se você definir um espaço vazio entre as duas classes. Substitua a classe grupo com
row


e classe -float deixou de conteúdo com
span8

e classe float-left da barra lateral com
span4

Após este passo você terá que apagar todas as definições em template.css e tablet.css e phone.css . Não se preocupe se você deixá-los como arquivos vazios. Recarregue o frontend e minimizar seu navegador (clique e segure o canto direito) e ver como ele funciona.

Menu & pesquisa

Para preparar o index.php para a Navbar do Bootstrap Twitter ainda escrever uma classe
container


atrás inheader (com espaço vazio entre as duas classes).
Navbar, variação da resposta
Escreva as seguintes linhas dentro do div tag com a classe inheader :

<div class="row">
  <div class="navbar span12">
    <div class="navbar-inner">
      <div class="container">
       
        <!-- .btn-navbar is used to toogle  collapsed navbar content -->
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
         
        <!-- Be sure to leave the brand out there if you want it shown -->
        <a class="brand" href="#">Project name</a>
         
        <!-- Everything you want hidden at 940px or less, place within here -->
        <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
        </div>
       
      </div>
    </div>
  </div>
</div>


Estas linhas são apenas uma questão de copiar e colar a partir da documentação do Twitter [url=Bootstraphttp://twitter.github.com/bootstrap/components.html" onclick="window.open(this.href);return false;]Bootstraphttp://twitter.github.com/boot ... nents.html[/url] # navbar exceto do primeiro elemento com a classe row e a classe adicional span12 do segundo elemento .Everthing o resto é deixado intocado. Objetivo que você vai tocá-lo agora.
Substitua as duas palavra 'Project name' de:
getCfg('sitename'); ?>
para exibir a sitename de seu web site e a âncora ' # ' (href) para:
baseurl;?> /
Observe a barra ! Em seguida, substitua o comentário.
<!-- .nav, .navbar-search, .navbar-form, etc -->
para
<div class="pull-left visible-desktop">
  <jdoc:include type="modules" name="menu" />
</div>
<div class="insearch pull-right visible-desktop">
  <jdoc:include type="modules" name="search" />
</div>
<div class="hidden-desktop">
  <jdoc:include type="modules" name="menu" />
  <jdoc:include type="modules" name="search" />
</div>

O que você fez? Você criou módulos dublicados, um para o menu e outro para a pesquisa. Primeiro, ambos são separados em módulos div tags e visível apenas para desktops. Sua classe visible-desktop fala por si (top - Mais em Bootstrap Twitter docs ). Em segundo lugar, ambos os módulos, combinados estão em uma div tag e escondido para desktops, que são meios visíveis de agrupamento para tablets e smartphones. Não se esqueça de definir as posições em templateDetails.xml para este item da mesma maneira que você fez com a barra lateral. Ler docs do Bootstrap Twitter: O navbar responsivo Requer plugin collapse e arquivo responsive CSS Bootstrap.
Menu
Agora vamos criar um menu de dois níveis. Ir para Menus> Menu (backend Joomla) e criar novos itens para o item único "Lorem Ipsum". Ele deve ser parecido com isto:



É hora de publicar o menu na posição correta. Extensions> Module Manager> Menu e publicá-lo no menu! 'para mostrar os submenus' clique em sim e escrevar a classe adicional em 'Sufixo de Classe Menu' nav (não se esqueça do espaço vazio!). Salve-o. Agora você precisa de um pouco de javascript para fazê-lo funcionar. Download de arquivos:
jquery-1.7.2.min.js [url=http://jquery.com" onclick="window.open(this.href);return false;]http://jquery.com[/url]
bootstrap-collapse.js http://twitter.github.com/bootstrap/jav ... l#collapse
bootstrap-dropdown.js http://twitter.github.com/bootstrap/jav ... #dropdowns
Copie para a pasta js no diretório de templates. Abra o arquivo e escreva template.js.php
require ('jquery-1.7.2.min.js');
require ('bootstrap-collapse.js');
require ("bootstrap dropdown.js ');
Isto irá implementar os arquivos. Salve-o e abra o arquivo index.php do template. Na parte inferior do corpo ( antes do </body> ??) escreva:
<script type="text/javascript">
  (function($){   
    $(document).ready(function(){
      // dropdown
      $('.item-102').addClass('dropdown');
      $('.item-102 > a').addClass('dropdown-toggle');
      $('.item-102 > a').attr('data-toggle', 'dropdown');
      $('.item-102 > a').append('<b class="caret"></b>');
      $('.item-102 > ul').addClass('dropdown-menu');
      // divider 
      $('<li class="divider"></li>').insertAfter('.item-105');
    });
  })(jQuery);
</script>

Aqui você escreve o código jQuery para criar o menu suspenso. Faça classe com o item ID é corretamente definido. Se você não tiver certeza, olhe para a entrada de menu no backend. A segunda entrada deve ser do terceiro lugar, separados, para que você escreva um divisor Adicionalmente. Recarregue o frontend para vê-lo trabalhando.Nota: O link do item 'Sobre' não funciona mais.

Pesquisa

Oferecer uma função de busca na Navbar é uma coisa boa e aumenta a usabilidade. A posição do módulo search é criado mas não tem módulo. Crie no Gerenciador de módulos. Clique em 'Novo' e selecione 'Pesquisar'. Título e posição deve ser search . Salve-o. No frontend será exibido no lugar certo, mas não parece certo. O que você precisa agora é de override do primeiro módulo para o que você acabou de criar.
Vá para a pasta html do seu template, crie uma nova pasta e nomeá-la lá mod_search. Copie o default.php eindex.html arquivos de / modules / mod_search / tmpl / para / template/jab12/html/mod_search /. Agora você pode substituir escrever editando o arquivo default.php, que é responsável para a saída. Abra-o e crie uma classe de form-search para a tag form, a marcação direito de bootstrap ( http://twitter.github.com/bootstrap/bas ... ~~HEAD=NNS # formulários ). A input tag com o id mod-search-searchword Recebe classes adicionais input-medium search-query . Escreva-o após a classe existente inputbox (espaços vazios entre as classes!) e quando você estiver na linha de assunto, excluir whole afore declarada como label. Terá uma boa aparência, se você colocar em seu template.css.
.form-search {margin:5px 0;}
Se você estiver escrevendo em css, basta definir uma margin para o body .
body {margin-top: 20px;}
Sim, agora parece realmente bom.

Breadcrumbs

Algumas marcações para breadcrumbs isso aumenta as impressões positivas dos visitantes de seu site. Escreva a seguinte linha no arquivo index.php:
<!-- ***** BREADCRUMBS ***** -->
<div class="container">
  <div class="row">
    <div class="span12">
      <jdoc:include type="modules" name="breadcrumbs" />
    </div>
  </div>
</div>


Claro, a posição breadcrumbs também deve ser colocada no templateDetails.xml.
breadcrumbs
Já o Gerente de Módulo contém um módulo para breadcrumbs (se você não apagou). Agora ele pode ser publicado no local do breadcrumbs. Faça aparecer caso 'Mostrar "Você está aqui" "estiver definida como Não. Depois de recarregar o frontend o breadcrumbs não se parece com o caminho de inicialização ( http://twitter.github.com/bootstrap/com ... ~~HEAD=NNS # breadcrumbs ). Outra substituição é necessária. Faça isso da mesma maneira como você fez isso para a pesquisa. Crie a pasta nos mod_breadcrumbs diretório e copia o html Quando você abrir o arquivo default.php Você vai ver, que "o breadcrumbs não são embalados na lista ordenada como Bootstrap Twitter sugere. Escreva:
<ul class="breadcrumb">


Depois ainda
<div class="breadcrumbs<?php echo $moduleclass_sfx; ?>">

e feche-o com
</ul>

Antes na direita </div> . Agora, as âncoras ( a ) e vãos ( span ) pertence aos itens da lista ( li )


Reescreva deste
if ($i < $count -1) {
  if (!empty($list&#91;$i&#93;->link)) {
    echo '<a href="'.$list&#91;$i&#93;->link.'" class="pathway">'.$list&#91;$i&#93;->name.'</a>';
  } else {
    echo '<span>';
    echo $list&#91;$i&#93;->name;
    echo '</span>';
  }
  if($i < $count -2){
    echo ' '.$separator.' ';
  }
}  elseif ($params->get('showLast', 1)) { // when $i == $count -1 and 'showLast' is true
  if($i > 0){
    echo ' '.$separator.' ';
  }
   echo '<span>';
  echo $list&#91;$i&#93;->name;
    echo '</span>';
}

para este
if ($i < $count -1) {
  if (!empty($list&#91;$i&#93;->link)) {
    echo '<li><a href="'.$list&#91;$i&#93;->link.'" class="pathway">'.$list&#91;$i&#93;->name.'</a></li>';
  } else {
    echo '<li><span>';
    echo $list&#91;$i&#93;->name;
    echo '</span></li>';
  }
  if($i < $count -2){
    echo ' <span class="divider">/</span> ';
  }
}  elseif ($params->get('showLast', 1)) { // when $i == $count -1 and 'showLast' is true
  if($i > 0){
    echo ' <span class="divider">/</span> ';
  }
   echo '<li><span>';
  echo $list&#91;$i&#93;->name;
    echo '</span></li>';
}


Você pode ver a diferença? É tudo sobre Abrir (li) e fechar (/li) itens da lista e um substituto para os separadores de teses com divisórias. Salve-o, carregue o frontend e clique em "Desenvolvimento de Template com Template Blank com twitter bootstrap" para vê-lo em ação.


Rodapé
Finalmente reescreveremos o rodapé no arquivo index.php

de
<div id="footer">
  <div class="infooter">
    
  </div>
</div>

para
<!-- ***** FOOTER ***** -->
<div class="container">
  <div class="row">
    <div class="span12">
      <p>Copyright © <?php echo date('Y'); ?> - <?php echo $app->getCfg('sitename'); ?></p>
    </div>
  </div>
</div>

Isto irá resultar na saída do carácter copyright com o ano correto e o sitename.

Tema
Parabéns! Você terminou o seu primeiro protótipo de template com o Template Blank e Bootstrap Twitter e isso parece ótimo.




Se você deseja exibir um outro tema, você pode ir para [url=http://bootswatch.com" onclick="window.open(this.href);return false;]http://bootswatch.com[/url] e ache um bom template. Talvez Amelia é o certo. Basta baixar o arquivo e substituí-la por bootstrap.css o arquivo no seu diretório de templates na pasta css. Isso é tudo, cara.


Conclusão

Com o template blank e Bootstrap Twitter você pode rapidamente escrever um protótipo do seu site. Criar um projeto web totalmente funcional e sensível e se você não gostar do tema padrão do bootstrapp, procure outros temas ou um designer e peça para retocar o desenho.
fonte: http://blank.vc/

Pessoal, se encontrarem erros, me avisem!!
abraço

Please Entrar ou Registrar to join the conversation.


Mais
6 anos 6 meses atrás #78136 por brunodyjorge
brunodyjorge replied the topic: Re: [tutorial] criar template, com template blank + Bootstrap
Ótimo Uriel! Este seu tutorial será de grande valia para eu começar a usar o Bootstrap com o Joomla! A primeira coisa vai ser fazer funcionar o menu do Boostrap com a administração do Joomla! Valew!!

Please Entrar ou Registrar to join the conversation.

  • Uriel
  • Avatar de Uriel Autor do Tópico
  • Offline
  • JCB! Legend
  • JCB! Legend
Mais
6 anos 6 meses atrás #78143 por Uriel
Uriel replied the topic: Re: [tutorial] criar template, com template blank + Bootstrap
Um template pronto para o Joomla com Bootstrap
http://hwdmediashare.co.uk/joomla-templ ... 6-strapped

só baixar instalar e usar

Abraço

Please Entrar ou Registrar to join the conversation.

  • Mister Bebe Eme
  • Avatar de Mister Bebe Eme
  • Offline
  • JCB! Colaborador
  • JCB! Colaborador
Mais
5 anos 10 meses atrás #88520 por Mister Bebe Eme
Mister Bebe Eme replied the topic: Re: [tutorial] criar template, com template blank + Bootstrap
Ótimo tutorial, parabéns!

[b:vg9jcj6i]Contato:[/b:vg9jcj6i]
<!-- e --><a href="Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.">Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.</a><!-- e -->
[url:vg9jcj6i]http://www.correiodiario.com.br[/url:vg9jcj6i]

Please Entrar ou Registrar to join the conversation.

Mais
1 mês 3 semanas atrás #101321 por Frank Barraza
Frank Barraza replied the topic: [tutorial] criar template, com template blank + Bootstrap
Coach Outlet
Soccer Shoes
James Harden shoes
Timberland Boots
Yeezy Beluga 2.0
Yeezys
Birkenstock Sandals
Adidas Yeezy
Adidas NMD
Goyard
Pandora Jewelry
Louboutin Shoes
Kyrie 3
Adidas Shoes
James Harden shoes
Kate Spade Outlet
Red Bottom Shoes
[url=http://www.ralph--lauren.us.com/]Ralph Lauren[/url]
Pandora Charms
Moncler
Christian Louboutin
Kyrie 4 Shoes
Vans Store
Red Bottom Shoes For Women
Jordan 11 Red
Adidas Ultra Boost
Vans Outlet
Curry Shoes
Pandora Jewelry Official Site
Yeezy Boost 350 V2 Blue Tint
Adidas Outlet
Air Jordan 11
Birkenstock Outlet Online
Michael Kors Outlet
Longchamp
Polo Ralph Lauren Outlet
Coach Factory Outlet
Ralph Lauren Outlet
Louboutin Heels
Pandora Official Site
Nike Air Vapormax
Birkenstock Sale
Nike Air Force 1
Pandora Bracelet
Jordan Retro 11
Nike Air Max 2018
Nike Cortez
Pandora Charms Outlet
Nike Air Max
Michael Kors Canada
Yeezy Shoes
Yeezy Shoes
Yeezy boost 350 v2
Jimmy Choo Shoes
[url=http://www.nike--shoes.us.com/]Nike Shoes[/url]
Longchamp Outlet
Moncler UK
Nike Air Uptempo
Air Max
North Face Jackets Clearance
Christian Louboutin Shoes
Coach Factory Outlet
Huaraches Nike
KD Shoes
Skechers UK
Kyrie Irving Shoes
Adidas NMD
Yeezy Boost 350 V2
Christian Louboutin Shoes
[url=http://www.nikeoutlet--store.us.com/]Nike Outlet[/url]
Air Max 90 Pas Cher
Clarks Shoes For Women
Curry 4 Shoes
Pandora Jewelry
Adidas Shoes
Air Max 95
Longchamp
Pandora Ring
[url=http://www.pandora--jewelry.us.com/]Pandora Charms[/url]
The North Face Jackets
Yeezy Boost 350
Polo Ralph Lauren Outlet Online
New Jordans
[url=http://www.adidas--yeezy.us.com/]Adidas Yeezy[/url]
[url=http://www.puma--shoes.us.com/]Puma Shoes For Women[/url]
Birkenstock Shoes
KD Shoes
Air Max
Nike Vapormax
[url=http://www.nike--outlet.us.com/]Nike Outlet[/url]
Pandora Charms
Timberlad Shoes
Lebron 15
Pandora Jewelry
Ralph Lauren Polo
Air Max 90
Jordan 11 Space Jam
Pandora Charm
Adidas NMD
Rihanna Slides
Kate Spade Outlet Online
Kyrie 3
KD 10
Adidas Outlet
Lebrons shoes
Kyrie Shoes
Pandora Rings Official Site
Pandora Charms Outlet
Jordan 11
Lebron Shoes

Please Entrar ou Registrar to join the conversation.