transparent panel for linuxmint 18.1 cinnamon

Please post suggestions for improvement of Cinnamon here
https://github.com/linuxmint/Cinnamon
Post Reply
tangy_man
Level 1
Level 1
Posts: 3
Joined: Thu Feb 23, 2017 2:12 am

transparent panel for linuxmint 18.1 cinnamon

Post by tangy_man » Fri Feb 24, 2017 1:38 am

hey,
i want to make cinnamon panel transparent in linuxmint 18.1

jeanjhaj
Level 1
Level 1
Posts: 7
Joined: Wed Feb 01, 2017 1:43 pm

Re: transparent panel for linuxmint 18.1 cinnamon

Post by jeanjhaj » Fri Feb 24, 2017 2:08 am

go to system setting>theme>desktop> add/delete deskop themes > online themes

DOnload Tyr himinn theme, it is cool and transparent, but it is not the only that is transparent

I want to maker cinnamon Windows Border transparant in linux mint 18 too. do you know how?

tangy_man
Level 1
Level 1
Posts: 3
Joined: Thu Feb 23, 2017 2:12 am

Re: transparent panel for linuxmint 18.1 cinnamon

Post by tangy_man » Fri Feb 24, 2017 5:08 am

checking cinnamon.css file.
didn't find anything useful yet.

Penn
Level 5
Level 5
Posts: 752
Joined: Tue Jun 10, 2014 1:12 pm

Re: transparent panel for linuxmint 18.1 cinnamon

Post by Penn » Fri Feb 24, 2017 10:54 am

tangy_man wrote:checking cinnamon.css file.
didn't find anything useful yet.
This would be easier to answer if we knew what theme you want to alter.

It is in the cinnamon.css file. First, make certain you are adjusting that file in the correct theme by finding the cinnamon.css inside of the folder named the same as the theme you want to adjust such as ./(theme-name)/cinnamon/cinnamon.css (one exception, don't mess with the actual theme named Cinnamon since that is the fallback in case something goes wrong with another theme).

Go to the panel.js section. The exact line depends on which theme you are using and sometimes where the panel is (bottom, top, left, right). You are looking to change the "background-color". Some themes you need to only need to change "#panel" (usually when the panel is truly a single color) but if the theme has different settings for different panel position you need to change the section that corresponds to where your panel such as ".panel-top" (if it is actually a 2 color gradient) and if you have more than one panel you need to change them all.

The color value needs to be rgba where the last number is 0 since the last number is alpha or transparency level. 0 is fully transparent and 1 is fully solid. A decimal number is for semi transparent (translucent, like colored glass) so 0.5 is halfway transparent. The other numbers are values for red, green, blue but if you are making it fully transparent those values mean nothing but if you are only making the panel semi-transparent you will need a color you like.

Remember, it is the background-color you are changing to something like

Code: Select all

background-color: rgba (78, 20, 170, 0);
For fully transparent the only value that means anything is the zero. If it is currently "background-gradient:" you either need to change it to "background-color" and delete the following gradient lines (start and end) or just change the start and end colors so they are both transparent.

If you want to either change the theme named Cinnamon or want to play around with more changes you should copy the theme folder you want to alter and rename it so it will be your theme.

Always report back or mark the thread as solved for the sake of anyone else that might want to do the same if the suggestion works for you.

tangy_man
Level 1
Level 1
Posts: 3
Joined: Thu Feb 23, 2017 2:12 am

Re: transparent panel for linuxmint 18.1 cinnamon

Post by tangy_man » Thu Mar 09, 2017 12:53 am

Penn wrote:
tangy_man wrote:checking cinnamon.css file.
didn't find anything useful yet.
This would be easier to answer if we knew what theme you want to alter.

It is in the cinnamon.css file. First, make certain you are adjusting that file in the correct theme by finding the cinnamon.css inside of the folder named the same as the theme you want to adjust such as ./(theme-name)/cinnamon/cinnamon.css (one exception, don't mess with the actual theme named Cinnamon since that is the fallback in case something goes wrong with another theme).

Go to the panel.js section. The exact line depends on which theme you are using and sometimes where the panel is (bottom, top, left, right). You are looking to change the "background-color". Some themes you need to only need to change "#panel" (usually when the panel is truly a single color) but if the theme has different settings for different panel position you need to change the section that corresponds to where your panel such as ".panel-top" (if it is actually a 2 color gradient) and if you have more than one panel you need to change them all.

The color value needs to be rgba where the last number is 0 since the last number is alpha or transparency level. 0 is fully transparent and 1 is fully solid. A decimal number is for semi transparent (translucent, like colored glass) so 0.5 is halfway transparent. The other numbers are values for red, green, blue but if you are making it fully transparent those values mean nothing but if you are only making the panel semi-transparent you will need a color you like.

Remember, it is the background-color you are changing to something like

Code: Select all

background-color: rgba (78, 20, 170, 0);
For fully transparent the only value that means anything is the zero. If it is currently "background-gradient:" you either need to change it to "background-color" and delete the following gradient lines (start and end) or just change the start and end colors so they are both transparent.

If you want to either change the theme named Cinnamon or want to play around with more changes you should copy the theme folder you want to alter and rename it so it will be your theme.

Always report back or mark the thread as solved for the sake of anyone else that might want to do the same if the suggestion works for you.
thanks penn,
it works in linuxmint 17.3
haven't checked in 18.1 as i reinstalled 17.3

User avatar
jasongambit
Level 1
Level 1
Posts: 4
Joined: Tue Apr 11, 2017 12:22 am
Location: USA
Contact:

Re: transparent panel for linuxmint 18.1 cinnamon

Post by jasongambit » Sat May 27, 2017 12:58 am

It's to bad we have to edit .css files to do this. While many of us know how to, a noobie would be overwhelmed! I know there's an extension but that transparency is not adjustable.
Anyhow, good info on how to edit the .css etc! [was doing that for my panel last night :) ]

PlutoPup
Level 3
Level 3
Posts: 135
Joined: Tue May 16, 2017 8:45 pm

Re: transparent panel for linuxmint 18.1 cinnamon

Post by PlutoPup » Fri Jun 02, 2017 6:36 pm

I can't do any editing,,, yet.. Don't know that I ever will. Thanks for your question though. I didn't know about "Tyr himinn" theme.. It's way cool.

User avatar
_Josue_
Level 1
Level 1
Posts: 27
Joined: Sun Mar 27, 2016 12:36 am

Re: transparent panel for linuxmint 18.1 cinnamon

Post by _Josue_ » Fri Jun 02, 2017 9:29 pm

Hi there! I was having the same issue you have! I wanted transparency in the window decorations and panels.
Editing some themes that had transparency I found out that it was just a matter of editing the panel image with GIMP and since it's already a PNG, adding the alpha channel and tweaking it to what I liked was what worked for me, at least in my Cinnamon 17.3, but I don't think it should be too different in 18.1. Sadly I couldn't do the same for the window decorations. I wish the developers added that feature to the theming engine, so you can define window decorations with transparency just like that.
So, it's just that: find a theme that has transparency or make your own modified theme and add transparency.
Desktop Pentium D Linux Mint 17.3 Mate & Linux Mint 17.3 Cinnamon
Laptop Compaq Linux Mint 18.3 Mate
Laptop HP Linux Mint 18.3 KDE & Linux Mint 18.3 Cinnamon

Freedom is the right of all sentient beings.

sadi
Level 1
Level 1
Posts: 43
Joined: Sat Aug 21, 2010 3:16 pm
Location: Istanbul

Re: transparent panel for linuxmint 18.1 cinnamon

Post by sadi » Wed Jun 28, 2017 1:12 pm

The desktop theme "Tyr himinn" (available online) is the closest option for this pupose - and a little transparency in dropdown menus also look great!

But I still needed a little finetuning to achieve a really transparent panel by commenting the first line of the panel section in the file

Code: Select all

~/.themes/Tyr himinn/cinnamon/cinnamon.css
and adding instead

Code: Select all

background-color: rgba(175,175,175,0.15);
Now, I'd like a little more finetuning to make my left panel about 95% transparent, and my top panel about 35% transparent!
Any help would be greatly appreciated to achieve such different transparency settings for different panels.

Below is the current (modified) panel section:

Code: Select all

/* ===================================================================
* Panel (panel.js)
* ===================================================================*/
#panel {
/*background-color: rgba(0,0,0,0.75);*/
background-color: rgba(175,175,175,0.15);
font-weight: bold;
height: 26px;
box-shadow: 0px 0px 4px 3px rgba(0,0,0,0.6);
font-size: 9pt;
}
#panel:highlight {
    background-color: #aa5555;
}
.panelLeft, .panelCenter, .panelRight {
spacing: 0px;
}
.panelLeft:dnd {
background-gradient-start: #bada55;
background-gradient-end: #45883b;
background-gradient-direction: vertical;
}
.panelCenter:dnd {
background-gradient-start: transparent;
background-gradient-end: transparent;
background-gradient-direction: vertical;
}
.panelRight:dnd {
background-gradient-start: #51bbe9;
background-gradient-end: #22597e;
background-gradient-direction: vertical;
}
.panelLeft:ltr {
padding-right: 4px;
}
.panelLeft:rtl {
padding-left: 4px;
}
.panelRight:ltr {
padding-left: 4px;
}
.panelRight:rtl {
padding-right: 4px;
}
.panelLeft.vertical, .panelCenter.vertical, .panelRight.vertical {
padding: 0px;
}
.panel-button,
.panel-status-button {
-natural-hpadding: 5px;
-minimum-hpadding: 5px;
transition-duration: 250;
}
.panel-button:hover,
.panel-status-button:hover {
border-image: url("window-active.svg") 2 2 0 0;
transition-duration: 250;
}
.popup-menu-item-dot {
background-image: url("dot.svg");
background-size: contain;
color: transparent;
}
.system-status-icon {
icon-size: 1.3em;
icon-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}
.system-status-icon.warning {
color: #e5e887;
}
.system-status-icon.error {
color: #fb5858;
}
OS: Linux Mint 19 Cinnamon 64-bit

starlink
Level 1
Level 1
Posts: 3
Joined: Thu Jun 07, 2018 3:02 pm

Re: transparent panel for linuxmint 18.1 cinnamon

Post by starlink » Sun Jun 24, 2018 2:39 pm

Thanks, sadi!

Your suggestion helped me to fix the transparency issue! :) :) :)
I just wanted to add that the command you posted is missing a hyphen in the folder name and should be like this:

Code: Select all

~/.themes/Tyr-himinn/cinnamon/cinnamon.css
sadi wrote:
Wed Jun 28, 2017 1:12 pm
The desktop theme "Tyr himinn" (available online) is the closest option for this pupose - and a little transparency in dropdown menus also look great!

But I still needed a little finetuning to achieve a really transparent panel by commenting the first line of the panel section in the file

Code: Select all

~/.themes/Tyr himinn/cinnamon/cinnamon.css
and adding instead

Code: Select all

background-color: rgba(175,175,175,0.15);
Now, I'd like a little more finetuning to make my left panel about 95% transparent, and my top panel about 35% transparent!
Any help would be greatly appreciated to achieve such different transparency settings for different panels.

Below is the current (modified) panel section:

Code: Select all

/* ===================================================================
* Panel (panel.js)
* ===================================================================*/
#panel {
/*background-color: rgba(0,0,0,0.75);*/
background-color: rgba(175,175,175,0.15);
font-weight: bold;
height: 26px;
box-shadow: 0px 0px 4px 3px rgba(0,0,0,0.6);
font-size: 9pt;
}
#panel:highlight {
    background-color: #aa5555;
}
.panelLeft, .panelCenter, .panelRight {
spacing: 0px;
}
.panelLeft:dnd {
background-gradient-start: #bada55;
background-gradient-end: #45883b;
background-gradient-direction: vertical;
}
.panelCenter:dnd {
background-gradient-start: transparent;
background-gradient-end: transparent;
background-gradient-direction: vertical;
}
.panelRight:dnd {
background-gradient-start: #51bbe9;
background-gradient-end: #22597e;
background-gradient-direction: vertical;
}
.panelLeft:ltr {
padding-right: 4px;
}
.panelLeft:rtl {
padding-left: 4px;
}
.panelRight:ltr {
padding-left: 4px;
}
.panelRight:rtl {
padding-right: 4px;
}
.panelLeft.vertical, .panelCenter.vertical, .panelRight.vertical {
padding: 0px;
}
.panel-button,
.panel-status-button {
-natural-hpadding: 5px;
-minimum-hpadding: 5px;
transition-duration: 250;
}
.panel-button:hover,
.panel-status-button:hover {
border-image: url("window-active.svg") 2 2 0 0;
transition-duration: 250;
}
.popup-menu-item-dot {
background-image: url("dot.svg");
background-size: contain;
color: transparent;
}
.system-status-icon {
icon-size: 1.3em;
icon-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}
.system-status-icon.warning {
color: #e5e887;
}
.system-status-icon.error {
color: #fb5858;
}

User avatar
Snafu
Level 2
Level 2
Posts: 65
Joined: Tue Mar 13, 2018 7:01 am
Location: Australia

Re: transparent panel for linuxmint 18.1 cinnamon

Post by Snafu » Tue Jun 26, 2018 6:34 am

Check out the cinnamox themes on cinnamon spices.

Code: Select all

https://cinnamon-spices.linuxmint.com/
There is a script provided with them to adjust transparency
When all else fails follow the instructions

Post Reply

Return to “Cinnamon”