How To Theme The Cinnamon Main Menu Colors
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
- austin.texas
- Level 20
- Posts: 12003
- Joined: Tue Nov 17, 2009 3:57 pm
- Location: at /home
How To Theme The Cinnamon Main Menu Colors
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.
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.
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
Linux Linx 2018
- austin.texas
- Level 20
- Posts: 12003
- Joined: Tue Nov 17, 2009 3:57 pm
- Location: at /home
Re: How To Theme The Cinnamon Main Menu Colors
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
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
Linux Linx 2018
Re: How To Theme The Cinnamon Main Menu Colors
Austin, you may have went a little overboard 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
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
Re: How To Theme The Cinnamon Main Menu Colors
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.
- austin.texas
- Level 20
- Posts: 12003
- Joined: Tue Nov 17, 2009 3:57 pm
- Location: at /home
Re: How To Theme The Cinnamon Main Menu Colors
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.
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?
I followed the guide and modified the Baldr theme.
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
Linux Linx 2018
Re: How To Theme The Cinnamon Main Menu Colors
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.
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.
- austin.texas
- Level 20
- Posts: 12003
- Joined: Tue Nov 17, 2009 3:57 pm
- Location: at /home
Re: How To Theme The Cinnamon Main Menu Colors
One thing about the size of the menu, the more favorites you add the taller it gets. That will vary the result for everyone.I should point out that in fact the size I gave doesn't seem to be exactly the same throughout the many different themes.
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
Linux Linx 2018
Re: How To Theme The Cinnamon Main Menu Colors
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.
Re: How To Theme The Cinnamon Main Menu Colors
Thank you hexdef101 - good ideas and hints there
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.
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
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.
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.
Re: How To Theme The Cinnamon Main Menu Colors
That's one hell of a theme! I'm glad you stared the project and sorry I was a bit busy
PS: Can I get this theme
PS: Can I get this theme
Re: How To Theme The Cinnamon Main Menu Colors
to edit main menu font colour edit under in
the section looks something this
Code: Select all
color: #fff;
Code: Select all
.popup-menu {
Code: Select all
* PopupMenu (popupMenu.js)
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;
}
Re: How To Theme The Cinnamon Main Menu Colors
It's not complete, it was just for the tutorial example, but ... here it is if you want it.Brahim wrote: ... PS: Can I get this theme
http://www.mediafire.com/download/a5vdo ... d-2.tar.gz
Re: How To Theme The Cinnamon Main Menu Colors
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]+
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.
Re: How To Theme The Cinnamon Main Menu Colors
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
I did it - and you can see that it's "smoother" on the bevel all around and looks even better.
Thanks!
Loving it
Re: How To Theme The Cinnamon Main Menu Colors
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.
Re: How To Theme The Cinnamon Main Menu Colors
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 can you help me here too Unlike other distros Mint lacks artwork improvement. Let's invade them guys
- austin.texas
- Level 20
- Posts: 12003
- Joined: Tue Nov 17, 2009 3:57 pm
- Location: at /home
Re: How To Theme The Cinnamon Main Menu Colors
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
Linux Linx 2018
Re: How To Theme The Cinnamon Main Menu Colors
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
I have applied background images to the panel and popup menus as explained earlier above austin
Last edited by Brahim Salem on Thu Jan 09, 2014 8:18 am, edited 1 time in total.
- austin.texas
- Level 20
- Posts: 12003
- Joined: Tue Nov 17, 2009 3:57 pm
- Location: at /home
Re: How To Theme The Cinnamon Main Menu Colors
Thanks, Brahim.
One thing I was wondering was about the background on the weather. Is that coded separately?
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
Linux Linx 2018