This how-to isn’t trying to teach you how to make a complete Gnome Shell theme but it will help you to make some cool tricks in minutes. To be honest I did it in some minutes and the final stuff was something very ugly. I guess you have to spend some more time with Gimp to achieve a better result than me ;)
The post is called Marvel-ize your Gnome Shell Theme, so lets create some Marvel Superheroes first..
Draw Your Super Heroes!
I used Marvel’s “Create Your Own Superhero” game to make Tes that I used on Shell theme. The options for creating a character are endless and you can spend some hours on it, but I spent some seconds ;)
Create a new theme
Lets create a new GS theme. Just copy the Adwaita default theme
and then select it with Tweak Tool. You have to see the new theme under the name “Marvel-Adwaita”.
Replace Activities with images
Open the gnome-shell.css file and around line 331 add
background-position: 15px 3px;
I make activities text invisible with color: rgba(0,0,0,0.0);
I add an image background-image: url(“superactivities.png”);
and I position it 15px from left and 4px from top: background-position: 15px 4px;
Width and height is obvious :) My image is 55×25 so you have to experiment a bit if you have different sizes.
I also adjust the height of the panel a bit from 1.86em to 1.88em to fit my image
And this is the result, a stupid Superman image instead of Activities word. But we are not done yet. Lets set some actions for hover and active states.
This is enabled by hover. I keep the same image here but you can have a second one with some lightning effect maybe.
When overview is active I used a bigger image because it doesn’t bother to anything. Border image removes the bottom white border.
And this is it! Not very nice but ..is a tutorial after all :)
That removes the corner white bottom border.
Change the overview background
This is way to easy and useful! Just add a background image on #overview element. The image has to have the same dimensions as your screen resolution.
Another Wallpaper for desktop, another wallpaper for overview. Also I can make different wallpapers for each workspaces but I’ll make this on another how to.
Change Controls, Change everything
You can change everything here but you have to try on your own, For example you can change the closing controls in overview:
Ok, Wolverine image for closing button sucks, but you can put anything!
It is time to use the image I made on Marvel, and I’ll use it as Popup Menus background:
padding: 1em 0em;
background-position: 0px 0px;
Another awful result! I didn’t clear the image right, but anyway you might have better skills on Gimp. Also my Superwoman makes reading the menus hard, but we can easily fix that by changing the opacity of the image.
I overdid it with opacity but anyway!
Ok, the overall result sucks, but this is because I didn’t use the right images. Changing the overview background and Activities logo is something useful but.. you can pretty much change everything, the dash, the boxes.. anything.
I don’t know what engine Gnome uses to render the CSS but it seems that it cannot draw some complicated CSS gradients and other stuff. However you can use the @import keyword and import extra css files in your main and have some tidy files. For example in your gnome-shell.css you can add:
and create an overview.css file and put all overview code there. Very handy!
Also when you make some changes you need to restart theme for these to take effect by:
When you change images some times it stacks so you need to restart the whole shell by:
Gnome Shell And CSS
There was no reason for Gnome to choose the standard CSS for theming as it is one of the worst technologies on Web. There are some robust CSS engines (like Stylus and others) that enable rapid CSS OO development and already are well established on enterprise development; I just hope Gnome to move there.
Also, the wallpapers I used in case you like them in 1680×1050 resolution: