Xfce Forum

skar

Member

Registered: 2014-07-05

Posts: 1

panel color messing up

Hi!

I installed one of the MediterraneanLightDarkest theme on my xubuntu 14.04. The trouble is on some of the panel items, like wifi, buetooth and mail indicator. Their color is different from the rest. This is kind of annoying and I wanted a change.

skar

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,494

Re: panel color messing up

Here is an existing bug report for this issue: https://bugs.launchpad.net/gtk-theme-co … ug/1313011. However, I notice that the Greybird theme has this issue already solved. I did some digging and found that the file in the Greybird theme that fixes this is gtk-3.0/apps/xfce.css.

I fiddled a little with this and got pretty close. Here is what I did:

1. In the Panel Preferences dialog on the Appearance tab, change "Style" to "Background Color" and change the "Color" to "#EAEAEA" (this colour is specific to the MediterraneanLightDarkest theme). This will match the background of the indicator applet with the theme background color. Then, if you want, adjust the "Alpha" value to your liking.

2. Create the file: MediterraneanLightDarkest/gtk-3.0/apps/xfce.css with the following content (borrowed from the Greybird theme):

CatfishWindow .pane-separator {
    background-color: mix(shade(@theme_base_color, 0.9), shade(@theme_selected_bg_color, 1.35), 0.1);
}

XfceHeading,
.XfceHeading {
    margin: 0;
    padding: 0;
    border-width: 0;
    background-image: none;
    background-color: shade(@theme_bg_color, 1.18);
    color: @theme_text_color;
    text-shadow: 0px 1px alpha(@dark_shadow, 0.15);
}

.xfce4-panel {
    background-color: shade(@panel_bg_color, 0.15);
    color: @panel_fg_color;
    font: normal;
}

.xfce4-panel .button {
    border-radius: 0;
    padding: 0 1px;
    color: @panel_fg_color;
    text-shadow: 0px 1px alpha(@dark_shadow, 1.0);
}

.xfce4-panel .button:active {
    background-image: none;
    background-color: shade(@panel_bg_color, 0.7);
    border-color: shade(@panel_bg_color, 0.6);
    color: @panel_fg_color;
    transition: none;
}

.xfce4-panel .button:hover,
.xfce4-panel .button:active:hover {
    border-color: shade(@selected_bg_color, 0.1);
    background-image: linear-gradient(to bottom,
                                      shade(@selected_bg_color, 0.42),
                                      shade(@selected_bg_color, 0.28)
                                      );

    color: @panel_fg_color;

    box-shadow: inset 0 -1px alpha(white, 0.0),
                inset 1px 0 alpha(white, 0.15),
                inset -1px 0 alpha(white, 0.15),
                inset 0 1px alpha(white, 0.15);

    transition: none;
}

.xfce4-panel .menu {
    -gtk-image-effect: none;

    text-shadow: none;
}

...note that this is my edited content to try to get the colours close - they need some more tweaking.

3. Add the following to the end of MediterraneanLightDarkest/gtk-3.0/gtk.css:

@import url("apps/xfce.css");

4. Fiddle with the values in the xfce.css file to try to get the colours right.

Note that for any changes that you make to take effect, you need to change away from and back to this theme from within the Appearance dialog.

---

Please remember to mark your thread [SOLVED] to make it easier for others to find
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---