it-swarm-es.tech

creando una nueva plantilla en 3.3

Estoy creando mi primera plantilla nueva, muy principiante.

Tengo un sitio web estático HTML5 y CSS3 que creé yo mismo desde cero y lo convertí en una plantilla de Joomla 3.3.

He leído algunos tutoriales sobre cómo hacer una plantilla básica, etc., pero realmente no tengo tiempo para poner mi mano en todo, así que necesito una solución rápida que pueda usar todo mi estilo CSS e ignorar cualquier cosa que venga. de Joomla.

He tratado de poner un poco de estilo <div> etiqueta en mi índice o como un módulo en (html personalizado), pero hay algunos estilos CSS que anulan mis reglas CSS, así que solo quiero deshacerme de todo de Joomla y mantener limpia mi nueva plantilla.

Tengo esto dentro de mi 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');

pero creo que el estilo principal que anula el mío proviene de esta línea

<jdoc:include type="head" />

que no sé lo que trae.

4
Elhamy

La regla general al hacer una plantilla es cargar sus propios archivos CSS después de el <jdoc:include type="head" />. Eso es importante porque de esta manera tienes la última palabra sobre las reglas CSS. Sin embargo, eso también significa que no usa $doc->addStyleSheet() en su plantilla. En su lugar, simplemente lo escribe como HTML simple en su cabeza después de la declaración jdoc.

Hay una razón para seguir usando la API para agregar archivos JavaScript o CSS dentro de su plantilla. Es decir, si carga activos que también pueden cargarse mediante extensiones. Entonces Joomla se encargará de que solo se cargue una vez, mientras que de lo contrario puede haberlo cargado dos veces.

Por lo tanto, podría tener sentido cargar el archivo bootstrap usando la API, pero su propio estilo de plantilla (style.css) y JavaScript (main.js) deberían cargarse codificados después de la etiqueta jdoc.

En una nota al margen: puede cargar el Bootstrap CSS utilizando JHtmlBootstrap::loadCSS() ( http://api.joomla.org/cms-3/classes/JHtmlBootstrap .html # method_loadCss ). Esto está perfectamente bien cuando se hace dentro de una plantilla. Pero nunca use esta llamada dentro de una extensión.

Sin embargo, puede tener más sentido trabajar desde los archivos Bootstrap MENOS y compilar su propio archivo CSS a partir de él. Luego, incluso puede mezclar y combinar las cosas que necesita y aprovechar las combinaciones y variables ya proporcionadas por Bootstrap.

6
Bakual

Lamentablemente, Joomla no funciona así. Para crear una plantilla de Joomla, debe tener algunos elementos dinámicos, como la etiqueta jdoc que importa el componente, etc.

<jdoc:include type="head" /> también es un requisito y muy útil. Básicamente, obtiene todo el script, el enlace y todo lo que se supone que debe inyectarse en el <head> desde una extensión, y lo inyecta allí para usted. Por ejemplo, supongamos que tiene un módulo que requiere graph.js. Para importar esto, usarías algo como esto:

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

Ahora <jdoc:include type="head" /> obtiene el código anterior y lo inyecta en el <head> para usted para que no tenga que hacerlo manualmente. Por lo tanto, manténgalo allí y no lo elimine. También se requerirán algunos scripts centrales que se envían con Joomla.

Si desea utilizar módulos en su sitio, no puede simplemente agregar el código HTML a su index.php y esperar que funcione correctamente y sea dinámico. Por eso usamos:

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

que importa el módulo y la estructura HTML que codificó con. Usted puede sin embargo agrega HTML personalizado para envolver el módulo de esta manera:

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

No es muy complejo y también hace la vida mucho más simple. Joomla no se basa en un enfoque estático, por lo tanto, debe atenerse a la forma en que funciona.

4
Lodder

Cuando comencé, las plantillas listas para usar de Joomla no eran tan limpias, y eso era bueno para un principiante.

Tengo una sección de la cabeza que se ve así ...

<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 particular, las hojas de estilo no se incluyen de la manera "agradable" con el addStyleSheet, y como resultado, ¡permanecen donde están, por último! Las hojas de estilo agregadas dinámicamente se insertan en la <jdoc:include type="head" /> punto.

Lo que puede estar sucediendo en su plantilla es que sus hojas de estilo se cargan primero, luego las Joomla agregadas dinámicamente se agregan al final. Todo depende de dónde se llamen las funciones addStyleSheet.

Si está seguro de que tiene todo lo que necesita en la plantilla, y no necesita agregar bits dinámicos adicionales (por ejemplo, para el editor frontend), o para cualquier extensión que agregue, entonces podría salirse con la eliminación de <jdoc:include type="head" />, al menos para una plantilla de principiante.

O ... simplemente agregue sus hojas de estilo en un punto fijo, fuera de la cabeza incluida.

Una vez que superes a un principiante, probablemente quieras incluir la sección de la cabeza. Hay formas de manipular el contenido dinámico, aunque no necesariamente para un principiante. Por ejemplo, para la depuración, tengo una hoja de estilo que agrego dinámicamente usando una extensión personalizada, si soy el usuario conectado.

1
Peter Wiseman

Si sus estilos se anulan, sin duda se debe al css de Bootstrap, ya que utiliza algunos selectores de alta especificidad.

¿Su sitio estático usa Bootstrap? Si no es así, es casi seguro que esté mejor sin ella en su plantilla de Joomla. Solo terminarás luchando con eso. Creo que esto es lo que ya has visto.

Si su sitio estático no utilizó Bootstrap también, entonces puede olvidar mejor toda la charla aquí MENOS y simplemente incluir su propio CSS y JS, como lo ha hecho. No lo hace tiene que usar Bootstrap en su plantilla de Joomla.

1
Seth Warburton