¡8 consejos y técnicas para modificar Joomla! Plantillas

Spanish (Español) translation by Ghea Deny Saputra (you can also view the original English article)

¡Empezando a crear un Joomla! ¿plantilla y confundido acerca de cómo realmente conseguir una manija en modificarlo? Revisa estos consejos y trucos que le darán mejor control al diseño de su sitio web Joomla.

Cuando empecé a crear plantillas de Joomla se fueron algunas cosas de que estaba confundida acerca. ¿Cómo debo modificar una única página sin afectar a otros? ¿Cómo cambiar la estructura de un módulo para que sea más fácil de estilo? En este artículo revisaremos cómo remediar estos problemas así como mirar otras soluciones rápidas se puede utilizar para acelerar su trabajo de desarrollo Joomla plantilla.

Resumen de la lección:

Configuración de un host local instalación de Joomla.
Elegir un marco de buena plantilla para trabajar con (por lo que no estamos reinventando la rueda).
Utilizando datos de la URL desde el navegador a páginas individuales de estilo en Joomla.
Posiciones de módulo que se derrumba.
Iniciar sesión en estilo.
Usando sufijos de clase del módulo para hacer módulos únicos.
Modificar plantillas de módulo por lo que son fáciles de estilo.
Añadir en condicionales de IE viejo regulares para corregir errores de Internet Explorer

Consejo 1: Instalación de Localhost Joomla

Antes de poder modificar y desarrollar su plantilla, necesita tener una instalación de Joomla para trabajar con. Usando WAMP para windows y MAMP para Mac (que va ser usando WAMP para este ejemplo), vamos a crear una simple instalación de Joomla alojada en tu ordenador para que pueda comenzar con las modificaciones de plantilla.

En primer lugar, vaya a www.wampserver.com/en. En la página de Inicio haga clic en "descargar la última versión de Wampserver 2".

Ahora haga clic en el enlace de descarga para la versión 32-bit o 64-bit versión de WAMP (dependiendo de qué versión de Windows tienes). Si no sabes que versión tienes, haga clic en el start orb y tipo "dxdiag" en el campo de búsqueda. Dentro de la herramienta diagnóstico de DirectX le dirá qué versión se está ejecutando junto al sistema operativo. Descargar WAMP y ejecutar el .exe para instalar el programa usando el directorio predeterminado de C:\wamp. También pedirá que navegador que desea utilizar para la vista previa por defecto, pero nunca usar esto así que solo seleccione explorer.exe. No vamos a ser uso de SMTP o correo electrónico tan solo dejar aquellos como los valores por defecto y luego ejecutar WAMP.

Un icono aparecerá en la bandeja de la barra de tareas para el WAMP y debe ser naranja. Esto significa que el servidor localhost sin conexión. Para convertirlo en línea (por lo que puede empezar a trabajar con él) haga clic en el icono y seleccione "Iniciar todos los servicios". Luego haga clic en el icono nuevo y seleccione "Poner en línea". Con esto iniciará el servidor localhost en la máquina.

Nota: Si tienes cosas como Skype o Teamviewer corriendo en tu computadora, esto evitará WAMP en línea así que asegúrese de que desactivar estos programas antes de intentar iniciar el host local.

Ahora que ya tenemos el servidor localhost configurado, podemos proceder a descargar la última instalación de Joomla para trabajar con. La última versión de Joomla es actualmente 1,7 pero vamos a estar usando Joomla 1.5 para este tutorial; es más estable y tiene más extensiones y plantillas disponibles para él.

Ir a www.joomla.org. Una vez allí haga clic en el botón "Descargar Joomla" en la mitad derecha de la página. Desplácese hacia abajo y buscar la última versión de Joomla 1.5. En el momento de escribir esto es 1.5.23 y queremos el paquete completo, por lo tanto, haga clic en el enlace titulado "ZIP" para descargarlo. Ahora vaya al directorio de C:\wamp\www y crear una nueva carpeta llamada "joomla". Copie el archivo zip de Joomla que acabas de descargar en esta carpeta y extraer con una herramienta como 7zip o WinRAR que están disponibles para descargar desde download.com. Esto extrae todo el paquete de Joomla en ese directorio y le permiten instalarlo.

Para instalar Joomla, vaya a su navegador y escriba "localhost/joomla/installation". Si todo ha ido bien, mostrará la página "Seleccionar idioma". Elige tu idioma y haz clic en el botón "siguiente" en la esquina superior derecha. Para la comprobación previa a la instalación, no necesita modificar nada, así que haga clic en "siguiente". De nuevo, haga clic en "siguiente" para aceptar la licencia pública GNU.

Aquí viene la parte más importante de la instalación: creación de la base de datos y usuario. Actualmente todavía no tenemos un sistema para arriba por lo crearemos ahora.

Para crear la base de datos y usuario de base de datos, vamos a usar PHPmyadmin para el WAMP. Haga clic en el icono del WAMP en la barra de tareas y seleccione "PHYmyadmin" en la parte superior de la ventana emergente. Esto abrirá PHPmyadmin en tu navegador. La primera pantalla es donde vamos a crear la base de datos para Joomla.

En el campo "Crear nueva base de datos", escriba el nombre de la base de datos de su elección. Algo así como "plantilla" será suficiente. La base de datos es creado y le mostrará que hay no hay tablas en ella. El siguiente paso es crear un usuario con todos los permisos para que la base de datos puede accederse por Joomla. Ir a la pestaña "Privilegios" en la parte superior y haga clic en "Agregar nuevo usuario".

En esta nueva pantalla, escriba el nombre de usuario que desea utilizar. Elegí "template_user" como mi nombre de usuario y "1234" para mi contraseña. Obviamente en un servidor real que quiera usar algo mucho más seguro que esto para el usuario y la contraseña, pero para localhost no es muy relevante. Para el relleno del campo de host "localhost". Ahora debajo, donde dice base de datos de usuario, el valor predeterminado debe ser el último botón de radio. Si no es así, haga clic en el último botón de radio que dice algo como "Conceder todos los privilegios sobre la base de datos 'plantilla'". Bajo que, junto a los privilegios globales, haga clic en el enlace "Ver todos" y haga clic en el botón "Go" en la esquina inferior derecha.

A continuación es un ejemplo que muestra lo debe parecerse.

Ahora que se crean su usuario y base de datos, puede volver a la pantalla de instalación de Joomla y poner estos artículos en los campos de la base de datos: en primer lugar, tipo de base de datos es "mysql", y luego escriba "localhost" por el nombre de host. Escriba el nombre de usuario que creaste y la contraseña. Para acabar con tipo en el nombre de la base de datos que fue "plantilla" y haga clic en siguiente. En la pantalla de configuración de FTP simplemente dejar todo como está y haga clic en "siguiente" sin habilitar la capa de sistema de archivo FTP.

La última pantalla es la configuración principal para la instalación. Introduzca su nombre de sitio que voy a llamar "Consejos de plantilla". Tipo en su correo electrónico, tu contraseña de administrador (sólo podremos 1234 nuevamente para este ejemplo) y a continuación, confirme la contraseña de administrador. Cuando primero comienzas creando plantillas, recomiendo instalar los datos de la muestra porque da el sitio de un "completo" cuando usted está tratando de diseñar, en lugar de empezar con una pizarra en blanco. Si no instalar datos de ejemplo, cuando vaya a su sitio Joomla después terminamos aquí será bastante en blanco sin contenido en todo estilo.

Nota: Una vez más se convierten en avanzadas con modificación de la plantilla, que no desea instalar datos de muestra ya. Tomará más tiempo para usted dealarsinst todo el contenido ficticio que le ahorrará en ayudar a visualizar el aspecto de la plantilla.

Así que haga clic en el botón "Instalar datos de ejemplo" y haga clic en el botón "siguiente".

El último paso para la instalación de Joomla (lo prometo) es eliminar el directorio "installation" de la carpeta "joomla" que creó en el WAMP. Ir a C:\wamp\joomla y eliminar completamente el directorio de instalación. Ahora vamos a localhost/joomla y verás que se ha instalado Joomla y ya estamos listos para ir con la instalación de la plantilla que vamos a trabajar con.

Consejo 2: Elegir un plantilla marco

Últimamente en los marcos de plantilla Joomla han sido el delirio porque permiten completar una plantilla más rápido y mucho el trabajo ya se ha hecho en la plantilla de sí mismo. Algunos de los frameworks más populares incluyen el marco de YooTheme Warp y el pórtico de Rockettheme. Ambos de estas estructuras fueron construidas desde el suelo hasta remedio tener que mas tediosas tareas repetitivas en cada plantilla y también incluye excelentes funciones, como un características plantilla y backend móviles integradas que le permiten cambiar el aspecto de la plantilla sin incluso modificar cualquier cosa utilizando parámetros de back-end. Para el resto de estos consejos y ejemplos, que usando una plantilla de YooTheme que utiliza el marco de Warp 6.

Nota: Tienes que comprar una suscripción de plantilla de YooTheme para utilizar una plantilla en su sitio y modificarlo, pero merece la pena el dinero extra para ahorrar mucho tiempo en el largo plazo.

Algunos proveedores de marco y el tema son:

No dude en mirar alrededor de cada uno de sus sitios y ver qué plantillas te gusta lo mejor y que marco va a funcionar mejor para usted. Cada proveedor de plantilla tiene sus propias normas que han establecido para su marco por lo que es de gusto personal y de los cuales uno quiere ir con la lista de funciones. Puesto que he elegido para ir con marco de 6 deformación de YooTheme, voy a empezar por instalar una plantilla de 6 deformación en mi servidor localhost.

Después de descargar la plantilla, ir a localhost/joomla/administrator. Escriba "admin" para su nombre de usuario y "1234" para la contraseña iniciar sesión en el backend. En la parte superior barra se ciernen sobre extensiones y haga clic en "Instalar o desinstalar". En el campo de archivo de paquete de carga haga clic en "Examinar" y buscar el paquete de plantilla que ha descargado a su computadora. Ahora, haga clic en el "amplificador de cargar archivo; Instalar"botón. La plantilla ya está instalada, pero para activarlo realmente como la plantilla tienes que completar un paso más.

Ir a "Extensiones" en la barra superior del backend de Joomla y luego haga clic en "Gestor de plantillas". La plantilla que he instalado se titula "yoo_nano" para buscar la plantilla en la lista de plantillas y haga clic en el botón a la izquierda de él. Haga clic en el icono de estrella que es el botón de "Default" en la esquina superior derecha. Ahora la nueva plantilla se establece como el un Joomla utilizará. Actualizar su página web y usted debería ver los cambios!

Consejo 3: Estilo páginas individuales

Esta es probablemente la punta más útil que he aprendido en Joomla, y funciona utilizando los parámetros de URL en la dirección del navegador para especificar estilos para ciertas páginas. Primero, tenemos que insertar el código que atrae las variables desde la URL. Abajo está el código PHP necesario para utilizar las variables más comunes en Joomla, como itemid id, vista, opción, etcetera. Copie y pegue el código siguiente en el<head>de su documento.

<?php
$itemid = (isset($_GET['Itemid'])) ? $_GET['Itemid'] : null;
$view = (isset($_GET['view'])) ? $_GET['view'] : null;
$catid = (isset($_GET['catid'])) ? $_GET['catid'] : null;
$task = (isset($_GET['task'])) ? $_GET['task'] : null;
$id = (isset($_GET['id'])) ? $_GET['id'] : null;
$option = (isset($_GET['option'])) ? $_GET['option'] : null;
$cid = (isset($_GET['cid'])) ? $_GET['cid'] : null;
?>

Ahora, la segunda parte de esta realidad está poniendo estas variables para trabajar como clases CSS en el<body>etiqueta para que pueda tomar ventaja de ellos. Copie y pegue el código siguiente en la clase = "" del elemento body de la plantilla.

cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>

El resultado final debería parecerse a esto:

<body class="cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>">

Ahora echemos un vistazo a los parámetros de la URL de nuestro sitio Joomla. Para empezar, haga clic en uno de los enlaces en la Página principal que va a otra página en el sitio. Por ejemplo, en mi página ha hecho clic en "Continue Reading" como se muestra a continuación. Algunos de los enlaces pueden ser codificado sólo busque un enlace que tiene las variables que muestra que no es motor de búsqueda amistoso.

Ahora si nos fijamos en la barra de direcciones de su navegador, verá los parámetros asociados con esta URL particular como se muestra aquí:

equipo de la huelga de la seguridad de la http://localhost/Joomla/index.php?option=com_content&view=article&ID=44:Joomla & catid = 1:latest-noticias & Itemid = 50

Como se puede ver arriba, la opción para esta página es "com_content". La vista de esta página es "artículo" y el itemid para esta página es "50". Itemid es en referencia a que elemento de menú individual está asociado a este artículo. Recuerde que en Joomla todo tiene que tener un itemid menú asociado si no se pueden asignar módulos a él. Así que usando esta información de la URL, que información está ahora disponible para uso a través de las variables creadas en el<head>del documento.

Echemos un vistazo a la página que estamos ahora. A continuación es un gráfico que muestra las partes desea modificar exclusivamente para esta página y no otros.

La forma más fácil de averiguar dónde está el código CSS para estos dos elementos es utilizar una herramienta de desarrollo como Firebug (para Firefox) o herramientas para los desarrolladores de Webkit (para Chrome). Usando a Firebug, voy a hover sobre estos elementos y mira a ver dónde está el CSS para cada elemento individual.

Como se puede ver, estamos trabajando con una etiqueta H1 con la clase de "título". Digamos que queremos cambiar este color de texto rojo. Mirando a la derecha del panel de Firebug que puedo ver que hay estilos asociados a este elemento en system.css, trebuchet.css, base.css, etcetera. Generalmente desea utilizar la principal plantilla CSS de su plantilla para hacer modificaciones como esta para esta plantilla se llama layout.css. Para la plantilla se podría llamar algo así como template_css. o template.css o incluso base.css. Independientemente de eso, entrar en uno de estos archivos CSS navegando a C:\wamp\joomla\templates\[template name]\css\layout.css. (Esta ruta puede ser diferente para la plantilla). Una vez dentro, desplácese hasta la parte inferior (para asegurarse de que es el estilo más específico en este archivo) y añadir algo de código como este.

1	.itemid-50 #system .title {
2	color: red;
3	}

Guarde el archivo CSS y actualice la página. Si lo has hecho correctamente debería cambiar el título en esta página a rojo. Si al navegar a otra página aunque se dará cuenta no ha cambiado en el resto de ellos. Si se va a cambiar este estilo a nivel mundial afectaría todo el sitio. A continuación es el resultado de ese cambio de estilo:

Para realizar el segundo cambio en el texto "Escrito", yo sólo destacaría el elemento con Firebug la misma forma, figura, cuál es el nombre del mismo y donde está siendo decorado en los archivos CSS y luego utilizar las variables PHP desde la URL al estilo. Así que para el estilo "escrito por" sólo para esta página, voy a hacerlo más grande y color azul.

1	.itemid-50.view-article #system .meta {
2	color: blue;
3	font-size: 15px;
4	}

Aviso sobre utiliza una combinación interesante de la $itemid variable y la variable $view. Puede utilizar CSS para concatenar dos clases juntos para que sea más específica. Lo que esta por encima de código está diciendo es: el itemid debe ser 50 para esta página y debe ser la vista del artículo de otra manera este CSS no se aplica. Te permite apuntar elementos aún más específicamente.

Utilizando la misma idea pero con PHP si declaraciones en lugar de otro: con esta misma idea podemos también ejecutar PHP si declaraciones en el index.php o template.php de plantilla de su sitio para hacer cambios en estas variables de URL basan. Por ejemplo, digamos que tenemos un módulo de posición conjunto con una clase de div llamada "slideshow". Aquí está un ejemplo:

1	<div class="slideshow">
2	here is my slideshow position
3	</div>

Solo quiero esta presentación de diapositivas que aparezca en la página con un itemid de 50 - en ninguna otra parte. Incluso esta acción sobrescribirá la configuración especificada para el módulo en el servidor donde usted decirle en qué elementos de menú que desea que aparezca. Para hacer esto envolvemos un if instrucción alrededor de la cuadra de div como se muestra a continuación:

	<?php if($itemid == '50') : ?>
		<div class="slideshow">
			here is my slideshow position
		</div>
	<?php endif; ?>

Ahora este div sólo se mostrará en esta página y se eliminará el código si no estamos en itemid 50. Utilizar estas técnicas todo el tiempo con las plantillas, y son extremadamente útiles, por lo que recomiendo conseguir muy acostumbrados a usarlos.

Consejo 4: Colapso posiciones de módulo

Plegable módulo de posiciones en Joomla es prácticamente una necesidad a menos que quieras posiciones a aparecer incluso para los módulos de vacíos. Por ejemplo, supongamos que usted tiene un módulo en la columna derecha de tu web en un div llamado "right_col". En una cierta página no desea que la columna de la derecha a aparecer si no hay nada en él. Si no tiene un colapso si la declaración alrededor de esa posición del módulo en particular, incluso si no hay nada habilitado en esa página para esa posición, aún se mostrará. Terminarás con una columna derecha en blanco sin nada en ella.

Para asegurarse de que la columna de la derecha se derrumba cuando es vacío, puede localizar una posición de módulo existente o crear los suyos propios. Las plantillas de diferentes tienen maneras diferentes de crear los módulos de conteo si declaración (countModules es el hundimiento si declaración). Para la plantilla de Warp 6, está escrito hacia fuera como este:

//this is the warp 6 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if ($this['modules']->count('breadcrumbs')) : ?>
	<section id="breadcrumbs"><?php echo $this['modules']->render('breadcrumbs'); ?></section>
<?php endif; ?>

Pero para las otras plantillas, podría ser más simple como esto: (el código siguiente es la forma más común de escribir la countModules si declaración)

//this is the warp 5 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if($this->countModules('right')) : ?>
		<div class="right_column">
				<jdoc:include type="yoomodules" name="right" style="yoo" />
		</div>
<?php endif; ?>

Nota: En el fin de la countModules trabajar, debe existir una posición de módulo entre el fi instrucción para que pueda ver si algo se publica en esa posición o no. Por ejemplo, en el código anterior la countModules está mirando para ver si algo se publica en la posición "correcta". Si no, no se mostrará el div toda clase right_column. Si hay algo publicado en esta posición, se mostrará todo entre el inicio de la fi comunicado y el endif de cierre.

En esencia, es un concepto simple que permite que su página sea más dinámica, así que si querías diversas páginas con diferentes diseños esto es lo que le permite hacer eso. Trate de combinar la countModules si declaración de la variable de URL consejos sobre para flexibilizar aún más la plantilla. Puesto que Joomla es un sistema de gestión de contenidos, la idea detrás de ella debe ser dinámica y flexible.

Consejo 5: Iniciar sesión en estilo

Supongamos que desea mostrar un elemento específico en la página sólo si el usuario está logueado. Esto podría ser útil si usted quiere gente para registrarse en su sitio antes de que puede obtener acceso al contenido. Hay maneras mucho más robustos de usar controles de acceso en Joomla, además de esto, pero como una forma rápida de cambiar algo basado en si el usuario está logueado en este tip funciona perfectamente. Abajo está el código que necesitas:

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "<div id=\"members\">";}else{}
?>

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "</div>";}else{}
?>

Ambas piezas de código son idénticos, excepto que uno abre el id del div de miembros y el segundo pedazo de código cierra ese div. Qué es la primera pieza de código y ponerlo justo debajo de la abertura<body>etiqueta. Tome la segunda pieza de código y ponerlo justo antes de su cierre</body>etiqueta. Guarde la página y actualizar. Ahora si vas a su sitio, mira firebug y recorrer el DOM (módulo de objeto de documento) en el panel izquierdo se dará cuenta que el id del div de «miembros» ahora es envolver todo el sitio. Este div sólo aparecerá si la persona ha ingresado.

Veamos un ejemplo simple de lo que podría hacer con este código. Supongamos que por alguna razón que quiero el color de fondo de cabecera en mi pagina diferentes para usuarios registrados. Esto es muy fácil de hacer ahora ya puedo usar el id #members para especificarlo.

1	#members #header {
2	background:blue;
3	}

Eso es bastante mucho todo hay. Esto podría ser útil para cambiar un fondo en un módulo, o en otras posiciones a través de su sitio (para reflejar una promoción o cualquier cosa que se te ocurran).

Consejo 6: Módulo clase sufijos

Se puede venir un tiempo cuando estás desarrollando una plantilla donde desea hacer un módulo específico tiene mira siente que ningunos otros compartir. Por ejemplo, supongamos que usted tiene un módulo de mensajes del foro que alguien quiere patrocinar y quieren que su logotipo al lado del título del módulo diciendo "Desarrollado por XYZ" o algo en ese sentido. Estos se hacen posibles por lo que se denominan sufijos de clase del módulo. Un sufijo de clase del módulo es una clase adicional añadida en a través de los parámetros del backend del módulo sí mismo. Por ejemplo, primero echemos un vistazo a cómo agregar un sufijo de clase del módulo.

Una vez más, diferentes marcos de trabajo de diversas maneras pero en este caso la forma de agregar un sufijo de clase del módulo es poniendo estilo-[lo que el sufijo va a ser]. Otras plantillas puede que precise-[el nombre de sufijo] sin el estilo frente a ella. Te recomiendo mirar la documentación de su marco particular para aclarar.

Entra en el backend de localhost instalar Joomla en localhost/joomla/administrator. Desplácese hasta la barra superior, ir a "Extensiones" y haga clic en Administrador de módulo. Encontrar el módulo específico que desea trabajar con, o incluso crear uno nuevo si quieres. Para este ejemplo creé un módulo llamado "Sufijo de clase del módulo" y ponerlo en la columna derecha de mi plantilla. A continuación es un gráfico de como luce la página:

Es en el lado derecho hay un campo llamado "Sufijo de clase del módulo" y pongo en el agua de estilo como mi sufijo ya que es una plantilla de deformación. Estos cambios se aplican al módulo y luego ir a la interfaz. Si usas firebug y flotar sobre el módulo que has creado, debe mostrar que el sufijo de clase es una clase CSS en el propio módulo.

Ahora puede utilizar este estilo el módulo sin embargo desea y solo afectará a este módulo (o cualquier otra que asigne este sufijo de clase del módulo a). Aquí está un ejemplo del código que usé para crear un estilo simple de este módulo:

.style-water h3.module-title {
	color: blue;
}

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

Y aquí hay un antes y después de la captura de pantalla de los cambios:

Si no desea que este módulo para ver como esta ya, sólo quitar el sufijo de clase del módulo de parámetros en el administrador de módulo y vuelve a la predeterminada. A continuación veremos cómo modificar la plantilla real del módulo para tener mejor control de la producción y el estilo.

Consejo 7: Más fácil módulo plantillas

Sufijos de clase del módulo son grandes para el diseño de módulos individuales, pero ¿qué sucede cuando desea cambiar la plantilla real del módulo? Cada vez que una plantilla, una de las cosas que me gusta hacer es facilitar el módulo estilo creando una estructura div como esta:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
		
		</div>
		
		<div class="module_middle">
		
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

Es tan bueno tenerlo como plantilla de módulo porque puede lograr un montón de diseños diferentes para un módulo solo con estos tres divs. Cortar desde Photoshop y convertirlo en la plantilla es mucho más fácil de esta manera. Eche un vistazo al diseño original del módulo en la plantilla que estoy usando:

Tenemos una etiqueta h3, una etiqueta de párrafo, y eso es todo. No se puede aplicar mucho estilo a este módulo con solo estos dos elementos, por lo que para facilitar el estilo, debemos modificar la plantilla del módulo en sí. Nuevamente, esto varía según la plantilla, pero en general, está buscando los mismos archivos, ya que pueden estar en diferentes lugares.

Para esta plantilla en particular estoy buscando estos archivos:

[nombre de la plantilla] \ warp \ layouts \ modules \ templates \ default-1.php
[nombre de la plantilla] \ layouts \ module.php

default-1.php es el archivo de plantilla de módulo real y module.php controla qué plantillas de módulo están asociadas con qué posiciones. ¿Cómo supe que default-1.php era la plantilla de módulo que se usaba para la columna correcta? Mediante el uso de module.php puedo ver qué plantilla está asociada con la columna derecha mediante este código:

// set default module types
if ($style == '') {
	if ($module->position == 'top-a') $style = 'line';
	if ($module->position == 'top-b') $style = 'line';
	if ($module->position == 'bottom-a') $style = 'line';
	if ($module->position == 'bottom-b') $style = 'line';
	if ($module->position == 'innertop') $style = 'line';
	if ($module->position == 'innerbottom') $style = 'line';
	if ($module->position == 'sidebar-a') $style = 'line';
	if ($module->position == 'sidebar-b') $style = 'line';
}

Como puede ver arriba, cada posición del módulo tiene un estilo $ asociado. En este caso todos se llaman "línea". Para esta plantilla, la columna de la derecha en realidad se llama barra lateral, así que busqué la barra lateral y descubrí que el estilo $ era igual a "línea". Desplazándome más hacia abajo en este archivo, puedo ver qué plantilla de módulo está asociada con el estilo $ de "línea".

switch ($style) {

	case 'line':
		$template		= 'default-1';
		$style			= 'mod-'.$style;
		$style			.= ($color) ? ' mod-line-'.$color : '';
		$split_color	= 1;
		$subtitle		= 1;
		$title_template = '<h3 class="module-title">%s</h3>';
		break;

	case 'dropdown':
		$template		= 'dropdown';
		$subtitle		= 1;
		break;

	case 'raw':
		$template		= 'raw';
		break;

	default:
		$template		= 'default-1';
		$style			= $suffix;
		$title_template = '<h3 class="module-title">%s</h3>';
}

En este caso de cambio, puede ver que la línea 'case' tiene la plantilla $ de "default-1". El estilo de módulo predeterminado para todas las posiciones también es el valor predeterminado-1, a menos que se especifique lo contrario. Ahora que sé qué plantilla de módulo está asociada con esta posición de módulo, puedo editarla según mis necesidades.

Al abrir default-1.php ahora, podemos ver que el código se ve así:

<div class="module <?php echo $style; ?> deepest">

	<?php echo $badge; ?>
	<?php if ($showtitle) echo $title; ?>
	<?php echo $content; ?>
		
</div>

Como puedes ver, es bastante simple. No hay muchos divs para diseñar. Queremos agregar los divs que te mostré arriba para que este módulo sea más fácil de controlar. Cambie el código de arriba para verse así:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
			<?php if ($showtitle) echo $title; ?>
		</div>
		
		<div class="module_middle">
			<?php echo $content; ?>
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

Me deshice de la insignia porque no quería que apareciera en la plantilla de mi módulo, pero podría conservarla si lo desea. El distintivo es solo un estilo que las plantillas Warp tienen asociado con los sufijos de clase de módulo. Ahora que tenemos este diseño en su lugar, es mucho más fácil diseñar el módulo. A continuación se muestra un ejemplo de más flexibilidad:

Y aquí está el código para lograr este estilo (sé que estas son combinaciones de colores muy feos, pero se utilizan con fines ilustrativos:

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

.style-water .module_header {
	font-size: 18px;
	font-weight: bold;
	background: blue;
	color: white;
	padding: 10px;
}

.style-water .module_header h3 {
	margin: 0;
}

.style-water .module_middle {
	background: white;
	padding: 10px;
} 

.style-water .module_bottom {	
	height: 15px;
	background: red;
}

Consejo 8: corregir errores de Internet Explorer

Todos sabemos que Internet Explorer es la pesadilla de nuestra existencia, por lo que no puedo completar este tutorial sin incluir los condicionales básicos de IE que le permiten diseñar elementos en la página según la versión de IE que elija. Este no es un consejo específico de Joomla, pero le mostraré cómo aplicarlo en Joomla.

Nota: este método es para soluciones rápidas y no debe utilizarse para corregir todos los errores de IE. Si tiene muchos errores que deben solucionarse, debe usar una hoja de estilo solo para IE que solo se cargue cuando la gente está usando ese navegador en particular.

Es bastante simple incluir estos condicionales en su plantilla de Joomla. Aprovechando la forma en que funcionan los sistemas de administración de contenido, puede colocar los condicionales en su archivo de plantilla principal y funcionará en todo el sitio, lo que ahorra mucho tiempo. A continuación se muestra un ejemplo de los condicionales de IE:

1	<!--[if IE 7]>
2	<div id="ie7">
3	<![endif]-->
4
5	<!--[if IE 7]>
6	</div>
7	<![endif]-->

Como puede ver arriba, estoy apuntando a Internet Explorer 7 con estos condicionales. También puede apuntar fácilmente a otras versiones de IE simplemente cambiando el 7 por un 6 o un 8. Ponga la primera condicional justo debajo de su etiqueta de apertura <body> y luego ponga la segunda condicional justo encima de la etiqueta de cierre </body> como lo hicimos nosotros Lo hice con el miembro que inició sesión condicional que usamos anteriormente. Ahora utilizando CSS puede hacer pequeños cambios para corregir errores en su sitio. Digamos que tiene una barra de búsqueda y el texto es demasiado alto en IE7. Si cambiara el CSS para el elemento directamente, afectaría a todos los navegadores que lo estaban mostrando correctamente y en su lugar los estropearía. La mejor manera es escribir el css así:

1	#ie7 .searchbar {
2	line-height: 20px;
3	}

Ahora estoy usando un selector específico que está envolviendo toda la página web para apuntar solo al error en Internet Explorer 7 y no afectará a los otros navegadores más modernos que lo representaron correctamente para empezar. Una vez más, no solucionaría todos los errores de IE de esta manera, ya que hincharía la hoja de estilo principal del sitio. Para soluciones rápidas es una manera fácil de hacer el trabajo.

Conclusión

¡Eso es todo por estos consejos rápidos sobre plantillas de Joomla! Espero que estos consejos sean de utilidad para tus aventuras en el diseño de plantillas de Joomla y te faciliten la personalización de tu sitio web. Gracias por leer.