Wingpanel

Wingpanel Style

Asked by Heath Paddock

Where does wingpanel get its style information from? I tried editing values in /usr/share/wingpanel/style/default.css but to no avail.

Question information

Language:
English Edit question
Status:
Solved
For:
Wingpanel Edit question
Assignee:
No assignee Edit question
Solved by:
jesusiniesta
Solved:
Last query:
Last reply:
Revision history for this message
Best jesusiniesta (jesus-iniesta) said : 		#1

You can customize it to some extent (color, transparency, paddings) editing /usr/share/themes/elementary/gtk-3.0/panel.css

I'm kind of disappointed with its current level of customization. I expected to be able to change a lot of things through css and such. It's the cutest distro I've ever seen, but there are still a couple of details I dislike.

Revision history for this message
Heath Paddock (heathbar) said : 		#2

Thanks jesusiniesta, that solved my question.

Revision history for this message
Michael Lazarski (michael.lazarski) said : 		#3

 /usr/share/themes/elementary/gtk-3.0/panel.css
i don't got that file :/

Revision history for this message
Jens Bremmekamp (nem75) said : 		#4

In the current version, try /usr/share/themes/elementary/gtk-3.0/apps.css

Changing the values in the /* Panel */ section did the trick for me.

Currently I use

/*********
 * Panel *
 ********/

.panel {
    /* background-color: alpha (#000, 0.7); */
    background-color: alpha (#ddd, 1.0);
    /* color: #fff; */
    color: #000;
    font-weight: bold;
}

.panel-shadow {
    background-color: @transparent;
    background-image: -gtk-gradient (linear,
                     left top, left bottom,
                     from (alpha (#000, 0.3)),
                     to (alpha (#000, 0.0)));
}

.panel-app-button {
    -GtkMenuItem-horizontal-padding: 6px;
}

.composited-indicator {
    background-color: @transparent;
    /* color: #000; */
    padding: 0 2px;
}

.composited-indicator.menuitem:active,
.composited-indicator.menuitem:prelight {
    border-style: none;
    -unico-inner-stroke-width: 0;
    background-image: none;
}

Now I just need dark indicator items...

Revision history for this message
Jens Bremmekamp (nem75) said : 		#5

Correction:

.composited-indicator {
    background-color: @transparent;
    /* color: #fff; */
    color: #444;
    padding: 0 2px;
}

To see effects wingpanel e.g. with

killall wingpanel
wingpanel &