How To Theme The Cinnamon Taskbar Panel Icons and Applets

Forum rules
Before you post please read how to get help
User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

How To Theme The Cinnamon Taskbar Panel Icons and Applets

Postby austin.texas » Tue Jan 07, 2014 7:54 am

This thread is for the exchange of ideas and tips on how to customize the elements of a Cinnamon theme.

Here is an introduction to the installation and basic use of Cinnamon and gtk themes -
http://shyloh.com/themes.html

Here is the beginners tutorial for changing the colors of a Cinnamon theme, created by caribriz.
http://www.mediafire.com/view/i934f6tm60yxdjb/HOW-TO-CHANGE-THE-COLORS-OF-A-CINNAMON-THEME.pdf

Forum discussions for Cinnamon themes:

How To Install a New Theme
viewtopic.php?f=42&t=155399

How To Theme The Cinnamon Main Menu Colors
viewtopic.php?f=42&t=155400

How To Theme The Cinnamon Main Menu Borders and Boxes
viewtopic.php?f=42&t=155401

How To Theme The Cinnamon Taskbar Panel Window List Tabs
viewtopic.php?f=42&t=155402

How To Theme The Cinnamon Popup Menu
viewtopic.php?f=42&t=155405

How To Theme The Cinnamon Notifications
viewtopic.php?f=211&t=155411

How to create/edit a Cinnamon theme, by Brahim
viewtopic.php?f=42&t=155698

You can use the Subscribe topic link at the bottom of the page to get updates.
Last edited by austin.texas on Thu Jan 23, 2014 10:40 am, edited 3 times in total.
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby austin.texas » Thu Jan 09, 2014 9:21 am

You can change to different icons with System Settings > Themes > Other Settings > Icons

There are several ways to get new icons:

1) From the Mint repository using Synaptic.
I prefer the Neu icons, found in the gnome-themes-extras package. There are many more in the repository, such as
human-theme
human-icon-theme
humanity-icon-theme
gnome-human-icon-theme
gnome-colors
gnome-wine-icon-theme
gnome-wise-icon-theme
gnome-brave-icon-theme

2) If you want to download and install other icon sets, the first step is to make an .icons folder

Code: Select all

mkdir /home/user/.icons

Download and copy new icon sets into that folder.
You can find more icon sets here:
http://gnome-look.org/index.php?xcontentmode=120x121
http://www.deviantart.com/?q=icons
http://www.noobslab.com/2011/11/themes- ... html#icons

3) If you are artistically inclined, make your own icon sets.

4) Install gextractwinicons with Synaptic. gExtractWinIcons can extract cursors and icons from MS Windows compatible
resource files (like .exe, .dll, .ocx, .cpl).
Last edited by austin.texas on Tue May 06, 2014 6:20 am, edited 1 time in total.
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby austin.texas » Thu Jan 09, 2014 9:51 am

The acvamarin icons from noobslab look spectacular on Brahim's MetroPack theme.
http://gnome-look.org/content/show.php/ ... ent=162539
Image

Terminal Commands:
sudo add-apt-repository ppa:noobslab/themes
sudo apt-get update
sudo apt-get install acvamarin
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby austin.texas » Thu Jan 09, 2014 11:15 am

The gnome-wine-icon-theme (Mint repository) icons with Brahim's Minty-Wine theme.
http://gnome-look.org/content/show.php/ ... ent=162617
Image
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby austin.texas » Thu Jan 16, 2014 7:43 pm

If you want your time display in the Clock/Calendar to be big and bold, edit the .applet-box property.
The main Menu tab font increases along with the Clock.
/* ===================================================================
* Applets (applet.js)
* ===================================================================*/
.applet-box {
padding-left: 4px;
padding-right: 4px;
font-size: 12pt;
font-weight: bold;

}

.applet-box:hover {
color: white;
font-weight: bolder;
text-shadow: rgba(255,255,255,1) 1px -1px 1px;
}

That gives this result:
Image

This may cause your unselected window list tabs font to increase too much, so you can reset that to a smaller font separately:
.window-list-item-box {
color: black;
font-size: 10pt;
font-weight: normal;
}
.window-list-item-box:active,
.window-list-item-box:checked,
.window-list-item-box:focus {
color: black;
font-size: 10pt;
font-weight: bold;
}
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby austin.texas » Sat Jan 18, 2014 8:12 pm

I was tired of all the tiny Calendars that I have seen in most themes, and I wanted a Calendar that was big and bold.

My original MintyGreen Calendar:
Image

My new big Calendar:
Image

The size change was made by increasing the font size of the .datemenu-date-label - which is the top line in the Calendar, and adding some more padding to it.
I added some green and bold to the fonts, also.

My original small Calendar:
.datemenu-date-label {
padding: .5em 0em 1em 0em;
font-weight: bold;
text-align: center;
color: rgb(70,70,70);
}
.calendar-month-label {
padding-bottom: 3px;
padding-top: 3px;
font-weight: bold;
color: rgb(70,70,70);
}

My new bigger Calendar:
.datemenu-date-label {
padding: .2em 2.75em .2em 2.75em;
font-size: 1.4em;
font-weight: bold;
color: green;
text-align: center;
}
.calendar-month-label {
padding-top: 8px;
padding-bottom: 8px;
font-size: 1.2em;
font-weight: bold;
color: green;
}
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

User avatar
Zorba
Level 8
Level 8
Posts: 2322
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby Zorba » Sat Jan 18, 2014 8:38 pm

austin.texas wrote:The gnome-wine-icon-theme (Mint repository) icons with Brahim's Minty-Wine theme.
http://gnome-look.org/content/show.php/ ... ent=162617
Image


where can I get these icons man they look great :shock: :shock:
Image

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby austin.texas » Sat Jan 18, 2014 11:36 pm

They are great !
I mentioned that they are in the Mint repository - so you can get them with Synaptic. Look for gnome-wine-icon-theme
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

caribriz
Level 5
Level 5
Posts: 938
Joined: Mon Nov 28, 2011 7:43 am

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby caribriz » Sun Jan 19, 2014 1:53 am

That's a great tip to make the calendar bigger, austin :D
I'm going to do that.
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17.3 Cinnamon)

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applet

Postby austin.texas » Sun Jan 19, 2014 8:59 am

How to create a decorative separator bar in your popup menus:

Example - gmc85's TRON Alt with green separator bar:
Image

.popup-separator-menu-item {
-gradient-height: 1px;
-gradient-end: rgba(9,181,145,1);
-gradient-start: rgba(90,90,90,0);
-margin-horizontal: 1.5em;
height: 1em;
}

Example - my Burnt Orange Longhorn with white separator bar:
Image

.popup-separator-menu-item {
-gradient-height: 2px;
-gradient-end: rgba(255,255,255,0.6);
-gradient-start: rgba(224,146,69,0.5);
-margin-horizontal: 1.5em;
height: .3em;
}
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017

mohican
Level 1
Level 1
Posts: 15
Joined: Wed Aug 17, 2016 5:28 am

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applets

Postby mohican » Wed Aug 17, 2016 12:35 pm

Hello, I'm a newcomer.
I would like to change the font of some items in the panel.

I did not understand in what file did you edit these CSS properties.

Where is the default font defined for the panels ?
Can I use the font-family property to change the font ?
Currently testing Linux Mint 18.0 64 bits Cinnamon.

mohican
Level 1
Level 1
Posts: 15
Joined: Wed Aug 17, 2016 5:28 am

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applets

Postby mohican » Wed Aug 17, 2016 12:58 pm

I found how to do it :

edit the cinnamon.css file found in the current desktop theme folder :
e.g. /usr/share/themes/Linux Mint/cinnamon
(needs root priviledge)

open nemo as root : <Alt><F2> gksu nemo
make backup of file cinnamon.css
open cinnamon.css file in text editor

Example to have a narrow font for the whole panel :

Code: Select all

#panel {
   font-family:"Liberation Sans Narrow";
}


or for only the window-list items :

Code: Select all

.window-list-item-box {
   font-family:"Liberation Sans Narrow";
}


to apply it : restart Cinnamon (right click on panel > solve problem > restart cinnamon)
Currently testing Linux Mint 18.0 64 bits Cinnamon.

User avatar
AmericanPi
Level 3
Level 3
Posts: 109
Joined: Thu Sep 01, 2016 2:28 am
Location: New Jrsey
Contact:

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applets

Postby AmericanPi » Tue Sep 06, 2016 1:43 am

_._!!we gota sticky this!!_._

4 days i've been lookin around.
Great to find this, covers so much answering so many questions.
pretty much embodies this section of our forum....

TX GUYS/GALS

User avatar
AmericanPi
Level 3
Level 3
Posts: 109
Joined: Thu Sep 01, 2016 2:28 am
Location: New Jrsey
Contact:

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applets

Postby AmericanPi » Tue Sep 06, 2016 1:54 am

@mohican

didint now about that narrow thing.

in case you wanted to change the font for the theme in it's entirety and not just the panel....

Code: Select all

stage {
font-family: Noto Sans, sans, sans serif
}

this way all your font is one way and you can go in and change specific text to be diff font like you did in your panel. (i think, gota sleep so i'll check in A.M.)
if you wanted.

User avatar
AmericanPi
Level 3
Level 3
Posts: 109
Joined: Thu Sep 01, 2016 2:28 am
Location: New Jrsey
Contact:

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applets

Postby AmericanPi » Tue Sep 06, 2016 1:55 am

@mohican

didin't now about that narrow thing, tx.

in case you wanted to change the font for the theme in it's entirety and not just the panel....

Code: Select all

stage {
font-family: Noto Sans, sans, sans serif;
}

this way all your font is one way and you can go in and change specific text to be diff font like you did in your panel. (i think, gota sleep so i'll check in A.M.)
if you wanted.

User avatar
austin.texas
Level 20
Level 20
Posts: 11696
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How To Theme The Cinnamon Taskbar Panel Icons and Applets

Postby austin.texas » Tue Sep 06, 2016 6:06 am

AmericanPi wrote:_._!!we gota sticky this!!_._

4 days i've been lookin around.
Great to find this, covers so much answering so many questions.
pretty much embodies this section of our forum....

TX GUYS/GALS

I am glad you found this thread helpful.
Of course, they are old and don't cover Mint 18.
I have written a tutorial on creating a cinnamon theme for Mint 18. It is in the form of an html "book".
The chapters on gtk have not been written yet, but the Cinnamon chapter is complete.
You can download the first 3 chapters from my Google Drive.
https://drive.google.com/file/d/0B6Rhtb ... sp=sharing
Use the Down Arrow at the top right to download the book.
Mint 18.2 Cinnamon, Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Linux Linx 2017


Return to “Themes, Icons, & Wallpaper”

Who is online

Users browsing this forum: No registered users and 1 guest