Changing Cinnamon Pannel
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Changing Cinnamon Pannel
I know as of now that there are only a few things that can be customized in Cinnamon such as the menu text, the autohide panel, etc. Is there any way, through changing the code in files or otherwise to make changes to the panel such as placing it at the top of the screen or making the panel slightly larger, the text and size of the panel and it's icons are hard on my old eyes.
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.
Reason: Topic automatically closed 6 months after creation. New replies are no longer allowed.
Re: Changing Cinnamon Pannel
To make panel and text inside the panel larger, find the cinnamon.css file in the theme folder. If you're using the default theme for Cinnamon, the folder should be in /usr/share/cinnamon/theme. If you use a custom theme, it may be in /usr/share/themes/theme_folder or home/.themes/theme_folder.diensthunds wrote:I know as of now that there are only a few things that can be customized in Cinnamon such as the menu text, the autohide panel, etc. Is there any way, through changing the code in files or otherwise to make changes to the panel such as placing it at the top of the screen or making the panel slightly larger, the text and size of the panel and it's icons are hard on my old eyes.
In the cinnamon.css file, find a section that looks like this:
Code: Select all
#panel {
color: #ffffff;
background-color: #555555;
font-size: 8.5pt;
font-weight: normal;
height: 25px;
- Make changes
Save file
Alt+F2 'r'
Test
Repeat
Re: Changing Cinnamon Pannel
Hi!
Is the same way to make the application icon bigger?
Thank you
Is the same way to make the application icon bigger?
Thank you
Re: Changing Cinnamon Pannel
Sorry, I'm blanking. What's the application icon?granul wrote:Hi!
Is the same way to make the application icon bigger?
Thank you
Re: Changing Cinnamon Pannel
No problem! That's a very good question and I think I figured it out. You need to modify the file:granul wrote:sorry about my english, I mean the icon on the panel.
/usr/share/cinnamon/js/ui/panelLaunchers.js
Go to lines 83 and 84, which should look like this:
Code: Select all
if (this.is_custom()) icon = new St.Icon({ gicon: appinfo.get_icon(), icon_size: 20 });
else icon = this.app.create_icon_texture(20);
Code: Select all
if (this.is_custom()) icon = new St.Icon({ gicon: appinfo.get_icon(), icon_size: 26 });
else icon = this.app.create_icon_texture(26);
I haven't thoroughly tested it. So far nothing seems to be broken, but be careful. Of course, when you upgrade Cinnamon, you will probably need to redo this. Maybe in the future there will be settings to adjust the panel height and icons.
Edit: removed duplicate line and added more info in the last paragraph.
Re: Changing Cinnamon Pannel
Thank you, it work but now the pannel is not height enough. I tried to change the height at the bottom line but it did not work:
#panel {
color: #ffffff;
background-color: #555555;
font-size: 8.5pt;
font-weight: normal;
height: 36px;
#panel {
color: #ffffff;
background-color: #555555;
font-size: 8.5pt;
font-weight: normal;
height: 36px;
Re: Changing Cinnamon Pannel
I'll give it a try. Plus, did you type Alt+F2 and then type 'r'? Did you change the icon font size in panelLaunchers.js? If so, what number did you choose? Do you also want to increase the height for the other parts of the panel, e.g date/time, notifications, application window list, etc. etc.? If so, you need to also increase the font-size in the panel class.
For example, I have
Along with changing panelLauncher.js so the application icon is increased to 26 gives me a panel that looks like this:
The image is at a 1:1 ratio with my desktop.
For example, I have
Code: Select all
#panel {
color: #ffffff;
background-color: rgba(5,5,5,0.6);
border: 1px solid rgba(255,255,255,0.4);/*
box-shadow: 8px 6px 0 0 rgba(0,0,0,0.6);*/
border-left: 0px;
border-right: 0px;
border-top: 0px;
font-size: 14pt;
font-weight: bold;
height: 1.5em;
Re: Changing Cinnamon Pannel
is this in the cinnamon.css or panellauncher.css?mordant23 wrote:I'll give it a try. Plus, did you type Alt+F2 and then type 'r'? Did you change the icon font size in panelLaunchers.js? If so, what number did you choose? Do you also want to increase the height for the other parts of the panel, e.g date/time, notifications, application window list, etc. etc.? If so, you need to also increase the font-size in the panel class.
For example, I have
Along with changing panelLauncher.js so the application icon is increased to 26 gives me a panel that looks like this: The image is at a 1:1 ratio with my desktop.Code: Select all
#panel { color: #ffffff; background-color: rgba(5,5,5,0.6); border: 1px solid rgba(255,255,255,0.4);/* box-shadow: 8px 6px 0 0 rgba(0,0,0,0.6);*/ border-left: 0px; border-right: 0px; border-top: 0px; font-size: 14pt; font-weight: bold; height: 1.5em;
Re: Changing Cinnamon Pannel
It appears that increasing the pixel size of the panel (in the .css file noted) causes it to expand downward. Is there another .css that allows you to raise the position of the Cinnamon panel, then increase it's size and icon size?
Re: Changing Cinnamon Pannel
It's in the cinnamon.css.granul wrote:is this in the cinnamon.css or panellauncher.css?
Re: Changing Cinnamon Pannel
I noticed that too. I don't know if there is any way to modify the position of the panel. I'm still playing with the panel and noticed you can't go too crazy with the height. The panel seems to act weird when you go set the height parameter in the #panel class too far over 1.5em or 30px. I think the height of the panel has something to do with the size of its children.TomANJ wrote:It appears that increasing the pixel size of the panel (in the .css file noted) causes it to expand downward. Is there another .css that allows you to raise the position of the Cinnamon panel, then increase it's size and icon size?
If you're feeling up for it, you can take a look at some of the files in the ui folder. I've looked at /usr/share/cinnamon/js/ui/panel.js but I'm not an expert in javascript. I see where the program draws the panel but I don't know how it puts it together so we can adjust the height.
Re: Changing Cinnamon Pannel
I agree.....it did the same thing to me a little while ago when I followed the steps below for doing this.....I got the same result
Re: Changing Cinnamon Pannel
Found the following in /usr/share/cinnamon/js/ui/panel.js, but altering these values made no visible changes.
const PANEL_ICON_SIZE = 24;
const PANEL_ICON_DEFAULT_SIZE = 20
const PANEL_HEIGHT = 25
It must have something to do with the panel's position in the ui layout. Expanding from the top, down.
const PANEL_ICON_SIZE = 24;
const PANEL_ICON_DEFAULT_SIZE = 20
const PANEL_HEIGHT = 25
It must have something to do with the panel's position in the ui layout. Expanding from the top, down.
Re: Changing Cinnamon Pannel
Can image background be added and strached horisontaly, like:
cause i tried this and it is not working? Image appears in "overview" in the center not streched.
Code: Select all
#panel{
background-image: url("panel.png"); /*or .svg*/
background-repeat: repeat-x;
}
Re: Changing Cinnamon Pannel
Yes I did about the same thing with no results either.TomANJ wrote:Found the following in /usr/share/cinnamon/js/ui/panel.js, but altering these values made no visible changes.
const PANEL_ICON_SIZE = 24;
const PANEL_ICON_DEFAULT_SIZE = 20
const PANEL_HEIGHT = 25
It must have something to do with the panel's position in the ui layout. Expanding from the top, down.
Paul
Re: Changing Cinnamon Pannel
Same problem here.
If anyone knows how to raise the panel height above 30px please advise.
If anyone knows how to raise the panel height above 30px please advise.
Re: Changing Cinnamon Pannel
mordant23 wrote:I'll give it a try. Plus, did you type Alt+F2 and then type 'r'? Did you change the icon font size in panelLaunchers.js? If so, what number did you choose? Do you also want to increase the height for the other parts of the panel, e.g date/time, notifications, application window list, etc. etc.? If so, you need to also increase the font-size in the panel class.
For example, I have
Along with changing panelLauncher.js so the application icon is increased to 26 gives me a panel that looks like this: The image is at a 1:1 ratio with my desktop.Code: Select all
#panel { color: #ffffff; background-color: rgba(5,5,5,0.6); border: 1px solid rgba(255,255,255,0.4);/* box-shadow: 8px 6px 0 0 rgba(0,0,0,0.6);*/ border-left: 0px; border-right: 0px; border-top: 0px; font-size: 14pt; font-weight: bold; height: 1.5em;
What font are you using? I like that
Re: Changing Cinnamon Pannel
It's the Evanescent font. You can get it here. Just change the font in the stage {} section of the cinnamon.css file in the theme! The only problem is that for some reason the font renders really small, so you have to track down and change the various font sizes in the rest of the theme. That's why the font-size is 14pt.z06gal wrote: What font are you using? I like that