linux - GTK+ 3 Menu configuration for Emacs

I don't like the GTK based emacs (Screenshot #1) and still prefer the tradition emacs (Screenshot #2), which I get from Ubuntu PPA.

The fundamental difference is that the tradition emacs looks mostly like text based, except the menu, which is still GTK based. This menu font and size is what I want to change.

Basically, I need to do the same thing as Ref #1: "The exception is the font size in the pop-up [drop-down] menus from the main menu bar. For example, if I start Emacs and left-click on "File" in the main menu bar, the pop-up menu for the File functions (Open File, Open Directory, etc.) comes up. However, the font size in this menu is extremely small and difficult to read. None of the options in the Faces customization group seems to affect it."

I learned from Ref #1 that "the menu fonts are controlled by GTK, outside of emacs". However following Ref #2, I got the same result. I.e., no matter how I tweaked the ~/.emacs.d/gtkrc from the references given in the message, there is no effect to the Emacs menu.

Then I found out from Ref #3 that what I was doing is tweaking the Emacs-specific GTK+ resources for GTK+ version 2, while my Emacs, Emacs 24 from Ubuntu PPA, is using GTK+ version 3.

OK, now here comes my question, how to configure GTK+ 3 Menu font and size? I searched everywhere, but perhaps the GTK+ 3 configure is so new (or convoluted) that nobody blog/talk about it.

Anyone can give me a working example how to configure GTK+ 3 Menu font and size please?

Thanks

Ref #1: http://forums.gentoo.org/viewtopic-t-516665-view-next.html?sid=b8448a7a0c04d2f6d6c80cbd43bfd931

Ref #2: http://lists.debian.org/debian-user/2013/05/msg00169.html

Ref #3: http://www.gnu.org/software/emacs/manual/html_node/emacs/GTK-resources.html#GTK-resources

Screenshot #1:

Screenshot #2:

Answer

Assumption: In your home directory you have a subdir .themes. Within this subdirectory, let's say you have recursively copied a theme from /usr/share/themes, for perusal and customization. Let's call that theme, or rather its directory, ~/.themes/mytheme. (Note: pay close attention to and, if necessary, modify the contents of file ~/.themes/mytheme/index.theme).

Within that directory ~/.themes/mytheme you have another subdirectory ~/.themes/mytheme/gtk-3.0. There's a file in there called gtk.css. This file can be large, or it can be small. In the latter case it usually has a number of "@import url" statements, importing other CSS files (stylesheets) from elsewhere, e.g., like so:

@import url("/home/WHOAMI/.config/gtk-3.0/apps/someother.css");
@import url("./another.css");

(substitute your own account name for WHOAMI)

Your emacs stylesheet (sample coming up) for this example will be called -- you guessed it -- emacs.css, and we need to add it to gtk.css, just like the other imports. Let's say:

@import url("/home/WHOAMI/.themes/gtk-3.0/emacs.css");

Before handing you my copy, a couple of notes:

1. 
   

   Gtk3 styling: contrary to what you might expect (I certainly did), the application-specific stylesheets that might be available in a theme (like the aforementioned emacs.css and possibly others in the gtk-3.0 subdirectory or any nested subdirectories there like apps), these app-specific stylesheets are NOT limited to that respective application only! As it appears, Gtk3 just parses all stylesheets happily within the same namespace (I'm just just making up the latter term here, but it seems appropriate)..

   
   

   What that means is that, for instance, when you're styling a menu in your stylesheet, and call the CSS-selector e.g., 'GtkMenu', you are in effect styling ALL instances of GtkMenu in ALL applications. That may or may not be what you had in mind, but in my case I found it very counterproductive and very annoying, when I'm working in a stylesheet that I've named emacs.css for a reason -- namely to limit its applicability to emacs. So be warned, that latter assumption is INVALID.

   
   


2. 
   

   Another note (partly a consequence of a): even though the css now seems small, styling emacs Gtk3 was hard (I'll grant you that I'm a relative css newbie, but still). I think emacs + Gtk3 needs to have a slightly better CSS profile, because having an element only identifiable by '#pane' is somewhat too general, And the fact that you can almost NOT theme the scrollbar is a bug in my opinion. I've been using emacs for well over 20 years and I like to style the latest emacs-24.3 with Gtk3 exactly like I had earlier emacsen with Gtk2. Having the consistence of a desktop theme is nice in most respects, but not in this particular case: I spend a lot of time within emacs, and it needs to be molded to what my eyes like and are accustomed to (so take note emacs developers!)

   
   


3. 
   

   And a third note: again in turn resulting from b): this stylesheet seems delicate! I've a feeling that removing one selector and the whole thing breaks apart.

   
   


4. 
   

   When you start hacking on a stylesheet, do not start the application from a launcher. Start it from the terminal command-line, so any feedback that Gtk3 might give on styling/parsing errors are there right in front of your face. And, you MUST HAVE absolutely NO other instances of the same application open anywhere. If you do, Gtk apparently caches styling data, and a new instance will just use the cached data and leave you wondering why that edit that should finally make it work in fact is a no go. So with each styling modification: power cycle: exit emacs, fire it up again from the CLI.

   
   

So with that, here it is, my emacs.css:

/*
    see:

    http://developer.gnome.org/gtk3/3.4/GtkCssProvider.html
    http://www.gnu.org/software/emacs/manual/html_node/emacs/GTK-resources.html
    http://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/
    http://www.gtkforums.com/viewtopic.php?f=3&t=988&p=72088=GTK3+with+CSS#p72088
*/

/*----------------------------------------------------------------*/
/*
General notes:
- try to make selectors as long as possible, so as not to interfere
  with the controls of other applications; this can be achieved only partly
  (e.g., #pane is a very general selector)
-

TODO:
- checkmarks in menus are black instead of white
- the 'exit emacs' popup dialog somehow gets the wrong resize grip
*/
/*----------------------------------------------------------------*/
/* this works */
#xxxpane
{
    background-color: alpha( @theme_selected_bg_color, 0.8 );
    color: purple;
}

#xxxframe                   /* works, but touches other applications */
                            /* (and we don't need it) )*/
{
    background-color: #708090;
    border-radius: 3px;
    font-size: 12pt;
    color: red;
}

/*----------------------------------------------------------------*/
#pane #verticalScrollBar
{
    /* the vertical scrollbar in emacs has a bug where it sometimes covers the fringe */
    border: 2px solid #292929;                  /* works ! */
    padding: 1px 10px;                          /* second value has enormous effect oddly in vertical dimension! */
    margin: 1px 10px;                           /* second value has enormous effect oddly in vertical dimension! */
    /*border-radius: 2px;*/                     /* works */
    /*
    GtkScrollbar:
    "fixed-slider-length"               gboolean
    "has-backward-stepper"              gboolean
    "has-forward-stepper"               gboolean
    "has-secondary-backward-stepper"    gboolean
    "has-secondary-forward-stepper"     gboolean
    "min-slider-length"                 gint
    */
    /*-GtkScrollbar-fixed-slider-length: 1;*/
    -GtkScrollbar-min-slider-length: 25;
    -GtkScrollbar-has-backward-stepper: 0;
    -GtkScrollbar-has-forward-stepper: 0;
    /*
    GtkRange:
    "activate-slider"          gboolean
    "arrow-displacement-x"     gint
    "arrow-displacement-y"     gint
    "arrow-scaling"            gfloat
    "slider-width"             gint
    "stepper-position-details" gboolean
    "stepper-size"             gint
    "stepper-spacing"          gint
    "trough-border"            gint
    "trough-side-details"      gboolean
    "trough-under-steppers"    gboolean
    */
    /*-GtkRange-activate-slider: 1;*/
    -GtkRange-slider-width: 4;                  /* works */
    -GtkRange-trough-border: 0;                 /* works */ /* with a large width it reveals a bug in emacs and/or gtk3 */
    -GtkRange-trough-side-details: 0;
    -GtkRange-trough-under-steppers: 0;
}

/*----------------------------------------------------------------*/
/* the toolbar is almost never visible */
#emacs-toolbar,
#emacs-toolbar *
{
    background-color: #536B84;
    color: white;
    padding: 0px 6px;
    border: 1px solid white;
}

/*----------------------------------------------------------------*/
/* objective: get menu pulldown menu's to have thin and rounded borders */

#pane #menubar GtkMenuShell
{
    border: 1px solid #78BAD4;  /* light blue */
    border-radius: 5px;
}

/* also give the menus a slightly larger font */
#pane #menubar,
#pane #menubar GtkMenuShell,
#pane #menubar GtkMenuShell *
{
    font-family: "Ubuntu Sans Mono";
    font-size: 7px;
}

/*----------------------------------------------------------------*/
#pane #menubar              /* works */
{
    background-color: #536B84;
    border: none;
    padding: 0px 0px;
    margin: 25px;
}

/* top menu item */
/* this works, but it needs a parent Emacs class specifier */
#pane #menubar > GtkLabel,
#pane #menubar > GtkMenuItem
{
    padding: 2px 18px;  /* works */
    margin: 3px 0px;    /* works */
    color: aquamarine;  /* works */
}

/*----------------------------------------------------------------*/
/* disabled ("greyed out") menu items */
/* note: #emacs-menuitem:insensitive only does one level deep; test on Edit > GoTo > ... */
#emacs-menuitem *:insensitive
{
    color: #292929;                         /* works */
    text-shadow: none;                      /* works */
}

#emacs-menuitem * :hover,
#xxxxemacs-menuitem * :active
{
    background-color: transparent;          /* FINALLY WORKS! */
    color: white;                           /* works */
}

#emacs-menuitem *,                          /* works */
#emacs-menuitem > GtkLabel                  /* works */
{
    background-color: #536B84;
    color: white                            /* works (also for tear lines!) */
}

#emacs-menuitem                             /* with only this it ALMOST works beautifully; only the tear lines are still white */
{
    background-color: #536B84;
    color: #292929;                         /* works -- this affects only the separators */
    border: 0px none;
    /*padding: auto auto;*/
    /*margin: 0px 0px 0px 0px;*/
    /*margin: auto auto auto auto;*/
}

/*----------------------------------------------------------------*/
/* popup dialog */
#emacs-dialog
{
    background-color: #536B84;
    color: white;
    border: 0px none;
}

/*----------------------------------------------------------------*/

Seems like a wimp? Well there's many hours of styling and trial and error in there (I hate CSS, it's not a real language, has no discoverability).

Try it and see how you might fare in adapting and customizing it. If you derive any insights or tips or discover shortcomings or bugs or other theming possibilities, please give feedback. I'm certain it's incomplete and imperfect (for one thing, I couldn't get the bottom corners of the pulldown menus rounded).

Good luck!