Chapter 3: Cinnamon

Index

Chapter 3: Cinnamon

Now we will discover how much fun it is to create your own Cinnamon theme.
Open your theme's cinnamon.css file in your editor.

I am using Geany - which is particularly nice for cinnamon.css because of the helpful list of Classes in the sidebar, which allow you to go to the section you want quickly.

Quick and dirty changes:

As I did in the previous chapter with the gtk, I am going to jump in and change a couple of main colors, so that I am not looking at the grey on grey.

TIP: After making a change to cinnamon.css, there are several ways to refresh Cinnamon to display the change.

Open System Settings > Themes and switch to a different Cinnamon theme, then switch back.
Press Alt-F2 for the run dialog and enter rt (which I think of as "Refresh Theme").
Press Alt-F2 for the run dialog and enter r (refreshes all of Cinnamon, not just the theme).

I want to apply my background color, #ca942e, RGB - 202,148,46, so I will go to line 155 and put that in.

.popup-menu-boxpointer {
    -arrow-border-radius: 4px;
    -arrow-background-color: #ca942e;
    -arrow-border-width: 1px;
    -arrow-border-color: rgba(40,40,40,0.3);

That takes care of the background for the Menu and the Calendar and the right-click menus, but I don't want to look at that grey Panel, so I need to edit lines 312 and 313, which are:

background-gradient-start: rgb(246,246,246);
background-gradient-end: rgb(206,206,206);

I already know the RGB for my background color is RGB - 202,148,46. The background-gradient-start is at the top of the Panel, and I would like that to be a slightly lighter color. At http://www.color-hex.com/color/ca942e I see that the next lighter tints are #cf9e42 (RGB - 207,158,66) and #D4A957 (RGB - 212,169,87), so I will try both of those to see which I prefer. After comparison, the second choice will do for now.
So I will change it to:

background-gradient-start: rgb(212,169,87);
background-gradient-end: rgb(202,148,46);

I am left with grey Window List tabs that I don't like, but they can wait until I get to that section of cinnamon.css

NOTE:
Mint 18.1 (Cinnamon 3.2.6) has introduced new cinnamon.css code. 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).

/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;
}

Taking it from the top:

Font size:
At line 8 of cinnamon.css, I will change the font size to 10pt. because I am more comfortable with that. That affects the font in the Main Menu and right-click menus. It is a personal thing that depends on your resolution and your vision.

Scroll bar:
At line 34 - StScrollView StScrollBar
I like my scrollbar to be a little wider, making it easier to hit, so I will change it to 10 pixels, instead of 8.

The default is for complete transparency on the trough (background-color: rgba(0,0,0,0);)
I want it to be visible, but not intrusive, so I will make it a very transparent white.

StScrollBar StBin#trough {
background-color: rgba(255,255,255,0.2);

TIP:
rgb(255,255,255) is solid white.
rgba(255,255,255,0) is white with complete transparency.
rgba(255,255,255,1) is white with no transparency.
rgba(255,255,255,0.5) is white with 50% transparency.

I want to make the scroll handles (vertical and horizontal) a bit darker than my background color, with a light colored border. After browsing at http://www.computerhope.com/htmcolor.htm I chose the color, #CA8500, rgb(202,133,0) with a half white border.

StScrollBar StButton#vhandle
{
    background-color: rgba(202,133,0,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 6px;
}

StScrollBar StButton#hhandle
{
    background-color: rgba(202,133,0,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 6px;
}

I want the scroll handle to light up on hover, so I make the border solid white.

StScrollBar StButton#hhandle:hover,
StScrollBar StButton#vhandle:hover
{
background-color: rgb(202,133,0);
border: 1px solid white;
}

One more detail remains on the scroll bar. Looking closely, you can see that the handle has rounded ends, while the trough has square ends.

I want them to match, so I copy the "border-radius: 6px;" from the handle section to the trough section, like this:

StScrollBar StBin#trough {
    background-color: rgba(255,255,255,0.2);
    border-radius: 6px;
}

StScrollBar StButton#vhandle
{
    background-color: rgba(202,133,0,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 6px;
}

Now they match...
Trough
Radius rounded

Tooltip:

The tooltip in Nemo is fairly attractive.
Nemo
Tooltip

The Cinnamon tooltip looks very sad in comparison.
Cinnamon
Tooltip

I want them to be more consistent.

With the help of the Bluefish "Advanced Find" I locate the Tooltip section in gtk-3.0/gtk-widgets.css

.tooltip {
    padding: 3px;
    border: 1px solid @border;
    border-radius: 4px;
    background-color: @theme_tooltip_bg_color;
    color: @theme_tooltip_fg_color;
    box-shadow: none;
}

A look at the gtk-3.0/gtk-main.css tells me that the gtk tooltip colors are:

@define-color theme_tooltip_bg_color #fbeaa0;
@define-color theme_tooltip_fg_color #212121;

I will change my Cinnamon Tooltip section to match the gtk. And, since the Cinnamon Tooltip font sucks, I will change that, as well.

#Tooltip {
    border-radius: 4px;
    padding: 3px;
    background-color: #fbeaa0;
    border: 1px solid #c4c451;
    color: rgb(50,50,50);
    font-family: sans;
    font-size: 10pt;
    font-weight: normal;
    text-align: center;
}

Much, much better...
Cinnamon
Tooltip 2

PopupMenu
The next important section in cinnamon.css is the PopupMenu section.

.popup-menu-boxpointer
I already did a "Quick and dirty change" for the background, at the beginning of this chapter, changing the -arrow-background-color.
I don't care much for the grey border around the menus, so I will change that to white:

-arrow-border-color: white;

.popup-menu
I am going to change the menu font to white. I think it looks a bit better than black.

.popup-menu {
color: white;
min-width: 100px;
}

.popup-menu StEntry
.popup-menu StEntry:focus
This area can confuse you if you don't understand what is going on. This controls the Main Menu Search box. You also have some lines that affect the Search box in the Main Menu section, at about line 1800.
Let's say you want the background for the Search box to be the light Parchment color - #FFFFC2, RGB - 255,255,194. So you merrily enter background-color: #FFFFC2;
When you refresh Cinnamon to see the change - there is no change. That is because the .png graphics are covering up the background. So we have to delete the two lines that load the graphics (border-image: url("misc-assets/entry.png") 6;), in addition to adding background-color: #FFFFC2;.

While playing with the Search box, I notice that the entry text is cut off at the bottom.
NoSansText

This is unacceptable.
A bit of experimentation leads me to font-family: sans; as the solution.
SansText

The final result is this:

.popup-menu StEntry {
    padding: 4px 12px;
    color: #2b2b2b;
    font-family: sans;
    background-color: #FFFFC2;
    border-image: url("misc-assets/entry.png" - DELETE THIS LINE
    border-radius: 4px;
    width: 250px;
    height: 16px;
    selected-color: #fff;
    caret-color: #ca942e;
    caret-size: 1px;
    selection-background-color: #c8ac69;
    transition-duration: 150;
}

.popup-menu StEntry:focus {
    padding: 4px 12px;
    color: #2b2b2b;
    font-family: sans;
    background-color: #FFFFC2;
    border-image: url("misc-assets/entry.png" - DELETE THIS LINE
    border-radius: 4px;
    width: 250px;
    height: 16px;
    selected-color: #fff;
    caret-color: #ca942e;
    caret-size: 1px;
    selection-background-color: #c8ac69;
    transition-duration: 150;
}

I will also make some changes In the Main Menu section (at about line 1800).
I am going to slide the Search box over toward the center of the menu, by increasing the padding.

.menu-search-box {
padding-left: 80px;
}

I want my Search icon to be the background color - #ca942e, and a bit bigger.

.menu-search-entry-icon {
icon-size: 1.3em;
color: #ca942e;
}

For a variation on the Search box, check my Rainy Day Blues theme, where the background for the Search box is a very transparent white, so that the blue background graphic of the Menu shows through. The border is high-lighted by a white border on top, with no border on the sides and bottom, to match the program selection highlight.
Rainy Day
Blues

Here is the code for that:

.popup-menu StEntry {
    padding: 4px 12px;
    color: white;
    background-color: rgba(255,255,255,0.3);
    font-weight: bold;
    border: 1px solid #FFFFFF;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    border-radius: 3px;
    width: 250px;
    height: 16px;
    selected-color: blue;
    caret-color: white;
    caret-size: 2px;
    selection-background-color: white;
    transition-duration: 150;
}

.popup-submenu-menu-item
This is "Modify Panel" and "Troubleshoot" in the right-click menu, when their submenu is open. I want those headings to become bold when they are active, so I will add font-weight: bold.

.popup-submenu-menu-item:open {
font-weight: bold;
}

.popup-sub-menu
Once again there is a background graphic preventing a change of color.

.popup-sub-menu {
border-image: url("background-assets/sub-menu.png") 4;
padding: 0.5em 0em;
}

I will delete that border-image line so that I can overlay the default background with transparent white, to make it a lighter color.
At the same time, I will add a border around the sub-menu, to make it stand out from the rest of the menu.

.popup-sub-menu {
    background-color: rgba(255,255,255,0.2);
    border-top: 2px;
    border-left: 4px;
    border-right: 4px;
    border-bottom: 2px;
    border-radius: 4px;
}

The result is this:

After adding the border, the menu becomes a little "jumpy" when the sub-menu items are highlighted, so I have to adjust the padding to 1em:

.popup-sub-menu .popup-menu-item:ltr {
padding-right: 1em;
}

.popup-sub-menu .popup-menu-item:rtl {
padding-left: 1em;
}

.popup-sub-menu StScrollBar StBin#trough
.popup-sub-menu StScrollBar StBin#vhandle
Here I want to duplicate the changes I made in the StScrollBar previously.

.popup-sub-menu StScrollBar StBin#trough {
    background-color: rgba(255,255,255,0.2);
    border-radius: 6px;
}

.popup-sub-menu StScrollBar StBin#vhandle {
    background-color: rgba(202,133,0,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 6px;
}

.popup-combo-menu
I will just change the background color and text color.

.popup-combo-menu {
    background-color: rgb(202,148,46);
    padding: 1em 0.1em;
    color: white;
    border: 1px solid rgba(40,40,40,0.4);
    border-radius: 4px;
}

.popup-menu-item:active
Once again there is a background graphic preventing a change of color, so I will delete that and just make it a very transparent white. Later, I will use the same code for the active items in the main menu.

.popup-menu-item:active {
    color: #fff;
    border-radius: 6px;
    background-color: rgba(255,255,255,0.2);
}

Panel

I already did a "Quick and dirty change" for the background, at the beginning of this chapter, changing the background-gradient-start and background-gradient-end. I am now going to pick a lighter start color to provide more contrast. The first choice is too dark.
background-gradient-start: rgb(218,198,76);
background-gradient-end: rgb(202,148,46);
This change works well for me, with my Panel at the top of the screen. Someone with the Panel at the bottom might chose a different look.
Panel Top
Colors

box-shadow:
The default box-shadow is black. I am going to change it to my background-gradient-start: rgb(218,198,76);
box-shadow: 0px 0px 1px 1px rgb(218,198,76);

TIP: To see what a particular color affects, change the color to red or blue.
EXAMPLE: box-shadow: 0px 0px 1px 1px blue;

.system-status-icon
I want to change the system-status-icon ( Network Manager and User Applet) to white.

.system-status-icon {
color: white;

It looks better, but it can't be seen well on hover. I fix that by adding a section, system-status-icon:hover, and making the hover color the same as my background color, #ca942e.

.system-status-icon:hover {
    color: #ca942e;
    padding-left: 0px;
    padding-right: 0px;
    spacing: 0px;
    margin: 0px;
}

Overview

.window-caption
This is the for the "expo" view of the open programs. (Ctrl-Alt-Down or set a Hot Corner)
I am not terribly fond of the grey background on the caption, but I can let it be for now, and I will adjust the color of the grey background graphic,"background-assets/bg-1.png", later, in the Graphics chapter.

.expo-background
This is the for the "expo" view of the workspaces. (Ctrl-Alt-Up or Alt-F1 or set a Hot Corner)
The default background graphic ("background-assets/noise-texture-2.png") is somewhat attractive, but still a little dark and dreary for my taste, so I will get rid of that.
For the background-gradient I will insert my two Panel colors, #DAC64C, rgb(218,198,76) and #ca942e, rgb(202,148,46) - which I think creates a very attractive effect, with the radial.

.expo-background {
    background-gradient-direction: radial;
    background-gradient-start: #DAC64C;
    background-gradient-end: #ca942e;
}

.expo-workspace-thumbnail-frame
.expo-workspace-thumbnail-frame#active
The dark shadow around the expo thumbnails is repulsively ugly. When I get rid of the two lines "border-image: url("misc-assets/workspace-shadow.png") 14;", I get a clean, crisp look without the dark shadow.

Date applet

The default calendar looks a bit "busy" to me. I don't need the shading on Saturday and Sunday. The calendar is a bit smaller than I like, as well. When you hover on the arrows you get a transition from dark grey to light grey, which I don't like. As I have mentioned previously, I like things to light up when selected.

.calendar
First, I will make it wider by increasing the padding on the left and right sides from 1.75em to 2.75em

.calendar {
padding: .4em 2.75em .2em 2.75em;

.datemenu-date-label
Next, I will increase the padding and font size of the main heading, and change it to white. If you make the font size too big you will widen the calendar and pull it out of square.

.datemenu-date-label {
    padding: .4em 2.75em .2em 2.75em;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    text-align: center;
}

.calendar-month-label
Change the month label font to white, and increase the font size:

.calendar-month-label {
    padding-bottom: 1px;
    padding-top: 0px;;
   font-size: 1.0em;
    font-weight: bold;
    color: white;
}

.calendar-change-month-back,
.calendar-change-month-forward:rtl
.calendar-change-month-forward,
.calendar-change-month-back:rtl
I want to get rid of all the transition-duration lines. Those just make things happen in slow motion, which is irritating.

.calendar-change-month-back:hover
.calendar-change-month-forward:hover
I want to change the color of the background-images to white, for hover, and I will explain that process in the Graphics chapter.

.calendar-day-base:active
This can be confusing, because .calendar-day-base:active and .calendar-today both determine the colors of today's date in the calendar. If different colors are set for the same thing in both locations, .calendar-day-base:active wins the arguement.
To make it simpler, I just leave .calendar-day-base:active empty, and move the configuration to .calendar-today.

.calendar-day-heading
Change the font for the days of the week to white, and 2em is too much padding:

.calendar-day-heading {
    font-size: 9pt;
    color: white;
    padding-top: 1.3em;
}

.calendar-day
Add color to the days' borders using the base color, #DAC64C.

.calendar-day {
border: 1px #DAC64C;

.calendar-nonwork-day
I don't want the weekend days to be a different color from week days, so I delete the line background-color: rgba(128, 128, 128, .1);

.calendar-today
For today's date, the default background and font colors are OK, but I want a brighter inset box-shadow. I will make it a transparent white.

.calendar-today {
    background: #c8ac69;
    box-shadow: inset 0px 0px 3px 3px rgba(255,255,255,0.5);
    color: #fff;
    font-weight: bold;
}

.calendar-other-month-day
I want the other months to have the same appearance as the weekend days did originally, so I insert that line background-color: rgba(128, 128, 128, .1); and make the font color a bit darker.

.calendar-other-month-day {
background-color: rgba(128,128,128,.1);
color: rgba(50,50,50,0.5);
}

Original Calendar

Customized
Beautified Calendar

Alt Tab

.switcher-list
I have changed the "background-assets/bg-1.png" to use my Panel background colors. Details on that are in Chapter 6: Graphics.
I also want to change the font color to white.

.switcher-list {
    border-image: url("background-assets/bg-1.png") 6;
    color: white;
    padding: 20px;
    font-size: 9pt;
    font-weight: bold;
}

.run-dialog-label
For some reason the default Mint-X-Sand theme has the font-size set at 0pt, with no color. I like to see the font, so I will set it at 11pt, and white.

.run-dialog-label {
    font-size: 11pt;
    padding-bottom: 4px;
    color: white;
    font-weight: bold;
}

Menu

.menu-favorites-box
I want to give the favorites box the same background as the rest of the menu, #ca942e, RGB - 202,148,46, and a 1px white border.

.menu-favorites-box {
margin: auto;
    background-color: rgb(202,148,46);
    border: 1px solid white;
    border-radius: 4px;
    padding: 0.5em;
}

.menu-favorites-button
.menu-favorites-button:hover
The default sand color for the hover is not too bad, but I would prefer a very transparent white - rgba(255,255,255,0.2).

TIP: It is extremely important that you have the same padding and border size on the .menu-favorites-button and the .menu-favorites-button:hover, otherwise you will get a unacceptable "jump" in the icons when you hover on them.

.menu-favorites-button {
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.menu-favorites-button:hover {
    padding: 10px;
    border: 1px solid white;
    border-radius: 2px;
    background-color: rgba(255,255,255,0.2);
}

This looks OK, but now I want to delete the white border completely, and add more border-radius, so it becomes:

.menu-favorites-button {
    padding: 10px;
    border: 0px;
    border-radius: 6px;
}

.menu-favorites-button:hover {
    padding: 10px;
    border: 0px;
    border-radius: 6px;
    background-color: rgba(255,255,255,0.2);
}

.menu-application-button-selected
.menu-category-button-selected
I want to apply the same hover color to these as I did to the favorites icons hover - a very transparent white. I have to delete the border-image: url("misc-assets/hover-2.png") 6;, and add background-color: rgba(255,255,255,0.2). I also have to add my 6px border-radius.

.menu-application-button-selected {
    padding-top: 7px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
    color: #fff;
   border-radius: 6px;
    background-color: rgba(255,255,255,0.2);
}

Window list

It takes some creativity to coordinate the various functions on the Window List tabs - inactive, inactive hover, active, and active hover.
I generally like to start with getting rid of the various .png files, and making the tabs transparent to show the Panel background.

.window-list-item-box
I want to delete the .png, decrease the padding a bit, and make a 50% transparent, 1px, white border

.window-list-item-box {
    color: rgb(62,62,62);
    font-weight: normal;
    padding-top: 1px;
    padding-left: 2px;
    padding-right: 2px;
    border: 1px solid rgba(255,255,255,0.5);
}

.window-list-item-box:hover
On hover, I just want to lighten the background on the inactive tabs.

.window-list-item-box:hover {
background-color: rgba(255,255,255,0.2);
border: 1px solid white;
}

.window-list-item-box:active
The active tab will be high-lighted by a bold font and a slightly transparent background using the Panel top gradient color, rgb(218,198,76).

.window-list-item-box:active,
.window-list-item-box:checked,
.window-list-item-box:focus {
    font-size: 10pt;
    font-weight: bold;
    color: rgb(62,62,62);
     background-color: rgba(218,198,76,0.8);
}

.window-list-item-box:active:hover
The hover on the active tab will lighten the background a bit, with transparent white, to approximately match the hover on the inactive tabs.
.window-list-item-box:checked:hover,
.window-list-item-box:focus:hover,
.window-list-item-box:active:hover {
     font-size: 10pt;
    color: rgb(62,62,62);
    font-weight: bold;
     background-color: rgba(255,255,255,0.3);
}

Applets

.applet-label
I want the font for the Menu and Clock to be much bigger, so I will increase the font size.

.applet-label {
    font-weight: bold;
    font-size: 12pt;
    color: rgb(66,66,66);
}

.applet-label:hover {
    font-weight: bold;
    font-size: 12pt;
}

Index

Next Chapter - Chapter 4: gtk-2.0