diws1 / xfce-rice

Xfce Customization Guide (in process)

XFCE Customization Guide

This repository is dominated by how to customize the xfce desktop, especially the panels which can be much more flexible, but are not included in the default panel settings various things that can be hacked in xfce desktop environtment will be explained here. There are many ways to customize the xfce desktop, and this repository is one of them while still prioritizing simplicity and efficiency of ram and cpu usage.

Table of Contents

• XFCE PANEL

  • Restart panel
  • Styling
  • Transform
  • Using various icons
  • Fake effect in xfce panel
  • Launcher ID
  • Global settings
  • Whisker menu
  • Workspace styling
  • Window button
  • Notification Plugin
  • Pulse Audio Plugin
  • Battery Plugin
  • Date/Clock
  • Another Launcher
  • Replace to another panel

• WINDOW MANAGER

  • XFWM standalone
  • Shortcut
  • Compositor
  • Replace to another window manager
  • Tittle/button

• XFCE TERMINAL

  • Adding new theme

• SCREENSHOTS

• REFERENCES

XFCE PANEL

By default, to customize the xfce panel you only need to right click on the panel, then select Panel Preferences.
However, if you want to customize the xfce panel freely, you can create a gtk.css file in the ~/.config/gtk-3.0/ folder.

Note

gtk.css file are like exterior paint. You need to arrange the items on your panels with the default panel settings, then gtk.css will color it.

Restart panel

The xfce panel can be restarted by running the following command in terminal, this will restart xfce panel with the changes made.

xfce4-panel -r

Styling

... {
	background: #c5c8c6; opacity: 0.9;
	color: #282828;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 4px;
}

Transform

#xfce4-power-manager-plugin image {
        -gtk-icon-transform: scale(0.4) rotate(90deg); margin:-10px;
}

Using various icons

#xfce4-power-manager-plugin image {
	-gtk-icon-theme: 'Tela-circle';
}

#xfce4-notification-plugin image {
	-gtk-icon-theme: 'Tela-circle';

Fake effect in xfce panel

/*Window Buttons*/
.xfce4-panel .tasklist .toggle {
	...
        margin: 5px;
        padding: 5px;
}
.xfce4-panel .tasklist .toggle:checked {
	...
	margin: 2px;
	padding: 0px;
}
.xfce4-panel .tasklist .toggle:hover {
	...
        margin: 4px;
        padding: 0px;
}

.tasklist .toggle image {
        -gtk-icon-transform: scale(0.5);
}
.tasklist .toggle:checked image {
        -gtk-icon-transform: scale(0.9);
}
.tasklist .toggle:hover image {
        -gtk-icon-transform: scale(0.8);
}

Launcher ID

Global settings

.xfce4-panel {
	background: #010101;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        font-family: 'Roboto Regular';
        font-size: 12px;
	opacity: 1;
} 

.xfce4-panel {
        font-family: 'Roboto Regular';
        font-size: 10px;
} 

Whisker menu

/*Whisker Menu*/
#whiskermenu-button {
        margin: 4px;
}
#whiskermenu-button:hover {
	background: #c5c8c6; opacity: 0.9;
	color: #282828;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 4px;
}
#whiskermenu-button image {
	-gtk-icon-theme: 'Tela-circle';
        -gtk-icon-transform: scale(0.8); margin: -10px;
}

Workspace styling

/*Workspace*/
#pager-32 #xfce-panel-toggle-button {
	color: #f9f9f9;
	margin: 4px;
	padding: 2px;
}
#pager-32 #xfce-panel-toggle-button:checked {
        background: #c5c8c6; opacity: 0.5;
	color: #282828;
	border-color: #c5c8c6;
	border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
	margin-top: 8px;
	margin-bottom: 8px;
	padding: 2px;
}
#pager-32 #xfce-panel-toggle-button:hover {
        background: #c5c8c6; opacity: 0.9;
	color: #282828;
	border-color: #c5c8c6;
	border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
	margin-top: 5px;	
	margin-bottom: 10px;
	padding: 2px;
}

Window button

/*Window Buttons*/
.xfce4-panel .tasklist .toggle {
        background: #c5c8c6; opacity: 0.9;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 5px;
        padding: 5px;
}
.xfce4-panel .tasklist .toggle:checked {
        background: #c5c8c6; opacity: 0.9;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
	margin: 2px;
	padding: 0px;
}
.xfce4-panel .tasklist .toggle:hover {
        background: #c5c8c6; opacity: 0.9;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 4px;
        padding: 0px;
}
.tasklist .toggle image {
        -gtk-icon-transform: scale(0.5);
}
.tasklist .toggle:checked image {
        -gtk-icon-transform: scale(0.9);
}
.tasklist .toggle:hover image {
        -gtk-icon-transform: scale(0.8);
}

Notification Plugin

/*Notification*/
#xfce4-notification-plugin {
	color: #f9f9f9;
        margin: 4px;
	padding: 5px;
}
#xfce4-notification-plugin:hover {
        background: #c5c8c6; opacity: 0.9;
	color: #282828;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 4px;
        padding: 5px;
}
#xfce4-notification-plugin image {
	-gtk-icon-theme: 'Tela-circle';
        -gtk-icon-transform: scale(0.4); margin: -10px;
}

Pulse Audio Plugin

/*Sound*/
#pulseaudio-button {
	color: #f9f9f9;
        margin: 4px;
        padding: 5px;
}
#pulseaudio-button:hover {
        background: #c5c8c6; opacity: 0.9;
	color: #282828;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 4px;
        padding: 5px;
}
#pulseaudio-button image {
	-gtk-icon-theme: 'Tela-circle';
        -gtk-icon-transform: scale(0.4); margin: -10px;
}

Battery Plugin

/*Battery*/
#xfce4-power-manager-plugin {
	color: #f9f9f9;
        margin: 4px;
        padding: 5px;
}
#xfce4-power-manager-plugin:hover {
        background: #c5c8c6; opacity: 0.9;
        color: #282828;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 4px;
        padding: 5px;
}
#xfce4-power-manager-plugin image {
	-gtk-icon-theme: 'Tela-circle';
        -gtk-icon-transform: scale(0.4) rotate(90deg); margin:-10px;
}

Date/Clock

/*Clock*/
#clock-button {
	color: #f9f9f9;
        margin: 4px;
        padding: 5px;
}

#clock-button:hover {
        background: #c5c8c6; opacity: 0.9;
	color: #282828 ;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 4px;
        padding: 5px;
}

Another Launcher

#launcher-10 #launcher-arrow:hover {
        background: #c5c8c6; opacity: 0.9;
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 2px; 
}
#launcher-10 image {
	-gtk-icon-theme: 'Tela-circle'; 
}
#launcher-10 #launcher-arrow:hover image {
        -gtk-icon-transform: scale(0.7); 
}


#launcher-15 #launcher-arrow:hover {
        background: #c5c8c6; opacity: 0.9; 
	border-color: #c5c8c6;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 2px; 
}
#launcher-15 image {
	-gtk-icon-theme: 'Tela-circle'; 
}
#launcher-15 #launcher-arrow:hover image {
        -gtk-icon-transform: scale(0.7); 
}

WINDOW MANAGER

XFWM standalone

Shortcut

Compositor

Replace to another window manager

Tittle/button

XFCE TERMINAL

Adding new theme

SCREENSHOTS

REFERENCES