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:
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.
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!)
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.
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!
Screenshot #2:
