How To Theme The Cinnamon Main Menu Colors

Forum rules
Before you post please read this

How To Theme The Cinnamon Main Menu Colors

Postby austin.texas on Tue Jan 07, 2014 7:52 am

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/i934f6tm60yxdjb/HOW-TO-CHANGE-THE-COLORS-OF-A-CINNAMON-THEME.pdf

Forum discussions for Cinnamon themes:

How To Install a New Theme
viewtopic.php?f=42&t=155399

How To Theme The Cinnamon Main Menu Borders and Boxes
viewtopic.php?f=42&t=155401

How To Theme The Cinnamon Taskbar Panel Window List Tabs
viewtopic.php?f=42&t=155402

How To Theme The Cinnamon Taskbar Panel Icons and Applets
viewtopic.php?f=42&t=155404

How To Theme The Cinnamon Popup Menu
viewtopic.php?f=42&t=155405

How To Theme The Cinnamon Notifications
viewtopic.php?f=211&t=155411

How to create/edit a Cinnamon theme, by Brahim
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 austin.texas on Thu Jan 23, 2014 10:37 am, edited 3 times in total.
Mint 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3605
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Linux Mint is funded by ads and donations.
 

Re: How To Theme The Cinnamon Main Menu Colors

Postby austin.texas on Tue Jan 07, 2014 9:55 am

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
viewtopic.php?f=42&t=155399
Mint 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3605
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Postby hexdef101 on Tue Jan 07, 2014 6:31 pm

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/commons/b/b0/Mint-leaves-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
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How To Theme The Cinnamon Main Menu Colors

Postby hexdef101 on Tue Jan 07, 2014 6:38 pm

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.
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How To Theme The Cinnamon Main Menu Colors

Postby austin.texas on Wed Jan 08, 2014 7:54 am

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 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3605
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Postby hexdef101 on Wed Jan 08, 2014 9:53 am

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.
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How To Theme The Cinnamon Main Menu Colors

Postby austin.texas on Wed Jan 08, 2014 10:20 am

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 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3605
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Postby hexdef101 on Wed Jan 08, 2014 10:28 am

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.
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How To Theme The Cinnamon Main Menu Colors

Postby caribriz on Wed Jan 08, 2014 5:51 pm

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-Unbranded-Package-135837946
Last edited by caribriz on Sat Feb 01, 2014 11:53 pm, edited 2 times in total.
Image
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17 Cinnamon)
caribriz
Level 5
Level 5
 
Posts: 891
Joined: Mon Nov 28, 2011 7:43 am

Re: How To Theme The Cinnamon Main Menu Colors

Postby Zorba on Wed Jan 08, 2014 7:43 pm

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
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2306
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Main Menu Colors

Postby Zorba on Wed Jan 08, 2014 8:40 pm

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
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2306
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Main Menu Colors

Postby caribriz on Wed Jan 08, 2014 8:56 pm

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/a5vdo8vy21bzxbv/Cloud-2.tar.gz
Image
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17 Cinnamon)
caribriz
Level 5
Level 5
 
Posts: 891
Joined: Mon Nov 28, 2011 7:43 am

Re: How To Theme The Cinnamon Main Menu Colors

Postby hexdef101 on Wed Jan 08, 2014 9:38 pm

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]+[C] 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.
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How To Theme The Cinnamon Main Menu Colors

Postby caribriz on Wed Jan 08, 2014 10:40 pm

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
Image
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17 Cinnamon)
caribriz
Level 5
Level 5
 
Posts: 891
Joined: Mon Nov 28, 2011 7:43 am

Re: How To Theme The Cinnamon Main Menu Colors

Postby hexdef101 on Wed Jan 08, 2014 10:59 pm

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.
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How To Theme The Cinnamon Main Menu Colors

Postby Zorba on Thu Jan 09, 2014 5:34 am

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:
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2306
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Main Menu Colors

Postby Zorba on Thu Jan 09, 2014 6:51 am

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

Image

:lol: :lol: :lol:
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2306
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Main Menu Colors

Postby austin.texas on Thu Jan 09, 2014 7:07 am

Brahim, please add to the purpose of this thread by explaining a bit about how that was done.
Mint 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3605
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Main Menu Colors

Postby Zorba on Thu Jan 09, 2014 7:40 am

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 Zorba on Thu Jan 09, 2014 8:18 am, edited 1 time in total.
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2306
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Main Menu Colors

Postby austin.texas on Thu Jan 09, 2014 7:47 am

Thanks, Brahim.
One thing I was wondering was about the background on the weather. Is that coded separately?
Mint 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3605
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Linux Mint is funded by ads and donations.
 
Next

Return to Themes, Icons, & Wallpaper

Who is online

Users browsing this forum: No registered users and 4 guests