Cambios en el titulo parte II, ¿Como cambiar el Color?, WordPress

Por lo general todo lo referente al color se encuentra definido en las hojas de estilo (CSS), que es comun a todas las plataformas de Blogs.

En el caso de wordpress la hoja de estilos se encuentra en el archivo style.css al cual se puede acceder mediante el menu Presentación y luego Editor de Tema. Ahi puedes realizar todos los cambios que necesites, si tu servidor de wordpress te lo permite.

Ahora que he aclarado las dudas respecto a la hoja de estilos, voy a comenzar a explicar como cambiar el color en ella.
El color se puede definir de 4 formas:

Primera forma: #rrggbb (por ej., #00cc00)
Segunda forma: #rgb (por ej., #0c0)
Tercera forma: rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0))
Cuarta forma: rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 (por ej., rgb(0%,80%,0%))

Las 2 formas mas utilizadas que yo he visto en las plantillas de los blogs son la primera, que corresponde al código hexadecimal del color, y la tercera que corresponde al RGB (red, green, blue) que nos da cualquier programa.
Por ejemplo el paint de windows, cuando buscamos un color a nuestro gusto….se pueden ver los pasos de esto en la siguiente figura, nos entega el RGB.

Como pueden ver de paint, para el color seleccionado (ese verde), me entregó los siguientes números:

Red=R=83
Green=G=111
Blue=B=74

Este es el código de mi plantilla que define la mayor parte de las características del título:

  1. /* Header */
  2. #blog-header h1 {
  3.  font-size: 24px;
  4.  color: #FFE;
  5.  text-align: left;
  6.  padding: 15px 20px 0 20px;
  7.  margin: 0;
  8.  background-image: url(http://www.blogblog.com/moto_son/topper.gif);
  9.  background-repeat: repeat-x;
  10.  background-position: top left;
  11.  }

En donde color : #FFE es el color del título

Y este otro código define las características de la descripción del título:

  1. /* Header */
  2. #blog-header p {
  3.  font-size: 110%;
  4.  color: #ffe;
  5.  text-align: left;
  6.  padding: 3px 20px 10px 20px;
  7.  margin: 0;
  8.  line-height:140%;
  9.  }

donde también color: #ffe es el color de la descripción (el texto que se despliega bajo el titulo, explicando en que consiste el blog)
Así que todos los cambios de color se hacen en estas dos lineas solamente.

Ahora para cambiar el color del título del blog (de la tercera forma) solo tienen que sustituir el color: #FFE o el que tengan ustedes por el color: rgb(83,111,74) como se muestra en la siguiente figura:


Si tienen el color en código hexadecimal, solo deben reemplazar el FFE por el valor de ustedes..
Todos los colores pueden ser cambiados, aquí les dejo algunos links, que tienen listas de colores con sus respectivos códigos hexadecimales,(por ejemplo:#FFFFFF)..
Tabla de Colores WIKI

Este programa para que lo descarguen si quieren, sirve para buscar colores y entrega el código hexa…funciona sin problemas ya lo comprobe..

Si quieren ingresar su color como codigo hexadecimal y solo tienen el RGB, este link que dejo a continuación les permite pasar de uno al otro..
Convertidor de RGB a Hexadecimal
Aquí dejo las imágenes de ejemplo..

En este caso si se dan cuenta el mismo color verde que saque del paint anteriormente con RGB (83,111,74) me entrega un codigo hexa de 536F4A y despues que tengo este codigo puedo reemplazar en mi plantilla el FFE por el 536F4A de la siguiente forma:


El resultado es el mismo aunque se haga de la primera o tercera forma, como se puede ver:

Artículos Relacionados

  • Cambia el Perfil, Classic-Blogger Para eliminar algunas cosas del perfil que se despliega en el blog, primero debemos encontrar el código que lo despliega. Por ejemplo para mi perfil del blog personal, este es el código […]
  • Agrega en tu Blog tu Imagen de Gmail Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress...) o Página web. Solo debes ingresar a GSIG, escribir tu username de gmail, y listo tendras el codigo de las […]
  • Cambiar el color de Fondo del Blog, WordPress Esto es aplicable a cualquier Plataforma de Blogs (Blogger, WordPress...). Primero deben ubicar el siguiente código en el css, lo principal es el body (estilo de la plantilla) Para […]
  • Redondear fotos Existe una herramienta con la cual podemos redondear las esquinas de cualquier imagen que queramos, la podemos subir desde nuestro pc o colocando la Url de la imagen. Entren a RoundPic […]
  • Juegos, Accesorios y Aplicaciones Para tu Blog, Blogger http://www.widgetbox.com/ tiene varios widget de juegos, contadores. relojes, que podemos agregar facilmente en nuestro blog, solo deben seleccionar el simbolo de blogger (que es una B […]
  • Como usar el Chat de Gabbly?? Para Comenzar a chatear registra tu nombre pinchando sobre here!!. Welcome to Gabbly! Register your name here! Luego cada vez que quieras chatear deberas ingresar a tu cuenta de gabbly, […]
Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *