Cinnamon menu editing

Archived topics about LMDE 1 and LMDE 2
Locked
muffin

Cinnamon menu editing

Post by muffin »

Hello,

Is there any way to edit the 'Administration' and 'Preferences' sections of the Cinnamon menu? (LMDE 201303 Cinnamon x64)

If I right-click Menu > Edit menu, these two sections don't show in the list.

Thanks,

- m
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.
AdamFirst
Level 2
Level 2
Posts: 90
Joined: Sat Nov 29, 2008 4:34 pm

Re: Cinnamon menu editing

Post by AdamFirst »

I don't know the answer, but I'd also like to know.
killer de bug

Re: Cinnamon menu editing

Post by killer de bug »

This bug has been reported months ago, and a correction will be available in Cinnamon 1.8.
Just be patient.
User avatar
roblm
Level 15
Level 15
Posts: 5939
Joined: Sun Feb 24, 2013 2:41 pm

Re: Cinnamon menu editing

Post by roblm »

This topic is now locked, so I have added updated info on Mint 18.3 Cinnamon menu and panel editing to my last post in this topic:
viewtopic.php?f=208&t=124153

muffin wrote: Is there any way to edit the 'Administration' and 'Preferences' sections of the Cinnamon menu?
Yes you can if you follow my instructions in the topic "Cinnamon app menu a mess". Click the link below:
http://forums.linuxmint.com/viewtopic.p ... 8&t=124153
cinnamon menu editor.png
In that topic I had changed the default Cinnamon Menu to the Simpler Menu, which doesn't have the 3 system buttons at the
botton of the Favorites column, and added the Quit Applet to the panel, which replaces those buttons. However, I still found myself
often clicking the menu button to shutdown, so I have changed back to the default Cinnamon Menu and removed the Quit Applet.
To keep my menu as compact as possible, I have removed the Lock Screen button, which I never use, but can be done by pressing
Ctrl+Alt+L at the same time, and the Logout button, which I can do by pressing Ctrl +Alt+Backspace at the same time.

To remove those buttons go to "/usr/share/cinnamon/applets/menu(at)cinnamon.org” and right click on the file “applet.js" and select
“Open as Root”. First make a backup copy of the file by right clicking on it and selecting "Copy". Then paste it into the empty space.

Then open the file and in the menu at the top click → Search → Find. In the window type: //Lock screen

Add /* followed by a space in front of the line “//Lock screen”. Then move down 32 lines to the line:
this.leftBox.add_actor(button.actor, { y_align: St.Align.END, y_fill: false });

Put a space followed by */ after it. You can also remove the short separator line by placing the /* six lines higher, in front of the line
"//Separator". Save the file and restart Cinnamon by pressing Alt+F2 and type r in the window. Press Enter. See the code box below.

In my compact menu, which lists only the 16 apps I need to use, the All Applications category isn't needed either. To remove it open
the "applet.js" file and in the Search → Find window type: this._allAppsCategoryButton = new CategoryButton(null);

Add /* to the beginning of that line. Go down 31 lines to this line:
this.leftBox.add_actor(button.actor, { y_align: St.Align.END, y_fill: false });

Add */ to the end of it. Save the file. When the menu is first opened, all the apps listed in All Applications will appear in the scrolling
menu on the right, so it can be used if needed, but will disappear after another category is touched, and won't reappear until the menu
is reopened.

Code: Select all

/* //Lock screen
        let button = new SystemButton(this, "gnome-lockscreen", launchers.length + 3);        
        button.actor.connect('enter-event', Lang.bind(this, function() {
				this.selectedAppTitle.set_text(_("Lock screen"));
				this.selectedAppDescription.set_text(_("Lock the screen"));				
			}));
		button.actor.connect('leave-event', Lang.bind(this, function() {
				this.selectedAppTitle.set_text("");
				this.selectedAppDescription.set_text("");
			}));        
        button.actor.connect('clicked', Lang.bind(this, function() {            
            this.menu.close();
            this._screenSaverProxy.LockRemote();
        }));
        
        this.leftBox.add_actor(button.actor, { y_align: St.Align.END, y_fill: false });                  
        
        //Logout button
        let button = new SystemButton(this, "gnome-logout", launchers.length + 3);        
        button.actor.connect('enter-event', Lang.bind(this, function() {
				this.selectedAppTitle.set_text(_("Logout"));
				this.selectedAppDescription.set_text(_("Leave the session"));				
			}));
		button.actor.connect('leave-event', Lang.bind(this, function() {
				this.selectedAppTitle.set_text("");
				this.selectedAppDescription.set_text("");
			}));        
        button.actor.connect('clicked', Lang.bind(this, function() {            
            this.menu.close();
            this._session.LogoutRemote(0);
        }));
        
        this.leftBox.add_actor(button.actor, { y_align: St.Align.END, y_fill: false }); */ 

Code: Select all

/* this._allAppsCategoryButton = new CategoryButton(null);
        this._addEnterEvent(this._allAppsCategoryButton, Lang.bind(this, function() {
            if (!this.searchActive) {
                this._allAppsCategoryButton.isHovered = true;
                if (this.hover_delay > 0) {
                    Tweener.addTween(this, {
                           time: this.hover_delay,
                           onComplete: function () {
                               if (this._allAppsCategoryButton.isHovered) {
                                   this._allAppsCategoryButton.actor.style_class = "menu-category-button-selected";
                                   this._clearPrevCatSelection(this._allAppsCategoryButton.actor);
                                   this._select_category(null, this._allAppsCategoryButton);
                               } else {
                                   this._allAppsCategoryButton.actor.style_class = "menu-category-button";
                               }
                           }
                    });
                } else {
                    this._allAppsCategoryButton.actor.style_class = "menu-category-button-selected";
                    this._clearPrevCatSelection(this._allAppsCategoryButton.actor);
                    this._select_category(null, this._allAppsCategoryButton);
                }
            }
         }));
         this._allAppsCategoryButton.actor.connect('leave-event', Lang.bind(this, function () {
            if (!this.searchActive) {
                this._allAppsCategoryButton.actor.style_class = "menu-category-button";
            }
            this._previousSelectedActor = this._allAppsCategoryButton.actor;
            this._allAppsCategoryButton.isHovered = false;
         }));
         this.categoriesBox.add_actor(this._allAppsCategoryButton.actor); */
The icons in the Favorites column of the menu are larger than the category and app icons. They will decrease in size as more apps
are added to that section. But if you want to be able to add more icons without increasing the height of the menu, then the default
icon size and spacing between icons can be be reduced. If you look at the two menus on the top in the picture below, both have
about the same height but the right menu has room for two more icons in it's favorites column.

To decrease the Favorites icon size, open the “applet.js” file and in it's top section find these lines:

Code: Select all

const MAX_FAV_ICON_SIZE = 32;
const CATEGORY_ICON_SIZE = 22;
const APPLICATION_ICON_SIZE = 22;
In the first line, change the default value of 32 to 27, which will make the Favorites icons about the same size as the other icons. You
can decrease this number more but then the three system icons will be changed to a very basic appearance. I have a custom made
icon for Shutdown so it won't change appearance, so I have my setting at 26, which is the exact size of the other icons.

Then in the Search → Find window type: FavoritesButton.prototype
Go down to this line: this.actor.style = "padding-top: "+(icon_size/3)+"px;padding-bottom: "+(icon_size/3)+"px; margin:auto;"
Change the number 3 to a 6 in the two places on that line. Save the file. By doing this I was able to eliminate the Graphics category, which
only had GIMP listed in it.

My menu has only one system icon in the Favorites column but if you're keeping all three system icons then the spacing between them
can be reduced by going down 28 lines to the section: SystemButton.prototype = {

Go down to the line: this.actor.style = "padding-top: "+(icon_size/3)+"px;padding-bottom: "+(icon_size/3)+"px; margin:auto;"
Change the number 3 to a 6 in the two places on that line.

To change the icon size of the application categories, change the value of the second line shown in the code box above.
To change the icon size of the applications listed in the right column of the menu, change the value of the third line.

If you would like to replace the default shutdown icon in the menu to the one shown in my menu, then go to
“/usr/share/linuxmint/mintinstall/icons”. Right click on the icon file named “boot.png” and select “Open as Root”. Then right click
on it again and select “Copy”. Go to /usr/share/icons/Mint-X/apps/48” and paste it here. Right click on the pasted icon and select
“Rename”. Change the name to “gnome-shutdown-2”.

Open the “applets.js” file again and in the Search → Find window type: Shutdown button. Look at the second line that says:
let button = new SystemButton(this, "gnome-shutdown", launchers.length + 3);
Change the word “gnome-shutdown” to “gnome-shutdown-2”.
cinnamon menu-new.png
The icon will look fuzzier than mine because I have edited it the GIMP Image Editor. Look at the original “boot.png' icon in the picture
above on the bottom left. It has shades of red which give it a more 3-D appearance when its viewed enlarged but will look fuzzier when
viewed as a small icon in the menu. The icon on the lower right has been edited to give solid red and white colors, and the white lines
have been widened. This will give a sharper looking icon when viewed at a small size.

EDITED: You never know when the Mint developers will change the rules for editing icons. To change the “Quit” button's
icon in the menu for Mint 17.1 Cinnamon, copy the “boot.png” icon as explained above but paste it into the
/home/your-user-name/.icons” folder. Then rename it “shutdown-2”. The name cannot start with the word gnome or
system. Then edit the “applets.js” file. This applies to a renamed or custom made icon. If you use an existing icon from
/usr/share/icons/Mint-X/apps/48”, then just add it's name to the “applets.js” file.
To change a menu category's icon to a renamed or custom made icon, then the icon must be copied as root and added to
“/usr/share/icons/Mint-X/categories/48”, and also added to “/home/your-user-name/.icons”. Then open the Menu Editor to
change the icon and select the icon's location from “/usr/share/icons/Mint-X/categories/48/icon-name

To increase the font size of the menu go to System Settings → Fonts and increase the number next to “Text Scaling Factor”. This is
a global setting so it will also affect the file manager and other applications, but you can restore their original size by decreasing the
value of the "Default font" setting, but this may not affect every setting.

To increase the font size of only the menu, then the configuration file of the Cinnamon theme that is being used will have to be edited.
My menu is using the Nightlite Graphite theme. The default theme of Mint 16 is Linux Mint. Check in System Settings → Themes to see
what theme is being used.
Go to “/usr/share/themes” and right click on the theme being used and select “Open as Root”. Open the cinnamon folder. Right click
on the “cinnamon.css” file and select “Copy”. Paste it into the empty space to make a backup. Open the file and in the Search → Find
window type “.popup-menu-boxpointer”. There will be lines that look like this:

Code: Select all

.popup-menu {
    color: #ffffff;
    font-size: 9.5pt;
    min-width: 100px;
Change the value of the line “font-size: 9.5pt”. This default value can be different for other themes.

Since I only have 16 apps in my menu, there is also no need for a search window. Trying to remove it by editing the “applet.js” file
results in the scrolling bar on the right to not function correctly.
Open the “cinnamon.css” file. In the Search → Find window type “.menu-search-box”. Under “#menu-search-entry {“, look for the
following lines and change the values to “0”:

Code: Select all

    padding: 4px 12px;
    caret-size: 1px;
    width: 250px;
Some lines can have two values.

Under “#menu-search-entry:hover {“, change the value of the two lines that start with "border" to “0”:

Code: Select all

    border: 1px solid rgb(150,150,150);
    border: 1px solid rgba(120,120,120,1); 
Under “.menu-search-entry-icon {“, change the value of this line to “.1”:
icon-size: 1em;

EDITED: For Mint 17.1 Cinnamon, using the Cinnamon theme, find this line:
#menu-search-entry:hover {
below it is this line:
border: 1px solid rgb(136,138,133);
Change the value 1 to a 0.

Now the menu categories and category applications columns can be moved upwards. In the Search → Find window type
“.menu-categories-box {“. Change the value of this line to “0”:
padding-top: 10px;

Just below in the section “.menu-applications-box {“. Change the value of this line to “0”:
padding-top: 10px;

To make the menu even more compact, the Favorites box width can be decreased. Go up a little and find this section:

Code: Select all

.menu-favorites-box {  
    margin: auto;
    padding: 10px;
    border: 1px solid rgba(90,90,90,1);  
    border-radius: 4px;  
    background-gradient-direction: vertical;
    background-gradient-start: rgba(80,80,80,1);
    background-gradient-end: rgba(60,60,60,1);
}

.menu-favorites-button {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 4px;
Under “.menu-favorites-box {“, change the value of this line to make the Favorites box smaller:
padding: 10px;

Under “.menu-favorites-button {“, change the four “padding” lines to make the space around icons in the Favorites box even
smaller. The settings for my menu are below:

Code: Select all

.menu-favorites-box {  
    padding: 0px;

.menu-favorites-button {
    padding-top: 0px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 0px;
Finally I decreased the spacing between the Favorites, Categories, and Applications columns by going down to the section “.menu-categories-box {“, and changing the value of these two lines to 20:
padding-left: 30px;
padding-right: 30px;

The compact menu shown in the bottom right in the picture above is the menu I'm using now.

Check my posts in this topic to customize the Mint 16 and 17 Xfce menu:
http://forums.linuxmint.com/viewtopic.php?f=47&t=160784

Check this topic to customize the Mint 17 Mate menu:
http://forums.linuxmint.com/viewtopic.p ... 6&t=185952

This topic is now locked, so I have added updated info on Mint 18.3 Cinnamon menu and panel editing to my last post in this topic:
viewtopic.php?f=208&t=124153
Locked

Return to “LMDE Archive”