I have recently upgraded to Mint Cinnamon 18.1 (and so far, so good) except that I always feel that the icons on the Cinnamon panel are squashed together in the lefthand corner.

When I upgraded to Mint 17, I was very pleased to find this post addressing the question:

http://www.scottcking.com/?p=90

I followed the advice therein and was able to give my icons some elbow room. Unfortunately it doesn't seem to work on Linux Mint 18.1. I can find my way into the cinnamon.css file, but do not see where to make the edits. (My previous computer was 32bit, and this is my first 64bit installation)

Any advice will be welcome.

use the search funxction of your editor to find 'panel' (without quotes) and make an eductaed guess as to which entry is the suitable one.

there's no reason why this shouldn't work on your new install. mayb the syntax has slightly changed, so try a capital Panel, too, but the pricnciple's the same.
i hope you have very basic knowledge of CSS

btw, changes will be overwritten during updates, so it might be better to clone the theme to ~/.themes/my-new-theme and edit there (without sudo this time).

1 members found this post helpful.

I have not taken a close look at it yet, but I believe that function might have been removed from the new cinnamon.css with Mint 18.1
The reason being that Mint 18.1 introduces the ability to create a vertical panel in addition to the usual horizontal panel. Padding on icons might not work well on a vertical panel.

EDIT: I checked and it is there - at about line 2066

/* ===================================================================
* Panel Launchers Applet (panelLaunchers.js)
* ===================================================================*/

#panel-launchers-box {
padding-left: 0px;
}

.panel-launcher {
margin: 1px;
padding: 2px;
}

1 members found this post helpful.

if your problem is solved, please mark your thread so, at the top under Thread Tools.

Reading the posts above I was particularly struck by the phrase, "at about line 2066". Seeing that the file I was looking at had 1980 lines, I finally realized that I was in the wrong file (/usr/share/cinnamon/theme/cinnamon.css rather than the /usr/share/themes/Linux Mint/cinnamon.css I had intended to visit). My bad.

Going to /usr/share/themes/Linux Mint/cinnamon.css I saw that it had 2280 lines and backtracked, but was surprised that what I saw did not parallel what I saw in TxLonghorn's post. Is there yet another cinnamon.css file, or am I simply misunderstanding what I see?

Below are what I see from line 1940 to line 2076.

* Panel Launchers Applet (panelLaunchers.js)
* ===================================================================*/

#panel-launchers-box {
}

.panel-launchers {
spacing: 2px;
}

.panel-launchers .launcher {
padding-left: 1px;
padding-right: 1px;
border: 0 solid transparent;
border-bottom-width: 1px;
}

.panel-launchers .launcher:hover {
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.0);
background-gradient-end: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);

}

.panel-launcher-add-dialog-content-box {
padding: 6px;
spacing: 20px;
}

.panel-launcher-add-dialog-content-box-left {

padding: 6px;
spacing: 20px;
}

.panel-launcher-add-dialog-content-box-right {
padding: 6px;
spacing: 10px;
}

.panel-launcher-add-dialog-entry {
padding: 5px;
border-radius: 4px;
color: rgb(50, 50, 50);
border: 1px solid rgba(245,245,245,0.2);
background-gradient-start: rgba(200,200,200,0.5);
background-gradient-end: rgba(254,254,254,0.5);
background-gradient-direction: vertical;
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.5);
selected-color: black;
caret-color: rgb(128, 128, 128);
caret-size: 1px;
width: 250px;
transition-duration: 300;
}

.panel-launcher-add-dialog-entry:focus,
.panel-launcher-add-dialog-entry:hover {
border: 1px solid rgba(120,120,120,1);
background-gradient-start: rgb(200,200,200);
background-gradient-end: white;
background-gradient-direction: vertical;
}

.panel-launcher-add-dialog-entry:hover {
transition-duration: 300;
}

.panel-launcher-add-dialog-entry:focus {
color: rgb(64, 64, 64);
font-weight: bold;
transition-duration: 0;
Overview corner
* ===================================================================*/
#overview-corner {
background-image: url("overview.png");
}

#overview-corner:hover {
background-image: url("overview-hover.png");
}

/* ===================================================================
* Applets (applet.js)
* ===================================================================*/
.applet-separator {
padding: 5px 4px;
}
.applet-separator-line {
width: 2px;
background: rgba(255,255,255,.5);
}

.applet-box {
padding-left: 3px;
padding-right: 3px;
color: #ccc;
text-shadow: black 0px 0px 2px;
}

.applet-box.vertical {
padding: 3px;
}

.applet-box:checked,
.applet-box:hover {
color: #fff;
}

.applet-box:highlight {
background-color: #aa5555;
.applet-label {
font-weight: bold;
color: #ccc;
}
.applet-label:hover,
.applet-label:checked,
.applet-box:checked .applet-label,
.applet-box:hover .applet-label {
color: #fff;
text-shadow: white 0px 0px 5px;
}
.applet-icon {
color: #ccc;
icon-size: 22px;
}
.applet-icon:hover,
.applet-icon:checked,
.applet-box:hover .applet-icon,
.applet-box:checked .applet-icon {
color: #fff;
icon-shadow: white 0px 0px 3px;

Yes, there is another cinnamon.css - as a matter of fact I have about 30 of them. I happened to be looking at one that I had previously edited for various reasons, so the Line number was "about" that line. But it is OK, since I see you found it.

@Brant: great, you found it.
now bravely edit!
as i said before, basic knowledge with CSS is recommended, but imho the options are largely self-explanatory.
and 2000+ lines? yep, welcome to the wonderful world of gnome & web framework UIs.

@TXLonghorn: sorry, i mistook you for the OP there.

To be honest,my last post was intended more as a confession that I was feeling out of my depth, than as a statement that I was ready to go!
However I took heart from your encouragement, reread the section that I had posted, and decided that


.panel-launchers .launcher {
padding-left: 1px;
padding-right: 1px;
border: 0 solid transparent;
border-bottom-width: 1px;

was the likely candidate. I crossed my fingers and moved both padding-left and padding-right to 4px.
All a matter of taste, of course, but I think it looks good.
Many thanks!