Criando temas para o gerenciador de janelas do XFCE (Documentação)

Introdução 

O XFCE é um ambiente totalmente personalizável. Além disso, cada parte é independente, podendo ser instalada em outro ambiente (podemos instalar apenas os painéis em um ambiente com openbox, por exemplo). Uma destas partes, é o XFWM, o gerenciador de janelas padrão do ambiente, que suporta temas gráficos para a decoração das janelas, independente do tema GTK aplicado ao sistema.

Exemplo de tema para o xfwm: Gdraft Xfwm

Onde são instalados os temas

Os temas ficam localizados em duas pastas principais: a primeira, disponível para todos os usuários, fica no caminho:

/usr/share/themes/<NOME_DO_TEMA>/xfwm4/

A segunda, disponível apenas para o usuário local, fica no diretório:

/home/<USUARIO>/.themes/<NOME_DO_TEMA>/xfwm4/

Os temas para xfwm são simples, compostos apenas por arquivos de imagens e um arquivo de configuração. Cada arquivo de imagem diz respeito a um local da borda, ou de um botão da janela.

Estados

Um estado diz respeito a situação da janela ou botão em um determinado instante. Quando uma janela está sendo utilizada ou é selecionada, seu estado é ACTIVE, porém quando ela está em segundo plano (não está sendo utilizada) seu estado é INACTIVE. O mesmo ocorre para os botões, porém estes podem ter ainda outros estados além destes. Quando o mouse está sobre um botão, seu estado passa a ser PRELIGHT, e quando o botão está sendo pressionado seu estado muda para PRESSED. É importante entender estes estados, pois cada um deles possui uma imagem diferente dentro do tema.

Formatos de imagens

O formato de imagens padrão utilizado para a criação de temas é o XPM. Este formato suporta transparência, possui integração com a linguagem C e pode ser editado utilizando até mesmo um editor de textos. Essas características permitem uma integração entre o tema do XFWM e o tema do GTK, como por exemplo o tema Albatross, que altera a cor da borda dependendo do tema GTK.

Tema Albatross aplicado aos temas gtk Bluebird e Xfce, altera a cor da borda conforme o tema.

Outro formato que pode ser utilizado é o formato PNG. Este formato pode ser utilizado em conjunto com o formato XPM para criação de uma segunda camada, excelente para criar efeitos de transparência ou detalhes.

Nomenclatura 

A nomenclatura das imagens das bordas segue o seguinte padrão: 

<BORDA> - <ESTADO>

A nomenclatura das imagens dos botões segue o seguinte padrão:

<BOTÃO> - <ESTADO>

Bordas

As bordas são compostas por 12 imagens para o estado ACTIVE e 12 para o estado INACTIVE. A imagem abaixo ilustra cada uma das imagens formando a borda:

Bordas com numeração

1 - top-left:  Imagem da borda superior esquerda.
2 - title-1: Imagem da borda superior esquerda onde irão ficar os botões à esquerda.
3 - title-2: Imagem superior esquerda (utilizada para efeitos intermediários).
4 - title-3: Imagem da barra de títulos.
5 - title-4: Imagem superior direita (utilizada para efeitos intermediários).
6 - title-5: Imagem da borda superior esquerda onde ficarão os botões à direita.
7 - top-right: Imagem da borda superior direita.
8 - right: Imagem da borda direita.
9 - bottom-right:  Imagem da borda inferior direita.
10 bottom: Imagem da borda inferior.
11 bottom-left: Imagem da borda inferior esquerda.
12 left: Imagem da borda esquerda.

Lembrando que, seguindo a nomenclatura, as imagens devem conter o nome da borda e o estado. Logo, deve haver uma imagem top-left-active.xpm e uma top-left-inactive.xpm, por exemplo, para que o tema funcione corretamente.

Botões

Um tema do gerenciador de janelas possui por padrão 8 botões:

1 close: fecha a janela.
2 maximize : maximiza a janela.
3 hide: minimiza a janela.
4 shade: permite "enrolar" a janela.
5 stick: fixa a janela na área de trabalho.
6 menu: abre o menu de janelas.
7 maximize-toggled: o botão maximize é substituído por este botão quando a janela está maximizada.
8 stick-toggled: o botão stick é substituído por este botão quando a janela está fixada na área de trabalho.

Arquivo de Configuração THEMERC

O arquivo THEMERC é um arquivo de texto simples que irá ajustar as configurações básicas do tema, como distancia entre os botões e a distância entre a borda e os botões. Abaixo uma lista com os atributos do tema que podem ser alterados através do arquivo themerc:


AtributoValores possíveisDescrição
button_spacingNúmeros positivosEspaço em pixels que cada botão terá em relação aos outros.
button_offsetNúmeros positivosDistância entre a borda do aplicativo até os botões.
maximized_offsetNúmeros positivosDistância entre a borda do aplicativo até os botões, quando a aplicação estiver maximizada.
show_app_icontrue ou falseSe a opção for true, substitui o botão de menu pelo ícone da aplicação.
title_shadow_activetrue, false ou frameSe a opção for true, adiciona sombra ao título da aplicação ativa.
title_shadow_inactivetrue, false ou frameSe a opção for true, adiciona sombra ao título das aplicações inativas.
title_full_widthtrue ou falseSe a opção for true, a imagem central da borda de título (title-3) é repetida até ocupar toda a distância da janela, se for false ocupará apenas o tamanho do texto de título
title_alignmentleft, center ou rightAlinhamento do título
title_horizontal_offsetNúmeros positivosEspaço entre a borda esquerda (para alinhamento do tipo left) ou direita (para alinhamento do tipo right) e o título. Não funciona se o alinhamento for center.
title_vertical_offset_activeNúmeros positivos Espaçamento vertical entre a borda superior e o título quando a janela estiver ativa.
title_vertical_offset_inactiveNúmeros positivosEspaçamento vertical entre a borda superior e o título quando a janela estiver inativa.

Ainda dentro do themerc é possível determinar um layout fixo de botões para o tema através da opção button_layout. Porém ao fazendo isso, o usuário não poderá alterar este layout nas configurações de aparência. Para fixar o layout do tema, é necessário colocar na opção button_layout a disposição dos botões utilizando as letra maiúscula que correspondem ao botão:
O : Botão de menu (option)
T : Botão de fixar (stick)
H : Botão de minimizar (hide)
S : Botão de enrolar (shade)
M : Botão de Maximizar
C : Botão de Fechar (close)
| (símbolo pipe) : Título
Vale lembrar que o tudo o que estiver a esquerda do título ficará a esquerda do tema e vice-versa. Exemplo de uso colocando os botões de fechar, maximizar e minimizar a esquerda e deixando a direita apenas o botão de menu:
button_layout = CMH | O

Integrando o tema xfwm com o tema gtk

É possível integrar o tema de janelas com o tema GTK, usando o formato de imagens XPM. Uma imagem deste formato, pode ser modificada utilizando um editor de textos. O que fazemos é acrescentar um código de cores utilizado nos temas GTK que irá substituir determinada cor. Este código funciona como se fosse uma variável, que será substituída pelas cores presentes no tema GTK. Abaixo, um exemplo de edição:
Imagem XPM (código)
"       c None",
".      c #000000",
"+      c #FFFFFF",
"@      c #D5D6D5",
"#      c #4B58A2",
"$      c #525FAB",
"%      c #848FD6",
"&      c #B4BAB4",
"*      c #949594",
"=      c #FFFFFF",

Imagem XPM com códigos de cores do GTK
"       c None",
".      c #000000",
"+      c #FFFFFF s active_hilight_2",
"@      c #D5D6D5 s active_color_2",
"#      c #4B58A2 s active_shadow_1",
"$      c #525FAB s active_color_1",
"%      c #848FD6 s active_mid_1",
"&      c #B4BAB4 s active_mid_2",
"*      c #949594 s active_shadow_2",
"=      c #FFFFFF s active_hilight_1",

A tabela abaixo contém uma lista de códigos de integração que podem serem utilizados para capturar as cores do tema GTK e usar no tema de janelas:

CódigoValor no GTK
active_text_colorfg[selected]
inactive_text_colorfg[insensitive]
active_text_shadow_colordark[selected]
inactive_text_shadow_colordark[insensitive]
active_border_colorfg[normal]
inactive_border_colorfg[normal]
active_color_1bg[selected]
active_color_2bg[normal]
active_hilight_1light[selected]
active_hilight_2light[normal]
active_mid_1mid[selected]
active_mid_2mid[normal]
active_shadow_1darkselected[]
active_shadow_2dark[normal]
inactive_color_1bg[insensitive]
inactive_color_2bg[normal]
inactive_hilight_1light[insensitive]
inactive_hilight_2light[normal]
inactive_mid_1mid[insensitive]
inactive_mid_2mid[normal]
inactive_shadow_1dark[insensitive]
inactive_shadow_2dark[normal]

Para compreender melhor essa parte, talvez seja necessário estudar como são criados os temas GTK (versão 2), algo que não trataremos agora.
As cores padrões são carregadas do tema GTK, porém é possível alterá-las colocando o código e a nova cor dentro do arquivo themerc (essa alteração afetará apenas a borda da janela, não o tema GTK). Exemplo:
#Altera a cor do título para vermelho
active_text_color=#FF0000
#Altera a cor da sombra para amarelo
active_text_shadow_color=#FF0000


Essa postagem serve como documentação (a oficial em inglês está linkada abaixo), apenas como um guia para criação de temas, em breve farei um vídeo criando um tema para xfwm do zero, tratando cada item passo a passo.

Fonte de pesquisa: https://wiki.xfce.org/howto/xfwm4_theme

Comentários

Postagens mais visitadas deste blog

Xubuntu: título e botões de janela no painel

DataScraping utilizando PHP - Introdução

Personalizando o GRUB no Ubuntu, sem programas