Recursos web, diseño, joomla!, tutoriales, opinión, algunas noticias...

Suscríbete a través del feed RSS
Cómo crear un template para Joomla! (Segunda parte)
Lunes, 09 de Abril de 2007 16:40

Joomla!Segunda parte del tutorial sobre como crear un template para Joomla! 

 

  

En esta continuación me enfocaré a hablar sobre el CSS de la plantilla. Pensaba explicar también la creación de ' TemplateDetails.xml ' pero debido a lo largo que es este capítulo preferí dejar la explicación para la tercera parte. La apariencia de la plantilla cuando terminemos será:

 

Template Final

 

Está inspirado en Sangre Brillante, una plantilla de Jonathan Lewenhaupt (que seguramente adaptaré más adelante).

 

 

El CSS de Joomla!

 

A diferencia de otros CMS,  en Joomla! no queda elemento que no podamos modificar a través de CSS. Esto es porque posee clases y estilos específicos para cada módulo, componente, mambots, los que ya vienen por default  y  los que podemos crear nosotros en la administración.

Dependiendo del punto de vista esta inmensa cantidad de información puede ser un poco desorientadora  o convertirse en una ventaja.

De cualquier forma, Gustavo enlista todas las clases y elementos de Joomla! (podrán ver que es bastante).

Por eso lo que vamos a hacer es poner a punto la maquetacion que teniamos y luego explicar los elementos y clases más importantes de este CMS [ Leer más ]

 

 

Puesta a punto de la maquetación.  

 

Recuerdan que en la primera parte partimos de un layout a tres columnas, header y footer [ Ver Layout ]. Lo único que hicimos con él fue tomar su CSS para crear el archivo ' template_css.css '. Ahora modificaremos a este último para dejar la maquetación "en bruto". En otras palabras sacaremos los colores de fondo, bordes, tipo de fuente y tamaño. Además quitaremos el alto de las tres columnas. 

Por lo tanto el CSS original era:

 

CSS
  1. * {padding: 0; margin: 0; }
  2.  
  3. body {
  4.  font-family: Arial, Helvetica, sans-serif;
  5.  font-size: 13px;
  6. }
  7. #wrapper {
  8.  margin: 0auto;
  9.  width: 922px;
  10. }
  11. #header {
  12.  color: #333;
  13.  width: 900px;
  14.  float: left;
  15.  padding: 10px;
  16.  border: 1px solid #ccc;
  17.  height: 100px;
  18.  margin: 10px 0px 5px 0px;
  19.  background: #BD9C8C;
  20. }
  21. #leftcolumn {
  22.  color: #333;
  23.  border: 1px solid #ccc;
  24.  background: #E7DBD5;
  25.  margin: 0px 5px 5px 0px;
  26.  padding: 10px;
  27.  height: 350px;
  28.  width: 195px;
  29.  float: left;
  30. }
  31. #content {
  32.  float: left;
  33.  color: #333;
  34.  border: 1px solid #ccc;
  35.  background: #F2F2E6;
  36.  margin: 0px 5px 5px 0px;
  37.  padding: 10px;
  38.  height: 350px;
  39.  width: 456px;
  40.  display: inline;
  41. }
  42. #rightcolumn {
  43.  color: #333;
  44.  border: 1px solid #ccc;
  45.  background: #E7DBD5;
  46.  margin: 0px 0px 5px 0px;
  47.  padding: 10px;
  48.  height: 350px;
  49.  width: 195px;
  50.  float: left;
  51. }
  52. #footer {
  53.  width: 900px;
  54.  clear: both;
  55.  color: #333;
  56.  border: 1px solid #ccc;
  57.  background: #BD9C8C;
  58.  margin: 0px 0px 10px 0px;
  59.  padding: 10px;
  60. }

 

 

Quitando los atributos que nombré quedará:

 

  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }
  5.  
  6. body{
  7.  
  8. }
  9.  
  10. #wrapper {
  11.  margin: 0auto;
  12.  width: 922px;
  13. }
  14.  
  15. #header {
  16.  width: 900px;
  17.  float: left;
  18.  padding: 10px;
  19.  height:42px;
  20.  padding-bottom:30px;
  21. }
  22.  
  23. #leftcolumn {
  24.  margin: 0px 5px 5px 0px;
  25.  padding: 10px;
  26.  width: 195px;
  27.  float: left;
  28. }
  29. #content {
  30.  float: left;
  31.  margin: 0px 5px 5px 0px;
  32.  padding: 10px;
  33.  width: 456px;
  34.  display: inline;
  35. }
  36. #rightcolumn {
  37.  margin: 0px 0px 5px 0px;
  38.  padding: 10px;
  39.  width: 195px;
  40.  float: left;
  41. }
  42. #footer {
  43.  width: 900px;
  44.  clear: both;
  45.  margin: 0px 0px 10px 0px;
  46.  padding: 10px;
  47. }

 

De esta forma obtenemos el layout en bruto para poder trabajar en él. Ya podemos empezar con los estilos más importantes de Joomla!

 

 

Estilos referentes al contenido principal.

 

  • .contentheading:  Podemos controlar el estilo de los títulos de los artículos. Ejemplo:

CSS
  1. .contentheading {
  2. font: 2.5em "Times New Roman", Times, Serif;
  3. letter-spacing: -0.05em;
  4. color: #96D377;
  5. }
  6.  
  7. .contentheading a{
  8. color: #79B33A;
  9. }
  10.  
  11. .contentheading a:hover{
  12. color: #96D377;
  13. }

 

Además le hemos agregado que, cuando el mouse pase sobre el titulo, este cambie de color.

 

 

  • .contentpaneopen:  Podemos controlar el contenido mostrado en cada artículo. Ejemplo:

CSS
  1. .contentpaneopen{
  2. color: #4F4F4F;
  3. padding:020px 00;
  4. text-align:justify;
  5. }
  6.  
  7. .contentpaneopen li{
  8. padding:030px 0 10px;
  9. background: url(../images/lista.gif)no-repeat0 5px;
  10. list-style:none;
  11. }

 

En el ejemplo especificamos un color, padding y alineación del texto. Además especificamos como se deben mostrar las listas. Vean que se le agregó una imagen llamada ' lista.gif ' la cual está guardada en la carpeta ' images ' dentro del template.

 

 

  • .createdate / .modifydate: Controlamos la fecha de creación / modificación del artículo. Ejemplo:

CSS
  1. .createdate, .modifydate{ 
  2. font-size: 0.8em;
  3. color: #5F5F5F;
  4. }

 

 

  • .readon:  Controlamos la manera de mostrar el link ' Leer más... ' Ejemplo:

CSS
  1. .readon, .readon:hover{
  2. color: #497858;
  3. text-decoration:underline;
  4. }

 

 

  • .pagenav_next / .pagenav_prev / .back_button: Son las clases que controlan los links ' Siguiente ' , ' Anterior ' y ' Volver '



Estilos referentes a los módulos

 

Conté en la primera parte, que nosotros podemos especificar el estilo en que se mostraran los módulos: tablas, divs, en bruto. El asunto es que cada estilo posee clases diferentes. Por ejemplo si nosotros cargamos un módulo en divs [ mosLoadModules (left, -2) ] la clase contenedora será ' moduletable '. En cambio si cargamos un modulo con extra divs[ mosLoadModules (left, -3) ] la clase será ' module '. Lo mismo sucede si cargamos el modulo en tablas. Yo en este caso solamente me voy a abocar a nombrar las clases si cargamos los modulos en divs (-2) simplemente porque así se cargaron en el ejemplo del primer tutorial. En todo caso, si cambian el estilo de carga tengan en cuenta lo que dije.

 

 

  • .moduletable: Cada modulo será cargado en un div diferente. Cada uno de estos divs tendrán la clase ' moduletable '. Ejemplo:

CSS
  1. .moduletable{
  2. margin-bottom:20px;
  3. }

 

En el ejemplo hicimos que cada modulo cargado esté separado unos 20px.

 

 

  • .moduletable h3: Es el título de cada módulo. Ejemplo:

CSS
  1. .moduletable h3 {
  2. font:  2em/1em  "Times New Roman", Times, Serif;
  3. letter-spacing: -0.09em;
  4. color: #497858;
  5. border-bottom: 1px solid #A7A37E;
  6. margin-bottom:10px;
  7. }

 

 

  • .moduletable .mainlevel: Es la clase específica para cada elemento de los módulos del tipo menú. Ejemplo:

CSS
  1. .moduletable .mainlevel{
  2. text-decoration:none;
  3. color: #235033;
  4. }

 

 

  • .moduletable .latestnews: Es la clase específica del modulo ' Últimas noticias '. Los títulos son cargados en una lista.

  • .moduletable .mostread: Es la clase específica del modulo ' Popular '.Los títulos son cargados en una lista.


  • .moduletable .search: Es la clase específica del modulo ' Buscador '. Ejemplo:

CSS
  1. .moduletable .search input{
  2. font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
  3. border:1px solid #CCC;
  4. color:#666;
  5. padding:2px 0 2px 5px;
  6. }
  7.  
  8. .moduletable .search input:hover{
  9. background-color:#FFFFF1;
  10. }

 

De esta forma especificamos el color, borde, fuente y padding de la caja de introducción de texto. Además al pasar el mouse sobre él cambia el color de fondo.

 

 

 

Clases personalizadas para los módulos

 

Al principio conté que son muchas las posibilidades que nos da Joomla! para personalizar la plantilla. También nombre que es posible crear nuestras propias clases para cada módulo. Sin ir más lejos, al instalar Joomla! dos módulos tendrán por default clases personalizadas: el módulo ' Menú principal ' y el módulo ' Menú superior '. En la administración, si entramos a la configuración de cualquiera de estos dos módulos veremos en la zona de parámetros:

 

Parámetros


Es decir que podemos especificar una clase tanto para el modulo como para los elementos del menú en sí (esta ultima opción es solo para módulos del tipo menú). En el primer caso al modulo que contiene ' Menú principal ' se le agrego el sufijo ' _menu ' por lo cual la clase final será ' moduletable_menu '. Noten que el sufijo ' _menu ' se acopló a la clase ' moduletable ' nombrada más arriba. En el segundo caso se añadió el sufijo ' -nav ' a los elementos del ' Menú superior '. De esta manera la clase resultante para cada elemento será ' mainlevel-nav '

 

 

Estilos de los menús

 

Los módulos del tipo menú son los que más posibilidades de personalización entregan. Además de poder crear una clase única para cada modulo y cada elemento del menú, nos permiten elegir de que manera mostrar los elementos: de forma vertical, de forma horizontal o en lista: 

 

Parametros


La manera de mostrar los elementos va a depender del tipo de menú que tengamos. Tanto en la manera ' Vertical ' como  ' Horizontal ' los elemento se cargan en una tabla. Si elegimos ' lista ', los elementos se cargan en una unica lista. Por eso es conveniente tener en cuenta como esta puesto este parámetro para que no existan problemas al diseñar la plantilla.

 

 

Estilos globales:  

 

Ahora nos queda agregar un par de reglas para elementos globales como body, img, li, a, etc. Es muy importante las reglas que establezcamos en la hoja de estilos en cascada con respecto al body del documento. Esto es debido a que el editor WYSIWYG de Joomla! tomará estas reglas para mostrarnos el contenido a medida que lo vamos agregando. Por eso, recomiendo que las reglas de body tan solo sean sobre el tipo de fuente, color, y color del background:

 

 

CSS
  1. body{
  2. font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
  3. background: #FFFFFF;
  4. color: #4F4F4F;
  5. }

 

 

Si por ejemplo especificamos más reglas (alineación del texto, imagen de fondo, etc) cuando estemos  usando el editor WYSIWYG será muy dificultoso crear los artículos. En caso de que necesitemos agregar más información del estilo, tan solo creamos un div contenedor del body y ahí si ponemos las reglas que queramos.

Especificamos un par de reglas para los demás elementos:

 

 

CSS
  1. img {
  2. padding: 4px 18px 4px 8px;
  3. }
  4.  
  5. a{
  6. text-decoration:none;
  7. color: #235033;
  8. }
  9.  
  10. li {
  11. list-style:none;
  12. }
  13.  
  14. li a {
  15. font: 1.1em Georgia, "Times New Roman", Times, Serif;
  16. color:#046380;
  17. }
  18.  
  19. li a:hover {
  20. color: #4A8797;
  21. }

 

 

Y formateamos el título de la plantilla que está en el header:

 

CSS
  1. #header h1 {
  2. font: 3.5em/1em "Times New Roman", Times, Serif;
  3. letter-spacing: -0.05em;
  4. color: #69BFDE;
  5. border-bottom: 1px solid #A7A37E;
  6. margin-bottom:30px;
  7. }

 

 

Con esto terminamos el archivo ' template_css.css ' , el resultado final ordenado es:

 

CSS
  1. /*----------------------------------------------------
  2. Template de ejemplo para Joomla!
  3. version:   1.0
  4. date:      09/04/07
  5. author:    [Leandro D´Onofrio]
  6. email:     [ Esta dirección de correo electrónico está protegida contra robots de spam. Necesitas activar JavaScript para poder verla ]
  7. website:   [www.leandrodonofrio.com]
  8. Maquetación:
  9. Created by Keith Donegan of Code-Sucks.com
  10. E-Mail: Esta dirección de correo electrónico está protegida contra robots de spam. Necesitas activar JavaScript para poder verla
  11. You can do whatever you want with these layouts,
  12. but it would be greatly appreciated if you gave a link
  13. back to http://www.code-sucks.com
  14. ------------------------------------------------------*/
  15.  
  16.  
  17. /* Estilos globales
  18. ------------------------------------------------------*/
  19. * {
  20. margin: 0;
  21. padding: 0;
  22. border: 0;
  23. }
  24.  
  25. body{
  26. font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
  27. background: #FFFFFF;
  28. color: #4F4F4F;
  29. }
  30.  
  31. img {
  32. padding: 4px 18px 4px 8px;
  33. }
  34.  
  35. a{
  36. text-decoration:none;
  37. color: #235033;
  38. }
  39.  
  40. li {
  41. list-style:none;
  42. }
  43.  
  44. li a {
  45. font: 1.1em Georgia, "Times New Roman", Times, Serif;
  46. color:#046380;
  47. }
  48.  
  49. li a:hover {
  50. color: #4A8797;
  51. }
  52.  
  53.  
  54. /* Header
  55. ------------------------------------------------------*/
  56. #header h1 {
  57. font: 3.5em/1em "Times New Roman", Times, Serif;
  58. letter-spacing: -0.05em;
  59. color: #69BFDE;
  60. border-bottom: 1px solid #A7A37E;
  61. margin-bottom:30px;
  62. }
  63.  
  64.  
  65. /* Maquetación
  66. ------------------------------------------------------*/
  67. #wrapper {
  68.  margin: 0auto;
  69.  width: 922px;
  70. }
  71.  
  72. #header {
  73.  width: 900px;
  74.  float: left;
  75.  padding: 10px;
  76.  height:42px;
  77.  padding-bottom:30px;
  78. }
  79.  
  80. #leftcolumn {
  81.  margin: 0px 5px 5px 0px;
  82.  padding: 10px;
  83.  width: 195px;
  84.  float: left;
  85. }
  86. #content {
  87.  float: left;
  88.  margin: 0px 5px 5px 0px;
  89.  padding: 10px;
  90.  width: 456px;
  91.  display: inline;
  92. }
  93. #rightcolumn {
  94.  margin: 0px 0px 5px 0px;
  95.  padding: 10px;
  96.  width: 195px;
  97.  float: left;
  98. }
  99. #footer {
  100.  width: 900px;
  101.  clear: both;
  102.  margin: 0px 0px 10px 0px;
  103.  padding: 10px;
  104. }
  105.  
  106. /* Estilos para Joomla!
  107. ------------------------------------------------------*/
  108.  
  109. /*Estilos referentes al contenido principal*/
  110. .contentheading {
  111. font: 2.5em "Times New Roman", Times, Serif;
  112. letter-spacing: -0.05em;
  113. color: #96D377;
  114. }
  115.  
  116. .contentheading a{
  117. color: #79B33A;
  118. }
  119.  
  120. .contentheading a:hover{
  121. color: #96D377;
  122. }
  123.  
  124. .contentpaneopen{
  125. color: #4F4F4F;
  126. padding:020px 00;
  127. text-align:justify;
  128. }
  129.  
  130. .contentpaneopen li{
  131. padding:030px 0 10px;
  132. background: url(../images/lista.gif)no-repeat0 5px;
  133. list-style:none;
  134. }
  135.  
  136. .createdate, .modifydate{ 
  137. font-size: 0.8em;
  138. color: #5F5F5F;
  139. }
  140.  
  141. .readon, .readon:hover{
  142. color: #497858;
  143. text-decoration:underline;
  144. }
  145.  
  146. .pagenav_next a, .pagenav_prev a{
  147. text-decoration:none;
  148. color:#77C727;
  149. font-weight: bold;
  150. }
  151.  
  152.  
  153. /*Estilos referentes a los módulos*/
  154. .moduletable, .moduletable_menu{
  155. margin-bottom:20px;
  156. }
  157.  
  158. .moduletable h3, .moduletable_menu h3 {
  159. font:  2em/1em  "Times New Roman", Times, Serif;
  160. letter-spacing: -0.09em;
  161. color: #497858;
  162. border-bottom: 1px solid #A7A37E;
  163. margin-bottom:10px;
  164. }
  165.  
  166. .moduletable .search input{
  167. font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
  168. border:1px solid #CCC;
  169. color:#666;
  170. padding:2px 0 2px 5px;
  171. }
  172.  
  173. .moduletable .search input:hover{
  174. background-color:#FFFFF1;
  175. }
  176.  
  177. .moduletable .mainlevel{
  178. text-decoration:none;
  179. color: #235033;
  180. }

 

 

No se agregó nada más de lo que se mostró, tan solo comentarios para organizar el CSS [Descargar ejemplo ]

 

En la tercera y última parte del tutorial explicaré como crear el ' TemplateDetails.xml ' y hablar sobre un par de puntos que deje en el tintero.

 

 

 
 

¿Te ayudó este artículo?Puedes suscribirte al feed RSS ó dejar tu email para recibir las últimas noticias, tal como lo hacen actualmente las 2719 personas que siguen al blog

Comentarios (32)
1
Viernes, 10 de Agosto de 2007 12:32
Pregunta de Novato:
como andas Leandro, soy nuevo (y autodidacta) en diseño, estoy probando y queria hacer un template para joomla desde cero. estoy maquetando un layout css y he tenido varios dolores de cabeza al testearla en distintos browsers. el wrapper y las columnas derecha e izquierda en flotantes son mi pesadilla. de tanto probar elimine el wrapper y a las columnas las puse en posicion absolute lo cual por ahora se ve igual en IE5 y 6 y Mozilla FF.
la pregunta es ¿son aconsejables esos cambios para un template de joomla?
2
Viernes, 10 de Agosto de 2007 12:32
Supongo que no tendrás problemas, siempre y cuando la maquetación esté bien hecha.
sw
3
Viernes, 10 de Agosto de 2007 12:34
genial los dos tutoriales!! bravo!
esperando impaciente la tercera entrega
salu2,
sw.
4
Viernes, 10 de Agosto de 2007 12:35
Enhorabuena!!! geniales los dos tutoriales! también espero impaciente la próxima entrega! buen trabajo...
5
Viernes, 10 de Agosto de 2007 12:35
Gracias por los tutoriales, está todo superclaro. A ver si me dedico a hacer un template propio para mi web. Espero el tercero con muchas ganas...
6
Viernes, 10 de Agosto de 2007 12:36
Me has ahorrado un buen rato de investigación, muchas gracias
7
Viernes, 10 de Agosto de 2007 12:37
Hola Leando, muy útil tu tutorial, aunque me he encontrado con un problema.
Me ha bajado un template que me gusta pero tiene 3 columnas (izqda, central, dcha) y mi sitio web utiliza 2 col. No hay forma de averiguar que hacer para adaptarlo.
En principio debería adaptarse solo, ya que no tengo ningún modulo posicionado en la columna de la izqda, por lo que la columna central debería ocupar ese espacio.
Después querría hacerte otra pregunta, hay alguna forma de adaptar el template a la resolución del usuario? en el de ejemplo he visto que utilizas tamaños fijos para cada columna.
Gracias de antemano.
Por cierto, enhorabuena por la nueva apariencia de la WEB me gusta mucho
8
Viernes, 10 de Agosto de 2007 12:38
No, no se adapta la plantilla a dos columnas por el hecho no tener los módulos izquierdos publicados. Las columnas de una plantilla no están hechas por los módulos, sino por la maquetación hecha en CSS y HTML. Por lo cual si quieres cambiar la plantilla de tres a dos columnas, tienes que modificar a \"index.php\" y \"template_css.css\"
Luego, si quieres que el template se adapte a la resolución del usuario, la plantilla debe estar basada en una maquetación liquida (liquid layout). Saludos
9
Viernes, 10 de Agosto de 2007 12:38
Felicidades esto es de lo mejor que he encontrado en español \"tras el telón de Mr. Joomla\" sin embargo me gustaria saber si Leandono tiene algun articulo o conoce alguno para poder editar mas aun las llamadas de los modulos [mosLoadModules()] es decir, cuando me interesa un modulo en especial pero no todos los elementos que la componen. Se que esto debi escribirlo en la primera parte pero crei que aqui se tocaria un poco ese punto, a pesar de que tengo esa duda aun, no dejo de pensar que se lleva un 10...
10
Viernes, 10 de Agosto de 2007 12:39
Si quieres editar un módulo en especial (supongo que con respecto a su apariencia en CSS) puedes agregarle una clase especial para dicho módulo. La manera está explicada en la parte que dice \"Clases personalizadas para los módulos\"
Si te refieres a las llamadas en PHP de los modulos, muchas más alternativas no hay. Lo que puedes hacer es que cargue el modulo \"en bruto\" y luego agregar todo el HTML que quieras para modificarlo (en el index.php)
AFF
11
Viernes, 10 de Agosto de 2007 12:40
El mejor tutorial que he visto de plantillas. Había leido muchos pero lo único que tenía era una empanada. Con este he podido ver la luz. Ojalá hicieras muchos tan sencillos como este y tan claro?.
12
Viernes, 10 de Agosto de 2007 12:40
:) Termine de leer esta parte del tutorial esta muy buena, la tercera ya esta publciada y voy a leerla ahora esta muy bien explicado todo y entiendo la mayoira de las cosas. Te llevas un 10 Leandro.

Vamos al siguiente modulo.
13
Viernes, 21 de Septiembre de 2007 13:23
Ya Leandro. esta muy bueno tu explicación. Voy a seguir leyendro el 3ero para luego emprezar haciendo prácticas. Gracias
nesi
14
Martes, 20 de Noviembre de 2007 11:18
creo que me servira bastante el tutorial gracias por la informacion
JJ
15
Miércoles, 09 de Enero de 2008 05:39
Gracias, un tutorial excelente.
16
Miércoles, 23 de Enero de 2008 08:58
muy bueno el tutorial
Manu
17
Viernes, 15 de Febrero de 2008 03:45
Enhorabuena, da gusto encontrar un tutorial de plantillas tan bien explicado.
carlos
18
Martes, 26 de Febrero de 2008 03:18
Hola Leandro!
Gracias de antemano por tu tutorial.
Soy totalmente novato. Me gustaria que me dijeras porque al subir plantilla el contenido de la la columna Contenido se solapa con la columna de la derecha. ¿como lo puedo evitar?
jdm
19
Miércoles, 12 de Marzo de 2008 04:31
Gracias por enseñar!!!
20
Domingo, 23 de Marzo de 2008 13:19
Hola Leandro:
Estoy vuelto loco buscando alguna verdadera solución de aplicar un estilo diferente a un menú, por todo internet sale la misma ambigua explicación, tu algo mejoras pero sigo sin entender:
===========================
Es decir que podemos especificar una clase tanto para el modulo como para los elementos del menú en sí (esta ultima opción es solo para módulos del tipo menú). En el primer caso al modulo que contiene \' Menú principal \' se le agrego el sufijo \' _menu \' por lo cual la clase final será \' moduletable_menu \'. Noten que el sufijo \' _menu \' se acopló a la clase \' moduletable \' nombrada más arriba. En el segundo caso se añadió el sufijo \' -nav \' a los elementos del \' Menú superior \'. De esta manera la clase resultante para cada elemento será \' mainlevel-nav \'
===========================
Supongamos que tengo un menú, en el módulo (en joomla) lo personalizo poniendo \"_mimenu\", ok todo perfecto, pero ¿que tengo que poner en mi css?

Por favor no me podrías dar un ejemplo real de css para _mimenu.
21
Lunes, 14 de Abril de 2008 14:24
Como puedeo editar un template de manera grafica?
22
Sábado, 19 de Abril de 2008 11:58
Qué diferencia existe con relación a Joomla 1.5??? maneja los mismos estilos?
23
Viernes, 30 de Mayo de 2008 09:15
Es ub buen articulo, sobre algo que es fundamental y que causa muchos problemas, pero que no hay infomación como la presentan.
Excelente trabajo y las gracias por su generosidad de publicarlo.
Saludos cordiales desde Perú.
24
Miércoles, 20 de Agosto de 2008 12:43
Hola me gsutaria saber si todo esto lo pueden hacer peo tipo video tutorial seria mas sencillon plsssssssssss
25
Jueves, 28 de Agosto de 2008 02:39
Al previsualizar este template me sale:

Call to undefined function mosshowhead() in D:\\xampp\\htdocs\\joomla\\templates\\ev_template\\index.php on line 6

Se supone que esa funcion esta definida no? Que le pasA? por cierto el tutorial mola mucho ^^
26
Martes, 09 de Septiembre de 2008 17:24
Hola, mi nombre es Ariel y me gustaria saber si ya existe una plantilla para joomla que permita al webmaster editar de fortma amigable los colores, fondos, tipografia de las barras y modulos de un site, a traves del Back end y de forma habitual.

Saludos,
Ariel
27
Domingo, 14 de Septiembre de 2008 15:24
Apreciado Leonardo:
He estado leyendo tus manuales y la verdad es que agradezco tu tiempo y esfuerzo en explicarnos el funcionamiento de joomla y templates.
El problema es que me aqueja desde hace tiempo una duda y no he conseguido respuesta alguna, por lo que espero que me puedas ayudar. La cuestión es que me gustaría modificar la palabra \"xxx artículos\" cuando creas una sección con distintas categorías que continen distintos artículos, y sustituirla por items o cualquier otra que convenga. Sabes como puedo hacerlo?
Muchas gracias de antemano
28
Lunes, 15 de Septiembre de 2008 08:09
Hola Leandro. Muchas gracias por el tutorial. ¿Podría hacerte una pregunta? Yo siempre he trabajado con maquetación CSS pero en páginas estáticas y añadiendo JavaScript, Flash, etc. Hace un par de meses me pude a estudiar el manejo de Joomla y más o menos se como se maneja. El caso es que un cliente me ha pedido una página dinámica para incluir artículos semanalmente y, leyendo tu artículo, parece que estaré capacitado para crear la plantilla desde cero y aplicarsela a Joomla. ¿Podría realmente usar Joomla y añadirle una maquetación CSS no demasiado simple o me estaría metiendo en un lío del que seria dificil salir? Pregunto, ya que tu tendrás experiencia, por si me estoy perdiendo algun problema gordo (e insalvable) con el que me encontraré.
Gracias de nuevo.
29
Viernes, 03 de Octubre de 2008 00:59
hola. Quiciera cambiar \"leer mas\" por subrayado del texto de introduccion
gracias
30
Jueves, 23 de Octubre de 2008 10:33
Hola estoy empezando a manejar el joomla bueno ya e modificado unas cosas pero lo que necesito es tener una pagina de inicio antes de la que actualmente carga en esa pagina kiero que seleccione la ciudad ke kiere acceder y enviar la ke esta actualmente sin ke cambie el menu inicio
31
Jueves, 06 de Noviembre de 2008 04:33
Excelente tutorial, lo he impreso para leerlo detalladamente. Gracias por compartir tu experiencia.

Una pregunta mas.. Sabes como insertar en el encabezado del template un archivo swf?

Gracias.
32
Martes, 18 de Noviembre de 2008 10:39
El link a todas las clases y elementos de Joomla de Gustavo a debido cambiar porque redirige a comunidadjoomla.org. ¿Sabría decirme donde puedo ojearlo?

Agrega un comentario

  • Por favor, manten el tópico de los mensajes en relevancia con el tema del artículo.
  • Comentarios con lenguaje inapropiado seran borrados
Nombre:
E-mail:
Sitio web:
Comentario: