How To Theme The Cinnamon Main Menu Colors

Style your desktop
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Locked
User avatar
austin.texas
Level 20
Level 20
Posts: 12003
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

How To Theme The Cinnamon Main Menu Colors

Post by austin.texas »

This thread is for the exchange of ideas and tips on how to customize the elements of a Cinnamon theme.

Here is an introduction to the installation and basic use of Cinnamon and gtk themes -
http://shyloh.com/themes.html

Here is the beginners tutorial for changing the colors of a Cinnamon theme, created by caribriz.
http://www.mediafire.com/view/i934f6tm6 ... -THEME.pdf

Forum discussions for Cinnamon themes:

How To Install a New Theme
http://forums.linuxmint.com/viewtopic.php?f=42&t=155399

How To Theme The Cinnamon Main Menu Borders and Boxes
http://forums.linuxmint.com/viewtopic.php?f=42&t=155401

How To Theme The Cinnamon Taskbar Panel Window List Tabs
http://forums.linuxmint.com/viewtopic.php?f=42&t=155402

How To Theme The Cinnamon Taskbar Panel Icons and Applets
http://forums.linuxmint.com/viewtopic.php?f=42&t=155404

How To Theme The Cinnamon Popup Menu
http://forums.linuxmint.com/viewtopic.php?f=42&t=155405

How To Theme The Cinnamon Notifications
http://forums.linuxmint.com/viewtopic.p ... 1&t=155411

How to create/edit a Cinnamon theme, by Brahim
http://forums.linuxmint.com/viewtopic.php?f=42&t=155698

You can use the Subscribe topic link at the bottom of the page to get updates.
Last edited by LockBot on Wed Dec 28, 2022 7:16 am, edited 4 times in total.
Reason: Topic automatically closed 6 months after creation. New replies are no longer allowed.
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2018
User avatar
austin.texas
Level 20
Level 20
Posts: 12003
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Post by austin.texas »

The first step in changing the colors of your Main Menu is to check which theme is currently being used, and choose the theme you want to edit.
Go to System Settings > Themes > Installed and look for the one which is check marked. That one is currently applied.
Right-click on the other themes to apply them, and pick the one which you like best.

In order to edit the theme, go to /usr/share/themes in your File Manager and copy the theme folder that you want to edit.
Paste that into your hidden /home/user/.themes folder
If /home/user/.themes does not exist, you will have to create it first. Open a terminal and enter
mkdir /home/user/.themes
Now you can edit your copy of the theme.

If you want to install more themes, see
How To Install a New Theme
http://forums.linuxmint.com/viewtopic.php?f=42&t=155399
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2018
hexdef101

Re: How To Theme The Cinnamon Main Menu Colors

Post by hexdef101 »

Austin, you may have went a little overboard :lol: These posts don't really have much room for discussion. That said I just chose one. After all I was the one who said we would come.'

When Theming the Main Menu, One should first and foremost Chose a good graphic for the background. This goes for quite a few of these How to's on the subject of theming. Yes you can just go minimalist and use a solid color or a gradient, but graphically speaking its not very interesting to look at.

A "good" graphic should be Large. Wallpaper size is good, HD is better. But for just a single element, A good image is one that is larger then the element you are theming. Lets use this one for now http://upload.wikimedia.org/wikipedia/c ... s-2007.jpg

Generally speaking the Main Menu Element is usually around 638x634. So take that image into gimp scale it to a height of 634 so that you can get the majority of the image in without it scaling badly when its applied to your main menu. Set the canvas size to a width of 638 and center the image, then set the layer to image size.

Now you have a nice menu sized image for your main menu. But lets add a few extra touches to your graphic to make it pop. I like to bevel mine so using Filters/Decor/Add Bevel in gimp, Uncheck work on copy, set the bevel to 20 and apply. then hit [Ctrl]+[F] to do it again (not necessary on all images)

Save this image to your Desktop As Menu.Png. Move this image into the theme you are modding, Lets use Cloud 1 http://cinnamon-spices.linuxmint.com/themes/view/72. which should be already in your .themes folder. if not download it from the supplied link.

Open the cloud 1 cinnamon.css file in Gedit.. go to the PopupMenu (popupMenu.js) section. in the subsection listed as .popup-menu, replace the line

background-color: rgba(255,255,255,0.3); with border-image: url("Menu.png")0 10 8 8 stretch;

save the cinnamon.css and apply the cloud 1 theme and restart cinnamon
hexdef101

Re: How To Theme The Cinnamon Main Menu Colors

Post by hexdef101 »

Thats all there is to it. you can use background-image instead of border image in most versions of cinnamon, but it doesn't work right in LM14. border-image always works. up to LM16. That may change in later versions.
User avatar
austin.texas
Level 20
Level 20
Posts: 12003
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Post by austin.texas »

Thanks for outlining the exercise, hexdef101. There are things in there that I wouldn't have thought of, and it is a nice procedure to know.
I followed the guide and modified the Baldr theme.
Image

And, of course, the image is on the background of the popup menus, also.
What is the canvas/layer for? Why couldn't you just save it?
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2018
hexdef101

Re: How To Theme The Cinnamon Main Menu Colors

Post by hexdef101 »

ok the canvas/layer thing is to make sure the horizontal size is correct. If you just use a "Flat Image" without any" enhancements, a close enough size is fine, though you don't add the stretch to the border-image/background-image line. On the other hand, if you say add the bevel like I do it has to be right or either the edges are cut off, or the image is warped. I should point out that in fact the size I gave doesn't seem to be exactly the same throughout the many different themes.

for the exact size based on any theme, a simple method is to take a screenshot with the Main Menu visable. Then crop the image till only the menu is left. that is the size for that particular theme. In the case of cloud the main menu is in fact narrower then expected, being 594x643. The procedure is the same though.

As to the Main menu and the popups having the same background, If you want it different,use a different image. Do the exact same thing in the .switcher-list section of your cinnamon.css file. Size dependent on that particular element (at full size)

I should also point out that like everything a make a backup of the theme in question, or copy the entire cinnamon folder to a different folder with a different name (name whatever you like). If you don't you will just have to re-download the theme you are modding if you want the original for some reason.
User avatar
austin.texas
Level 20
Level 20
Posts: 12003
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Post by austin.texas »

I should point out that in fact the size I gave doesn't seem to be exactly the same throughout the many different themes.
One thing about the size of the menu, the more favorites you add the taller it gets. That will vary the result for everyone.
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2018
hexdef101

Re: How To Theme The Cinnamon Main Menu Colors

Post by hexdef101 »

which is why I am Not fond of that particular function of the Mint Main Menu. I would bet though that you can add a Slider function to it and fix that issue globally.
caribriz

Re: How To Theme The Cinnamon Main Menu Colors

Post by caribriz »

Thank you hexdef101 - good ideas and hints there :D

Here is my attempt in LM13 (cinnamon 2.0) - using a background image from an LM13 mdm theme Raindrops - "Raindrops.jpg"

(in cinnamon.css I put "Menu.jpg" instead of "Menu.png")
Changed the Cloud theme's panel background color and font color as well.

Image



EDIT: I have since found out that the artist responsible for this image was Zwopper.
This is "Blue-Dew" which is the blue version of his Linux Mint 7 Gloria wallpaper, "Mint-Dew"
- so all credit to him for his great artwork - which I "borrowed" for this experiment.

Link to his package of wallpapers:
http://zwopper.deviantart.com/art/Dew-U ... -135837946
Last edited by caribriz on Sat Feb 01, 2014 11:53 pm, edited 2 times in total.
Brahim Salem

Re: How To Theme The Cinnamon Main Menu Colors

Post by Brahim Salem »

That's one hell of a theme! I'm glad you stared the project and sorry I was a bit busy :D

PS: Can I get this theme :D
Brahim Salem

Re: How To Theme The Cinnamon Main Menu Colors

Post by Brahim Salem »

to edit main menu font colour edit

Code: Select all

color: #fff;
under

Code: Select all

.popup-menu {
in

Code: Select all

* PopupMenu (popupMenu.js) 
the section looks something this

Code: Select all

.popup-menu {
	border: 1px  #555;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	background-gradient-direction: vertical;
	background-gradient-start: rgba(200,23,23,.98);
	background-gradient-end: rgba(50,15,15,.93);
	box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.86);
    border-radius: 0px 15px 15px 15px;
	color: #fff;
	font-size: 9pt;
    min-width: 100px;
}
Image
caribriz

Re: How To Theme The Cinnamon Main Menu Colors

Post by caribriz »

Brahim wrote: ... PS: Can I get this theme :D
It's not complete, it was just for the tutorial example, but ... here it is if you want it.
http://www.mediafire.com/download/a5vdo ... d-2.tar.gz
hexdef101

Re: How To Theme The Cinnamon Main Menu Colors

Post by hexdef101 »

nice work Caribriz. especially with the scaling. Here is a trick I had to work out on the bevel, because gimps basic bevel function leaves an annoying diagonal line in the corners of many images.

using Raindrops.jpg

make a second transparent layer Layer/New Layer, Click on the color box and set the color to #C2C2C2, Bucket fill it with just this color.

using Filters/Decor/Bevel, set your bevel to 30 (or if you resized the image first for this little practice 20), Apply bevel to the grey layer, and [Ctrl]+[F] it 4 to five times to make a very heavy bevel. using [Ctrl]+ copy the grey layer, then [Ctrl]+[V] to paste it over itself.

using Filters/Blur/Gaussian Blur... Set the blur factor to 49h and 49v and blur the pasted layer. Anchor the layer by hitting [Ctrl]+[H]. Repeat the Copy-Paste- Blur procedure again.

once done open the layers toolbox [Ctrl]+[L] (if you don't already have it up that is), set the Layer Properties to Overlay on the grey layer. Merge Visible layers
[Ctrl]+[M] and Save. This will give you a smoother bevel in all versions of gimp. There is a downloadable script to do this for you, but It doesn't work right in newer versions of gimp. You can of course apply the bevel once more to the finished file to make the highlight stand out better, but no more then once or that annoying diagonal line will be noticeable again.

Depending on the image you don't have to use this longer method, as the image hides the line in the corners better. You can also skip about half of this on plain Gradient images as the Gaussian Blur doesn't hurt them any.
caribriz

Re: How To Theme The Cinnamon Main Menu Colors

Post by caribriz »

Wow, hexdef - great tip!

I did it - and you can see that it's "smoother" on the bevel all around and looks even better.

Thanks!
Loving it :D
hexdef101

Re: How To Theme The Cinnamon Main Menu Colors

Post by hexdef101 »

Thanks Caribriz. I had to come up with that method on the fly as I didn't actually have a good method other then changing computers to my old LM9 setup with its gimp. The downloadable script works in that version. In reality I would prefer to have those scripts again.
Brahim Salem

Re: How To Theme The Cinnamon Main Menu Colors

Post by Brahim Salem »

I have started a new thread here too http://forums.linuxmint.com/viewtopic.php?f=25&t=155584 as part of the big Mint theme :D can you help me here too :D Unlike other distros Mint lacks artwork improvement. Let's invade them guys :lol:
Brahim Salem

Re: How To Theme The Cinnamon Main Menu Colors

Post by Brahim Salem »

Want some violence :shock: Check this beast guys here http://gnome-look.org/content/show.php?content=162841

Image

:lol: :lol: :lol:
User avatar
austin.texas
Level 20
Level 20
Posts: 12003
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Post by austin.texas »

Brahim, please add to the purpose of this thread by explaining a bit about how that was done.
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2018
Brahim Salem

Re: How To Theme The Cinnamon Main Menu Colors

Post by Brahim Salem »

I made a V2 of War theme get it here http://gnome-look.org/content/show.php?content=162842

I have applied background images to the panel and popup menus as explained earlier above austin :D

Image
Last edited by Brahim Salem on Thu Jan 09, 2014 8:18 am, edited 1 time in total.
User avatar
austin.texas
Level 20
Level 20
Posts: 12003
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Post by austin.texas »

Thanks, Brahim.
One thing I was wondering was about the background on the weather. Is that coded separately?
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2018
Locked

Return to “Themes, Icons & Wallpaper”