¿Cómo ayudamos a nuestros Clientes?     Aquí tienes 4.855 maneras »

Martes, 06 Septiembre 2011 23:57

Tamaño de letra en plantillas por defecto Joomla 1.7

Escrito por 
CMS:  Joomla! |  Versión:  1.7 |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


ico_tamanofuente_j17En el siguiente artículo veremos temas relacionados a la funcionalidad de cambio de tamaño de letra en los templates que tiene por defecto Joomla 1.7. Veremos cómo realizar la eliminación, cambio de posición y modificación de las opciones de tamaño de letra.

Los templates por defecto que traen Joomla 1.6 y Joomla 1.7, beez20 y beez5, tienen la funcionalidad de aumentar o disminuir el tamaño de letra, esta funcionalidad forma parte de la plantilla pero no se puede cambiar desde la configuración de la misma, para realizar modificaciones se deben modificar los archivos del template.  

 


1- Generalidades

Inicialmente vemos que aparece esta funcionalidad al cargar la plantilla por defecto tal como se muestra en la siguiente imagen (para el template beez20)

img0

 

2- Eliminando los textos de tamaño de fuente

Para eliminar esta funcionalidad simplemente necesitamos ubicar el archivo del template y eliminar las línea:  

<div id="fontsize"> </div>

Por ejemplo para el template beez20 : /templates/beez20/index.php , en la línea 139, al eliminar esta línea se obtendrá el siguiente resultado:  

Resultado

img0_1

 

3- Cambiando de posición los textos de tamaño de fuente

 Para cambiar la posición de los textos de aumentar disminuir el tamaño de letra, debemos crear un módulo de tipo personalización de html, desde gestor de módulos => nuevo => personalización html Ubicamos la posición en donde deseamos que aparezca y luego en el contenido del módulo, en la vista html, colocamos el código:

<div id="fontsize"> </div>

 Se obtendrá el siguiente resultado, por ejemplo al colocarlo en la position-12

Resultado

img3

 

4- Cambiando los textos por iconos

Para realizar este proceso necesitamos editar el archivo javascript, por ejemplo para el template beez20 /templates/beez20/javascript/md_stylechanger.js , cambiamos la función addControls

Puedes descargar el código del ejemplo que se muestra en el video desde este link.

Además modificamos el archivo de estilos, por ejemplo para ele template beez20 : /templates/beez20/css/personal.css

#fontsize{ display:inline; float:right;}

#fontsize p a:link,#fontsize p a:visited{color:#222;}

#fontsize p a:hover,#fontsize p a:active,#fontsize p a:focus{background:none !important;color:#fff;}

 Se obtendrá el siguiente resultado:

Resultado

img4

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop