Chapter 6: Graphics

Index

Chapter 6: Graphics

There are a few skills involved in managing the graphics in themes.
1) Editing .png images - using Pinta or GIMP
2) Editing .svg images - using Inkscape or a code editor like Geany.
3) Using custom graphics

Editing .png images:

I will start with the example of the window captions in the Scale view of the open programs. (Ctrl-Alt-Down or set a Hot Corner)

.window-caption
As I mentioned in Chapter 3, I don't like the grey background on the caption. The grey background graphic is provided by the .png images:

.window-caption {
    border-image: url("background-assets/bg-1.png") 6;
    font-weight: bold;
    color: #ca942e;
    spacing: 25px;
}

.window-caption#selected {
    border-image: url("background-assets/bg-2.png") 6;
    font-weight: bold;
    color: #fff;
    spacing: 25px;
}

In order to change the color of the "background-assets/bg-1.png", open the .png in Pinta. Click on the primary color on the Palette sidebar, to open the color selection window. I want to use my darker color from my Panel in cinnamon.css. Those colors are:

background-gradient-start: rgb(218,198,76);
background-gradient-end: rgb(202,148,46);

The darker color is what I want, so in the color selection window I can set those RGB (Red, Green, Blue) values.

After setting the primary color, chose the Paint Bucket and click on the image. That will change the color to your chosen color. Save and exit Pinta.

I will do the same thing to the .png for the selected window (bg-2.png). But I want the selected window to be highlighted more than it is, so I will change the font to white, and increase the size.
So my code becomes:

.window-caption#selected {
    border-image: url("background-assets/bg-2.png") 6;
    font-weight: bold;
    border: 3px;
    color: #fff;
    spacing: 25px;
}

I will add one more little tweak to it. I will Paint Bucket the border white for the selected window caption.

That makes my window captions much more attractive, in my (sometimes) humble opinion.

Gradients:
To demonstrate a different change to the caption background. I will add a gradient to match the Panel colors.
In Pinta, to do a gradient, chose the 2 colors as primary and secondary. Paint-bucket the first color. I have already completed that step.
The secondary (lighter) color on my Panel is rgb(218,198,76). So I will click on the secondary color and enter that RGB.
So Pinta's primary and secondary appear like this:

After both colors are set, click on the blue Gradient icon, and click on the secondary color and drag the mouse across the entire image, from the bottom to the top (in this case). You don't have to go all the way to the top, for different gradients.
This gives me the gradient I wanted, to match the main Panel.
The process of adding the gradient has destroyed the border, (part of the original graphic), so it becomes a matter of personal choice as to which look you prefer.

Here I am using bg-1.png for both the selected caption and the non-selected.

Personally, I want to keep the gradient, because the same graphic ("background-assets/bg-1.png") is used for other things - such as the background when you press Alt-TAB, and the run dialog (Alt-F2), and I like the way it looks there.

You can search your cinnnamon.css for "bg-1.png" to see the various places that graphic is used.

NOTE: In Mint 18 and Mint 18.1 /usr/share/cinnamon/theme/cinnamon.css there is a .window-caption section at Line 406 and another .window-caption section at Line 458.
The second section will take precedence over the first one.

In Mint 18, the background-assets/bg-1.png is used, as detailed previously.
In Mint 18.1, no graphic is used. A background and border are set with specific colors. (Which is much easier to configure than altering images.)

Editing .svg images:

Next, I want to change the color of the black arrows in the calendar.

.calendar-change-month-back,
.calendar-change-month-forward:rtl {
    height: 20px;
    width: 20px;
    border: 1px rgba(0,0,0,0);
    background-image: url("control-assets/calendar-arrow-left.svg");
}

.calendar-change-month-back:hover {
    background-color: white;
    background-image: url("control-assets/calendar-arrow-left-hover.svg");
}

.calendar-change-month-forward,
.calendar-change-month-back:rtl {
    height: 20px;
    width: 20px;
    border: 1px rgba(0,0,0,0);
    background-image: url("control-assets/calendar-arrow-right.svg");
}

.calendar-change-month-forward:hover {
    background-image: url("control-assets/calendar-arrow-right-hover.svg");
    background-color: white;
}

.svg images are text files, and can be edited with a text editor, like Geany, or by opening the image in Inkscape.
Open calendar-arrow-left.svg and calendar-arrow-right.svg in Inkscape. Click on the Paint Bucket. Then click on a color in the color bar at the bottom of the window. I chose a very light gold color, #ffe680.
For calendar-arrow-left-hover.svg and calendar-arrow-right-hover.svg I chose a darker gold, #ffcc00.

On the other hand, if you open calendar-arrow-left.svg in Geany, at Line 18, you will see the text:

To change the color to #ffe680 change it to style="fill:#ffe680

To change the opacity of a .svg image:
Open the .svg file in a text editor. Go to the Layer section (for each layer) and add the opacity you want.
For no transparency, add the line:
     style="opacity:1.0"
For 80% transparent, add the line:
     style="opacity:0.8"
Like this:
<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-1041.3622)"
     style="opacity:0.8">
Don't forget the > at the end of the <g section

Or, to change the opacity using Inkscape, do SHIFT-CTRL-L, then adjust using the Opacity button on the right.

Using custom images:

.ripple-box
Change the size to 390px.

.ripple-box {
    width: 390px;
    height: 390px;
    background-image: url("misc-assets/corner-ripple.png");
}

I created a more interesting corner ripple by adding a gold ring to the corner-ripple.png
Click on Paint Bucket, chose the color, then chose Flood Mode: Global (on the toolbar).
Corner
Ripple

IF ONLY I were as talented in creating corner ripples as Franc Gorenc (gmc85)... but I am not. (But I often steal his to use.)

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).

Mint 18.1 - Rainy Day Blues:
/* ===================================================================
* Menu (menu.js)
* ===================================================================*/
/* Main menu title */

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

NOTE: In Mint 18.1, the new vertical panels will not function correctly if you are using an old cinnamon theme. The new cinnamon.css contains code for managing the new vertical panels.

/* .separator and .slider are new sections in cinnamon 3.2.6 */

    background-bumpmap: url("/usr/share/cinnamon/bumpmaps/frost.png");

    background: url("background-assets/noise-texture-2.png");
    background-repeat: repeat;

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

}

Index

Next Chapter - Chapter 7: Metacity