Mint 18.3 Cinnamon Menu and Panel Editing
Some of this info comes from the topic
Cinnamon menu editing in this link:
viewtopic.php?f=228&t=129524
However, that topic is now locked, so I can’t add any updates to it. The updates will be added to this topic instead. This guide should be used by Mint 17 and 18 users because it has updated and new info. The goal is to make the default Cinnamon menu as compact as possible by reducing it’s dimensions and removing unneeded Categories, Applications and features. This helps to minimize scrolling and mouse movements when searching for an app. I will also discuss changing the icons in the menu and panel to more vibrant ones and creating a custom panel.
First remove any unneeded menu
Categories. In my menu, there are two apps that I use in the
Internet Category. Firefox is on the panel and Transmission is in the
Favorites box, so the Internet Category can be removed. In the
Graphics Category, I use GIMP and Inkscape. GIMP is already in the Favorites box. I can add Inkscape to another Category, so then the Graphics Category can be removed. I add Inkscape to the Accessories category by opening the menu editor, clicking once on Inkscape to highlight it, clicking the
Copy button on the right, selecting the Accessories category and then clicking the
Paste button on the right.
Remove any duplicate app that is listed in the
Favorites column or has a
panel launcher and is also visible in a
Category. For example, my Favorites column lists Terminal and it is also in the Administration category. However, if I open the menu editor and make it invisible in the Administration category, then it will disappear from the Favorites column. To prevent that, I can make a copy of Terminal in the menu editor and paste it into another category that is not listed in the menu, such as
System Tools, but be sure it is marked as visible.
Then remove any menu apps that are infrequently or never used. Many of the apps found in the
Administration and
Preferences categories can be found in
Preferences > System Settings.
The icons in the
Favorites column of the default menu are larger than the
Category and
Application icons and there is an excessive amount of vertical spacing between them. This can be seen in the left menu in the picture below.
Cinnamon menu-b.jpeg
The icon size and vertical spacing can be reduced. The menu on the right is the edited compact menu. At that particular height, the default menu can display 2 extra icons above the 3
system icons in the
Favorites box. The edited menu has room for 7 extra icons in the Favorites box and 3 extra icons in the Apps column.
My first change was to remove the
Lock Screen icon in the
Favorites box on the left side. I never use it but it’s function can be executed by pressing
Ctrl+Alt+L at the same time. The
Logout icon was also removed. It’s function can be executed by pressing
Ctrl+Alt+Backspace at the same time.
To remove those icons, open the
File Manager and go to
/usr/share/cinnamon/applets
Right click on the folder
menu@cinnamon.org and select
Open as Root. Before editing any files, always make a backup copy first. Right click on the
applet.js file and select
Copy. Then right click in the empty space and select
Paste. Then open the file and in the menu at the top click
Search > Find. Then type:
//Separator
Add
/*
followed by a space in front of the line
//Separator.
Then type
//Shutdown button
in the
Search > Find window. The line just above will be edited. Go to the end of the line, add a space and then add
*/
. The lines between those two symbols will not be read now. Save the file. Any changes made can be seen by restarting Cinnamon, using one of these four methods:
1. Right click on the panel and select
Troubleshoot > Restart Cinnamon.
2. Press the
Ctrl+Alt+Esc keys at the same time. (My least favorite method. It has the least amount of visual feedback when used and sometimes doesn't work).
3. Press the
Alt+F2 keys at the same time. Then type the letter
r and Press Enter.
4. Add the
Restart Cinnamon applet to the panel but it needs to be installed first. Right click on the panel and select
Add applets to the panel. Click the
Download button. Find the
Restart Cinnamon applet and click the down arrow to install it. Then click the
Manage button. The new applet should be at the top. Now only a single click is needed.
I recommend making only one change at a time. If there is an undesired effect, then it can be easily reversed. The code box below shows the edited section:
Code: Select all
/* //Separator
if (launchers.length != 0) {
let separator = new PopupMenu.PopupSeparatorMenuItem();
this.favoritesBox.add(separator.actor, { y_align: St.Align.END, y_fill: false });
}
//Lock screen
let button = new SystemButton(this, "system-lock-screen", launchers.length + 3,
_("Lock screen"),
_("Lock the screen"));
this._addEnterEvent(button, Lang.bind(this, this._favEnterEvent, button));
button.actor.connect('leave-event', Lang.bind(this, this._favLeaveEvent, button));
button.activate = Lang.bind(this, function() {
this.menu.close();
let screensaver_settings = new Gio.Settings({ schema_id: "org.cinnamon.desktop.screensaver" });
let screensaver_dialog = Gio.file_new_for_path("/usr/bin/cinnamon-screensaver-command");
if (screensaver_dialog.query_exists(null)) {
if (screensaver_settings.get_boolean("ask-for-away-message")) {
Util.spawnCommandLine("cinnamon-screensaver-lock-dialog");
}
else {
Util.spawnCommandLine("cinnamon-screensaver-command --lock");
}
}
else {
this._screenSaverProxy.LockRemote("");
}
});
this.favoritesBox.add(button.actor, { y_align: St.Align.END, y_fill: false });
//Logout button
button = new SystemButton(this, "system-log-out", launchers.length + 3,
_("Logout"),
_("Leave the session"));
this._addEnterEvent(button, Lang.bind(this, this._favEnterEvent, button));
button.actor.connect('leave-event', Lang.bind(this, this._favLeaveEvent, button));
button.activate = Lang.bind(this, function() {
this.menu.close();
this._session.LogoutRemote(0);
});
this.favoritesBox.add(button.actor, { y_align: St.Align.END, y_fill: false }); */
//Shutdown button
EDITED:
That method won't work for Mint 19 but does work for Mint 19.1. Go down to the section
UPDATE FOR MINT 19 CINNAMON beta at the end of this post for a solution.
If you want all the the menu categories in the correct alphabetical order, then search for
let prefcats
in the
applets.js file. Remove the words
administration and
preferences, but not the quotation marks. If you want to move any category to the bottom, then add the name between the quotation marks. The only exception is
Sound & Video.. Another way to move a category to the bottom is to add a tilde (
~) in front of the name.
My compact menu lists only 15 apps, so there was no need for the
All Applications category button. To remove it, type this in the
Search > Find window:
allAppsCategoryButton = new
Add
/*
and a space to the beginning of that line. Then go down 18 lines to this line:
EDITED: for Mint 19.2, go down 3 lines
this._categoryButtons.push(this._allAppsCategoryButton);
Add a space and then
*/
to the end of it. The edited section is shown below:
Code: Select all
/* this._allAppsCategoryButton = new CategoryButton(null);
this._addEnterEvent(this._allAppsCategoryButton, Lang.bind(this, function() {
if (!this.searchActive) {
this._allAppsCategoryButton.isHovered = true;
this._clearPrevCatSelection(this._allAppsCategoryButton.actor);
this._allAppsCategoryButton.actor.style_class = "menu-category-button-selected";
this._select_category(null);
this.makeVectorBox(this._allAppsCategoryButton.actor);
}
}));
this._allAppsCategoryButton.actor.connect('leave-event', Lang.bind(this, function () {
this._previousSelectedActor = this._allAppsCategoryButton.actor;
this._allAppsCategoryButton.isHovered = false;
}));
this.categoriesBox.add_actor(this._allAppsCategoryButton.actor);
this._categoryButtons.push(this._allAppsCategoryButton); */
When the menu is now opened, all the apps listed in
All Applications will still 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.
To decrease the
Favorites icon size, find these lines in the top section of the
applets.js file, going down 27 lines from the top:
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. You can decrease this number more but if the value is less than 25, then the three system icons will be changed to a very basic appearance, unless the icons are changed. The second line changes the
Category icon size and the third line changes the
Application icon size.
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;";
Change the number 3 to a 6 in both places to reduce the excessive vertical spacing in the Favorites box. Try 8 for even less space.
Then do a search for:
SystemButton.prototype
, which is 36 lines down. Find this line:
this.actor.style = "padding-top: "+(icon_size / 3)+"px;padding-bottom: "+(icon_size / 3)+"px;";
Change the number 3 to a 6 in both places. However, if you decide to remove the
Lock Screen and
Logout buttons like I did, then consider not changing the first number 3. This will leave a larger separation between the Shutdown icon and the Favorites App icons above it.
If you want to replace the default
Shutdown icon to the one shown in my menu, then open the
File Manager. If all the hidden folders and files are not displayed, then Click
View > Show Hidden Files or Press
Ctrl+H. Check for a folder named
.icons
(there is a dot before the name). If it doesn’t exist, then create it by right clicking in the empty space and selecting
Create New Folder.
Then go to
/usr/share/icons/Mint-Y/actions. Right click on the folder
96 and select
Open as Root. Right click on the icon
system-shutdown.png and select
Copy. Click the
home folder (not
Home at the top) in the column on the left side. On the right side, click the folder with your
user name and then the
.icons
folder. Paste the copied icon there. Right click on the icon and select
Rename. The new name will be
system-shutdown-2. This has to be done because the default Quit icon is named
system-shutdown. On the left side, click
File System and go back to
/usr/share/cinnamon/applets/menu@cinnamon.org and open the
applets.js file. In the
Search > Find window, type:
//Shutdown button
In the line below this, change the name
system-shutdown to
system-shutdown-2
In Mint Cinnamon 17.x and previous versions, there was a round version of that icon but it’s no longer available. However, the square icon can be edited in Gimp to make it look round. Or you can download my round
system-shutdown icon from
imgur. I have also included a round
Firefox icon and
penguin icon. Here is the link:
https://imgur.com/a/Gzgod
In Mint 18, most round icons have been removed, which doesn’t look quite right for some icons. The Firefox icon now shows a fox wrapped around a square globe.
Changing the Menu Category and Application Icons:
To change an
Application icon in the menu, right click on the Menu button and select
Configure. Click
Menu > Open the menu editor.
An alternate quicker way to open the menu editor is to open the menu to
Preferences > Cinnamon Menu Editor.
Right click on the app’s icon to be changed and select
Properties. Click on the icon and then click the
icons folder on the left side. Most of the icons used are in the
Mint-X folder. Select the icon type, such as
apps or
categories, and then the icon size. Size 48 is fine or use 96 for more detail. You can also use a custom icon, which can easily be created by using my guide in the topic
Mint 17 MATE Menu Editing, in the link below:
viewtopic.php?f=206&t=185952
Go down to the section
Making Custom Icons in my first post.
Use the same instructions to change a
Category icon in the menu to another existing icon in the Mint-X folder. However, using a
custom icon, as I used in the Accessories and Administration categories, is more complicated.
EDITED: for Mint 19.2, any icon from any location can be used.
Update - Using a Custom Icon: To use a
custom icon for an existing or newly created menu category, first open the File Manager and check that
Hidden Files are visible. Otherwise click
View > Show Hidden Files, or press
Ctrl+H. Add the icon to the
/home/your-user-name/.icons folder. If it doesn't exist, then create it. Open the Menu Editor and right click on the category whose icon you want to change and select
Properties. Click the icon, which brings up the
Choose an icon window. Right click in the empty space and mark the checkbox next to
Show Hidden Files. Click
Home on the left side and then the
.icons folder. Select the new icon. Open the menu and see if the new icon is visible. Usually it is not. To correct this, go to
/home/your-user-name/.local/share/desktop-directories. Look for the file that has the info for the category you wish to change. Some file names will include the actual category name, such as
cinnamon-graphics.directory for the the
Graphics category. However, these categories will have different names:
Code: Select all
Accessories cinnamon-utility.directory
Administration cinnamon-settings-system.directory
Internet cinnamon-network.directory
Preferences cinnamon-settings.directory
Sound & Video cinnamon-audio-video.directory
When a new category is created, such as Favorites, it will not appear in the menu until one application is added to it and made visible, and the file name listed in
desktop-directories will be similar to this:
alacarte-made-d5e8c300-35ea-11e8-be24-f46d04e8bb3c.directory
Open the file. The category name will be in the line
Name=. Go to the bottom. The name of the icon should be listed after
Icon=. Usually there is a misconfiguration by the desktop manager and the full path to the icon's location is listed after
Icon=, such as
Icon=/home/your-user-name/.icons/new-icon-name.png. This should be changed to
Icon=new-icon-name, without the
.png extension.
Previous instructions were to copy the custom icon to the
/home/your-user-name/.icons folder and with root authority add it to the
/usr/share/icons/Mint-X/categories/48 folder (or other numbered folder). Then open the Menu Editor to change the category icon and select the icon's location from
/usr/share/icons/Mint-X/categories/48. This method also worked because when the icon is selected from this location in the Menu Editor, then the
Icon= line is configured correctly.
END OF EDITING:
To make the menu even more compact, the menu’s Favorites box width can be decreased. The configuration file of the Cinnamon theme that is being used will have to be edited. I used the default
Linux Mint theme. Check in
System Settings > Themes, next to
Desktop, to see what theme is being used. Then open the File Manager and go to
/usr/share/themes, 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:
.menu-favorites-box
Lower the value in the line
padding: 10px;
to reduce the width of the Favorites box. I used 2px. You may want to Increase the value in the line
border: 1px solid rgba(90,90,90,1);
to make the sides of the Favorites box wider, so they are more visible. I used 3.
Code: Select all
.menu-favorites-box {
margin: auto;
padding: 10px;
border: 1px solid rgba(90,90,90,1);
border-radius: 4px;
I recommend copying each line that you plan to edit. Then pasting it to the right of the original line and adding
/*
to the beginning of the line and
*/
to the end, so it won’t be read, but you now have a backup of the original settings. For example, the line
padding: 10px;
is changed to this edited line, which has the new value:
Code: Select all
padding: 2px; /* padding: 10px; */
Go down to
.menu-favorites-button {
and lower the values of these 4 lines, which are the 4 sides surrounding a Favorites icon. I used 2px:
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
The spacing between the Favorites, Categories, and Applications columns can be reduced by going down to the section
.menu-categories-box {
, and changing these lines:
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
Change
padding-top to 0,
padding-left to 20, and
padding-right to 10.
Increasing
padding-bottom will allow more apps to be displayed but can increase the height of the menu. This number should be increased as the number of categories decreases, so that the same number of apps are listed.
Then go down to the section
.menu-applications-box {
and change the value of these lines to 0px:
padding-top: 10px;
padding-right: 10px;
Don’t reduce the value for
padding-left or the Favorites box will be moved to the left edge of the menu.
Then go down to the section
.menu-application-button {
and change the value of this line to 0
padding-top: 7px;
This will reduce the spacing between the apps to allow more to be displayed.
Then go down to the section
.menu-application-button-selected {
and change the value of this line to 0:
padding-top: 7px;
Here is one potential problem. As the number of categories displayed in the menu is reduced, there may also be a reduction in the number of apps displayed, as seen in the left menu in the picture below:
Cinnamon menu-3.png
To display more apps, the
cinnamon.css file is edited. In the
Search > Find window, type:
.menu-applications-box {
, and change the value of this line:
padding-bottom: 10px;
I used the value of 80, which allowed 8 apps to be displayed, without increasing the height of the menu. As that value is increased, more apps will be displayed, but the height of the menu will also increase. The compact menu in the middle in the picture above is the one I’m currently using.
To display even more apps, the icon size for apps can be made smaller and/or reduce the spacing between apps even more by going to this section and reducing the value of the line
padding-bottom: 7px;
Code: Select all
.menu-application-button {
padding-top: 0px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
max-width: 10px;
}
Also, the line
padding-bottom: 7px;
should be changed in this section to the same value:
Code: Select all
.menu-category-button-selected {
padding-top: 7px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
The menu on the right in the picture above shows this, using the value
padding-bottom: 3px;
The menu categories can also be moved closer together by going to the sections
.menu-category-button {
and
.menu-category-button-selected {
. Then reduce the value in these lines. They should be the same for both sections:
padding-top: 7px;
padding-bottom: 7px;
In the menu on the right in the picture above, only the value in the line
padding-top: 7px;
was changed to 0.
To change the
font size of only the menu, open the
cinnamon.css file. In the
Search → Find window type:
.menu {
. You will see this section:
Code: Select all
.menu {
/*border: 1px solid rgba(120, 120, 120, 1);*/
border: 1px solid rgba(50, 50, 50, 1);
border-radius: 4px;
background-color: rgba(63, 63, 63, 0.95);
color: #fff;
font-size: 9.5pt;
min-width: 100px;
Change the value of the line
font-size: 9.5pt
.
Since I only have 16 apps in my menu, there is also no need for a
Search window. To remove it, open the
cinnamon.css file. In the
Search → Find window type
.menu-search-box
. Change the value of this line to 0px:
padding-left: 30px;
In the next section below, under
#menu-search-entry {
, find these 5 lines and change the values to 0px. The first line has two numbers to change:
Code: Select all
padding: 4px 12px;
border-radius: 4px;
border: 1px solid rgba(245,245,245,0.2);
caret-size: 1px;
width: 250px;
In the next section below, under
#menu-search-entry:hover {
, change the value of 1 to 0 in these two lines:
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
. Don’t use 0:
icon-size: 1em;
If future editing of the
applets.js or
cinnamon.css files is needed, then these commands used in the
Terminal can also be used to open them:
Code: Select all
gksudo xed /usr/share/cinnamon/applets/menu@cinnamon.org/applet.js
gksudo xed /usr/share/themes/Linux\ Mint/cinnamon/cinnamon.css
Optional method: The theme being used in
/usr/share/themes can be copied to
/home/your-user-name/.themes
and edited there. Then it can’t be changed from a system update. However, it will not be in effect for other users. Use this command:
Code: Select all
sudo cp -R /usr/share/themes/name-of-theme /home/your-user-name/.themes
However, there can’t be any
spaces in a folder’s location path in that command, so for the theme
Linux Mint, the command is:
Code: Select all
sudo cp -R /usr/share/themes/Linux\ Mint /home/rlm1/.themes
The
backslash after the word Linux instructs that the space after it is ignored.
Then change the ownership of the folder Linux Mint and all it’s subfolders and files from
root to yourself:
Code: Select all
sudo chown -R your-user-name /home/your-user-name/.themes/name-of-theme
For the
Linux Mint theme, use this command:
Code: Select all
sudo chown -R your-user-name /home/your-user-name/.themes/Linux\ Mint
Now the
cinnamon.css file can be opened without root authority. Be sure to make a copy of it before any editing.
Also optional, the
/usr/share/cinnamon/applets/menu@cinnamon.org/applets.js file can be copied to
/home/your-user-name/.local/share/cinnamon/applets
and edited there.
Code: Select all
sudo cp -R /usr/share/themes/Linux\ Mint /home/your-user-name/.local/share/cinnamon/applets
sudo chown -R your-user-name /home/your-user-name/.local/share/cinnamon/applets/Linux\ Mint
Mint 18.3 Cinnamon panel editing:
The default icons in the
System Tray area are a dull gray color and very plain and flat looking, as seen on panel 1A in the picture below, except for the
Parcellite clipboard manager icon, which was added after the initial Mint installation. The black X is the
Force Quit applet:
Cinnamon 18.3 system tray.png
Here’s how to change them to more vibrant and colorful icons. For these examples, the
Network Manager,
Removable drives,
Sound, and
Notification applet icons will be changed. I may change others later. The default icons are located here:
For the
Network Manager, the example will be for a
wired connection only, not for
wireless.
EDITED: Important note: there already is a black
Network Manager icon on the panel, however, it’s
applet still must be added to the panel by right clicking on the panel and selecting
Add applets to the panel.
End of editing.
Two icons are used. This one is used when there is a connection:
/usr/share/icons/Mint-X/status/scalable/network-wired-symbolic.svg
This one is used when there is no connection:
/usr/share/icons/Mint-X/status/scalable/network-offline-symbolic.svg
The icon used for
Removable drives is found here:
/usr/share/icons/gnome/scalable/devices/drive-harddisk-symbolic.svg
The icon used for
Sound is found here:
/usr/share/icons/Mint-X/status/scalable/audio-volume-high-symbolic.svg
The icon used for
muted Sound is found here:
/usr/share/icons/Mint-X/status/scalable/audio-volume-muted-symbolic.svg
There are actually 4 slightly different icons used for Sound, which represent
muted,
low,
medium and
high, depending on the sound volume, but they are very hard to distinguish with the default icons. I changed the icon for high volume, which is sound above 66%, and the icon when the sound is muted.
If the sound goes below this value, then the default icon will be used. This should not be a problem on a desktop PC because the volume can also be controlled with a knob on a speaker, but this method can’t be used for a laptop. To prevent this, the new Sound icon can be used for these other two icons:
/usr/share/icons/Mint-X/status/scalable/audio-volume-medium-symbolic.svg
/usr/share/icons/Mint-X/status/scalable/audio-volume-low-symbolic.svg
The icon used for the
Notification applet is found here:
/usr/share/cinnamon/applets/notification@cinnamon.org/icons/ normal-notif-symbolic.svg
EDITED: The icon
low-notif-symbolic.svg, for
low notification priority, should also be changed. The same replacement icon for
normal notification priority can be used.
All the icons are in the
SVG graphics format (scalable vector graphics). So any replacement icons that are in the
.png and
.jpeg format must be changed to
.svg
. This is easy to do using the
Inkscape vector graphics program. Use this command in the Terminal to install it:
sudo apt install inkscape
Search for replacement icons in
/usr/share/icons or use Google Images or search for network icons, speaker icons, usb icons and notification icons. After downloading the icons, they can be edited, if needed, using
Gimp. They should be square. Then open them in Inkscape. Select
File > Save As… and save the file as an
Inkscape SVG file.
To change the default
Sound icon, open the File Manager, right click on the Downloads folder and select
Open as Root. Right click on the new Sound icon, which should have the
.svg extension and select
Copy. On the left side, click
File System. On the right side, go to
/usr/share/icons/Mint-X/status/scalable
Right click in an empty space and select
Paste. Right click on the icon
audio-volume-high-symbolic.svg and select
Rename. Add three X’s to the name, so it will now be
audio-volume-high-symbolicxxx.svg
Right click on the pasted new icon and select
Rename, and name it
audio-volume-high-symbolic.svg
Save the file. To see the new icon, restart Cinnamon. Repeat the process for the
audio-volume-muted-symbolic.svg icon and the others.
The new icons are shown on panel 1B. The Network Manager icon shows an X, which represents a disconnection. On panel 1C, the Network Manager shows there is a connection and the spacing between icons has also been increased a little. This is done by opening the
cinnamon.css file. In the
Search > Find window, type:
.applet-box {
Change the value of 3 in these two lines to increase the spacing:
padding-left 3px;
padding-right 3px;
Panel 1C in the picture above has a value of 5. Panel 1D shows Sound is muted and there has been a Notification displayed.
You can download my custom icons from
Imgur. However, that site won’t upload images in the
.svg format, so you will need to convert the
.png files to
.svg using
Inkscape, as previously discussed:
https://imgur.com/a/TuXxo
The
date-time format on the
Calendar applet has also been changed. I’m sure everyone knows whether the time is AM or PM. Right click on the applet and select
Configure. Turn on the button next to
Use a custom date format. In the window next to
Date format, first copy the characters, in case any change needs to be reverted. Then change the characters to this:
%l:%M
The spacing between the
panel launcher icons on the left side of the panel can also be changed. In the
cinnamon.css file, search for
.panel-launcher {
Change the value in this line:
spacing: 2px;
This can also be done by changing the value of these two lines in the section just below:
padding-left: 2px;
padding-right: 2px;
UPDATED 2-16-18:
I still wasn’t happy with my final panel height and system tray applet icon height. I wanted a lower panel but taller icons, that filled most of the panel height. As seen on panel 2A in the picture above, the icons only fill about 55% of the panel height. This result is from letting Cinnamon automatically scale the icons as the panel height increases. This was done by right clicking on the panel and selecting
Panel settings. Then the buttons next to
Use customized panel size and
Allow Cinnamon to scale panel text and icons according to the panel height were turned on.
So I moved the panel height slider to the right further until the desirable applet icon height was displayed, as shown on panel 2B, but this panel was unacceptably high and the panel launcher icons on the left side of the panel were excessively large. However, they could be made smaller. You would need to go to
/usr/share/cinnamon/applets/panel-launchers@cinnamon.org and open the
applets.js file. Change the value of this line to
0.6
or less:
const ICON_HEIGHT_FACTOR = 0.7;
I moved the panel slider back and then went to
/usr/share/cinnamon/applets/systray@cinnamon.org and opened the
applets.js file. The value in this line was changed to 1.0:
const ICON_SCALE_FACTOR = 0.8;
I was expecting the height of all the applet icons to increase, but only the Parcellite icon changed, as seen on panel 2C. After some more investigation and testing, I found a solution. I turned off the two options in
Panel settings, so now the panel would be manually configured. I went to
/usr/share/themes/Linux Mint/cinnamon and opened the
cinnamon.js file for editing. In the
Search > Find window, you must go to
#panel {
. These lines are below:
Code: Select all
color: #ffffff;
font-size: 9pt;
font-weight: normal;
height: 27px;
width: 32px;
I changed the value in the line
height: 27px;
to 29 because the default panel height is a little too low. Surprisingly, changing the value in the line
font-size: 9pt;
not only increased the font height but the applet icon height. I used a value of 14. This gave the desirable applet icon height and they now almost filled the entire panel height, as seen on panel 2D. However, the Parcellite icon did not change. I had to go back to the
/user/share/cinnamon/applets/systray@cinnamon.org/applets.js file and change the value of this line, which is near the top, to 26:
const DEFAULT_ICON_SIZE = 20
;
I also had to make the panel launcher icons on the left side a little larger. I went to
/usr/share/cinnamon/applets/panel-launchers@cinnamon.org and opened the
applets.js file. The value of this line, which is near the top, was changed to 24:
const DEFAULT_ICON_SIZE = 20;
The final result is seen on panel 2E. The fonts size now used for any words displayed on the panel is a little larger than I would like but It's a very minor annoyance.
With the use of larger widescreen monitors, it can be an inconvenience having to reach far to the right with the mouse every time to access the system tray icons. This situation can be improved by adding one or more
Spacer applets to the right of the system tray. Then right click on the Spacer, select
Configure and then move the Spacer slider to the right, as far as is needed to move the system tray towards a more desirable position to the left.
How to change the panel color:
Open the
cinnamon.css file and Search for
.panel {
, to see to this section:
Code: Select all
#panel {
color: #ffffff;
font-size: 9pt;
font-weight: normal;
height: 27px;
width: 32px;
Add this line at the bottom:
background-color: rgba(R, G, B, T);
Open
GIMP. If the
Toolbox is not showing, then click
Tools > New Toolbox. Click the
rectangle at the bottom for
Foreground and background colors. On the color chart above, click on the desired color. It will be seen below next to the word
Current:
On the right side, copy the numbers next to
R,
G, and
B (red, green and blue). Substitute those numbers for the letters
R,
G, and
B in the line added above. The
T refers to the translucency, which ranges from
0.1 to
1.0, which is the most opaque.
Or you can get your color info from websites such as these:
https://htmlcolorcodes.com/color-picker/
https://www.rapidtables.com/web/color/RGB_Color.html
How to change the panel button color for an open window:
Open the
cinnamon.css file and search for
.window-list-box {
, to see this section:
Code: Select all
.window-list-box {
spacing: 3px;
padding-top: 1px;
Add this line at the bottom, using the correct values:
background-color: rgba(R, G, B, T);
How to change the panel button font color:
Go down to this line:
.window-list-item-box {
, to see this section:
Code: Select all
.window-list-item-box {
color: rgba(255,255,255,1.0);
background-gradient-direction: vertical;
background-gradient-start: rgba(100,100,100,0.5);
background-gradient-end: rgba(50,50,50,0.5);
box-shadow: inset 0px 0px 0px 1px rgba(80,80,80,0.5);
border-radius: 4px 4px 0px 0px;
padding: 1px;
padding-left: 5px;
padding-right: 5px;
transition-duration: 100;
Change the values in the first line.
How to change the font color of the panel Menu button and the date/time button:
Search for
.applet-label {
, to see this section:
Code: Select all
.applet-label {
font-weight: bold;
color: #ccc;
Add this line to the bottom, using the correct values:
color: rgba(R, G, B, T);
This also affects the color of the number that appears next to the
notification icon, when there is a notification.
How to change the font color for the opened Menu:
Search for
.menu {
, to fine this section:
Code: Select all
.menu {
border: 1px solid rgba(50, 50, 50, 1);
border-radius: 4px;
background-color: rgba(63, 63, 63, 0.95);
color: #fff;
font-size: 9.5pt;
min-width: 100px;
Add this line to the bottom, using the correct values:
color: rgba(R, G, B, T);
For
bold fonts, add this additional line:
font-weight bold;
. Other values are
lighter and
normal.
Here is an example of what a custom panel can look like, in this link at
imgur. Click on the picture to enlarge. Look at the top panel:
https://imgur.com/a/FhF7o
For the green panel color, these are the values:
background-color: rgba(110, 215, 200, 1.0);
For the dark green panel button color, these are the values:
background-color: rgba(75,130,120,1.0);
For the light green panel button fonts, these are the values:
color: rgba(210,255,245,1.0);
For the light green fonts for the Menu button and date/time button, these are the values:
color: rgba(210,255,245,1.0);
For the light green
bold fonts in the Menu, these are the values:
color: rgba(210,255,245,1.0);
You will notice there is an attractive color gradient effect, where the color gradually gets darker going from the top to the bottom. To get this result, go to the section
.panel-bottom {
to see these lines:
Code: Select all
.panel-bottom {
background-gradient-direction: vertical;
background-gradient-start: rgba(70,70,70,0.9);
background-gradient-end: rgba(50,50,50,0.9);
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
}
I used these values for lines 2 and 3:
background-gradient-start: rgba(100,184,169,1.0);
background-gradient-end: rgba(38,70,64,1.0);
The first line gives the panel background color and the second is a darker shade of that color.
If you want to see the solid color without the gradient effect, then add a
/*
to the beginning of the first line and
*/
to the end of the third line, so they will look like this:
Code: Select all
/* background-gradient-direction: vertical;
background-gradient-start: rgba(70,70,70,0.9);
background-gradient-end: rgba(50,50,50,0.9); */
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
The bottom panel in the picture in the link above shows the result.
UPDATE - Changing the Network Wireless icons:
The picture in this link shows the default Network Wireless icon on the left panel. The middle and right panels show two different styles of more colorful replacement icons:
https://imgur.com/a/76Fin
These 6 icons are used to display the network wireless status and are found in
/usr/share/icons/Mint-X/status/scalable:
network-wireless-acquiring-symbolic.svg
network-wireless-signal-excellent-symbolic.svg
network-wireless-signal-good-symbolic.svg
network-wireless-signal-ok-symbolic.svg
network-wireless-signal-weak-symbolic.svg
network-wireless-signal-none-symbolic.svg
The replacement icons can be downloaded from
imgur using these two links:
https://imgur.com/a/NSXjF
https://imgur.com/a/b0eSu
However, that site won’t upload images in the
.svg format, so you will need to convert the
.png files to
.svg using
Inkscape, as previously discussed.
After downloading, extracting and renaming the icons, add them to the Pictures folder. Then right click on the Pictures folder and select
Open as Root. Copy all 6 icons at the same time. Click
File System on the left side and go to
/usr/share/icons/Mint-X/status/scalable. Right click on the 6 default icons, one at a time, and rename them by adding
xxx to their names, such as
network-wireless-acquiring-symbolicxxx.svg. Then Paste the 6 new icons and restart Cinnamon.
UPDATE:
This info allows you change the position where the
Notifications message box appears. The default location is at the top right corner of the screen. I prefer the lower left corner. See the picture in this link:
https://imgur.com/a/w6BG0
To make the change, open the
cinnamon.css file. In the
Search > Find window, type:
notifications. Add the line
margin-top: XXXpx;
to this section, where
XXX is the pixel value:
Code: Select all
#notification {
font-size: 8.5pt;
border-radius: 10px 10px 10px 10px;
border: 2px solid rgba(214,214,214,0.5);
background-gradient-direction: vertical;
background-gradient-start: rgba(66,66,66,0.9);
background-gradient-end: rgba(55,55,55,0.9);
padding: 8px 8px 8px 8px;
spacing-rows: 10px;
spacing-columns: 10px;
margin-from-right-edge-of-screen: 20px;
width: 34em;
color: white;
opacity:255px;
mouseover-opacity:96px;
}
I added it just below the line
margin-from-right-edge-of-screen: 20px;
I restarted Cinnamon. My final settings are:
Code: Select all
margin-from-right-edge-of-screen: 870px;
margin-top: 740px;
Also, the Notifications box color is very similar to the default Cinnamon desktop background color, making it less visible, and the text is too small. This can be changed to a brighter color and larger text, which will get your attention faster and make it easier to read. The picture in this link is an example:
https://imgur.com/a/7qWai
The same section above from the
cinnamon.css file was edited.
The value in the line
font-size: 8.5pt;
was changed to
12pt
.
These 3 lines give the background color, so they were disabled by adding a
/*
to the beginning of the first line and a
*/
to the end of the third line. They will then look like this:
Code: Select all
/* background-gradient-direction: vertical;
background-gradient-start: rgba(66,66,66,0.9);
background-gradient-end: rgba(55,55,55,0.9); */
This line was then added just below those lines to give the new color. It's a solid color, not a color gradient:
background-color: rgba(220,140,5,1.0);
This line was added to show a darker, thicker border:
border: 6px solid rgba(90,60,1,1.0);
Then the line
border: 2px solid rgba(214,214,214,0.5);
is inactivated by changing it to this:
/* border: 2px solid rgba(214,214,214,0.5); */
The line
color: white;
was changed to
color: black;
for black text color.
Then go down to this section:
Code: Select all
#notification.multi-line-notification {
padding-bottom: 8px;
color: white;
}
Change the line
color: white;
to
color: black;
and add the line
font-weight: bold;
to give bold fonts. Finally, add the line
border: 6px solid rgba(90,60,1,1.0);
. So the section will look like this:
Code: Select all
#notification.multi-line-notification {
padding-bottom: 8px;
color: black;
font-weight: bold;
border: 6px solid rgba(90,60,1,1.0);
}
For single line notifications, the notification box needs to be taller, so it's more visible. Increasing the font size helped a little but this can be increased further by increasing the padding at the top and bottom of the box. The line
padding: 8px 8px 8px 8px;
was changed to
padding: 30px 8px 30px 8px;
The change can be seen in the picture in this link:
https://imgur.com/a/fHKcq
How to change the desktop icon text color from white to black:
If you're using a light desktop background, then the white text used for desktop icons will be less visible, so a black text would be helpful. To do this, open the File Manager and be sure
Hidden Files are visible. Then go to
/home/your-user-name/.config/gtk-3.0. Right click in the empty space and select
Create Document > Empty File. Name it
gtk.css
. Open the file and add these lines:
Code: Select all
.nemo-desktop.nemo-canvas-item {
color: #000000;
}
Logout and back in. Other color codes can be used.
Cinnamon menu extremely compacted:
Here is an even more compact menu, which has the
Favorites box and
Shutdown button removed and a new
Favorites category added:
https://imgur.com/a/DsxiJ0e
This is done by right clicking the menu button and selecting
Configure > Menu. Click the button next to
Show favorites and quit options, so it is turned
OFF.
Some users may prefer to have text next to the icons in the Favorites app section, so a Favorites category was created with the Menu Editor. A
tilde character was typed before the name, which moved the category to the bottom, since it is usually accessed the most. I used a custom icon with a custom name, so it did not appear in the menu at first. I went to the
desktop-directories folder and found this file had been created:
alacarte-made-d5e8c300-35ea-11e8-be24-f46d04e8bb3c.directory
Next to
Icon= was listed the full path to the icon's location, so I had to change it to only the icon's name. Since the Shutdown button was removed, another had to be added. This can be done in two ways. The
Shutdown applet can be added to the panel, which needs to be downloaded first, or a new
Shutdown launcher can be created and added to the panel, which is what I did.
Here are the steps. Open the Menu Editor and select an unused category, such as
System Tools. Click the
New Item button. The hard part was getting the same
Command that was used in the original Shutdown button, which is
cinnamon-session-quit --power-off
. Then right click on the new launcher in the menu and select
Add to panel.
To add apps to the Favorites category, open the Menu Editor. Click on any app you want to add and click the
Copy button. Then select the Favorites category and click the
Paste button. One disadvantage is that the apps can't be rearranged in a preferred order, like the original Favorites box is able to do, but an app can be moved to the bottom by adding a tilde (
~) in front of it's name.
To add the border around the Categories and Applications boxes, add the line
border: 1px solid rgba(90,90,90,1);
to the
.menu-categories-box {
and
.menu-applications-box {
sections of the
cinnamon.css file.
Additional menu tweaks:
The menu on the left in the picture in this link has a color gradient added to the
Favorites box:
https://imgur.com/a/EeiNn
The default menu is supposed to have a vertical gradient but the gradient
start and
end colors are too similar to notice it. These are the settings in the lines from the
cinnamon.css file that are needed to show the gradient above. The gradient has been changed to a horizontal one, with the color getting lighter going from the left margin to the right. Increasing the value of the
padding line will make the box wider and the gradient more noticeable:
Code: Select all
.menu-favorites-box {
margin: auto;
padding: 4px;
border: 3px solid rgba(90,90,90,1);
border-radius: 4px;
background-gradient-direction: horizontal;
background-gradient-start: rgba(62,62,62,1);
background-gradient-end: rgba(112,112,112,1);
}
This color gradient can be added to the
Categories box and
Applications box, as seen in the menu on the right in the picture above, by adding these lines to the
.menu-categories-box {
and
.menu-applications-box {
sections:
Code: Select all
background-gradient-direction: horizontal;
background-gradient-start: rgba(62,62,62,1);
background-gradient-end: rgba(112,112,112,1);
FINAL MENU CHANGES:
Here is the menu I’m using in the picture below:
If you decide to use a very compact menu like I do, then you will have hidden some menu categories and many apps. These apps won’t show in the
All Applications category either, in case you decided not to remove it. The disadvantage to using this menu is when needing to use an infrequently used app, such as
Software Manager or
Disks. This requires opening the Menu Editor, making an app visible, running the app and then making it not visible again. Another quicker method can be used which is to create a launcher that opens the
/usr/share/applications folder when clicked. That folder lists all the installed apps on the system, which can be clicked on to open, as seen below:
To do this, open the Menu Editor and create a new category, such as
ALL APPS. Then create a new launcher in that category and for the
Command use:
nemo /usr/share/applications
. I named it
Show All Apps. Next to
Comment, I typed
Show all installed applications. To position the
ALL APPS category at the top of the menu, add one space before the name. Otherwise, it will be listed after the Accessories category.
If you did not remove the default
All Applications category, then add the new
Show All Apps launcher to any other category that is visible.
Here are the other changes I made:
1. Increased the font size from 9.5 to 10. In the
cinnamon.css file, search for
.menu {
and change the line
font-size: 9.5pt;
2. Made the menu border visible. Under
.menu {
remove
/*
and
*/
from the line
/* border: 1px solid rgba(120, 120, 120, 1); */
Add
/*
to the beginning and
*/
to the end of line
border: 1px solid rgba(50, 50, 50, 1);
3. Removed the menu transparency. Under
.menu {
change
background-color: rgba(63, 63, 63, 0.95);
to
background-color: rgba(63, 63, 63, 1);
4. Made the menu corners more rounded. Search for
.menu.bottom {
and change this line:
border-radius: 4px 4px 0 0;
to
border-radius: 8px 8px 8px 8px;
5. Made the border around the Favorites box more visible (lighter) and thicker. Search for
.menu-favorites-box {
and change the line
border: 1px solid rgba(90,90,90,1);
to
border: 2px solid rgba(120,120,120,1);
6. Moved the location for the pop-up text that shows the name and description of an app when hovering over it, from the bottom right side to the left, as seen in the picture above. Search for
.menu-selected-app-box {
and change the value in the line
padding-right: 30px;
to
0px
and change the value in the line
padding-left: 28px;
to 50 or whatever value you desire.
Change
text-align: right;
to
text-align: left;
UPDATE FOR MINT 19 CINNAMON BETA:
I don’t know if this is a bug that will corrected in the final release. When I try to remove the Lock Screen and Logout buttons, then the Quit button is also removed. I can also remove only the Logout button. As a workaround, I used the instructions in the first part of this guide, which removed all 3 system buttons instead of 2 and then created a new launcher in the Menu Editor. I added it to the unused category
System Tools.
Shutdown is used for the Name. For the
Command, type
cinnamon-session-quit --power-off
. For the icon, go to
/usr/share/icons/Mint-Y/actions/48 and select the
system-shutdown.png icon. Make the System Tools category visible. Open the menu to System Tools. Right click on the Shutdown icon and select
Add to Favorites. Remember that any launcher added to the Favorites box can be be moved up or down. Finally, open the Menu Editor and make the System Tools category invisible.
EDITED:
The
system-shutdown.png icon will only be displayed in the menu if the
Icons
category under
Themes
is set to
Mint-Y. If
Mint-X Icons or others are used, then the system-shutdown icon needs to be copied to the Pictures folder. Use this command:
sudo cp /usr/share/icons/Mint-Y/actions/48 ~/Pictures
(the
tilde character
~
represents
/home/your-user-name). Then open the Menu Editor and select the icon for the
Shutdown launcher from the Pictures folder.
UPDATE FOR MINT 19 CINNAMON:
Testing with the Cinnamon final release version gets the same result when trying to remove the Lock Screen and Logout buttons.
UPDATE FOR MINT 19.1 CINNAMON:
The Lock Screen and Logout buttons can again be removed without removing the Quit button, just as it was in Mint 18.xx.
Please do not add a new post to this topic. Since the topic is old, a forum moderator would then probably lock it. Then I would be unable to add any more updates. If you have a question, then contact me with a Private Message.
My last post in this topic has info on Mint 18.3 Xfce Applications Menu Editing:
viewtopic.php?f=47&t=160784
Updated info for creating a customized menu for Mint 19.1 MATE, that is similar to Xfce’s Applications menu, has been added to this topic:
viewtopic.php?f=206&t=185952