manual de funcionamiento de custom css de genesis extender extender custom

Custom Css de Genesis Extender.
Potente Herramienta de Personalización para los theme del framework Genesis.

Esta sección pertenece a la segunda parte del manual de Genesis Extender, Extender Custom, que habla sobre las configuraciones y funciones que realizar la extensión Genesis Extender del framework Genesis. Puedes consultar la primera parte, Extender Settings, para profundizar en las configuraciones iniciales.

Recordar que para poder seguir este manual, debes tener instalado el plugin Genesis Hooks Guide.

Una de las opciones que encontramos en la extensión Genesis Extender dentro del menú Extender Custom es Custom Css, la cual nos ofrece la posibilidad de poder modificar de forma sencilla y extremadamente flexible el aspecto de nuestra página web a través de la modificación de los estilo en cascada o también llamados Css. La gracia de trabajar con esta opción, Custom Extender, es que no es necesario saber programar para llegar a realizar estos cambios, tan sólo con unos pocos clics lograremos nuestro objetivo.

Para ello, seguiremos estos pasos y consejos.

– Desde el panel de WordPress, pulsamos en la opción Genesis–>Extender Custom. La pestaña Css ya viene seleccionada por defecto.


Selección de Custom Css en extender custom para el plugin genesis extender

 

 

– Un elemento que tenemos que conocer son los Markup,  estos nos ayudaran a identificar los selectores Css que necesitamos conocer para poder modificar la página. Hay 2 tipos de selectores: los Identificadores (ID) o las Clases de css (Class), estos últimos son los mas comunes y los veremos representados por un punto (.) seguido del nombre de la clase, por ejemplo .site-container. Para activar los Markup, hacemos clic en Ghook Guide–>Markup en la barra superior de opciones de wordpress.

Ejemplo de Markup del plugin Genesis Hook guide

 

– Otra herramienta que nos ofrece la opción de Custom Css de Genesis Extender y que vamos a necesitar, es el asistente de programación Css Builder, esencial para llevar a cabo las personalizaciones de la página web. Para activar ésta herramienta, hacemos clic en el botón Css Builder ubicado dentro del las opciones de Extender Custom. Una vez seleccionado, nos aparecen una serie de pestañas las cuales nos brindan unas opciones cada una de estas que veremos detenidamente.

Opciones de Css Builder del plugin genesis extender

 

1.Elements.

Los elementos son todos los selectores que nos muestra la opción Markup cuando la activamos. Cada uno de ellos están divididos dependiendo de la zona en la que se encuentra en el código fuente, la herramienta también nos lo separa para una búsqueda más rápida de estos. Hay que tener en cuenta que nunca un elements pude ir solo, siempre tendrá que ir acompañado de la selección de al menos una de las demás propiedades: Backgrounds, Borders, Margins & Padding, Fonts Dimensions & Position y/o Shadows, pero siempre estas propiedades deben ir obligatoriamente acompañadas de un element. Veamos cada uno de ellos.

Opciones de los elementos de la herramienta css builder del genesis extender opcion extender custom

1.1 General Element. 

Aquí es donde tendremos la gran mayoría de selectores, estos están separados por zonas que nos ayudan a elegir el selector o elemento de forma sencilla.  Recordar que la opción de Markup nos muestra los elementos que tiene cada página, pero no siempre aparecerán exactamente con el nombre que nos muestra los markups, ya que la herramienta puede denominar a ese selector de otra manera aunque internamente sea la misma. Más adelante, en los ejemplos, veremos como solucionar este pequeño problema.

1.2 Nav Elements.

Este selector agrupa sólo los elementos de los menú de navegación, estos mismos elementos los encontramos en 1.1 General Element y su funcionamiento es exactamente igual que en este.

1.3 Subnav Elements.

Este selector agrupa sólo los elementos de los Submenús de navegación, estos mismos elementos los encontramos en 1.1 General Element y su funcionamiento es exactamente igual que en este.

1.4 EZ Widget Area Elements.

Desde aquí podemos seleccionar los identificadores (ID) de las zonas EZ que encontramos en los widgets. Ya vimos en la primera parte del manual de Genesis Extender como funcionaban estos widgets especiales que nos genera este plugin en el apartado de Static Homepage.

1.5 Main Content Element.

Este selector agrupa sólo los elementos del contenido (cuerpo) de la web, estos mismos elementos los encontramos en 1.1 General Element y su funcionamiento es exactamente igual que este.

2. Backgrounds.

La propiedad Backgrounds nos permite controlar el color o imagen de fondo que vayamos a utilizar en la página web, si la queremos a la izquierda, derecha o centrada, y también el número de veces que va a aparecer. Estas propiedades afectan tanto al padding como a los márgenes. Recordemos que estas propiedades siempre tiene que estar contenidas dentro de un elements (elemento) entre llaves.

Opciones de Backgrounds de custom css del plugin genesis extender

2.1 Insert Image Background CSS.

Desde aquí podemos insertar una imagen de fondo a cualquier sitio de nuestra web, seleccionando el tipo (Type), Un color de fondo por si la imagen es transparente y una vez pulsado el botón Insert Image background CSS en linea de código que genera, donde pone url(images/) sustituimos lo que esta dentro de los paréntesis por la ruta de la imagen que ya debemos haber subido en medios.

Ejemplo de una imagen de fondo estática y que se repite:

body {
background: #FFFFFF url(http://inventaid.es/dicar/wp-content/uploads/2015/02/Captura-de-pantalla-2015-02-14-a-las-15.55.43.jpg) fixed repeat;
}

2.2 Insert Color Background CSS.

Es muy similar a la propiedad anterior, pero donde sólo podemos asignar un color de fondo.

Ejemplo de un fondo negro:

body {
background: #FFFFFF;
}

2.3 Insert Transparent Background CSS

A veces necesitamos que el fondo de algún elemento sea transparente. Con esta utilidad lo conseguiremos.

body {
background: transparent;
}

2.4 Gradients? Check out this CSS Gradient Generator »

Cuando pulsamos en CSS Gradient Generator, nos envía a una página web generadora de fondo degradados. Lo que tenemos que hacer es elegir el color y la forma del degradado y copiar el código que genera y pegarlo dentro del elemento elegido.

Ejemplo de un fondo degradado en color azul y visible en todos los navegadores:

body {

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 ); /* IE6-9 */

}

3. Border.

La propiedad Border permite modificar el aspecto de los cuatro bordes de un elemento como la anchura, grosor, color y estilo.

Propiedad Border del las opciones de custom CSS builder del plugin genesis extender

3.1 Insert Border CSS.

Desde aquí definimos el aspecto que tomara el borde de la caja.  Si queremos que los bordes estén en los cuarto lados o en alguno de ellos lo seleccionamos desde Type. El ancho del borde lo elegimos desde Trickness. El color desde Color.  Y por último el estilo del borde en Style.

3.2 Insert Border Radius Css (in pixels).

Si queremos los bordes de nuestra caja redondeados, tenemos que utilizar esta propiedad dandole valores en pixeles a cada una de las esquina.

4. Margin & Padding.

Estas dos propiedades establecen la separación de los elementos de la página web. El margin es la separación entre un elemento y otro y el padding es la separación entre el margin y el contenido del elemento.

Margin & Padding propiedad de custom css de genesis extender

4.1 Insert Margin CSS.

Inserta la distancia en pixeles entre los elementos que se encuentran en la página web.

4.2 Insert Padding CSS.

Inserta la distancia en pixeles entre el margin y el contenido del elemento.

5. Font.

Desde este apartado definiremos las  propiedades tipográficas que adoptara nuestra página web o elementos de esta.

propiedad font de genesis extender en la opcion custom css

5.1 Propiedades Tipográficas.

Estas son las multiples propiedades que podemos añadir al estilo tipográfico de nuestro elemento de la página web. De todas estas, existen dos que siempre serán obligatorias; Insert Font Type (Tipo de letra) y Insert Font Size (Tamaño de la fuente), el resto son propiedades extras como: El color, si la queremos en negrita, cursiva, centrada o alineada en algún borde, etc.

6. Dimensions & Position.

Cada página web se compone de varios elemento o cajas que Css nos permite modificar y adaptar a las pantallas dependiendo de nuestras necesidades, esto lo logramos dando la propiedad Position y unos valores de Ancho (Width) y Alto (Height).

Dimensiones y posiciones de custom css de extender custom del plugin genesis extender

6.1 Dimensiones.

Desde aquí definimos el Ancho (Width) en pixeles o en % de la caja que contiene la web. También se puede definir un ancho max (Max Width) para que dependiendo de la resolución de la pantalla nunca pase de este valor, como en el anterior se puede definir en pixeles o %. Y por último tenemos que definir el Alto (Height) que sólo se podrá dar un valor en pixeles.

6.2 Position.

en este apartado definimos tres aspectos importantes que tienes que tener los elementos: Float, Position y Display. Dependiendo de su elección las cajas tendrán un comportamiento especial en la web.

7. Shadows.

Propiedad que nos permite mostrar sombras a cualquier elemento de la página web, Cajas y Textos.

Propiedad shadon en custom css del plugin genesis extender

7.1 Insert Box Shadow CSS

La propiedad box shadow es sólo para las cajas que componen la página web y se definen con cuatro medidas: Lft-Rt que indica el desplazamiento horizontal de la sombra en pixeles y es obligatoria, Tp-Btm, desplazamiento vertical en pixeles y también es obligatoria. Esta propiedad nos regala dos más que son Blur que una especie de expansión que cuando su valor es positivo se expande hacia fuera y si es negativo se contrae. Spread difumina la sombra, si su valor es 0 la sombra es solida y contra mas alto sea este valor mas borrosa se vera la sombra. Estos dos últimos valores no son obligatorios.

7.2 Insert Text Shadow CSS.

Sigue el mismo concepto que el punto anterior pero para el Texto de la web.

En breve pondremos ejemplos práctico de como funciona Css Builder.