ti-enxame.com

criando novo modelo no 3.3

Estou criando meu primeiro novo modelo - muito iniciante.

Eu tenho um site estático HTML5 e CSS3 que me criei do zero e converti-lo em um modelo do Joomla 3.3.

Eu li alguns tutoriais sobre como criar um modelo básico e assim por diante, mas realmente não tenho tempo para colocar tudo em minhas mãos, por isso preciso de uma solução rápida que possa usar todo o meu estilo CSS e ignorar qualquer coisa que venha do Joomla.

Eu tentei colocar alguns estilos <div> tags no meu índice ou como um módulo em (html personalizado), mas existem alguns estilos de CSS que substituem minhas regras de CSS, então eu só quero me livrar de tudo do joomla e manter meu novo modelo limpo.

Eu tenho isso dentro do meu index.php

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

mas acho que o estilo principal que substitui o meu vem dessa linha

<jdoc:include type="head" />

que eu não sei o que isso traz.

4
Elhamy

A regra geral ao criar um modelo é carregar seus próprios arquivos CSS após o <jdoc:include type="head" />. Isso é importante porque, dessa forma, você tem a palavra final sobre as regras CSS. No entanto, isso também significa que você não usa $doc->addStyleSheet() no seu modelo. Em vez disso, basta escrevê-lo como HTML simples em sua cabeça após a instrução jdoc.

Há um motivo para ainda usar a API para adicionar arquivos JavaScript ou CSS ao seu modelo. Ou seja, se você carregar ativos que também podem ser carregados por extensões. Em seguida, o Joomla cuidará para que ele seja carregado apenas uma vez, enquanto, caso contrário, você poderá ter carregado duas vezes.

Portanto, talvez faça sentido carregar o arquivo bootstrap usando a API, mas seu próprio estilo de modelo (style.css) e JavaScript (main.js) devem ser carregados codificados após a tag jdoc.

Em uma nota lateral: Você pode carregar o CSS Bootstrap usando JHtmlBootstrap::loadCSS() ( http://api.joomla.org/cms-3/classes/JHtmlBootstrap .html # method_loadCss ). Isso é perfeitamente aceitável quando feito em um modelo, mas nunca use essa chamada em um ramal.

No entanto, pode fazer mais sentido trabalhar com os arquivos Bootstrap LESS e compilar seu próprio arquivo CSS a partir dele. Depois, você pode até combinar e combinar as coisas necessárias e aproveitar os mixins e variáveis ​​já fornecidos pelo Bootstrap.

6
Bakual

Infelizmente, o Joomla não funciona assim. Para criar um modelo do Joomla, você precisa ter alguns elementos dinâmicos, como a tag jdoc que importa o componente e assim por diante.

<jdoc:include type="head" /> também é um requisito e muito útil. Basicamente, ele obtém todo o script, link e qualquer outra coisa que deve ser injetada no <head> de uma extensão e injeta nela para você. Por exemplo, digamos que você tenha um módulo que exigiu graph.js. Para importar isso, você usaria algo como isto:

JHtml::_('script', JUri::root() . 'modules/my_module/js/graph.js');

Agora <jdoc:include type="head" /> obtém o código acima e o injeta no <head> para você, para que você não precise fazer isso manualmente. Portanto, mantenha-o lá e não o remova. Também serei necessário para alguns scripts principais que são enviados com o Joomla.

Se você deseja usar módulos em seu site, não pode simplesmente adicionar o código HTML ao seu index.php e esperar que ele funcione corretamente e seja dinâmico. É por isso que usamos:

<jdoc:include type="modules" name="position-7" />

que importa o módulo e a estrutura HTML codificada com is. Você pode no entanto, adiciona HTML personalizado para envolver o módulo da seguinte forma:

<div class="sidebar">
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-7" />
    </div>
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-8" />
    </div>
</div>

Não é muito complexo e também torna a vida muito mais simples. O Joomla não é baseado em uma abordagem estática, portanto, você deve se ater à maneira como ele funciona.

4
Lodder

Quando eu comecei, os modelos do Joomla prontos para o uso não eram tão limpos, e isso era bom para iniciantes.

Eu tenho uma seção de cabeça que se parece com isso ...

<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/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/menus.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/modules.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/styles.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/peter.css?v=20140508-6" type="text/css" />

Em particular, as folhas de estilo não são incluídas da maneira "Agradável" no addStyleSheet e, como resultado, ficam onde são colocadas, por último! Quaisquer folhas de estilo adicionadas dinamicamente são inseridas no <jdoc:include type="head" /> ponto.

O que pode estar acontecendo no seu modelo é que suas folhas de estilo estão sendo carregadas primeiro e, em seguida, todas as Joomla adicionadas dinamicamente são adicionadas por último. Tudo depende de onde as funções addStyleSheet são chamadas.

Se você está confiante de que tem tudo o que precisa no modelo e não precisa de bits dinâmicos adicionais adicionados (por exemplo, para o editor de front-end) ou para quaisquer extensões adicionadas, remova o <jdoc:include type="head" />, pelo menos para um modelo iniciante.

Ou ... basta adicionar suas folhas de estilo em um ponto fixo, fora da cabeça incluída.

Depois de ir além de um iniciante, você provavelmente incluirá a seção principal. Existem maneiras de manipular o conteúdo dinâmico, embora não necessariamente para iniciantes. Por exemplo, para depuração, tenho uma folha de estilo que adiciono dinamicamente usando uma extensão personalizada, se eu for o usuário conectado.

1
Peter Wiseman

Se seus estilos estão sendo substituídos, é sem dúvida por causa do css do Bootstrap, pois ele usa alguns seletores de alta especificidade.

Seu site estático usa o Bootstrap? Se não, então você é quase certamente melhor sem ele no seu modelo do Joomla. Você só vai acabar lutando com isso. Eu acho que isso é o que você já viu.

Se seu site estático não usou Bootstrap também, então você pode esquecer melhor toda a conversa aqui do LESS e simplesmente incluir seu próprio CSS e JS, como você fez. Você não tem que usar Bootstrap no seu template Joomla.

1
Seth Warburton