Tiempo de lectura aprox: 2 minutos, 53 segundos
CSS Avanzado 2/2.
Una vez que tenemos claro como trabajar con el CSS, vamos a contar las segunda parte de CSS Avanzado 1/2.
CSS Avanzado 2/2
Como he dicho, todos los temas de WordPress tienen un archivo llamado style.css que es el encargado de dar formato a las entidades del tema.
El archivo se puede editar usando el «Editor de temas» aunque esto es una práctica poco recomendable.
Lo correcto es editar el archivo con un editor de texto plano o un IDE y luego actualizar el archivo en el servidor mediante una conexión FTP o SSH.
En cualquier caso, se trata de cambiar las instrucciones de formato de algún o algunos elementos.
Si el archivo pertenece a un tema completo creado por ti o un tema hijo, no tendrás dificultad en identificar los elementos que hay que cambiar.
Si el tema no ha sido desarrollado por ti, es posible que tengas que hacer un poco de investigación en el archivo style.css, de forma que encuentres el estilo que debes cambiar; aunque la forma más fácil de hacer ese trabajo de «hacking» es mediante el inspector de código de tu navegador.
Si no sabes usarlo, mira este artículo: Cómo hackear el Tema.
Además de las clases definidas en el style.css, WordPress cuenta con algunas clases nativas, independientes del Tema que se use (aunque lo más usual es que el tema sobre escriba estos estilos).
Estas son (Separados por su entorno; son todas las que están pero no están todas las que son 😉 ):
Estilos por función
Las entradas (posts)
.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}
El formato de la entrada (formats)
.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}
Los menús
#header .main-menu{} // clase contenedor
#header .main-menu ul {} // clase contenedor primer lista desordenada
#header .main-menu ul ul {} // lista desordenada dentro de una lista desordenada
#header .main-menu li {} // cada elemento de navegación
#header .main-menu li a {} // cada enlace de un elemento de navegación
#header .main-menu li ul {} // lista desordenada si no hay elemento de caja desplegable
#header .main-menu li li {} // cada elemento de una caja desplegable
#header .main-menu li li a {} // cada enlace de un elemento de caja desplegable
.current_page_item{} // Clase de la pagina actual
.current-cat{} // Clase de la categoría actual
.current-menu-item{} // Clase de cualquier otro elemento del menú actual
.menu-item-type-taxonomy{} // Clase para Categoría
.menu-item-type-post_type{} // Clase para Páginas
.menu-item-type-custom{} // Clase para cualquier otro elemento personalizado
.menu-item-home{} // Clase para el enlace a Inicio (Home)
Elementos y bloques creados con el editor visual
.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}
.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}
.wp-smiley {}
blockquote.left {}
blockquote.right {}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}
Los Widgets
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}
Los comentarios
/* Salida de Comentarios */
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
/* Formulario de Comentarios */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit
Conclusiones
Lo sencillo o atrevido que luzca tu sitio, depende en gran medida de tu imaginación; si no has encontrado un tema que satisfaga tus ideas completamente, usa uno que se aproxime y cambialo.
Dado que esto es solo una hoja de trucos, todavía hay muchas otras clases e identificaciones que quizás no haya listado. Si crees que algo más es importante y pertenece a esta lista, no dudes en dejar un comentario a continuación.
Juega, experimenta y, sobre todo, ¡divertirte!
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!