Modify Indicator Appearence

Question

I've found a theme that I really like (Flatstudio for anyone interested), but there is only one minor thing that works not as expected:

if you look at the screenshot at the indicator-messaging menu, it looks really great (icons are from the Numix icon-theme) but the "bulletpoint" which indicates the online-status has the same color as the menu background color, and is therefore invisible...

I do not want to change the color of the menu, but the color of the bulletpoint which is possible, because other themes have different colors. I already installed gnome-color-chooser but I can't find the option to change this specific color.

I'm willing to change the line in the corresponding .css file myself, but I need to now how the corresponding variable is called.

Can anyone help?

Edit: I discovered that also the checkmarks in the battery indicator and bluetooth indicator etc. are invisible, due to the same reason. Is it also possible to change the distance between the menu-icons and the text?

Answer 1

You have manipulate with theme css files.

Search for the "bullet" thing in css files and change them and see the result. Try to change @theme_selected_fg_color to white or any other color and see the difference.

Files that has to be changed are:

Flatstudio/gtk-3.0/menu.css Flatstudio/gtk-3.0/menu_frame.css

Inside menu.css :

Change This:

 .menuitem:hover,
.menu .menuitem:hover {
    /* contextual menu item-selected */
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_selected_bg_color, 1.0)),
                                     to   (shade (@theme_selected_bg_color, 1.0)));
    color: @theme_selected_fg_color;
    text-shadow: 0px 1px @theme_selected_shadow_color;
    -unico-bullet-color: @theme_selected_fg_color;
}

to this

.menuitem:hover,
.menu .menuitem:hover {
    /* contextual menu item-selected */
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_selected_bg_color, 1.0)),
                                     to   (shade (@theme_selected_bg_color, 1.0)));
    color: #ffffff;
    text-shadow: 0px 1px @theme_selected_shadow_color;
    -unico-bullet-color: #ffffff;
}

and change this:

.menuitem.check:active:hover,
.menuitem.radio:active:hover {
    border-width: 0px;
    border-style: none;
    background-image: none;
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
    -unico-bullet-color: @theme_selected_fg_color;
}

to this

  .menuitem.check:active:hover,
    .menuitem.radio:active:hover {
        border-width: 0px;
        border-style: none;
        background-image: none;
        background-color: @theme_selected_bg_color;
        color: #ffffff;
        -unico-bullet-color: #ffffff;
    }

Now go to the other file, menu_frame.css:

Change this:

.menuitem:hover,
.menu .menuitem:hover {
    /* contextual menu item-selected */
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_selected_bg_color, 1.0)),
                                     to   (shade (@theme_selected_bg_color, 1.0)));

    color: @theme_selected_fg_color;
    text-shadow: 0px 1px @theme_selected_shadow_color;
    -unico-bullet-color: @theme_selected_fg_color;
}

to this

.menuitem:hover,
.menu .menuitem:hover {
    /* contextual menu item-selected */
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_selected_bg_color, 1.0)),
                                     to   (shade (@theme_selected_bg_color, 1.0)));

    color: #ffffff;
    text-shadow: 0px 1px @theme_selected_shadow_color;
    -unico-bullet-color: #ffffff;
}

And Change this:

.toolbar .menuitem:hover,
Genericmenuitem .menuitem:hover,
DbusmenuGtkMenu .menuitem:hover,
.primary-toolbar .menuitem:hover, 
.menubar.menuitem:hover,
.menubar .menuitem:hover {
    /* dark menu item-selected */
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_selected_bg_color, 1.0)),
                                     to   (shade (@theme_selected_bg_color, 1.0)));

    color:@theme_selected_fg_color;
    text-shadow: 0px 1px @theme_selected_shadow_color;
    -unico-bullet-color: @theme_selected_fg_color;

    border-image: none;
}

to this

.toolbar .menuitem:hover,
Genericmenuitem .menuitem:hover,
DbusmenuGtkMenu .menuitem:hover,
.primary-toolbar .menuitem:hover, 
.menubar.menuitem:hover,
.menubar .menuitem:hover {
    /* dark menu item-selected */
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_selected_bg_color, 1.0)),
                                     to   (shade (@theme_selected_bg_color, 1.0)));

    color:#ffffff;
    text-shadow: 0px 1px @theme_selected_shadow_color;
    -unico-bullet-color: #ffffff;

    border-image: none;
}

At last change this:

.menuitem.check:active,
.menuitem.radio:active {
    border-width: 0px;
    border-style: none;
    background-image: none;
    background-color: @menu_bg_color;
    /* contextual menu check */
    color: @theme_selected_fg_color;
    -unico-bullet-color: @theme_selected_fg_color;
}

to this:

.menuitem.check:active,
.menuitem.radio:active {
    border-width: 0px;
    border-style: none;
    background-image: none;
    background-color: @menu_bg_color;
    /* contextual menu check */
    color: #ffffff;
    -unico-bullet-color: #ffffff;
}

I tested it and these are the results:

Before

After