What changed from Mint 17.3 to 18.1

[choochooal]

I've been on mint 17.x for a good year plus. I took a desktop theme that was close to what I wanted and started tweaking it. As others have complained my first issue was to get rid of the transparency. I changed colors and fonts as much as I could.

I have two VMs with mint 18.0 and 18.1 and have put the same ~/.themes/* into them. 18.0 seems to be okay from what I can tell, but then I'm not sure if I found something and changed it to make it work. I've done a diff on the files and there is no change so it would have to be somewhere else if it is.

18.1 is my issue!!! The background for the menu does not cover the entire menu box, this is just one issue to pick on. There is a small strip at the top and bottom that is gray and not green (my chosen color). Something has changed and I'm not sure what it is. Did someone add or require more entries in the theme to make them work?
Also popups like right clicking the panel, or the date applet, all show gray background not green.

Forgot to mention its a cinnamon theme. ~/.themes/AK-Plus/cinnamon/cinnamon.css

[Penn]

Sometimes when improvements are made the old ways are "broken" in the process. The changes from Cinnamon 3.0 to 3.2 were improvements but required altering a few things.

In that .css file there should be one or two sections for ".popup-menu-boxpointer" and ".popup-menu" have should have the values you need for a new section of ".menu" which can be placed immediately after the old sections. Without seeing what that theme has I can't tell you for sure what is needed but anything indicating "arrow" is not necessary since the newer Cinnamon doesn't use boxpointers.

"background-color:" or something similar such as "background-image" or "background-gradient" is needed (sometimes "border-image" is enough).
"color:" might not be needed but if it is in one of the 2 older sections you should use it since this is your text color.
Others that aren't actually needed but including if the old section have values for them to retain basic look -
"border:" and "border-color:" or "border-radius" or even "border-image"
Anything related to font.
"min-width" or anything else for width.

Be sure to all the punctuation including { } to enclose the new seciotn and : ; to separate elements from the color (or other) values and end that line.

If I saw your old sections or knew where to download the theme I might be able to tell you exactly how to write the new section (or someone else could, I've been to busy lately to reliably commit to revisiting this thread in a timely manner) but I might have given more than enough information if you have some basic understanding of how .css theme files work.

[choochooal]

Just with that info gives me some direction to look at another .css menu from one of the 18.1 included themes and see just how they handled "menu" entries.

[EDIT] I used the theme Linux Mint and looked at the popup.menu.js area and found the .menu entry that is new. So I just copied it to my theme, edited where needed for colors etc and bingo my theme works. At least as far as I can test. I don't use the OSD or Keyboard and a few other oddities so it's not a complete theme but for the areas I touch it works. Thanks much. Maybe one day I'll post it so others may use it. It's a solid theme and I'm reading a lot of comments around (not necessarily here) that people are looking for solid and not transparent themes (as I was).

Thanks much for that input and major fix.

[austin.texas]

18.1 is my issue!!! The background for the menu does not cover the entire menu box

I do not know how to solve this problem!!! - even tho I have tried everything I could think of...
I have tried background-size, cover, scale, 100%, stretch, contain, auto... no joy...
I have tried all of these, in various forms:

Code: Select all

{
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

.menu-background {
    background-image: url("background-assets/Menu.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}

.menu-background {
    background-image: url("background-assets/Menu.jpg");
    background-size: scale;
    background-repeat: no-repeat;
    color: white;
}

Stretch the background image to completely cover the content area:
  {
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

{
background-image:url(../images/baths.jpg);
background-size: cover;
background-attachment: fixed;
}

background-size: 100% auto;
background-size: 100% 100%;
background-size: stretch;
background-size: contain;

Mint 18.1 (Cinnamon 3.2.6) has introduced new cinnamon.css code. To begin with, the possibility of adding a vertical Panel on the side of the screen has been added. The .popup-menu and .popup-menu-boxpointer have been eliminated. So if you try to use a Cinnamon theme which uses the old code, the popup menus will not display as expected. Instead, they will default to the Mint 18.1 Cinnamon theme (found at /usr/share/cinnamon/theme/cinnamon.css). When editing a theme for Mint 18.1 or later, the new code must be used (.menu).

Code: Select all

/usr/share/cinnamon/theme/cinnamon.css - Mint 18.1
 /* .popup-menu-boxpointer and .popup-menu are kept for compatibility
    with cinnamon version under 3.2. Use .menu in version 3.2 and above */
.popup-menu-boxpointer {
    -arrow-border-radius: 8px;
    -arrow-background-color: rgba(80,80,80,0.9);
    -arrow-border-width: 2px;
    -arrow-border-color: #a5a5a5;
    -arrow-base: 24px;
    -arrow-rise: 11px;
}
.popup-menu {
    color: #ffffff;
    font-size: 9.5pt;
    min-width: 100px;
}
.menu {
    border-radius: 8px;
    background-color: rgba(80,80,80,0.9);
    border-width: 2px;
    border-color: #a5a5a5;
    color: #ffffff;
    font-size: 9.5pt;
    min-width: 100px;
}

The reason your pop-up menu is not displaying the graphic is because you did not edit the new .menu section, as you have seen from Penn's comment.

[austin.texas]

This is the code I am currently using, and I have not discovered any way to eliminate the blank spaces above and below the graphic - other than limiting the number of programs in the Favorites bar, to make the Menu smaller.

Code: Select all

.menu {
    border-radius: 8px;
    background-color: #c09c5e;
    border-width: 2px;
    border-color: #c09c5e;
    color: #ffffff;
    font-size: 11pt;
    min-width: 100px;
    background-image: url("background-assets/Menu-1.png");
    background-size: stretch;
    background-repeat: no-repeat;
}

Menu7.jpg

EDIT: I just solved the problem.
I went to the Menu (menu.js) section at about line 1750 in cinnamon.css and added this:

Code: Select all

.menu-background {
    background-image: url("background-assets/Menu-1.png");
    background-size:  cover;
    background-repeat: no-repeat;
    color: white;
    font-size: 11pt;
}

I don't know why that would be necessary, since there was no existing .menu-background entry there, but... it worked...