Changing Cinnamon Pannel

[diensthunds]

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.

[mordant23]

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.

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.

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;

Change the height and font-size to whatever you like. You can play with it just by doing the following steps:

Make changes
Save file
Alt+F2 'r'
Test
Repeat

Unfortunately I don't know how to move the panel to the top. In the future there may be a way to change the panel location with Cinnamon Settings.

[granul]

Hi!

Is the same way to make the application icon bigger?

Thank you

[mordant23]

Hi!

Is the same way to make the application icon bigger?

Thank you

Sorry, I'm blanking. What's the application icon?

[granul]

sorry about my english, I mean the icon on the panel.

Capture.png (10.94 KiB) Viewed 8793 times

[mordant23]

sorry about my english, I mean the icon on the panel.

Capture.png

No problem! That's a very good question and I think I figured it out. You need to modify the file:
/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);

You can modify the numbers to increase the size of the icon, e.g. I changed mine to read:

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);

Then save and Alt+F2 'r' to refresh your theme.

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.

[granul]

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;

[mordant23]

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

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;

Along with changing panelLauncher.js so the application icon is increased to 26 gives me a panel that looks like this:

panel-height-example.png (25.82 KiB) Viewed 8758 times

The image is at a 1:1 ratio with my desktop.

[granul]

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

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;

Along with changing panelLauncher.js so the application icon is increased to 26 gives me a panel that looks like this:

panel-height-example.png

The image is at a 1:1 ratio with my desktop.

is this in the cinnamon.css or panellauncher.css?

[granul]

could you send me your css file so I could use the same?

[TomANJ]

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?

[mordant23]

is this in the cinnamon.css or panellauncher.css?

It's in the cinnamon.css.

[mordant23]

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?

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.

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.

[andrew5859]

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

[TomANJ]

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.

[drcasper]

Can image background be added and strached horisontaly, like:

Code: Select all

#panel{
    background-image: url("panel.png"); /*or .svg*/
    background-repeat: repeat-x;
}


cause i tried this and it is not working? Image appears in "overview" in the center not streched.

[Biciclettapc]

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.

Yes I did about the same thing with no results either.

Paul

[aloysius]

Same problem here.
If anyone knows how to raise the panel height above 30px please advise.

[z06gal]

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

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;

Along with changing panelLauncher.js so the application icon is increased to 26 gives me a panel that looks like this:

panel-height-example.png

The image is at a 1:1 ratio with my desktop.

What font are you using? I like that

[mordant23]

What font are you using? I like that

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.