[tutorial] criar template, com template blank + Bootstrap
11 anos 9 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.
Isso funciona para todos os navegadores. Coloque esta linha de código no index.php do template. Após
. 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':
O módulo deve ser criado no arquivo templateDetaisl.xml também. Abra o arquivo e coloquesidebar
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:
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 :
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:
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.
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:
Se você definir um espaço vazio entre as duas classes. Substitua a classe grupo com
e classe -float deixou de conteúdo com
e classe float-left da barra lateral com
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
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 :
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:para exibir a sitename de seu web site e a âncora ' # ' (href) para:Observe a barra ! Em seguida, substitua o comentário.para
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
Isto irá implementar os arquivos. Salve-o e abra o arquivo index.php do template. Na parte inferior do corpo ( antes do </body> ??) escreva:
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.
Se você estiver escrevendo em css, basta definir uma margin para o body .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:
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:
Depois ainda
e feche-o com
Antes na direita </div> . Agora, as âncoras ( a ) e vãos ( span ) pertence aos itens da lista ( li )
Reescreva deste
para este
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
para
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
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>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:
containerSe você definir um espaço vazio entre as duas classes. Substitua a classe grupo com
rowe classe -float deixou de conteúdo com
span8e classe float-left da barra lateral com
span4Apó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
containeratrá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'); ?>baseurl;?> /<!-- .nav, .navbar-search, .navbar-form, etc --><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 ');<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;}body {margin-top: 20px;}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[$i]->link)) {
echo '<a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a>';
} else {
echo '<span>';
echo $list[$i]->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[$i]->name;
echo '</span>';
}para este
if ($i < $count -1) {
if (!empty($list[$i]->link)) {
echo '<li><a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a></li>';
} else {
echo '<li><span>';
echo $list[$i]->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[$i]->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
