My Whisker Menu theme for Mint-X (on Xfce, of course)

Help make Linux Mint look better.
Post Reply
Level 1
Level 1
Posts: 7
Joined: Mon Sep 14, 2015 9:39 pm

My Whisker Menu theme for Mint-X (on Xfce, of course)

Post by Moat »

I've been playing around with theming Whisker Menu lately, which since version 2.xx uses Gtk3/CSS. Functionally, Mr. Gott's Whisker Menu is pretty much a perfect lightweight menu, IMHO - but it's desperately in need of decoration! :D I'm quite surprised so few folks (any?) have really taken on spicing it up, utilizing the in-built Gtk3/CSS capability.

So below is an example of my amateur take on a theme designed to fit Mint-X. I've also some others in the works, using glassy buttons and darker green colors (aimed at my own modified "Ambiant-Moat" and "Greenbird" modification of the Ambiant-Mate and Greybird Gtk themes).

The theme is a gtk.css stylesheet file in the home's .config/gtk-3.0/ directory - just copy/paste the below code into the gtk.css file, save and log out/in to apply the theme change (or run xfce4-panel -r in a terminal). Anybody feel free to use this as a starting-off template to hack/modify away with your own ideas! :D


Code: Select all

#whiskermenu-window {
	color: #FAFCED;
	border-radius: 12px;
    background-image: linear-gradient(to right, shade(shade(#ABABAB, 1.0), 0.9), shade(shade(#D6D6D6, 1.0), 1.05));
    text-shadow: -0.5 1px black;
    font-size: 18px;

/* Make sidebar buttons match */
#whiskermenu-window button {
    background-image: linear-gradient(to bottom, shade(#D5D9D0, 1.15), shade(#D5D9D0, 0.9));
	color: #333333;
    border-top-color: shade(#8C8F89, 1.2);
    border-right-color: shade(#8C8F89, 1.05);
    border-left-color: shade(#8C8F89, 0.95);
    border-bottom-color: shade(#8C8F89, 0.9);
    border-width: 1;
	border-radius: 4px;
	padding: 2px;
	margin: 2px;
    font-size: 16px;
	box-shadow: -1px 2px 2px 0px rgba(0, 0, 0, .1);
#whiskermenu-window button:hover {
    background-image: linear-gradient(to bottom, shade(#E4E6E1, 1.1), shade(#E4E6E1, 0.95));
#whiskermenu-window button:active {
    background-image: linear-gradient(to bottom, shade(#D5D9D0, 0.7), shade(#D5D9D0, 0.5));
	color: #FFFFFF;
	border-color: transparent;
	box-shadow: inset 0px 1px 3px 1px rgba(0, 0, 0, .8);
#whiskermenu-window button:checked {
    background-image: linear-gradient(to bottom, shade(#CCE6AF, 1.1), shade(#CCE6AF, 0.8));
	color: #000000;
    text-shadow: -1 1px white;
	border-color: #72756D;
	box-shadow: none;

/* Make treeview match */
#whiskermenu-window treeview {
    background-image: linear-gradient(to right, shade(shade(#505050, 1.0), 0.8), shade(shade(#434740, 1.0), 1.4));
	color: #F8FCDE;
	padding: 2px;
    font-size: 15px;
    text-shadow: none;
#whiskermenu-window treeview:hover {
    background-image: linear-gradient(to bottom, shade(#8FAD70, 1), shade(#8FAD70, 0.9));
	color: #FFFFFF;
    border-radius: 2;

/* Menu border */
#whiskermenu-window border {
    border-top-color: shade(#AEB3A9, 1.2);
    border-right-color: shade(#AEB3A9, 1.0);
    border-left-color: shade(#AEB3A9, 0.7);
    border-bottom-color: shade(#AEB3A9, 0.6);
    border-width: 4;
	border-radius: 12px;
	padding: 4px;
	box-shadow: inset -1px 3px 3px 1px rgba(0, 0, 0, .5); 

/* Menu search box */
#whiskermenu-window entry {
    background-image: linear-gradient(to bottom, shade(#D9EBC0, 0.85), shade(#D9EBC0, 0.95));
    border: 2px solid;
    border-radius: 6px;
    color: #141414;
    text-shadow: none;
    border-top-color: shade(#A8A8A8, 0.75);
    border-right-color: shade(#A8A8A8, 1.05);
    border-left-color: shade(#A8A8A8, 0.9);
    border-bottom-color: shade(#A8A8A8, 1.2);
    box-shadow: inset 0px 3px 3px 1px rgba(0, 0, 0, 0.9);

/* Panel menu button */
#whiskermenu-button {
    background-image: linear-gradient(to bottom, shade(#D6D6D6, 1.15), shade(#D6D6D6, 0.93));
	color: #1E1D24;
    border-top-color: shade(#7C7E80, 1.35);
    border-right-color: shade(#7C7E80, 1.3);
    border-left-color: shade(#7C7E80, 1.1);
    border-bottom-color: shade(#7C7E80, 0.9);
    border-width: 1;
	border-radius: 4px;
    font-size: 20px;
#whiskermenu-button:hover {
    background-image: linear-gradient(to bottom, shade(#D6D6D6, 1.2), shade(#D6D6D6, 1.0));
#whiskermenu-button:checked {
    background-image: linear-gradient(to bottom, shade(#B8B8B8, 1.02), shade(#B8B8B8, 0.95));
    border-top-color: shade(#7C7E80, 1.6);
    border-right-color: shade(#7C7E80, 1.45);
    border-left-color: shade(#7C7E80, 1.25);
    border-bottom-color: shade(#7C7E80, 0.9);
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.6);
User avatar
Level 3
Level 3
Posts: 134
Joined: Tue Jul 02, 2013 8:33 am
Location: United States

Re: My Whisker Menu theme for Mint-X (on Xfce, of course)

Post by Windowsfree2013 »

very nice - thank you
~ Bob

Re: My Whisker Menu theme for Mint-X (on Xfce, of course)

Post by Tasape »

Very nice
User avatar
Level 10
Level 10
Posts: 3105
Joined: Sun Jul 08, 2018 11:50 pm

Re: My Whisker Menu theme for Mint-X (on Xfce, of course)

Post by LanceM »

I like! I would like the shutdown button on the left.
To mark this issue solved, go to your original 1st post and click the edit pencil and add [Solved] at the beginning of the title and click Submit.
Mint accepts donations:
User avatar
Level 3
Level 3
Posts: 117
Joined: Sun Dec 01, 2019 1:04 pm

Re: My Whisker Menu theme for Mint-X (on Xfce, of course)

Post by dm999 »

Thanks, I'll definitely be modifying this to suit my own theme.
LM 20 Xfce / Lenovo ideapad 500 15ISK / i5-6200U CPU @ 2.30GHz × 2 / 12GB RAM /
Post Reply

Return to “Artwork”