web-dev-qa-db-fra.com

créer un nouveau modèle en 3.3

Je crée mon 1er nouveau modèle - très débutant.

J'ai créé un site Web statique HTML5 et CSS3 que j'ai moi-même créé et converti en un modèle Joomla 3.3.

J'ai lu des tutoriels sur la création d'un modèle de base, etc., mais je n'ai vraiment pas le temps de tout mettre en avant. J'ai donc besoin d'une solution rapide pour utiliser tout mon style CSS et ignorer tout ce qui vient. de Joomla.

J'ai essayé de mettre un peu de style <div> balises dans mon index ou sous forme de module sous (HTML personnalisé), mais il existe certains styles css qui surchargent mes règles css; je veux juste me débarrasser de tout de joomla et garder mon nouveau modèle propre.

J'ai cela dans mon 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');

mais je pense que le style principal qui remplace le mien provient de cette ligne

<jdoc:include type="head" />

ce que je ne sais pas ce que cela apporte.

joomla-3.3.xtemplatescss
4
Elhamy

La règle générale lors de la création d'un modèle est de charger vos propres fichiers CSS après le <jdoc:include type="head" />. C'est important car vous avez ainsi le dernier mot sur les règles CSS. Cependant, cela signifie également que vous n'utilisez pas $doc->addStyleSheet() dans votre modèle. Au lieu de cela, il vous suffit de l'écrire sous forme de code HTML simple dans votre tête après l'instruction jdoc.

Il y a une raison pour continuer à utiliser l'API pour ajouter des fichiers JavaScript ou CSS dans votre modèle. C’est le cas si vous chargez des ressources qui peuvent également être chargées par des extensions. Ensuite, Joomla veillera à ce qu'il ne soit chargé qu'une seule fois, sinon vous pourriez l'avoir chargé deux fois.

Il serait donc peut-être judicieux de charger le fichier bootstrap) à l’aide de l’API, mais votre propre style de modèle (style.css) et JavaScript (main.js) doivent être chargés en code dur après la balise jdoc.

Sur une note: Vous pouvez charger le CSS Bootstrap en utilisant JHtmlBootstrap::loadCSS()] _ ( http://api.joomla.org/cms-3/classes/JHtmlBootstrap .html # method_loadCss ). Cela convient parfaitement dans un modèle, mais n’utilisez jamais cet appel dans une extension.

Cependant, il peut être plus logique de travailler à partir des fichiers Bootstrap LESS et de compiler votre propre fichier CSS à partir de celui-ci. Ensuite, vous pouvez même mélanger et faire correspondre les éléments dont vous avez besoin et tirer parti des mixins et des variables déjà fournis. par Bootstrap.

6
Bakual

Malheureusement, Joomla ne fonctionne pas comme ça. Pour créer un modèle Joomla, vous devez disposer d'éléments dynamiques tels que la balise jdoc qui importe le composant, etc.

<jdoc:include type="head" /> est également une exigence et très pratique. En gros, il récupère tout le script, le lien et tout ce qui est supposé être injecté dans le <head> d'une extension et vous l'injecte dedans. Par exemple, supposons que vous ayez un module nécessitant graph.js. Pour importer ceci, vous utiliseriez quelque chose comme ceci:

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

À présent <jdoc:include type="head" /> récupère le code ci-dessus et l'injecte dans le <head> _ pour vous afin que vous n'ayez pas à le faire manuellement. Par conséquent, conservez-le et ne le supprimez pas. Je serai également requis pour certains scripts de base livrés avec Joomla.

Si vous souhaitez utiliser des modules sur votre site, vous ne pouvez pas simplement ajouter le code HTML à votre index.php et vous attendre à ce qu'il fonctionne correctement et soit dynamique. C'est pourquoi nous utilisons:

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

qui importe le module et la structure HTML codée avec is. Vous pouvez ajoutez cependant du code HTML personnalisé pour envelopper le module de la manière suivante:

<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>

Ce n'est pas très complexe et cela simplifie également la vie. Joomla n'est pas basé sur une approche statique, vous devez donc vous en tenir à la façon dont cela fonctionne.

4
Lodder

Lorsque j'ai commencé, les modèles Joomla prêts à l'emploi n'étaient pas aussi propres, ce qui était bien pour un débutant.

J'ai une section de tête qui ressemble à ceci ...

<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" />

En particulier, les feuilles de style ne sont pas incluses dans la méthode "Nice" avec addStyleSheet et restent ainsi où elles ont été placées, enfin! Toutes les feuilles de style ajoutées dynamiquement sont insérées à la <jdoc:include type="head" /> point.

Ce qui peut arriver dans votre modèle, c'est que vos feuilles de style sont chargées en premier, puis que celles de Joomla ajoutées dynamiquement sont ajoutées en dernier. Tout dépend de l'endroit où les fonctions addStyleSheet sont appelées.

Si vous êtes sûr que vous avez tout ce dont vous avez besoin dans le modèle et que vous n'avez pas besoin d'ajouter de bits dynamiques supplémentaires (par exemple pour l'éditeur de front-office), ni pour les extensions que vous ajoutez, vous pouvez vous en tirer en supprimant le <jdoc:include type="head" />, au moins pour un modèle de débutant.

Ou ... ajoutez simplement vos feuilles de style à un point fixe, en dehors de la tête incluse.

Une fois que vous aurez dépassé le niveau débutant, vous voudrez probablement inclure la section head. Il existe des moyens de manipuler le contenu dynamique, mais pas nécessairement pour un débutant. Par exemple, pour le débogage, j'ai une feuille de style que j'ajoute dynamiquement à l'aide d'une extension personnalisée, si je suis l'utilisateur connecté.

1
Peter Wiseman

Si vos styles sont remplacés, c'est sans doute à cause du fichier CSS de Bootstrap, car il utilise des sélecteurs de haute spécificité.

Votre site statique utilise-t-il Bootstrap? Si ce n'est pas le cas, il est certainement préférable de ne pas l'utiliser dans votre modèle Joomla. Vous finirez seulement par vous battre avec elle. Je pense que c'est ce que vous avez déjà vu.

Si votre site statique n’a pas utilisé Bootstrap également, vous pouvez mieux oublier de parler de LESS ici et simplement inclure vos propres CSS et JS, comme vous l’avez fait. devez utiliser Bootstrap dans votre modèle Joomla.

1
Seth Warburton