Esta es la imagen de las primeras variables que se ven en el código de la plantilla mínima.
Las variables son definiciones que hacen que puedas modificar los colores y las fuentes de lo escrito, de muchas partes de tu blog, sin tocar el código.
El creador de cada modelo de plantilla ha aplicado las que le ha parecido que se podían necesitar, pero has de tener en cuenta que: ni todas las plantillas tienen las mismas, ni en todas se escriben exactamente igual.
La base es siempre la misma; este código (el ejemplo es el que se suele usar para el fondo del blog):
type="color" default="#fff" value="#ffffff">
Vamos a desgranar este código, así verás como crear tus propias variables para modificar más cosas en tu blog.
Para empezar has de tener en cuenta que el código de cada variable ha de estar escrito entre estos dos símbolos: < >
Variable = el nombre de lo que vas a implantar. Todas y cada una de ellas son variables, por lo tanto esta es la primera palabra que se ha de escribir, exactamente así, con la primera letra en mayúscula, de lo contrario no funcionarán.
name = el nombre de la variable en concreto. Se escribe todo seguido, siempre empieza en minúscula, aunque en algunas platillas se distingue cada palabra por que las siguientes empiezan en mayúscula. Así es probable que, si tu plantilla es otro modelo, veas esto: name="bgColor"
Funcionan igual, lo único a tener en cuenta, tanto si creas alguna, como si aplicas una ya existente a algún sitio de tu plantilla, es que en la orden de estilo, el nombre esté escrito exactamente igual.
(Un poco más abajo verás a que me refiero).
description = su nombre completo. Este nombre, traducido o no, es lo que verás en Fuentes y Colores, si deseas modificar algo.
type = aquí puede poner color o font, dependiendo de si la variable va a modificar un color o un tipo de letra.
default = es el valor por defecto. Siempre ha de haber algún color o fuente que se coloque en el blog si, por algún motivo, el elegido no funcionara.
Un caso concreto es cuando intentas poner una imagen de fondo al blog y, por algún motivo, dicha imagen no aparece. En estos casos suele salir el color de fondo por defecto.
Otro caso en el que funciona el default es si has escrito algo en una fuente diferente a las predeterminadas, (a veces es posible), pero quien ve el blog no tiene la fuente que tu hayas usado en su ordenador. En estos casos, la persona que esté viendo el blog verá la fuente elegida por defecto para el lugar concreto donde hayas colocado las letras personalizadas.
value = El valor real del color o fuente del blog, tanto en su versión original, como si has elegido uno distinto.
Cada vez que cambias uno de estos valores en Fuentes y colores, el código cambia automáticamente al guardar cambios.
Si se trata de un color, tanto en defaul como en value, hay una cifra precedida de una almohadilla.
Es el código hexagesimal del color.
Los colores se expresan con un código de 6 cifras, números, letras o una combinación de ambas, precedidas de una almohadilla.
Pinchando en un color del círculo que rodea el recuadro y en algún punto de ese recuado, verás que en el rectángulo de encima aparece el tono exacto con su código dentro.
Las fuentes.
En la plantilla original verás que, tanto en default como en value, hay un nombre de fuente precedida de un normal normal y una cifra de porcentaje. Es lo que el creador de la plantilla ha escogido que se vea.
Pero en cuanto modicas una de estas fuentes, estos valores cambian en value.
Para que lo veas mejor, esta es la variable original de la fuente del título del blog de una plantilla mínima.
Y así es como se ve este código tras modificar la fuente (letras) del título:
Para que las variables funcionen y se puedan realizar los cambios pertinentes a través de fuentes y colores, a las definiciones de estilo de las diversas zonas del blog se les ha de añadir un código concreto.
Pongamos un ejemplo:
La fecha de las entradas tiene la misma fuente que los títulos de los elementos de la sidebar.
Si quieres que uno de los dos tenga una fuente distinta has de modificar la definición de uno de ellos.
Si miras el código del blog, verás esta definición de estilo:
h2 { y unas líneas más abajo font:$headerfont;
Si quisieras que los títulos de la sidebar se viesen distintos, podrías hacer dos cosas:
1.- Usar otra fuente distinta ya existente, por ejemplo la del texto de los propios elementos.
2.- Crear tu propia variable para que esos títulos se vean distintos al resto.
Crear una variable propia es tan sencillo como copiar íntegramente una de ellas, ya sea de color o de fuente, dependiendo de la que necesites, y pegar lo copiado justo debajo de la copiada.
Luego modificar el nombre (name) y la descripción (description) siguiendo el patrón de la anterior.
En este caso concreto, si quisieras crear una variable para los títulos de los elementos de la sidebar podrías llamarla así: name="sidebartitlefont" description="Sidebar Title Font"
En ambos casos tendrás que dar la orden concreta, añadiendo a la zona de las definiciones de la sidebar, que empieza bajo este /*Sidebar Content que verás más abajo, este código:
.sidebar h2 { (para concretar que vas a modificar tan solo los títulos de los elementos de la sidebar)
Debajo copias todo lo que haya bajo aquel h2 que te he mencionado antes, o sea estas líneas:
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
Y una vez copiados, cambias ese $headerfont por el nombre de la variable que hayas creado o que quieras usar.
Pero fíjate bien en que delante del nombre hay el símbolo del dólar $ y en como se escribe exactamente ese nombre.
Si hubieses creado una y le hubieses dado el nombre que te sugerido, tendrías que dejar esta línea así:
font:$sidebartitlefont;
Si quisieras usar la misma del resto de letras que pueda haber en el elemento, deberías poner $bodyfont, ya que ésta es la que utiliza la mínima.
Si fuese otro modelo, por ejemplo la scribe, deberías poner $bodyFont y siempre acabar la línea con un punto y coma.
A partir de ese momento, al haber separado las definiciones de estilo de los títulos de la sidebar, de los de las fechas, podrías modificar la fuente, e incluso otros detalles, como que las letras salgan todas en mayúsculas o no, etc.
0 comentarios:
Variables