Agregar estilos CSS en Editor TynMCE Joomla
- Details
- Category: Joomla
- Created: Saturday, 27 August 2011 10:16
- Written by May
- Hits: 1867
En una web son muy necesarios los estilos y formatos. Por defecto todos los editores tienen sus propios estilos que vienen predefinidos y algunos de ellos se pueden personalizar. Uno de los editores que viene con Joomla es TynMCE y es muy fácil de manejar.
AGREGAR LOS ESTILOS EN EL DESPLEGABLE STYLES
1 Creamos dos estilos CSS de prueba:
El estilo demo1 sencillo y el estilo demo2 más elaborado.
/*Estilo demo1 y estilo demo2*/
.demo1{ background-color:#33FF99; color:#CC3300;}
.demo2{margin: 15px 0;padding: 10px;
padding-left: 40px;text-align: justify;color: #7D7D7D;
background: #FEFCD3 url(../images/tools/reloj.png) no-repeat;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;}
/***/
2 Copiamos y pegamos el código en el CSS de la plantilla que utilizamos por defecto en la web. Por ejemplo en la plantilla que utiliza esta Web, hemos utilizado el CSS llamado tools.css. (Se puede utilizar cualquier CSS que por defecto utilice la web, algunas plantillas utilizan CSS llamados (templates.css, style.css, etc...)
/templates/templateX/css/tools.css
3 Una vez realizado el punto 2, abrimos el CSS que utiliza el editor y escribimos los estilos SIN Código (no es necesario añadir el código) en la ruta siguiente:
Archivo que utiliza Joomla para el editor./templates/system/css/editor.css
4 Y por último, ahora una vez guardado todo, comprobamos que aparecen los estilos en el desplegable Styles del editor TynMCE.
Comprobamos que funcionan correctamente en un artículo de prueba:
Si se seleccionan partes de texto genera el siguiente código:
Si se seleccionan párrafos completos:
Anotación
También, dependiendo de las plantillas instaladas, puede crearse un archivo llamado editor.css en la carpeta CSS de la plantilla utilizada y crear los estilos en este archivo creado, para mostrarse en el editor de joomla.