Home / ubuntu / Questions / 1250079
Accepted
raj
Asked: 2020-06-14 15:27:35 +0800 CST

Ubuntu 20.04 Radiance theme - menu separators not showing

  • 772

After I installed the Radiance theme in Ubuntu 20.04 and set the system to use it, there are no horizontal menu separators in the menus. I noticed it in Firefox, because the separators I created between bookmarks didn't show up in the bookmarks menu (although they are correctly visible in Show All Bookmarks window), but the same is happening for other menus, eg. menus dropping from top GNOME panel (I use GNOME Flashback).

When switching to some of the default system themes, like Yaru or Adwaita, the separators are visible. What should I change in theme's CSS files to bring the separators back?

themes menu gnome-flashback 20.04

2 Answers

  1. Best Answer

    Found a solution :) I noted that Ambiance theme has these separators, while Radiance theme doesn't. By comparing the gtk-3.20/gtk-widgets.css files in both themes I found that it's enough to comment out the line border:none in the following fragment to get the separators back:

    menu separator {
    margin-left: 5px;
    margin-right: 5px;
    border: none;
    color: @dark_bg_color;
}

    However, the separators have a very light colour and are hardly visible, so additionally I made them a bit darker by changing 0.99 to 0.8 in the next fragment:

    menu separator {
    border-color: shade (@dark_bg_color, 0.99);
    border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
    border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
}

    That basically solves the issue.

    • 1

  2. I came to your answer while trying to troubleshoot a GTK3 project. I had to set the background color of the menu separator as well:

    menu separator {
    margin-left: 5px;
    margin-right: 5px;
    color: black;
    background-color: black;
}
    • 0