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.
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
... {
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;
}
#xfce4-power-manager-plugin image {
-gtk-icon-transform: scale(0.4) rotate(90deg); margin:-10px;
}
#xfce4-power-manager-plugin image {
-gtk-icon-theme: 'Tela-circle';
}
#xfce4-notification-plugin image {
-gtk-icon-theme: 'Tela-circle';
/*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);
}
.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*/
#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*/
#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 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*/
#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;
}
/*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*/
#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;
}
/*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;
}
#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);
}