Page 1 of 1

Remove the gap from the Cinnamon Menu

Posted: Sat Mar 26, 2016 10:41 pm
by Jeanne
Hello. :D

How can I remove this gap from the Cinnamon Menu?

Image

There are a lot of themes with this gap (much bigger in some cases) and I don't know what is its purpose but I don't like how it looks. :?

Any help please? :cry:

Re: Remove the gap from the Cinnamon Menu

Posted: Sun Mar 27, 2016 12:54 am
by ciryon
Never noticed this gap...until now :) .

Re: Remove the gap from the Cinnamon Menu

Posted: Sun Mar 27, 2016 4:55 pm
by elbullazul
hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px

Re: Remove the gap from the Cinnamon Menu

Posted: Sun Mar 27, 2016 11:46 pm
by Jeanne
elbullazul wrote:hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px
Thank you very much! It worked perfectly for the Vertex theme. :D

Unfortunately, this value breaks some other themes like this one:

Image

After changing the value, it has rounded corners:

Image

But I hope this will work with most of themes, thank you again. :)

Re: Remove the gap from the Cinnamon Menu

Posted: Mon Mar 28, 2016 2:41 pm
by elbullazul
Jeanne wrote:
elbullazul wrote:hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px
Thank you very much! It worked perfectly for the Vertex theme. :D

Unfortunately, this value breaks some other themes like this one:

Image

After changing the value, it has rounded corners:

Image

But I hope this will work with most of themes, thank you again. :)
you can fix this by tricking Cinnamon so that it believes you have a rounded arrow but overwrite the roundness value further.

under .popup-menu, add the following line
border-radius: 0;
it should remove the rounded borders while still reducing the gap (if the previous fix was applied)

Re: Remove the gap from the Cinnamon Menu

Posted: Mon Mar 28, 2016 10:08 pm
by Jeanne
elbullazul wrote:
Jeanne wrote:
elbullazul wrote:hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px
Thank you very much! It worked perfectly for the Vertex theme. :D

Unfortunately, this value breaks some other themes like this one:

Image

After changing the value, it has rounded corners:

Image

But I hope this will work with most of themes, thank you again. :)
you can fix this by tricking Cinnamon so that it believes you have a rounded arrow but overwrite the roundness value further.

under .popup-menu, add the following line
border-radius: 0;
it should remove the rounded borders while still reducing the gap (if the previous fix was applied)
Thank you for the reply. :)

I'm not sure if did something wrong but that line didn't work. :(

This is the theme: https://cinnamon-spices.linuxmint.com/themes/view/552 I will try to ask to the author.

Re: Remove the gap from the Cinnamon Menu

Posted: Tue Mar 29, 2016 10:24 am
by elbullazul
Jeanne wrote:
elbullazul wrote:
Jeanne wrote: Thank you very much! It worked perfectly for the Vertex theme. :D

Unfortunately, this value breaks some other themes like this one:

Image

After changing the value, it has rounded corners:

Image

But I hope this will work with most of themes, thank you again. :)
you can fix this by tricking Cinnamon so that it believes you have a rounded arrow but overwrite the roundness value further.

under .popup-menu, add the following line
border-radius: 0;
it should remove the rounded borders while still reducing the gap (if the previous fix was applied)
Thank you for the reply. :)

I'm not sure if did something wrong but that line didn't work. :(

This is the theme: https://cinnamon-spices.linuxmint.com/themes/view/552 I will try to ask to the author.
well, I did a little tweaking to the theme and this is the result :

Image

you just have to replace the .popup-menu-boxpointer and .popup-menu sections with the following code :
.popup-menu-boxpointer {
-boxpointer-gap: 4px;
-arrow-border-radius: 16px;
-arrow-background-color: transparent;
/*-arrow-base: 15px;
-arrow-rise: 8px;*/
}
.popup-menu {
border: 4px solid #92d92e;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0 0 0 0;
background-color: rgba(0,0,0,0.85);
}

Re: Remove the gap from the Cinnamon Menu

Posted: Tue Mar 29, 2016 6:42 pm
by Jeanne
It looks great now, thank you very much! :D