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

  • Plantilla Nueva para Blogger (Template) Gracias a http://www.bloggerbuster.com/ tenemos esta nueva plantilla de 3 columnas. Descargar Aqui Como tiene fondo blanco es especial para los que quieren generar dinero con […]
  • Headers para el blog Hay una página donde hay muchos diseños de header listos, para los que no saben como darle las medidas o diseñarla puede que les sirva este dato, solo deben entrar a FreeWebpageHeaders  y […]
  • Desarrollo de SistemasUltimamente he estado enfocada en el desarrollo de sistemas. Por el momento trabajo analizando y desarollando prototipos. Un libro que me recomendaron para aprender a desarrollar sistemas […]
  • ¿Cómo puedo escribir palabras en negrita o cursiva? Primero debes seleccionar la palabra que quieres resaltar (ya sea negrita o cursiva), para esto, pulsamos el boton izquierdo del mouse y lo mantenemos apretado mientras pasamos el […]
  • Nuevo Chat para el Blog Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress...) o Página web. Nuevo Chat MEEBOME, cuales son las ventajas y desventajas de este chat que encontre, no lo […]
  • Juegos para Blog Esto es aplicable a cualquier plataforma de blogs. Acá les dejo codes de juegos para que suban al blog, es simplemente para seleccionarlos, se abren en una ventana emergente de la pagina […]
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 *