How to create/edit a Cinnamon theme

[Zorba]

This is a tutorial in progress. Please help us improve it



To create your own Cinnamon theme, take a Cinnamon theme (Mint-X is the easiest to edit), copy it from /usr/share/themes, paste it in ~/.themes, rename it and edit the files and images.


Prerequisites:

1- meld: To compare css files. It is in your repository too. To install it simply open a terminal and run:

Code: Select all

sudo apt-get install meld

2- gedit/ geany: already installed if yoy are running Mint or Ubuntu
3- gcolor2: Use it to choose colour codes. It is in your software repostory if you are runnig Linux Mint or UBuntu. Simply run :

Code: Select all

sudo apt-get install gcolor2

The following list of files/images to edit are for a copy of Mint-X Cinnamon 2.0 theme in Linux Mint 16 Cinnamon.
Note: The files/images may be slightly different for previous/future versions of the Mint-X Cinnamon theme.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Cinnamon 2.0 consists of 2 Main parts:

I - Section common with Gnome Shell (* ... contains a few cinnamon specific styles (rare occurences) ):

1- Switches (to be used in menus):
2- Shared button properties:
3- PopupMenu (popupMenu.js):



1- To make your popup menu rounded from 3 corners use this code

Code: Select all

border-radius: 0px 15px 15px 15px;

4- Panel (panel.js):





1- To change the panel’s color, search the file for the #panel class and change the background-color value.
2-To change the unfocused panel buttons’ colors, search the file fo the .window-list-item-box class and edit the background-gradient-start and background-gradient-end values. Start marks the button’s top where end marks the button’s bottom.
3- To change the focused panel buttons’ colors, search the file fo the .window-list-item-box:focus class and edit the background-gradient-start and background-gradient-end values. Start marks the button’s top where end marks the button’s bottom.
4- To change the button border color of the two above possibilities, change the box-shadow value in the same classes.
5- You can use gcolor2 for colour codes which is in your software repostory if you are runnig Linux Mint or UBuntu. Simply run :

Code: Select all

sudo apt-get install gcolor2

6- You can use any backgroud image for the panel by simply adding the below code to

Code: Select all

#panel {

in the

Code: Select all

Panel (panel.js)

Code: Select all

background-image: url('panel.png');

then define your

Code: Select all

panelLeft,#panelRight

and a sample

Code: Select all

* Panel (panel.js)

would look like this:

Code: Select all

#panel {
    color: #ffffff;
   background-image: url('panel.png');   
    font-size: 9pt;
    font-weight: normal;
    height: 30px;
   border-top: 1px;
        box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.86);
}
#panelLeft,#panelRight  {
    background-gradient-start: rgba(199,253,122,1);
    background-gradient-end: rgba(122,154,76,1);
    background-gradient-direction: vertical;
    box-shadow: 0px 0px 5px 5px #09B591;
}
#panelLeft   {
   border-radius: 0px 30px 0px 0px;
/*   border-right: 10px;*/
}
#panelRight   {
   border-radius: 30px 0px 0px 0px;
/*   border-left: 10px;*/
}
#panelCenter {
   border: 2px transparent;
   padding-left: 1px;
   padding-right: 1px;
}


#panelLeft, #panelCenter, #panelRight {
    spacing: 3px;
}

#panelLeft:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(255,0,0,0.5);
   background-gradient-end: rgba(255,0,0,0.2);       
}

#panelCenter:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,255,0,0.5);
   background-gradient-end: rgba(0,255,0,0.2);       
}

#panelRight:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,0,255,0.5);
   background-gradient-end: rgba(0,0,255,0.2);       
}

#panelLeft:ltr {
    padding-right: 5px;
}

#panelLeft:rtl {
    padding-left: 5px;
}

#panelRight:ltr {
    padding-left: 5px;
    spacing: 0px;
}

#panelRight:rtl {
    padding-right: 5px;
    spacing: 0px;
}

.panel-top {
}

.panel-bottom {
}

.panel-status-button {
    border: 0px solid rgba(0,0,0,0);
    -natural-hpadding: 3px;
    -minimum-hpadding: 3px;
    font-weight: bold;
    color: rgba(200,200,200,1);   
    height: 22px;   
}

.panel-status-button:hover {
    color: white;
   background-gradient-direction: vertical;
   background-gradient-start: rgba(0,0,0,0);
   background-gradient-end: rgba(9,181,145,0.5);
}

.panel-status-button:active {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

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

#appMenu {
    spacing: 4px;
}

.panel-button #appMenuIcon {
    app-icon-bottom-clip: 1px;
}

.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 2px;
}

.panel-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 2px;
    font-weight: bold;
    color: rgba(200,200,200,1);
    transition-duration: 100;
}

.panel-button:hover {
    color: white;
}

.panel-button:active,
.panel-button:overview,
.panel-button:focus {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow: black 0px 2px 2px;
}

.panel-menu {
}

.popup-menu-item-dot {

}

.system-status-icon {
    icon-size: 1.14em;
}

or

Code: Select all

border-image: url('panel.svg') 5 5 5 5 stretch;

if you want the panel to scale and take all the panel.

and a sample

Code: Select all

Panel (panel.js)

would look like this:

Code: Select all

#panel {
        border-image: url('panel.png') 5 5 5 5 stretch;
   box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.86);
    color: #000;
    font-size: 9pt;
    height: 26px;
    padding: 0px;
}

#panelLeft, #panelCenter {
    spacing: 4px;
}

#panelLeft:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(255,0,0,0.05);
   background-gradient-end: rgba(255,0,0,0.2);       
}

#panelCenter:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,255,0,0.05);
   background-gradient-end: rgba(0,255,0,0.2);       
}

#panelRight:dnd {
    background-gradient-direction: vertical;
   background-gradient-start: rgba(0,0,255,0.05);
   background-gradient-end: rgba(0,0,255,0.2);       
}

#panelLeft:ltr {
    padding-right: 4px;
}

#panelLeft:rtl {
    padding-left: 4px;
}

#panelRight:ltr {
    padding-left: 0px;
    spacing: 0px;
}

#panelRight:rtl {
    padding-right: 0px;
    spacing: 0px;
}

.panel-top {
}

.panel-bottom {
}

.panel-status-button {
    border: 0px solid rgba(0,0,0,0);
    -natural-hpadding: 3px;
    -minimum-hpadding: 3px;
    font-weight: bold;
    color: rgba(200,200,200,1);   
    height: 22px;   
}

.panel-status-button:hover {
    color: white;
    border-radius: 2px;
}

.panel-status-button:active {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

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

#appMenu {
    spacing: 4px;
}

.panel-button #appMenuIcon {
    app-icon-bottom-clip: 1px;
}

.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 2px;
}

.panel-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 2px;
    font-weight: bold;
    color: rgba(200,200,200,1);
    transition-duration: 100;
}

.panel-button:hover {
    color: white;
}

.panel-button:active,
.panel-button:overview,
.panel-button:focus {
    color: white;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(30,30,30,1);
    background-gradient-end: rgba(50,50,50,1);
}

.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow: black 0px 2px 2px;
}

.panel-menu {
}

.popup-menu-item-dot {

}

.system-status-icon {
    icon-size: 1.14em;
}

7- to make the panel rounded from the left and the right use this code:

Code: Select all

#panelLeft   {
   border-radius: 0px 30px 0px 0px;
/*   border-right: 10px;*/
}
#panelRight   {
   border-radius: 30px 0px 0px 0px;
/*   border-left: 10px;*/
}

The result would be something like this below :




5- Overview:
6- Desklets (desklet.js):



1- To add a background image to desklets, use this code:

Code: Select all

 background-image: url('background.png');

a sample Desklets
/* ===================================================================
* Desklets (desklet.js)
* ===================================================================*/

with a background image looks like this

Code: Select all

.desklet {
    color: #fff;
}

.desklet-with-borders {
    border: 1px transparent;
    background-image: url('background.png');
    color: #fff;
    border-radius: 20px;
   padding: 10px;
   border-top: 10px;
   border-bottom: 10px;
   box-shadow: 0px 0px 5px 5px #09B591;
}

.desklet-with-borders-and-header {
    border: 1px transparent;
    background-image: url('background.png');
    color: #fff;
    border-radius: 20px;
   padding: 10px;
   border-top: 10px;
   border-bottom: 10px;
   box-shadow: 0px 0px 5px 5px #09B591;

}

.desklet-header {
    font-size: 10.5pt;
    border: 1px transparent;
    background-image: url('background.png');
    color: #fff;
    border-radius: 20px;
   padding: 10px;
   border-top: 10px;
   border-bottom: 10px;
   box-shadow: 0px 0px 5px 5px #09B591;

}

.desklet-drag-placeholder {
    border: 2px solid #6daa00;
    background-color: rgba(109,170, 0, 0.3);
}


7- Clock Desklet (desklet.js):
8- Looking Glass:
9- Date applet:
10- Notifications:



11- Alt Tab:



12- Modal dialogs:



13- Run dialog:
14- End session dialog:
14- Policykit authentication dialog:
15- Magnifier:
16- On screen keyboard:



II- Cinnamon Specific Section:

1- Menu (menu.js):




1- To change the menu’s color, search for the .popup-menu-boxpointer class and edit the arrow-background-color value
2- To change the menu border’s color, search for the arrow-background-color class and edit the arrow-border-color value
3- To change the category menu’s selector box, search for the .menu-category-button-selected class and change the background-gradient-start and the background-gradient-end values
4- To change the application menu’s selector box, search for the .menu-application-button-selected class and change the background-gradient-start and the background-gradient-end values
5- To change the application submenu’s selection box color, search for the .popup-menu-item:active class and edit the background-color value
6- To change the border color of the two above possibilities, change the box-shadow value in the same classes.
7- To change the favorites menu’s background color, search for the .menu-favorites-box class and edit the background-gradient-start and background-gradient-end values.
8- To change the favorites menu’s border color, change the border value in the same class as above
9-To change the favorites menu’s selection box color, search for the .menu-favorites-button:hover class and edit the background-gradient-start and background-gradient-end values.
10- To change the scrollbar handle’s color, search for the StScrollBar StButton#vhandle class and change the background-color value
11- To change the scrollbar border’s color, edit the border value in the same class as above
12- to edit main menu font colour edit

Code: Select all

color: #fff;

under

Code: Select all

.popup-menu {

in

Code: Select all

* PopupMenu (popupMenu.js)

the section looks something this

Code: Select all

.popup-menu {
   border: 1px  #555;
   border-left: 0px;
   border-right: 0px;
   border-top: 0px;
   background-gradient-direction: vertical;
   background-gradient-start: rgba(200,23,23,.98);
   background-gradient-end: rgba(50,15,15,.93);
   box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.86);
    border-radius: 0px 15px 15px 15px;
   color: #fff;
   font-size: 9pt;
    min-width: 100px;
}

2- Window list (windowList.js):
3- Sound Applet (status/volume.js):
4- Workspace Switcher applet (workspaceSwitcher.js):
5- Panel Launchers Applet (panelLaunchers.js):
6- Overview corner:
7- Applets (applet.js):
8- Workspace OSD:
9- Notification Applet:
10- User Applet:
11- Snap/Tile OSD Popup:

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tips:

1- A great tutorial on creating exterior and interior shadows -
http://www.css3.info/preview/box-shadow/

It is a bit outdated, because it appears that the -moz-box-shadow and -webkit-box-shadow are not needed any more - unless you are using a really old browser.[/quote]

2- a great tutorial on border-radius shapes here http://css-snippets.com/tag/border-radius/

[hexdef101]

interesting I will have to read through this later so that I can see if I can add something.

[nomizzz]

I was able to increase the size of GNOME panels that hold the Window List Item boxes by modifying the "width" property of the ".window-list-item-box" CSS class of cinnamon.css (in the Cinnamon desktop), but now the label width has not expanded to fit this. I tried tweaking the width and paddings of the same class and the window-list-item-label class to no avail... Anyone have any suggestions? See the picture attached below for more details.

Code: Select all

.window-list-item-box {
    color: rgba(255,255,255,1.0);
        background-gradient-direction: vertical;
        background-gradient-start: rgba(100,100,100,0.5);
        background-gradient-end: rgba(50,50,50,0.5);
        box-shadow: inset 0px 0px 0px 1px rgba(80,80,80,0.5);
    border-radius: 4px 4px 0px 0px;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
    transition-duration: 100;
    width: 400px;
}

[radist]

Hi all,

Small question.

I'd like to use two panels in Cinnamon and I need different color setting for these two panels (e.g. one is black and second is green, or ...), but I do not like to use in theme *.png for panel background.

Is it possible to (if yes, how) to make different color settings for two panels?

Thanks.

[AUserInEssex]

'Is it possible to (if yes, how) to make different color settings for two panels?' I'd like an answer to that too.

Also, I'd like to know, please, how one creates those partial panels - i.e the ones that contain gaps - as in the screenshots above. (I know the code is given; but little explanation of that code is provided.) Thanks.

[te7]

How do you change the color of the text under the launchers?

[CjStaal]

How do you change the color of the interior borders for the panels in an application window?