How to create/edit a Cinnamon theme

Write tutorials and howtos in here
There are more tutorials here http://community.linuxmint.com/tutorial/welcome
Forum rules
Do not start a support topic here please. Before you post please read this

How to create/edit a Cinnamon theme

Postby Zorba on 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 Image
User avatar
Zorba
Level 7
Level 7
 
Posts: 1984
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Linux Mint is funded by ads and donations.
 

Re: How to create/edit a Cinnamon theme

Postby hexdef101 on 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
User avatar
hexdef101
Level 4
Level 4
 
Posts: 299
Joined: Sat Oct 09, 2010 5:43 pm

Re: How to create/edit a Cinnamon theme

Postby nomizzz on 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
nomizzz
Level 1
Level 1
 
Posts: 1
Joined: Wed Mar 19, 2014 8:16 pm


Return to Tutorials / Howtos

Who is online

Users browsing this forum: No registered users and 14 guests