Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » Joomla »

Tutorial Lista completa de Estilos CSS para Joomla

Estas en el tema de Tutorial Lista completa de Estilos CSS para Joomla en el foro de Joomla en Foros del Web. Buenas a todo el mundo;creo que estos datos seran de interes para muchos de los usuarios de este foro.Siempre hay algo que medificar dentro de ...
  #1 (permalink)  
Antiguo 23/06/2008, 05:36
Avatar de skullz-group  
Fecha de Ingreso: noviembre-2007
Ubicación: Catalunya
Mensajes: 461
Antigüedad: 16 años, 5 meses
Puntos: 10
Tutorial Lista completa de Estilos CSS para Joomla

Buenas a todo el mundo;creo que estos datos seran de interes para muchos de los usuarios de este foro.Siempre hay algo que medificar dentro de un buén site osea que aqui encontrares como cambiarlo.

/* AJUSTES POR DEFAULT */


body {}/* Estilo para la etiqueta del body de su sitio Web, controla la familia fonts de su página, el background, etc.*/


p {} /*formateo de todos los artículos con <div> (division). Esto es un cath-all que sólo se aplica cuando ningún otro estilo
ha sido definido.*/


td {} /*formateo de todos los artículos con la etiqueta <td>. Este ajuste por defecto es usado cuando ningún otro estilo ha
sido definido.*/


tr {} /*formateo de todos los artículos con la etiqueta <tr>. Este ajuste por defecto es usado cuando ningún otro estilo ha
sido definido.*/


ul {} /*formateo de todos los artículos (lista no solicitada) con la etiqueta <UL>. Este ajuste por defecto es usado cuando
ningún otro estilo ha sido definido.*/


a:link {} /* Estilo General de los enlaces*/


a:visited {} /*Estilo General para los enlaces visitados*/


a:hover {} /*Estilo General para cuando el puntero pasa por encima.*/

hr {} /* Línea horizontal en su plantilla*/


hr.separator {} /*separador de noticias ( ___ )*/



/* AJUSTES DE FORMAS */


.button {} /*boton*/


.inputbox {} /*campos de escritura de formularios, caja de campos.*/


.search {} /*El Formateo de <div> que sostiene artículos de búsqueda: inputbox, palabra del search...*


/* NAVEGACION/AJUSTES DE LOS MENUS, TOP MENU Y MAIN MENU, ETC., */


a.mainlevel{} /* Este estilo aplica para los elementos del MAIN en el menu */


a.mainlevel:link {} /*Todos los enlaces vistos normalmente.*/


a.mainlevel:visited {} /*Enlaces visitados edel menu principal*/


a.mainlevel:hover {} /*Vista de los enlaces cuando el puntero pasa por encima */


#active_menu {} /* Este estilo es para el elemento del menú cuando este está activo, hasta en una subposición en el
main*/


ul#mainlevel-nav {} /*generalmente es usado para definir el estilo del top menu*/


ul#mainlevel-nav li{} /* define el estilo de los enlaces de una lista del top menu*/


#mainlevel-nav a:link {} /*enlaces vistos normalmente*/



#mainlevel-nav a:visited{} /*enlaces visitados */



#mainlevel-nav a:hover {} /*cuando el puntero del mouse pasa por encima*/


a.sublevel{} /* Esta estilización es para elementos del submenu que tienen a un PADRE (submenus)*/

/*(elemento subnivel) */


a.sublevel:link {} /*enlaces vistos normalmente*/



a.sublevel:visited {} /*enlaces visitados*/



a.sublevel:hover {} /*cuando el puntero del mouse pasa por encima*/



.pagenavbar {} /*Coloca el estilo para la navegación en el footer (pie de página)


("<< Start < Prev Next > End >>") cuando ellos no aparecen como hipervínculos (cuando solo existan unos artículos).*/


.pagenavbar:link {} /*Estilo para el footer de navegación; pie de página


("<< Start < Prev Next > End >>") cuando ellos hacen de hiper enlaces */


.pagenavbar:visited {} /*estilo que define cuando el enlace es visitado*/

.pagenav {} /* es el nombre implicado, esto es para formatear textos para aquellos


"<< Start < Previous 1 Next > End >>" enlaces

del footer */



a.pagenav:visited {} /*visitados*/



a.pagenav:hover {} /*cuando se pasa por encima de estos.*/


a.readon:link {} /*Estilo para el "Read More" (Leer Más&hellip;) Es el enlace que despliega en una página nueva los
contenidos extensos de los artículos */


a.readon:hover {} /*cuando se pasa por encima del leer más..*/


a.readon:visited {} /*cuando es visitado*/


.back_button {} /*Estilo para el botón &ldquo;Atrás&rdquo;("BACK" button)*/


.pagenav_prev {} /*Estilo para el botón PREV*/

.pagenav_next {} /*Estilo para el botón NEXT*/










.latestnews ul {} /*Estilo para la lista de las últimas noticias (latest news) &ndash; por default,


latest news es el modulo user1.*/


.latestnews li {}/* Estilo para los elementos en forma de lista del lates news*/


.mostread ul{} /*Estilo para la lista del modulo &ldquo;más visto&rdquo; &ndash; por defecto, más visto (most popular)
es el modulo user2*/


.mostread li{}/*Estilo para los elementos en forma de lista del most popular*/


/* AJUSTE DE PAGINA REFERENTE A LOS CONTENIDOS*/




a.category:link {} /*enlaces*/



a.category:hover {} /*cuando se pasa por encima de ellos.*/



a.category:visited {}/*enlaces visitados.*/



.blogsection {} /* Formateo de los enlaces en Blog section */


.blog_more {} /*El "Más" (More) texto en blog section*/


a.blogsection:link {} /* Pone el formato del enlace*/


a.blogsection:visited {} /* mismo como encima, para poner el formato del enlace visitado*/


a.blogsection:hover {} /* mismo como encima, para poner el formato a los enlaces cuando el puntero del mouse pase
sobre este*/


.componentheading {}/* Título del componente usado para desplegar el contenido, Blog, Contacs etc., .*/


.contentheading {} /* Título del contenido, artículo, etc. para ser mostrado.*/


.contentpane {} /* Tabla que sostiene toda la información que no son artículos (componentes, lista de categorías,
formularios de contacto, etc).*/


.contentpaneopen {} /* Tabla que sostiene el texto actual para un artículo.*/


.contentpagetitle {} /*Título de los artículos*/



a.contentpagetitle:hover {} /*Título de los artículos cuando aparecen como enlaces */


a.contentpagetitle:link {} /*titulos vistos como enlaces.*/



a.contentpagetitle:visited {} /*titulos visitados.*/



.contentdescription {} /* Formateo de la "DESCRIPCION" de secciones, categorías


(News/Weblinks/Latest news...) */



table.contenttoc {} /* Formatea la tabla, de las tablas de contenidos para páginas múltiples de contenido o artículos */




table.contenttoc td {} /* mismo como encima, usado para formatear el td y la tabla, como celdas */


table.contenttoc th {} /* mismo como encima, usado para formatear el th de "Tablas de Contenido" ( Artículos normales
del Index)*/


table.contenttoc td.toclink {} /* mismo como encima, usado para formatear texto toc link texts*/


a.toclink:link {} /* mismo como encima, usado para formatear el estado del texto enlazado (toc link text status)*/

a.toclink:visited {} /* texto enlazado una vez visitado*/


a.toclink:hover {} /* texto enlazado cuando el puntero pasa encima de este*/
  #2 (permalink)  
Antiguo 23/06/2008, 05:36
Avatar de skullz-group  
Fecha de Ingreso: noviembre-2007
Ubicación: Catalunya
Mensajes: 461
Antigüedad: 16 años, 5 meses
Puntos: 10
Respuesta: Tutorial Lista completa de Estilos CSS para Joomla

/* LISTADO DE SECCIONES MAMBO */


.sectiontableheader {} /* Esto es para estilizar la cabecera de las tables de la sección en una SECTION'es de la página.


Ejemplo: cabecera de la tabla "Date" (fecha), "Item Title" (título del artículo), "Author"(autor) y "Hits" (vistas)*/


.sectiontableentry1 {} /*Barra de color blanco.*/


.sectiontableentry2 {} /*Barra de color gris, por lo regular estas se vén en las polls, contactos etc.,.*/




/* FORMATEO DE LOS MODULOS DE MAMBO */


table.moduletable {} /* Formateo de la tabla del modulo */


table.moduletable th {} /* Formateo de la cabecera del modulo, y el título del modulo */


table.moduletable td {} /* Formateo de las celdas de la tabla, en la tabla del modulo */


/* MISCELANEOS */



/* Fechas , Autores*/


.createdate {} /* Para estilizar la fecha de creación del contenido /artículos, mostrado bajo el título del contenido */


.modifydate {} /* Formateo del texto "Last updated on" (&ldquo;Ultima actualización en&rdquo;) al final de los
artículos/contenidos */


.small {} /* Formateo



del texto "Written by:...." (Escrito por: ...)*/


.smalldark {}/*Encontrado en página de resultados de encuesta, para el formateo del texto " Number of Voters"..
(Número de votos) */



/* Encuestas, Polls */


.poll {} /* formato del .td de la tabla de encuesta */


.pollstableborder {} /* pone las propiedades del borde en la tabla de la encuesta de votación */



/* Enlaces del Sitio, componente Weblinks */


.weblinks{} /* Para formatear los títulos enlazados bajo el "Weblinks" Sección en el frontend */


a.weblinks:hover {} /* mismo como encima, para los enlaces con el mouse encima del enlace */



/* Newsfeeds */


.newsfeedheading {} /* El título del newsfeed. NOTA: Este no afectará el título de noticias del newsfeed! */

.newsfeeddate {} /* La fecha en la newsfeed */


.fase4rdf {} /* Esto es el cuerpo del texto de la newsfeed */


/* Buscar página */


table.searchintro {} /* Esto es para formatear la caja cuando "Buscar palabra: la prueba devuelve 4 tiempos" la caja que
aparece despés de que usted ha insertado un valor de búsqueda. Aparece en el mainbody con los resultados de búsqueda */

/* MAMBO TABBED FRONTEND ADMIN INTERFACE */


/* El CSS de abajo define como el frontend la interface de administración cuando ha entrado al sistema */


.ontab {}/* Para estilizar los botones "Tab" (etiqueta) cuando sean editados los contenidos a través del front end como
en la aministración. Este .ontab es la estilización para la etiqueta tab cuando esta esté activa o después de "pulsarse" */


.offtab {} /* mismo como encima, usado para estilizar los botnoes de etiqueta "Tab" cuando sean editados los contenidos
a través del frontend. Esta es la estilización para la etiqueta tab cuando esta sea &ldquo;No active&rdquo; o cuando esta
no sea &ldquo;Pulsada&rdquo; */


.tabpadding {} /* este estilo es usado poniendo el tamaño de la etiqueta en el susodicho*/


.tabheading {} /* No estoy seguro para cuando es usado. No he logrado encontrar nada relacionado con esto hasta el
momento. */


.pagetext {} /* Este estilo es usado para estilizar el contenido de la edición de formas de contenido (cuando HTMLArea se
instala y en todas sus formas + contenidos) en el frontend e Interface de Administración */


Fuente un pdf creado por:

Por Dinh Viet Hung (C)
http://www.joomlart.com

Traducción Proyecto Hispano

http://www.aulaideal.com

Última edición por skullz-group; 02/07/2008 a las 12:04 Razón: corregir algo.
  #3 (permalink)  
Antiguo 23/06/2008, 13:31
Avatar de jovix777  
Fecha de Ingreso: abril-2008
Ubicación: Córdoba - Argentina
Mensajes: 151
Antigüedad: 16 años
Puntos: 2
Respuesta: Tutorial Lista completa de Estilos CSS para Joomla

Muy buena guia, gracias!
  #4 (permalink)  
Antiguo 23/06/2008, 13:48
Avatar de oswalgogra  
Fecha de Ingreso: septiembre-2007
Ubicación: En algún lugar del territorio Colombiano
Mensajes: 140
Antigüedad: 16 años, 7 meses
Puntos: 5
Respuesta: Tutorial Lista completa de Estilos CSS para Joomla

Este aporte si está chévere!
Esta información si hacía falta... Así se invierte menos tiempo en conocer los identificadores y clases de cada elemento para poder luchar contra el Maligno (ie) para que adquiera los estilos que queremos jejejejeje
Gracias!
  #5 (permalink)  
Antiguo 23/06/2008, 13:57
Avatar de Larenz
Colaborador
 
Fecha de Ingreso: enero-2007
Ubicación: Nicaragua
Mensajes: 1.398
Antigüedad: 17 años, 3 meses
Puntos: 55
Respuesta: Tutorial Lista completa de Estilos CSS para Joomla

Buen aporte amigo, tú también te mereces Karma! Ya lo saben, esta información les va a ayudar sobre todo a las personas que se están iniciando en el fabuloso mundo de Joomla.
__________________
¡No lo sé todo! Pero comencé como tú, ¡sin saber nada!
Encuéntrame en Facebook: Perfil + Página
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 11:45.