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

Help make Linux Mint look better.
Post Reply
Moat
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 » Sun Dec 16, 2018 9:04 pm

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

Bob

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);
}
Attachments
Whisker_Mint-X_theme.jpg
Green_Whiskers1.jpg

User avatar
Windowsfree2013
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 » Sat Mar 09, 2019 7:38 pm

very nice - thank you
~ Bob

User avatar
Tasape
Level 1
Level 1
Posts: 36
Joined: Wed Jun 26, 2013 11:37 am

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

Post by Tasape » Sat Aug 10, 2019 4:58 pm

Very nice

User avatar
blueocean
Level 4
Level 4
Posts: 470
Joined: Sun Jul 08, 2018 11:50 pm

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

Post by blueocean » Sun Oct 06, 2019 10:03 pm

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.

Post Reply

Return to “Artwork”