Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Templates Joomla - Overrides e Bootstrap 3

Templates Joomla - Overrides e Bootstrap 3

Overrides ou sobreposições é um recurso poderoso que traz uma enorme flexibilidade para modificar layouts do cor ou criar alternativas para todos os projetos. Além disso, vemos como facilitar o uso do Bootstrap 3 atualmente no Joomla

Helvecio da Silva

March 21, 2015
Tweet

Other Decks in Design

Transcript

  1. Introdução às Sobreposições (Overrides) O que é? 
 Uma sobreposição

    (override) é um arquivo que é carregado no lugar do arquivo original do sistema. Onde ficam? 
 As sobreposições no Joomla normalmente ficam junto com os arquivos do tema. Quem usa? 
 É comum a necessidade de modificar os arquivos originais. A maioria dos temas comerciais usa sobreposições para oferecer maior flexibilidade em seus layouts. O que necessita? 
 Conhecimentos bons de HTML, CSS e compreensão de PHP.
  2. Onde começar • Extensiões > Gerenciador de Temas > Temas

    • Localize o tema ativo e clique em Detalhes e Arquivos • Clique na aba Criar Sobreposição
  3. Módulos - Layout alternativo geral Essa modificação altera todas as

    instâncias do módulo no site. • Nesse exemplo vamos modificar o Módulo de Acesso (mod_login). Na coluna Módulos, clique sobre mod_login. Um aviso de sucesso da operação aparecerá. • Clique na aba Editor. • Clique na pasta HTML, depois na pasta mod_login. • Clique em default.php para editá-lo. • Comente o HTML entre as linhas 87 e 89
  4. Módulos - Layout alternativo específico Essa modificação altera somente as

    instâncias configuradas para usar esse layout. • Nesse exemplo vamos modificar o Módulo de Acesso (mod_login). Na coluna Módulos, clique sobre mod_login. Um aviso de sucesso da operação aparecerá. • Clique na aba Editor. Clique na pasta HTML, depois na pasta mod_login. • Clique em default.php para editá-lo. • Clique em Renomear Arquivo na barra de naveagação e renomeie o arquivo para loginalterado • Comente o HTML entre as linhas 87 e 89
  5. Componentes - Layout Alternativo Essa modificação altera todas as instâncias

    do componente no site. • Nesse exemplo vamos modificar o Componente de Acesso de Usuários (com_users > login). • Na coluna Componentes, clique sobre com_users e depois em login. Um aviso de sucesso da operação aparecerá. • Clique na aba Editor. Clique na pasta HTML, depois na pasta com_users e depois em login. • Clique em default_login.php para editá-lo. • Comente o HTML entre as linhas 67 e 70.
  6. Componente - Conteúdo: Artigo Essa modificação altera somente as instâncias

    configuradas para usar esse layout. Antes de iniciar o passo-a-passo a seguir, crie uma categoria Notícias e adicione quatro arquivos com texto frio (lorem ipsum). • Nesse exemplo vamos modificar o layout de artigo (com_content > article). Na coluna Componentes, clique sobre com_content. Um aviso de sucesso da operação aparecerá. • Clique na aba Editor. Clique na pasta HTML > com_content > article.. • Clique em default.php para editá-lo. • Clique em Renomear Arquivo na barra de navegação e renomeie o arquivo para artigoalterado • Na linha 48 acrescente style="color:#F00;" a tag <h2> • No Gerenciador de Artigos, abra um dos artigos que criou. • Clique na aba Opções e role até o final da página onde está o campo Layout Alternativo. • Selecione artigoalterado da listagem, salve e feche.
  7. Layouts Joomla: Conteúdo Essa modificação altera todas as instâncias configuradas

    para usar esses layouts. Antes de iniciar o passo-a-passo a seguir, crie uma categoria Notícias e adicione quatro arquivos com texto frio (lorem ipsum). • Nesse exemplo vamos modificar o layout de blog (layouts > joomla > content). Na coluna Layouts, clique sobre content. Um aviso de sucesso da operação aparecerá. • Clique na aba Editor. Clique na pasta HTML > layouts > joomla > content. • Clique em blog_style_default_item_title.php para editá-lo. • Na linha 24 acrescente style="color:#F00;" a tag <a>
  8. Bootstrap 3 Baixe a versão mais recente do Bootstrap -

    http:// getbootstrap.com/getting-started/#download - e instale no seu template. Crie as sobreposições conforme tabela a seguir.
  9. LOCALIZAÇÃO SOBREPOSIÇÃO LINHA DE PARA 1 components/com_content/views/archive/tmpl/blog.php html > com_content

    > archive > blog.php 29 span2 col-md-2 2 components/com_content/views/article/tmpl/default.php html > com_content > article > default.php 79 row-fluid row components/com_content/views/article/tmpl/default.php html > com_content > article > default.php 81 span col-md- 3 components/com_content/views/category/tmpl/blog.php html > com_content > category > blog.php 79 row-fluid row components/com_content/views/category/tmpl/blog.php html > com_content > category > blog.php 81 span col-md- 4 components/com_content/views/featured/tmpl/default.php html > com_content > featured > default.php 59 row-fluid row components/com_content/views/featured/tmpl/default.php html > com_content > featured > default.php 61 span col-md- 5 components/com_users/views/profile/tmpl/edit.php html > com_users > profile > edit.php 119 span3 col-md-3 6 html/layouts/joomla/edit/details.php html > layouts > joomla > edit > details.php 21 span2 col-md-2 7 layouts/joomla/quickicons/icon.php html > layouts > joomla > quickicons > icon.php 19 row-fluid row 8 layouts/joomla/sidebars/submenu.php html > layouts > joomla > sidebars > submenu.php 68 span12 col-md-12 Joomla - Tabela Básica de Sobreposições
  10. Tamanho Aparelhos Extra Pequenos Telefones <768px Pequenos Tablets ≥768px Médios

    Desktops ≥992px Grandes
 Desktops ≥1200px Prefixo classe .col-xs- .col-sm- .col-md- .col-lg- Bootstrap 3 - Tabela Básica de Classes