transparent panel for linuxmint 18.1 cinnamon

Please post suggestions for improvement of Cinnamon on:
https://github.com/linuxmint/Cinnamon
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Locked
tangy_man

transparent panel for linuxmint 18.1 cinnamon

Post by tangy_man »

hey,
i want to make cinnamon panel transparent in linuxmint 18.1
Last edited by LockBot on Wed Dec 28, 2022 7:16 am, edited 1 time in total.
Reason: Topic automatically closed 6 months after creation. New replies are no longer allowed.
jeanjhaj

Re: transparent panel for linuxmint 18.1 cinnamon

Post by jeanjhaj »

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

Re: transparent panel for linuxmint 18.1 cinnamon

Post by tangy_man »

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

Re: transparent panel for linuxmint 18.1 cinnamon

Post by Penn »

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

Re: transparent panel for linuxmint 18.1 cinnamon

Post by tangy_man »

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
jasongambit

Re: transparent panel for linuxmint 18.1 cinnamon

Post by jasongambit »

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

Re: transparent panel for linuxmint 18.1 cinnamon

Post by PlutoPup »

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.
_Josue_

Re: transparent panel for linuxmint 18.1 cinnamon

Post by _Josue_ »

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.
User avatar
sadi
Level 2
Level 2
Posts: 65
Joined: Sat Aug 21, 2010 3:16 pm
Location: Istanbul

Re: transparent panel for linuxmint 18.1 cinnamon

Post by sadi »

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;
}
Linux Mint 19.3 Cinnamon
starlink

Re: transparent panel for linuxmint 18.1 cinnamon

Post by starlink »

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 »

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
Locked

Return to “Cinnamon”