Español (spanish formal Internacional)English (United Kingdom)

PDFImprimirE-mail

GTCss

GTMagic

¿Qué es?

GTCss es el nuevo código css que GTMagic te proporciona, con él, podrás tratar aspectos de diseño de forma dinámica.

¿Cómo se usa?

Tan sólo añade el código a un fichero CSS, tras esto, en el fichero gtmagic,xml declarativo de tu extensión, deberás indicar que este fichero es dinámico para que GTMagic así lo interprete.

Definicion

El código GTCss en su versión 0.7 permite la siguiente sintaxis:

@color(type, par)
Color system
-
type: string (base or text)
par: integer (0 to 9)

@image(width, scale, recut)
Image system
-
width: integer
scale: integer
recut: boolean (false or true / 0 or 1) (false by default)

@gradient(width, height, color, inv, orientation, top)
Graphic gradient transparent rectangular
-
width: integer
height: integer
color: type_par (example: "base_2")
inv: boolean (false or true / 0 or 1) (false by default)
orientation: horizontal or vertical (vertical by default)
top: boolean (false or true / 0 or 1) (false by default)

@fill(image, color0, color1, color2, color3, color4..., color9)
Fill an image, replaces colors in it
-
image: string ( image name you want to use, no extension, should be located in the images folder and be a PNG )
color0: type_par (example: "base_2")
color1: type_par (example: "base_4")
...
color9: type_par (example: "base_1")

 

La primera declaración GTCss: @color, nos permite indicar un color dinámico, es decir, uno de los X colores sacados de la imagen principal de nuestro set. Podremos indicar que este color sea "base" o "text". El primero será el color natural elegido, y el segundo un blanco o negro inverso.

La segunda declaración GTCss: @image, nos servirá para imprimir la imagen que el usuario ha subido al sistema. Podremos indicar el ancho para ella y los píxeles en que debemos reescalarla así como si deseamos recortarla.

La tercera declaración GTCss: @gradient, nos permite crear un gráfico rectangular, con una degradación de un color especificado a fondo transparente.

La cuarta declaración GTCss: @fill, es la más poderosa. Podremos con ella abrir la imagen indicada y cambiar los colores que hay en ella a los que tiene nuestro diseño.

Se está trabajando en la inclusión de una función más:

@custom: Para posibilitar la inclusión de funciones adicionales definidas por el usuario

Ejemplo de Uso

En el fichero template.css de una plantilla, podremos tener:

body {
background-color: @color(base,5);
color: @color(text,5);
background-image: @image(800,400,1);
background-position: top;
}

#footer {

background-image: url('@fill(image1, base_3)');

}

El sistema, por ejemplo, sustituirá @color(base,5) por el elegido en el set actual: #893789;

joomla template
TeAmoMariaJose