Agregar estilos CSS personalizados en WordPress

Escrito por Jose M Ramirez en . Publicado en Desarrollo Web

Agregar estilos CSS personalizados en WordPress

Muchos creen que una ventaja de Joomla frente a WordPress es la capacidad de integrar lo que se conoce como “sufijo de clase” que son clases personalizadas en ese CMS que permite darle un estilo diferente o único a cada módulo. Sin embargo muchos no saben que esto también es posible en WordPress incluso de una manera más flexible que en Joomla. Lo mejor de todo esto es que no necesitas saber CSS, no necesitas instalar un plugin ni menos complicarte la vida ya que desde el mismo panel de administración puedes hacerlo agregando unas cuantas líneas. Para entender un poco mejor; si quieres agregar un botón de Twitter con efecto rollover puedes hacerlo fácilmente copiando el código de este tutorial que hice hace poco. ¡Así de simple! Por ende puedes sacar mayor provecho a toda variedad de código HTML y CSS que abunda en la red.

Para el ejemplo usare el código que menciono arriba, pero pueden hacerlo con cualquier clase de CSS que quieran agregar. Lo primero es ubicar en nuestro tema la plantilla CSS que es la define el estilo de nuestro tema, es simple ya que la mayoría de los temas se basan en Twenty y tienen una estructura de archivos similar, así que lo hacemos es entrar a nuestro panel de administración y luego a ‘Apariencia/Editor’.

Editor de temas

Luego vamos al final de lado derecho y buscamos la plantilla style.css y hacemos clic sobre ella que es donde agregaremos nuestros estilo personalizados.

Hoja de Estilo

Ahora bien, ya ubicamos la hoja de estilos, ahora debemos agregar código, pero asumiré que si estás leyendo no estas familiarizado con el código, así que para evitar errores explicare donde y como colocar el código para que este no cambie el estilo ya existente.

Lo primero que debemos saber es que todo lo que este dentro de /*AQUÍ DENTRO*/ en la hoja de estilo no se interpreta, son comentarios y no afecta el código, así que es solo para uso de los desarrolladores, por ende debes colocar tu código luego terminen los comentarios y justo de primero para que este siempre este a la vista y puedas borrarlo si así lo deseas. Sería algo como esto:

/*
Theme Name: Mi Tema
Theme URI: 
Description: Mi Tema 
Version: 2.0
Author: Jose M Ramirez
Author URI: http://tutobinario.com
*/

/*ESTO ES UN COMENTRIO Y LUEGO DEL '/' FINAL 
DEBES COLOCAR TU CLASE PERSONALIZADA*/
a.boton-twitter{    
display:block;     
width: 186px;     
height: 162px;     
background-image:url(twitter-gris.png); 
}
a.boton-twitter:hover{    
display:block;     
width: 186px;     
height: 162px;     
background-image:url(twitter.png); 
}
/*TERMINO TU CLASE Y PUEDES USAR ESTA LINEA
PARA RECORDARTE QUE ALLI TERMINA TU CLASE*/

Ahora guardas tu hoja de estilo y es tan simple como que cuando quieras incrustar tu botón de Twitter a una entrada o widget de texto arbitrario solo llamas la clase como en el ejemplo de abajo.

<a href="http://www.twitter.com/ibloglabs" class="boton-twitter"></a>

Es todo, ahora puedes disfrutar de toda la ventaja que ofrece CSS3 sin necesidad de ser un guru del código.

Etiquetas:,

Trackback desde tu sitio.

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs