Mundo Joomla! Tutoriales, webs, vídeos y fotos

  • Incrementar tamaño de la fuente
  • Tamaño de la fuente predeterminado
  • Decrementar tamaño de la fuente
Inicio Tutoriales Personalizar la plantilla Ja_Purity
Personalizando la plantilla Ja_Purity
Correo Imprimir PDF


  1. Resaltar submenús de la columna izquierda

  2. Personalizar la cabecera - En preparación

  3. Hacer un menú superior horizontal desplegable

  4. Introducir animaciones en las columnas - En preparación

  5. Hacer banners en las columnas - En preparación



Resaltar submenús de la columna izquierda


Por defecto, la plantilla JA Purity sólo resalta los elementos de menú de la página activa en la columna izquierda, pero no los elementos de submenú. Es decir, que, si tenemos dichos subelementos (como es el caso de este sitio) y pulsamos sobre cualquiera de ellos, al conducirnos a la página correspondiente el subelemento no quedará resaltado, lo que puede originar confusión en el usuario.

Para resolver este inconveniente, hay que modificar un archivo css de la plantilla. El resultado final puede observarse en esta misma web: comprobarás que el subelemento actual, "Personalizar la plantilla Ja_Purity" –submenú dentro de "Tutoriales"–, aparece destacado, y además con un estilo similar al de los elementos principales del menú, para mantener la coherencia estética.

Nos vamos al archivo templates / ja_purity / styles / elements / black [o el tema de color que uses] / style.css, e insertamos en él las siguientes líneas de código:

CÓDIGO:

#ja-container2 ul.menu li li.active a {
/*Aquí, introducir el color del texto del submenú ítem de la página activa (Yo lo dejo vacío, porque no quiero cambiar este color) */
}

#ja-container2 ul.menu li li.active a span {
/* Aquí, introducir las restantes propiedades del submenú ítem de la página activa: font-weight, background, color, etc. En mi caso: */
font-weight: bold;
background: #FFFFFF url(../../../images/bullet.gif) no-repeat 5px;
display:block;
outline: #999999 dotted 1px;
}

 

Espero que os sirva de ayuda, saludos.


Además de resaltar el elemento de submenú de la página actual, podemos también introducir un resalte para el hover, de tal manera que, al pasar el ratón por los subelementos del submenú, se resalten de manera similar (o diferente, eso ya va en gustos) a como lo hacen los elementos del menú. El resultado final puede observarse, asimismo, en esta misma web: sólo hay que deslizar el puntero del ratón por los subelementos para comprobar el efecto.

Esta aportación es cortesía de Sebastián Rojas, tal como puede leerse en los Comentarios de abajo. Aprovecho para recomendar aquí la visita a su web.

Para obtener dicho efecto basta adjuntar las siguientes líneas de código, en el mismo archivo arriba indicado:

CÓDIGO:

#ja-container2 ul.menu li li a:hover,
#ja-container2 ul.menu li li a:active,
#ja-container2 ul.menu li li a:focus {
/* Aquí, definimos las propiedades de resalte del submenú ítem sobre el que pasa el cursor del ratón:
background, color, etc. */
color: #333333;
background-color: #DDD !important;
}


 

Gracias, Sebastián.

Subir




Hacer un menú superior horizontal desplegable


El resultado final puede observarse en esta misma web: el menú horizontal superior.


Para hacer menús desplegables […] no necesitas ningún componente especial, sólo usar la plantilla o template Ja_Purity, que viene en la instalación del Joomla por defecto, situando el menú en la posición hornav.


Así, lo primero: en Extensiones > Gestor de plantillas (Extensions > Template Manager en inglés), selecciona esta plantilla como tu plantilla predeterminada.

Después, crea un nuevo menú (o más) desde Menús > Gestor de menús (Menus > Menu Manager), donde tendrás que incorporar los elementos principales (los que aparecerán sobre la barra horizontal hornav) y los submenús (los que se desplegarán verticalmente desde los principales) que desees.

Tras crear el nuevo menú, accede a él para editarlo y crear sus elementos. Una buena forma es crear primero los Elementos Principales, y luego ir a por los SubElementos...

Para crear los Elementos de los Submenús:

Primero, créalos como un ítem o elemento más del menú. Es decir, pulsando en el icono New (cruz blanca sobre círculo verde, esquina superior dcha. del Gestor del Menú).

Después, Joomla te pedirá le indiques de qué tipo de elemento se trata (un enlace a un artículo, a una categoría, etc.).

Una vez lo hayas hecho, te aparecerá el menú de edición del elemento que acabas de crear

Entonces, en el recuadro de los Detalles del Elemento de Menú, o Menu Item Details, la clave está en esto:

Imagen

Si observas la imagen, verás que donde pone “Parent Item” (“Insertar ítem” en español) lo que tienes que hacer es marcar el Elemento Principal del que quieres que salga el Elemento del Submenú… En este caso, si estuviéramos creando el Subelemento El CMS, marcaríamos Bases 1.5. Luego salvamos los cambios y procedemos con los siguientes subelementos…

Si luego queremos crear, a su vez, otro submenú dentro del submenú anterior, que arranque de El CMS, entonces tendremos que marcar ahora, para cada uno de estos nuevos Sub-SubElementos, en el recuadro de “Insertar Item” de sus Detalles, el SubElemento El CMS.

Una vez que hayas completado los menús, el propio Joomla te indicará, al contemplar la totalidad del menú, si lo has hecho bien o no… Pues, en tal caso, lo representa gráficamente con una estructura en árbol, según se puede observar en la siguiente figura:

Imagen

Si, al revisar la estructura, descubres que se te ha escapado algún que otro sub o subsubelemento, no hay que preocuparse, arreglarlo es muy sencillo: clickas en él para editarlo y, esta vez, te aseguras de marcar correctamente, nuevamente en Insertar o Parent Item, el elemento del que quieres que se despliegue... Luego salvas y entonces observarás que, Voilá, el subelemento se ha incorporado al lugar que le corresponde (otra cosa es que esté antes o después de algún otro "hermano" de su misma categoría, pero para eso están las flechas de cambio de orden de los elementos o -lo que es mucho más rápido si la cosa está muy desordenada- cambiar el orden numerando los elementos y luego clickando en el icono del disquette, para salvar ese orden numérico).


Para finalizar:

Una vez creado el menú completo, tienes que localizar su módulo correspondiente en Extensiones > Gestor de módulos (Extensions > Module Manager), y pulsar en él para editarlo.

Entonces, donde pone "Posición:" ("Position"), tienes que seleccionar del desplegable la posición hornav.

Con esto, debería aparecer el menú desplegable.

Sin embargo, puede ocurrir que la posición y el aspecto del menú no te convenzan... Entonces, tendrás que modificar el css de la Ja_Purity para dejarlos a tu gusto... En un tema del foro de la Comunidad Joomla traté estos y otros detalles para ayudar a un compañero que lo requería: viewtopic.php?f=22&t=976.

Por otra parte, en http://docs.joomla.org/Category:JA_Purity_template te viene bastante y jugosa información sobre la Ja_Purity y cómo personalizarla... pero está todo en inglés, lo que no sé si te vale.


Por último, como observación final: En Joomla, éste es el procedimiento no sólo para crear menús desplegables en hornav, sino todo tipo de menús complejos con elementos y cadenas de subelementos.


Espero esto os sirva de ayuda, saludos.


Subir



Última actualización en Jueves, 03 de Junio de 2010 23:05  
Comentarios (11)
11 Domingo, 12 de Diciembre de 2010 05:08
Hola
Necesito cambiar el color de la fuente de los contenidos de la plantilla japurity. Se ve muy clarita con el fondo blanco.
Alguien sabe como modifico el scc para logarrlo??
Gracias!
10 Miércoles, 13 de Octubre de 2010 21:27
Estimados amigos:

Gracias por compartir vuestra experiencia sobre todo para los que nos inciamos en el estudio de este desarrollador web de tan amplias posibilidades.

Estoy desarrollando una web con Joomla, usando el template Ja_Purity que me parece excelente. A base de investigación y "ensayo y error" voy poco a poco personalizando mi web. He modificado la cabecera con mi logo, header_mask y color de fondo. Todo va bien pero observo con espanto que en ordenadores que usan IExplorer 6 (y pienso que sea este el problema) el encabezado aparece modificado: el logo desaparece y el header_mask.png se desplaza a la izquierda. Lo demás se mantiene bien. Entonces voy y meto la dirección de vuestra página en dicho navegador y observo que a vosotros no os ocurre lo mismo en el encabezado pero, sin embargo, se os desplaza todo el contenido del artículo a la izquierda de manera que se monta sobre el espacio donde está el menú principal y lo hace desaparecer.

¿A qué es debido esto? ¿Tiene solución? A mí me gustaría que mi web estuviera optimizada para ser vista en cualquier ordenador y todavía mucha gente no tiene actualizado el navegador (si es que éste es el problema).

Esperando respuesta, un saludo muy atento.

P.D.: Por cierto, me gusta este editor de texto que supongo utilizáis también en el Backend. ¿Es el JCE? ¿Es recomendable y fácil de instalar o da algún problema?
9 Domingo, 25 de Julio de 2010 00:39
 
  necesito cambiar el texto que sale al en pie de pagina de JA purity, este que pego aqui

  
Pack creado por Joomla! Spanish 2008 - Patrocinado por Web Empresa
Joomla! es un software libre publicado bajo la licencia GNU/GPL.

este texto sale al final de la pagina no lo encuentro por ningun sitio y ya estoi desesperado, por favor si alguien me puede orientar   gracias
8 Jueves, 03 de Junio de 2010 21:08
Sam:

- Visualizador de gente conectada a la pagina:

Es un módulo, sólo tienes que instalarlo. Para ello, dentro de CPanel Admin, vas al Module manager o Gestor de módulos, le ordenas New y escoges del listado que te aparece Who's online (=Quién está online).

Luego, dentro de su panel de Edición, lo sitúas en la posición de la página que te interese (en este caso right). Ojo: para que te quede por encima de otros posibles módulos deberás desplazarlo en el Module Manager o Gestor de Módulos por encima de ellos.

- Mejorar la apariencia de la página:

En esto, Sam, no puedo ayudarte... es cuestión de, por una parte, desarrollar los diseños a lo que te gustaría llegar... y, por otra, armarte de paciencia y buscar + hacer los tutoriales que puedan ayudarte a conseguir tus objetivos.

Juan Felipe:

He entrado en tu web y la mayoría de las secciones aparecen vacías... sin embargo, he visto que en Perfiles profesionales (http://www.noticierotodelarvalle.com/sitio/perfiles-profesionales), el artículo del Director aparece perfectamente... ¿Por qué no simplemente haces una copia de este artículo, y luego simplemente cambias el nombre y los contenidos para otros artículos?

Espero que os sirva de ayuda.

Saludos,
Nacho
7 Miércoles, 28 de Abril de 2010 09:42
Sam
Hola. Megustaría preguntar varias cosas:
- como puedo poner ese vusializador de gente conectada a la pagina que esta a la derecha.
- Por otro lado llevo mucho tiempo intentando dar una apariencia mas profesional a la pagina. Ahora solo he podido poner unas fotos y alinearla un poco. Queda como muy rudimentario y megustaria poder hacer alguna composicion. Tampoco se si los enlaces podria ponerlo mejor ya que salen donde quieren.

Muchas gracias. 
6 Viernes, 09 de Abril de 2010 15:22
coordial saludo a todos los expertos de Joomla

tengo un canal de noticias en el cual introdusco textos informativos..

pues al momento de subir una noticia esta me queda orientada hacia la derecha, en otras palabras no se puede observar la noticia por que el texto introducido se corre hacia la derecha .. haciendo que el articulo sea imposible leer.

soy un poco nuevo en joomla y me gustaria arreglar este percanse que tengo .. pues como les comente es un canal de noticias y tengo que estar actualizandolo constantemente por lo de la informacion..

por anterioridad agradezco sus respuestas...

mi pagina para que puedan observar el error es.. www.noticierotodelarvalle.com    /  espero puedan ingresar y ayudarme con este percanse que tengo .. muchas gracias....
5 Martes, 16 de Marzo de 2010 21:03
Ernesto, yo necesita lo que usted necesita, así que estuve trabajando en ello y lo logré, adjunto el código css que se debe agregar a templates / ja_purity/ styles / elements / black [o el tema de color que uses] / style.css (debe ser el team de color que se use en elements, no en header):

#ja-container2 ul.menu li li a:hover,

#ja-container2 ul.menu li li a:active,

#ja-container2 ul.menu li li a:focus {

color: #333333;

background-color: #DDD !important;

}
#ja-container2 ul.menu li li a:hover,
#ja-container2 ul.menu li li a:active,
#ja-container2 ul.menu li li a:focus {
color: #333333;
background-color: #DDD !important;
}

Espero que le sirva, y a los demás

Ignacio: deberia considerar agregarlo al código ddl tutorial 
4 Jueves, 11 de Marzo de 2010 22:40
Hola, tarilla.

Cuando dices "He hecho lo que has dicho", no sé si te refieres al tutorial o al último comentario...

Si te refieres al tutorial, simplemente con añadir estas líneas de código en el style.css indicado debería funcionarte bien... siempre y cuando no haya submenús dentro de los submenús.

Si, dentro de un submenú, tienes a su vez otro submenú, efectivamente van a aparecer marcados todos los elementos dentro de ese sub-submenú... Intenté resolver este problema y le di mil vueltas, pero no encontré manera de solucionarlo... También expuse la cuestión en diversos foros, tanto en español como en inglés, empezando por el propio forum.joomla.org, pero tampoco obtuve respuesta alguna al respecto.

Si alguien lee estos mensajes y sabe cómo resolver esto (conseguir que funcione ok el resalte de los elementos de sub-submenús en la columna izda. de la Ja_Purity), por favor: que nos informe cómo hacerlo.

Saludos,
Ignacio
3 Miércoles, 03 de Marzo de 2010 12:05
He hecho lo que has dicho pero hay un problema al marcar un item del submenu se marca  su progenitor y los que estan al mismo nivel del submenu?
¿Como se soluciona eso?
2 Domingo, 28 de Febrero de 2010 16:24

Buenas, Ernesto.

Te agradezco tu agradecimiento, valga la redundancia.

Disculpa la demora en responderte, pero llevo un par de meses sin tiempo para somarme por acá, acabo de ver tu comentario.

En este momento no tengo tiempo de chequearlo personalmente, pero entiendo que, para hacer lo que tú quieres, tienes que crear una etiqueta específica para el a:hover, definiendo dicho color, tipo

#ja-container2 ul.menu li li.active a:hover {
/*Aquí, introducir el color del texto del submenú ítem de la página activa (Yo lo dejo vacío, porque no quiero cambiar este color) */
}

O similar... No te fíes de la sintaxis, estoy escribiendo a toda pastilla, pero vamos, los tiros van por aquí... Al sumar la línea de código que mencionas, no cambias el color del hover, sino del "a" (el enlace) en conjunto.

Espero te sirva de ayuda. Si lo sacas adelante, te agradecería una devolución de comentario comentándonoslo. Si, en algún momento, yo hago algún avance al respecto, no tepreocupes, lo dejaré reseñado aquí.

Saludos,
Ignacio 


 
1 Jueves, 21 de Enero de 2010 02:19
Te agradezco Ignacio, me funciono muy bien.
Me gustaria tambien definir un color para hover pero no lo he logrado.
He sumado esa linea al codigo que propones pero no funciona.
No quiero abusar de tu paciencia pero si sabes como, por favor dejame saber.
Saludos
Ernesto


¿Necesitas una web?



Si necesitas una web, hoy en día puedes encontrar información detallada sobre cómo desarrollarla en múltiples páginas en la red... Sin embargo, si tienes un negocio y careces de tiempo y/o ganas para ocuparte tú mismo en el desarrollo de la web, puedes solicitar presupuesto gratuito y sin compromiso en trespies arte y publicidad.

Leer más...