How to create/edit a Cinnamon theme

Write tutorials here
There are more tutorials here http://community.linuxmint.com/tutorial/welcome
Forum rules
Please don't add support questions to tutorials,start your own thread in the appropriate sub-forum instead. Before you post please read this
User avatar
Zorba
Level 8
Level 8
Posts: 2309
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

How to create/edit a Cinnamon theme

Postby Zorba » Fri Jan 10, 2014 9:19 am

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


Image

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

Image

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

Image



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


Image

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


Image



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


Image

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 Image:

Image


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

Image

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:

Image

11- Alt Tab:

Image

12- Modal dialogs:

Image

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


II- Cinnamon Specific Section:


1- Menu (menu.js):

Image


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


Image

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/
Last edited by Oscar799 on Fri Jan 10, 2014 11:19 am, edited 1 time in total.
Reason: Removed unnecessary oversized text
Image

User avatar
hexdef101
Level 4
Level 4
Posts: 357
Joined: Sat Oct 09, 2010 5:43 pm

Re: How to create/edit a Cinnamon theme

Postby hexdef101 » Fri Jan 10, 2014 5:03 pm

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

nomizzz
Level 1
Level 1
Posts: 1
Joined: Wed Mar 19, 2014 8:16 pm

Re: How to create/edit a Cinnamon theme

Postby nomizzz » Wed Mar 19, 2014 8:19 pm

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;
}
Attachments
How Do We Widen the Text Area.png

User avatar
radist
Level 1
Level 1
Posts: 7
Joined: Fri Mar 28, 2014 11:14 am

Re: How to create/edit a Cinnamon theme

Postby radist » Mon Aug 25, 2014 1:17 pm

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
Level 3
Level 3
Posts: 127
Joined: Thu May 01, 2014 8:21 pm

Re: How to create/edit a Cinnamon theme

Postby AUserInEssex » Sat Mar 14, 2015 3:26 pm

'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
Level 1
Level 1
Posts: 41
Joined: Thu Jan 12, 2012 10:28 pm

Re: How to create/edit a Cinnamon theme

Postby te7 » Sun Jul 12, 2015 8:59 am

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

CjStaal
Level 1
Level 1
Posts: 7
Joined: Mon Jun 01, 2015 9:58 pm

Re: How to create/edit a Cinnamon theme

Postby CjStaal » Sat Sep 05, 2015 3:01 pm

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


Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 3 guests