A Gnome shell extension to change the top panel look

Notice: this is NOT the best way to achieve this. I have posted a much better way…

This is my first Gnome Shell extension… so that will not be a coding style gem, but it works for me and I think it’s quite useful, so…

The idea is to change the look of the top panel in Gnome Shell. The problem, with a netbook like my Asus EeePC, is that the font used is way too big, and (especially if you enable the classic tray) you get out of space for indicators icons very fast. In the image, you can see “after” and “before” my top panel bar.

So I made a bit of research and found not so much info on writing extensions, with a notable exception: the Finnbar P. Murphy blog, especially here and here.

I will explain here how to make that extension — this post will be not a step by step instruction, you need a bit of “hands on” to follow it. I hope to learn how to package it and made it available in simple terms.

The good thing is this is a general method to modify the “css” (style sheets) of the current theme, and has a lot of application more than changing the font size. Let’s go.

First of all you need the extension. I used gnome-shell-extension-tool to start, working around the known bug it has now. What you have in the end is a directory in your ~/.local/share/gnome-shell/extensions directory named ChangeTopFont@romano.rgtti.com with three files — extension.js, metadata.json, and stylesheet.css. You can download all of them from the archive at the end of this post.

The most important part is the extension.js code, which I have shamelessly copied from the aforementioned blog (this is my first JavaScript code ever!). It uses the file stylesheet.css to “patch” the style of the top panel (and you can use to modify whatever you want in the theme you have chosen: simply look at the /usr/share/gnome-shell/theme/gnome-shell.css file for hints.

I have concocted the extension so that you can modify the stylesheet.css file and see the changes by simply disable/enable the extension in gnome-tweak-tool, without any need to restart the shell.

NEWS: thanks to cbowman57 I have uploaded a second version of the extension, which  sports a better stylesheet. Thanks!

A last word: you have to enable the extension by add its UUID (the full name, in this case ChangeTopFont@romano.rgtti.com, to the org.gnome.shell “enabled-extensions” key (you can use dconf-editor for this).

extension.js code:

//
// Edited by Romano Giannetti <romano@rgtti.com>
// Copyright (c) 2011 Romano Giannetti
// 
// Original code by: http://blog.fpmurphy.com/2011/06/patching-a-gnome-shell-theme.html
//
// Copyright (c) 2011 Finnbarr P. Murphy
//

const St = imports.gi.St;
const Shell = imports.gi.Shell;
const Main = imports.ui.main;

let  defaultStylesheet, patchStylesheet;

function init(extensionMeta) {

    defaultStylesheet = Main._defaultCssStylesheet;
    patchStylesheet = extensionMeta.path + '/stylesheet.css';
}

function enable() {

    let themeContext = St.ThemeContext.get_for_stage(global.stage);
    let theme = new St.Theme ({ application_stylesheet: patchStylesheet,
                                theme_stylesheet: defaultStylesheet });
    try {
        themeContext.set_theme(theme);
    } catch (e) {
        global.logError('Stylesheet parse error: ' + e);
    }

}

function disable() {

 let themeContext = St.ThemeContext.get_for_stage(global.stage);
    let theme = new St.Theme ({ theme_stylesheet: defaultStylesheet });
    try {
        themeContext.set_theme(theme);
    } catch (e) {
        global.logError('Stylesheet parse error: ' + e);
    }
}

stylesheet.css code: (play with this!)

#panel {
    color: #ffffff;
    font-family: MintSpirit, ubuntu, cantarell;
    font-size: .80em;
    font-weight: normal;
    height: 1.55em;
}

.panel-button {
    -natural-hpadding: 4px;
    -minimum-hpadding: 4px;
    font-family: MintSpirit, ubuntu, cantarrell;
    font-weight: bold;
    color: #ccc;
    transition-duration: 100;
}
.panel-button:hover {
    color: white;
    font-weight: bold;

}

Files to download: (at your risk!)