Cómo hacer temas para IceWM

Solapas principales

Indice

 

 

1. Introducción:

 

En este escrito, se dará de forma general un breve repaso de lo que son los temas para el gestor de ventanas IceWM, sus componentes y las herramientas necesarias para la creación de estos. Teniendo como objetivo que los usuarios de dicho entorno se animen a personalizar al máximo su gestor de ventanas favorito.

 

2. ¿Qué es un tema de IceWM?

 

xelux

 

Un tema de IceWM esta hecho de las siguientes partes:

 

  •  Uno o más archivos de temas, incluyendo un archivo «default.theme», que debe de especificar todas las opciones de apariencia de iceWM, en el formato de «opción=valor» en cada línea (algunos de los valores o preferencias no pueden cambiarse en la especificación del tema).

 

  •  Una colección de imágenes (archivos .xpm) que son usadas para construir la decoración de las ventanas.

 

 

  • Una colección de imágenes (archivos .xpm) para punteros de ratón, iconos especiales, icono para la bandeja de correo y la barra de tareas.

     

 

Las imágenes que usaremos, tanto el archivo default.theme, debe de permanecer en una sola carpeta con el nombre del tema. Y esta última debe de estar en el home de nuestro usuario, dentro de la carpeta ~/.icewm/themes. De esta forma, podremos ver como va quedando nuestro tema cada vez que hagamos alguna modificación al mismo.

 

3. Tipos de temas.



Hay varios tipos de temas, que no son más que distintos tipos de apariencia que se pueden ver en iceWM con la opción "Look". La cual soporta las siguientes: warp3,warp4,win95,motif,nice,pixmap, metal,gtk y flat. Estos permiten diferentes tipos de modificación de la apariencia y requieren diferentes números de imágenes X Pixmap. (Notemos que pixmap, metal y gtk se ven iguales.)

 

Look=valor

 

Donde «valor» es la apariencia deseada.

 

4. Herramientas sugeridas para la creación de temas.

 

Para crear un tema, necesitamos un editor de imágenes, como Gimp o Mtpaint, y un editor de texto para la creación del archivo default.theme. Para este último es cuestión de gustos, ya sea gráfico como Leafpad o en modo texto como Ne.

 

5. Requisitos de las imágenes.

 

Las medidas de las imágenes utilizadas en el tema varían dependiendo de las medidas deseadas para estas, por lo que pueden ser más grandes o más pequeñas. Estas se definen en el archivo defaul.theme, en las opciones “TitleBarHeight” (Tamaño de la barra de título), “BorderSizeX” (Tamaño del borde X), “BorderSizeY” (Tamaño del borde Y), “CornerSizeX” (Tamaño de la esquina X), CornerSizeY (Tamaño de la esquina Y), DlgBorderSizeX (Tamaño del borde X del cuadro de diálogo), DlgBorderSizeY (Tamaño del borde Y del cuadro de diálogo).

 

6. ¿Por dónde comenzar?.

 

Por lo regular se empieza primero con el archivo default.theme puesto que con este definiremos la base del tema, los tamaños de las ventanas, el tipo de letra y los colores  que deberán tener cada parte de este. Pero hay quienes deciden crear primero las imágenes xpm y una vez que están listas entonces solamente se utiliza la herramienta de gotero o selección de color (para obtener el nombre en codigo del color) rellenar el archivo default.theme más rápidamente. En todo caso, se recomienda tener una paleta de color o varias en mente para agilizar la labor de creación.

 

6.1 Botones

botones

Los nombres y sufijos de las imágenes XPM pueden parecer poco amigables, pero para distinguir que función tiene nos basta ver el nombre de esta y su sufijo. Por ejemplo, para el botón de cerrar su nombre es “close” y su sufijo puede ser “A” (activo), “I” (inactivo), u “O” (efecto).

 

Nota: Para que los botones de efecto funcionen se tiene que tener activada la opcion "RolloverButtonsSupported" en "1". Además estos deben de contar con los botones activos (terminación A) de la siguiente forma (recordando que el tamaño puede variar dependiendo de la altura y anchura de la barra de titulo y los bordes de la ventana ):

 

closeA

 

Si observamos con atención nos daremos cuenta que closeA.xpm consta de una imagen para el botón de cerrar activo y que esta ocupa exactamente la mitad de esta, y el resto es un cuadrado negro. Esto es, para que muestre correctamente el botón de efecto (closeO.xpm), el cual se ve de la siguiente forma:

 

closeO

Los botones de efecto constan de dos imágenes en una, como se puede apreciar, la primera que esta arriba nos muestra el "efecto" que no es más que una  variación en el color o forma del botón activo (A), y la que esta debajo de esta es como se verá el botón una vez presionado.

 

Notemos que los botones se representan con las siguientes letras: cerrar/close (x), ocultar/hide(h), maximizar/maximize y restaurar/restore (m), botón de menú/menu button (s), minimizar/minimize (i), encoger/rollup (r) y ocultar/hide (d)

 

6.2 Bordes o marcos de la ventana

ventana-xelux

En caso de que la imagen sea un borde de ventana tendra el nombre de “frame” o “dframe” para los bordes de los cuadros de diálogo. Sus sufijos pueden ser B (borde inferior), BL (esquina inferior izquierda), BR (esquina inferior derecha), L (borde izquierdo), R (borde derecho) , T (borde superior ), TL (esquina superior izquierda) y TR (esquina superior derecha). Además, estos llevan al principio A si es activo o I si es inactivo, por ejemplo:

 

Las esquinas inferiores izquierda y derecha se nombran como: frameABL, frameIBL, frameABR, frameIBR, etc.

 

Esto puede variar, si por ejemplo quisieramos hacer un tema tradicional con colores sólidos, es decir; sin degradados y con las esquinas cuadradas. En ese caso con especificar los colores de los bordes en el archivo default.theme nos bastará.

 

6.3 Barra de título

barra-de-titulo

 

La barra de título esta compuesta por imágenes XPM, con el nombre “title” (título) y los sufijos A (activo) o I (inactivo). Y es donde aparece el nombre de la aplicación en texto. Estas llevan los siguientes sufijos que indican su posición en la barra de título: B (rellenar), L (izquierda), M (en medio), P, R (derecha), S (espacio)y T (título).

 

Por lo tanto, las imágenes resultantes se nombran de la siguiente manera:

 

titleAB, titleIB, titleAL, titleIL, etc.

 

6.4 Barra de tareas

barra-de-icewm

Para personalizar la barra de tareas se necesita crear dentro de la carpeta del tema, una nueva carpeta con el nombre “taskbar”. En esta, se debe de tener las siguientes imágenes XPM:

 

desktop.xpm (icono de mostrar el escritorio), taskbarbg.xpm (fondo de la barra de tareas), taskbuttonbg.xpm (fondo del botón de tareas) , windows.xpm (icono de la lista de ventanas), linux.xpm (botón de inicio de iceWM), taskbuttonactive.xpm (botón de tarea activo), taskbuttonminimized.xpm (botón de tarea minimizado).

 

Por lo regular, y en caso de los botones y las imágenes de fondo, son imágenes de 4x25; aunque esto puede variar dependiendo del tamaño deseado de la barra de tareas y sus iconos (16x16 o 32x32).

 

6.5 Carpeta mailbox (Bandeja de correo)

 

Dentro de esta, se deben de crear o añadir iconos para la bandeja de correo. Estos representan los siguientes estados: Error (errmail.xpm), correo (mail.xpm), nuevo correo (newmail.xpm), sin correo (nomail.xpm), correo no leído (unreadmail.xpm).

 

Estas imágenes deben de medir 16x16 y ser de un color o forma que las haga distinguirse de la barra de tareas.

 

6.6 Carpeta icons (Iconos)

 

En esta carpeta van a ir los iconos para aplicación (app), terminal (xterm) y carpeta del menú (folder). Ahora que, si lo que quieres es ahorrar espacio en el tema, vamos a poner solamente tres iconos y vamos a crear enlaces simbólicos para los demás. Por ejemplo:

 

ln -s app_11x11.xpm app_16x16.xpm

Etc.

 

Aquí no importa mucho el tamaño de nuestros iconos, los podemos dejar grandes (256x256) o bien chicos (32x32), tendrán el mismo aspecto. En lo personal, yo prefiero dejarlos cómo están. Estos son:

 

Aplicación: app_11x11.xpm, app_16x16.xpm, app_32x32.xpm

Terminal: xterm_11x11.xpm, xterm_16x16.xpm, xterm_32x32.xpm

Carpeta: folder_11x11.xpm, folder_16x16.xpm, folder_32x32.xpm

 

6.7 Carpeta ledclock (El reloj de la barra de tareas)

 

Si queremos que nuestro reloj de la barra de tareas use imágenes xpm en vez del tipo de letra que debemos de definir en el archivo de configuración default.theme, lo que vamos a hacer es crear en nuestra carpeta principal la carpeta «ledclock" y en nuestro archivo default.theme añadir la siguiente línea o ponerla a 1 :

 

TaskBarClockLeds=1

 

Crearemos imágenes de 10 x 20, aunque aquellas que lleven símbolos como «:»,» .» y «/», pueden ser más pequeñas. Por otra parte estas pueden ser un tanto más grandes o más pequeñas dependiendo del tamaño de la barra de tareas. Estas son las siguientes:

 

a.xpm, colon.xpm, dot.xpm, m.xpm, n0.xpm ... n9.xpm,

p.xpm, percent.xpm, slash.xpm, space.xpm

 

Tengamos en cuenta que vamos a hacer imágenes para los números del 0 al 9, que son n0.xpm, n1.xpm, n2.xpm, etc.

 

 

6.8 El archivo de configuración default.theme

 

 

El archivo “default.theme” es un archivo de configuración que sirve para personalizar los colores, tipo de letra, tamaños, comportamiento, fondo de escritorio, etc. Este debe de empezar con las siguientes líneas:

 

ThemeName="Nombre del tema"

ThemeDescription="Descripción"

ThemeAuthor="Tu nombre o nombres de los autores <tu-correo@algo>"

License="Licencia"

Look=flat

 

Y después de esto, las opciones de configuración del tema. Para ello, podemos tomar de ejemplo este archivo “default.theme” del tema xelux, versión 1.1 :

 

ThemeName="xelux"
ThemeDescription="Un tema rojo inspirado en los colores de Debian"
ThemeAuthor="Devoto <mi-correo@algo>"
License="GPL"
Look=flat

TitleButtonsLeft="s"
TitleButtonsRight="xmi"
TitleBarCentered=1
TitleBarHeight=17
TitleBarJustify=50
ShowMenuButtonIcon=1
RolloverButtonsSupported=1

BorderSizeX=3
BorderSizeY=3
CornerSizeX=28
CornerSizeY=28
DlgBorderSizeX=3
DlgBorderSizeY=3

ColorActiveTitleBar="rgb:38/3a/3c"
ColorNormalTitleBar="#767676"
ColorNormalButton="#767676"
ColorNormalButtonText="#767676"
ColorActiveButton="rgb:38/3a/3c"
ColorActiveButtonText="white"
ColorNormalTitleBarText="#767676"
ColorActiveTitleBarText="white"

ColorActiveBorder="rgb:5e/5e/5e"
ColorNormalBorder="rgb:5e/5e/5e"

ColorNormalMenu="#222222"
ColorActiveMenuItem="#222222"
ColorNormalMenuItemText="#777777"
ColorActiveMenuItemText="white"
ColorDisabledMenuItemText="#f2484b"

ColorDefaultTaskBar="#202020"
ColorNormalTaskBarApp="#202020"
ColorNormalTaskBarAppText="#777777"
ColorActiveTaskBarApp="#202020"
ColorActiveTaskBarAppText="white"
ColorMinimizedTaskBarApp="#202020"
ColorMinimizedTaskBarAppText="#777777"
ColorInvisibleTaskBarApp="#202020"
ColorInvisibleTaskBarAppText="#777777"

ColorInput="#202020"
ColorInputText="#777777"
ColorMoveSizeStatus="#d12e2e"
ColorMoveSizeStatusText="white"

ColorQuickSwitch="#222222"
ColorQuickSwitchText="#777777"
ColorQuickSwitchActive="#d12e2e"
ColorQuickSwitchActiveText="white"

ColorDialog="#222222"
ColorListBox="#222222"
ColorListBoxText="#777777"
ColorListBoxSelection="#d12e2e"
ColorListBoxSelectionText="white"

ColorScrollBar="#222222"
ColorScrollBarSlider="#d12e2e"
ColorScrollBarButton="#222222"
ColorScrollBarButtonArrow="#white"

ColorLabel="#d12e2e"
ColorLabelText="white"
ColorToolTip="#d12e2e"
ColorToolTipText="white"

ColorClock=""
ColorClockText="rgb:d6/47/4d"

ColorCPUStatusIdle="rgb:44/44/44"
ColorCPUStatusInterrupts="rgb:44/44/44"
ColorCPUStatusIoWait="rgb:68/68/68"
ColorCPUStatusSoftIrq="rgb:ff/ff/ff"
ColorCPUStatusUser="rgb:71/91/b5"
ColorCPUStatusSystem="rgb:ff/55/55"
ColorCPUStatusNice="rgb:7e/00/00"

ColorNetIdle="rgb:44/44/44"
ColorNetReceive="rgb:71/91/b5"
ColorNetSend="rgb:ff/65/29"

ColorMEMStatusFree="#444444"
ColorMEMStatusCached="#d12e2e"
ColorMEMStatusUser="#9b2020"
ColorMEMStatusBuffers="black"

DesktopBackgroundColor="#d12e2e"
#DesktopBackgroundCenter=1 # 0 / 1
#DesktopBackgroundScaled=1 # 0 / 1
#DesktopBackgroundImage = ""

TitleFontNameXft="aero matics:size=12"
MenuFontNameXft="aero matics:size=11"
StatusFontNameXft="aero matics:size=11"
QuickSwitchFontNameXft="aero matics:size=11"
NormalButtonFontNameXft="aero matics:size=11"
ActiveButtonFontNameXft="aero matics:size=11"
NormalTaskBarFontNameXft="aero matics:size=11"
ActiveTaskBarFontNameXft="aero matics:size=11:bold"
ToolButtonFontNameXft="aero matics:size=11"
NormalWorkspaceFontNameXft="aero matics:size=12"
ActiveWorkspaceFontNameXft="aero matics:size=12"
MinimizedWindowFontNameXft="aero matics:size=11"
ListBoxFontNameXft="aero matics:size=11"
ToolTipFontNameXft="aero matics:size=11"
ClockFontNameXft="aero matics:size=11:bold"
ApmFontNameXft="aero matics:size=11:bold"
InputFontNameXft="aero matics:size=11"
LabelFontNameXft="aero matics:size=11"

 

Nota: Recuerda que puedes agregar comentarios (#) a tu archivo de configuración.

 

También se pueden agregar más archivos de tema (*.theme) que pueden contener otras variaciones del tema original. Estos podrán ser seleccionados del submenú del tema.

 

Colores

 

La elección de colores para el tema es cuestión de gustos, hay quienes prefieren colores claros, otros oscuros o bien una combinación de estos. Si estamos indecisos en que colores elegir, siempre podemos basarnos en un esquema de colores o bien crear el nuestro.

Nota: Los colores se pueden representar tanto como "#444444" o "rgb:44/44/44"

 

7. Probando el tema

 

Para probar nuestro tema, sólo nos basta con seleccionarlo del menú de IceWM en Configuraciones > Temas > Nombre-del-tema. También podemos hacerlo en cualquier momento de la creación de este, para ver los cambios reinicia IceWM cada vez que hagas un cambio o varios. Esto nos ayudará a corregir posibles errores en las imágenes o en los colores.

 

8. Compartiendo tu tema

 

Una vez finalizado nuestro tema es mejor que lo compartamos, ¿porqué?, si deseamos que más personas lo usen además de nosotros, sería bueno leer sus sugerencias o comentarios. O hasta quizá recibamos apoyo para mejorar el tema.

 

Actualmente existe Box-Look.org, una página ideal para compartir nuestros temas de IceWM. Podemos puntuar temas, descargarlos y compartirlos con otros usuarios de IceWM.

 

Sólo queda empaquetar nuestro tema (en formato tar.bz2 o alguno que soporte enlaces simbolicos si hicimos uso de ellos), subirlo a Box-Look, agregar capturas de pantalla en funcionamiento y una breve descripción.