CÓDIGO COLORES HTML EN WORDPRESS

large_3227514446

Vamos a ver en esta entrada, de forma sencilla, cómo editar los colores de un tema en la plataforma wordpress.com utilizando el código de colores HTML o hexadecimal. En la plataforma gratuita de wordpress, por defecto, no se pueden editar las fuentes o los colores del tema elegido de forma detallada. Para poder hacerlo, hay que pasar por caja y adquirir en la tienda el paquete Custom Design, que además también permite editar el estilo del tema mediante CSS (hojas de estilo en cascada – Cascading Style Sheets). Veamos como podemos editar los colores.

El primer paso es ir la tienda WordPress y adquirir la actualización Custom Design, paquete que tiene un coste anual de 24€. En la plataforma gratuita Blogger, podemos elegir fuente, color HTML-Hexadecimal y editar el código de la plantilla de forma gratuita. Punto para Blogger en este aspecto, que permite mayor autonomía de edición al usuario que no quiere invertir un solo euro. La actualización tiene 15 días de prueba gratuita para que decidamos si vale la pena hacer el desemboloso. Una vez activada la actualización, podemos ir Apariencia-Custom Design y elegir por dónde empezamos. Fuentes:

1 FUENTES

Colores del tema:

2 COLORES

ESTILO DEL TEMA: CSS (requiere conocer este código de programación)

3 EDITOR CSS

Centrándonos en el tema del color en el tema elegido, una de las características de la actualización de pago es que podemos elegir exactamente el color deseado en los siguientes puntos del tema:

  • Color del fondo.
  • Color de los enlaces.
  • Color del enlace al pasar el ratón por encima.
  • Color de la barra del menú.
  • Color de las páginas en el menú al pasar el ratón por encima.

4 EDITAR COLORES DEL TEMA

Podemos usar las paletas de colores que propone wordpress o elegir nuestro color hexadecimal-html deseado. Podemos probar colores y combinaciones tocando la paleta de color con el ratón o introducir en el recuadro el color exacto que queremos seleccionar, con el siguiente formato:

#3D8295

Seguramente te estás preguntando: « ¿Tiene algún significado esta extraña combinación de letras y números?» Pues la respuesta es «Sí» y así es como funciona:)

Formato de los códigos HTML:

Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.

Significado de los símbolos:

Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad del azul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos.

Toda esta información procede de la web:

HTML COLOR CODES

En ella encontrarás más información sobre el tema y una tabla dinámica para hacer tus propias pruebas de color.

Ahora que ya sabes cómo modificar el color del tema, antes que empezar a hacer pruebas de combinaciones para dejar el blog a tu gusto, puedes consultar qué colores identifican a algunas marcas conocidas internacionalmente. Para ello hay una página genial que te dice el código hexadecimal del color corporativo de muchas marcas conocidas:

BRAND COLORS

En el blog que estás leyendo ahora mismo, se han seleccionado por código los colores corporativos de WordPress azul y naranja. Azul para el fondo y los enlaces, naranja para la barra de menú y para resaltar los enlaces:

BRANDCOLORS

WORDPRESS BLUE: #21759b

WORDPRESS ORANGE: #d54e21

Tan sencillo como acudir a Custom Design y copiar los códigos de color en los apartados correspondientes 🙂

photo credit: mrsoto via photopin cc

Anuncios

Acerca de Quico Franch

Arquitecto Técnico. Interesado en tecnología web 2.0, community management, blogs y gadgets electrónicos. Amante de las buenas rutas en bicicleta de montaña y carretera. +Quico Franch
Esta entrada fue publicada en CUSTOM DESIGN y etiquetada , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s