LinuxQuestions.org - [SOLVED] How to change cinnamon panel color

- Ubuntu (https://www.linuxquestions.org/questions/ubuntu-63/)

- - How to change cinnamon panel color (https://www.linuxquestions.org/questions/ubuntu-63/how-to-change-cinnamon-panel-color-4175568882/)

How to change cinnamon panel color

I'm running Ubuntu 15.10 with the Cinnamon desktop. I'm trying to customize the taskbar panel a bit. I want to change the color from the default #555555 to rgb(170,0,0). In $HOME/.themes/cinnamon.css I have:

Code:

    #panel {

        color: #ffffff;

        background-color: rgb(170,0,0);

        font-size: 12pt;

        font-weight: normal;

        height: 40px;

    }

But it still shows the #555555 color as defined in /usr/share/cinnamon/theme/cinnamon.css, even after rebooting.

Why?

Because you are editing the wrong file.
The best way to do it is to determine which Cinnamon theme that you are using. Let's say it is Mint-X, for example. Then you would create a folder named /home/yourusername/.themes and copy the entire Mint-X folder from /usr/share/themes to /home/yourusername/.themes
Then rename it to distinguish it from the original Mint-X. You could name it Mint-X_custom (or whatever).
Then you can edit the /home/yourusername/.themes/Mint-X_custom/cinnamon/cinnamon.css and the original Mint-X stays untouched.

I wrote a tutorial which will help - Cinnamon and GTK Themes: The Basics

Thanks! That did the trick. Maybe I copied the cinnamon.css file to the wrong location once upon a time. I hang on to your tutorial link for future reference.

Now, I'd like to modify the Menu (way too transparent). What is this called in the cinnamon.css file? I find no #menu or the like.

The first way you can affect the Menu is to edit the PopupMenu section at about line 100,
Here is one heavily edited:

Code:

.popup-menu {

    border-radius: 4px;

    border: 1px solid rgba(255,255,255,0.7);

    border-bottom: 0px;

    border-left: 0px;

    border-right: 0px;

    border-image: url("Menu.jpg")0 10 8 8 stretch;

    color: #ffffff;

    font-size: 11pt;

    min-width: 280px;

}

This is what that looks like > http://i.imgur.com/zmcxMtw.png
My "Menu.jpg" is rain on a car's windshield.

The second way you can affect the background is to go (about line 800) to the

Code:

 * Cinnamon Specific Section

 * ###################################################################*/

/* ===================================================================

 * Menu (menu.js)

By default, there is no way to alter the Menu background in that section, but you can do it by adding this:
(again, heavily edited)

Code:

.menu-background {

    border: inset 1px solid rgba(195,216,255,0.5);

    background-gradient-direction: vertical;

    background-gradient-start: rgba(170,200,255,0.6);

    background-gradient-end: rgba(219,231,255,0.6);

    box-shadow: 1px 1px 1px 1px rgba(195,216,255,0.0);

    border-radius: 8px;

    border-radius-bottomright: 0px;

    border-radius-bottomleft: 0px;

    background-bumpmap: url("/usr/share/cinnamon/bumpmaps/frost.png");

}

This is what that looks like > http://i.imgur.com/HUaeR3T.jpg
You can use that - which I intentionally made transparent.
To make it less transparent, get rid of the "background-bumpmap" line, and delete the transparency numbers (0.5, 0.6, etc), and plug in the colors you want.

EDIT: After making changes, save them, then right-click on the Panel > Troubleshoot > Restart Cinnamon - to see the changes.

Well, if those are your designed menus, my hat's off! Quite artistic!

My .popup-menu has only:

Code:

.popup-menu {

        color: #111;

        min-width: 85px;

}

Not really sure where that shows or what color #111 is. I only use rgb myself and have only ever seen 6 digit #colors. is #111 the same as #010111? (Don't bother answering, not important).

I did modify my transparency value in your 2nd suggestion to:

Code:

.menu-background {

  :

  :

        background-gradient-start: rgba(1,1,1,0.9);

        background-gradient-end: rgba(1,1,1,0.9);

  :

  :

}

That did the trick! Thanks again. It would be nice if there were some blog or post out there correlating screen elements with these CCS definitions. I've looked.

Quote:

Originally Posted by mfoley (Post 5494359)

Well, if those are your designed menus, my hat's off! Quite artistic!

Thank you. They are mine.
The one with the raindrops I called "Rainy Day Blues" (at gnome-look.org)