Tutorial de FVWM: Capítulo 6

-.Índice.-

Consideraciones iniciales
Decoración simple y plana.
Colorsets.
Aplicando colorsets al resto de elementos.

-.Consideraciones iniciales.-

En este capítulo vamos a adecentar un poco nuestro escritorio, usando sets de colores y alterando un poco la decoración nativa de fvwm. Se podrían escribir varias decenas de páginas sobre colorsets y sobre las decoraciones en fvwm. En este capítulo tan solo daremos un repaso muy superficial al tema. Pero aquellos que no disfruten del look a lo motif podrán al menos matar el gusanillo.

-.Decoración simple y plana.-

En fvwm hay muchos comandos que afectan al modo en que son dibujadas las ventanas. En esta ocasión vamos a crear una decoración simple y plana, y más adelante comprobaremos la potencia de los sets de colores.

Las decoraciones se crean de forma similar a las funciones:

DestroyDecor MyDecor
AddToDecor MyDecor
+ TitleStyle AllActive Colorset 2
+ TitleStyle AllInactive Colorset 1
+ ButtonStyle All -- flat
+ BorderStyle -- flat
+ TitleStyle -- flat
+ TitleStyle Height 18

Ahora creamos dos sets de colores sencillos, para nuestra decoración. Más adelante en este mismo capítulo explicaré el funcionamiento del comando Colorset, por ahora símplemente haz un acto de fe, y pon esto en tu configuración:

# Colorsets
Colorset 1 bg grey40, fg white
Colorset 2 bg grey20, fg green

Y por último, le decimos a fvwm que use estos colorsets y la decoración que hemos creado para todas las ventanas (Style *):

Style * UseDecor MyDecor
Style * Font "xft:DejaVu Sans:size=8:style=bold"
Style * Colorset 1, HilightColorset 2
Style * BorderWidth 4, HandleWidth 4

Guarda, reinicia, y abre un par de ventanas si no hay ninguna. Deberías ver algo similar a esto:

Como ves, primero destruímos la decoración, por si acaso ;) Luego le vamos añadiendo comandos. Con "TitleStyle AllActive" escogemos un set de colores para el título activo, en este caso, el Colorset 2, que definimos como "Colorset 2 bg grey20, fg green", que viene a ser un primer plano (foreground) verde sobre un fondo (background) gris oscuro.

Luego usamos "TitleStyle AllInactive" para escoger el Colorset 1 (texto blanco sobre fondo gris más claro) para la decoración de las ventanas inactivas.

Las tres líneas siguientes hacen planos los botones, la barra de título (que también estaba en 3d y tenía aspecto de botón) y el borde de la ventana. Y la última línea establece la altura de la barra de título en 18 píxeles.

Por último, usamos comandos Style para hacer que todas las ventanas (*) usen nuestra deco, para cambiar la fuente de la predeterminada (fixed) a Deja Vu (escoge tú la que más te guste) con un tamaño de 9 puntos y en negrita, para establecer los colores del borde para las ventanas normales y las activas, y, por último, para establecer el tamaño del borde de la ventana en 4 píxeles. El efecto es el ilustrado en la foto de arriba.

-.Colorsets.-

Los colorsets son una cosa más compleja de lo que pueda parecer a primera vista. Por ejemplo, si en lugar de los colorsets arriba citados, usamos éstos, el efecto será muy distinto:

# Colorsets Colorset 1 RootTransparent buffer, Tint grey20 40, bg grey40, fg white
Colorset 2 VGradient 18 darkgreen grey20, bg grey20, fg green

Se pueden usar transparencias y gradientes en los colorsets, lo cual los hace muy versátiles, el tema de los gradientes, sobre todo, es bastante complejo. Como ejemplo he puesto un gradiente vertical (VGradient), pero hay muchos tipos más, como CGradient o HGravient. Todos están documentados en la página de manual.

Un gradiente sencillo como el de arriba se especifica con el número de pasos (18), y los colores de inicio y de final. Pero los gradientes pueden ser mucho más complejos en fvwm. Por ejemplo, imaginemos estos:

Colorset 1 VGradient 18 3 white 15 grey70 65 white 20 grey70, fg grey50
Colorset 2 VGradient 18 3 white 15 grey70 65 white 20 grey70, fg black

En este caso hemos usado gradientes de 18 pasos, pero divididos en 3 tramos. Ambos son idénticos, solo se varía el color del texto del título. El gradiente hace un tramo del 15% del total (que es 18 píxeles) de blanco a gris claro, luego vuelve durante un 65% del recorrido de gris claro a blanco, y el 20% restante lo hace de blanco a gris claro de nuevo. Da la impresión de se una placa metálica cóncava con los bordes alzados. Se pueden conseguir muchos efectos solo con gradientes, sin embargo, eso lo dejo a los expertos en gráficos. Si solo hay un tramo, entonces no es necesario especificar el número de tramos, de ahí que dicho número no aparezca en el sencillo ejemplo de más arriba.

-.Aplicando colorsets al resto de elementos.-

Ahora vamos a aplicar colorsets a nuestra barra de tareas y al paginador. La barra de tareas es muy configurable en lo que respecta a los colores. Lo vemos sobre un ejemplo:

# Colorsets barra de tareas
Colorset 3 RootTransparent buffer, Tint grey40 80, bg grey40, fg white, sh black, hi black
Colorset 4 RootTransparent buffer, Tint grey20 88, bg grey20, fg green, sh black, hi black

*MyTaskbar: ReliefThickness 1
*MyTaskbar: PlainButton up
*MyTaskbar: Colorset 3
*MyTaskbar: SelectButton up
*MyTaskbar: SelectColorset 4
*MyTaskbar: FocusButton up
*MyTaskbar: FocusColorset 4
*MyTaskbar: Font "xft:DejaVu Sans:size=8:style=bold"

Hemos definidos dos colorsets, uno para los botones normales y otro para los seleccionados. Les hemos puesto un poco de transparencia para ilustrar el uso de la misma. En lo que respecta a MyTaskbar, antes de nada hemos puesto el borde del relieve a 1 pixel. No queremos relieve, pero el truco está en que al poner las dos partes del relieve del mismo color en los colorsets (sh y hi son ambos negros) en realidad no da la sensación de ser un relieve, sino un simple marco, que pega bastante bien con la primera decoración plana que hicimos. Hemos otorgado el valor "up" (levantado) a las propiedades SelectButton, PlainButton y FocusButton. Ésto sirve para que los botones seleccionado, normales y enfocado estén todos levantados (recuerda, vamos a usar el relieve para simular un marco). Valores posibles serían también "down" (que también sería válido para nuestro objetivo) y "flat", que eliminaría el relieve completamente, y con ello nuestro marco simulado. A cada tipo de botón le hemos asignado también un colorset, y finalmente le hemos puesto la misma fuente de la barra de título.

Y estos son los colorsets y fuentes para el pager, incluídas las etiquetas volantes. A estas alturas creo que no necesitan explicación ;)

*MyPager: Colorset * 3
*MyPager: HilightColorset * 4
*MyPager: WindowColorset * 2
*MyPager: BalloonColorset * 2
*MyPager: BalloonFont "xft:DejaVu Sans:size=8:style=bold"
*MyPager: Font "xft:DejaVu Sans:size=8:style=bold"

Con ésto, nuestra configuración se ve así: