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

Submit your artwork to make Linux Mint look better
Forum rules
Topics in this forum are automatically closed 6 months after creation.
Locked
Moat

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

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);
}
Last edited by LockBot on Wed Dec 28, 2022 7:16 am, edited 1 time in total.
Reason: Topic automatically closed 6 months after creation. New replies are no longer allowed.
Windowsfree2013

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

Post by Windowsfree2013 »

very nice - thank you
Tasape

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

Post by Tasape »

Very nice
LanceM

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.
dm999

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.
Locked

Return to “Your Artwork”