You Got A Question? Ask    GNOME Community!

gtk-theme2
 14362   |  Oct 25
 10714   |  Aug 25
gtk_logo2
 9822   |  Mar 17
arch
 8925   |  Mar 28

Marvel-ize your Gnome Shell Theme!

This post was made with an older stylesheet

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

from: /usr/share/gnome-shell/theme/

to: ~/.themes/Marvel-Adwaita/gnome-shell/

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

#panelActivities {
border: none;
background-image: url(“superactivities.png”);
background-position: 15px 3px;
width: 70px;
height: 25px;
color: rgba(0,0,0,0.0);
}

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.

#panel {
background-color: black;
font-weight: bold;
height: 1.88em;
}

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.

 

#panelActivities:hover {
transition-duration: 100;
background-image: url(“superactivities.png”);
}

This is enabled by hover. I keep the same image here but you can have a second one with some lightning effect maybe.

#panelActivities:active,
#panelActivities:overview {
background-image: url(“superman-hover.png”);
border-image:none;
}

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 :)

.panel-corner:active,
.panel-corner:overview,
.panel-corner:focus {
/*-panel-corner-border-color: rgba(255,255,255,0.8);*/
}

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.

#overview {
spacing: 12px;
background-image: url(“marvel-bg.jpg”);
}

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:

.window-close {
background-image: url(“wolverine.png”);
background-size: 50px;
height: 50px;
width: 50px;
-shell-close-overlap: 20px;
}

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:

.popup-menu-content {
padding: 1em 0em;
background-image: url(“my_hero2.png”);
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.

Tips

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:
@import url(“overview.css”);
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:
Alt+F2 “rt”
When you change images some times it stacks so you need to restart the whole shell by:
Alt+F2 “r”

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:

    

That’s all, next time I’ll show you how you can easily modify the whole shell interface through its JavaScript core files, and make your very own custom Gnome-Shell!


 
  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community
  • http://profiles.google.com/misterpah misterpah pah

    can’t wait for the next post.. hacking gnome shell is within my to-do list =)

    ps : the 1 year old to-do list.. LOL

  • Arturo Buentello

    LOL

    Superman is from DC, not Marbel

    • alex285

      Dah, I should read more comics :)

    • http://www.facebook.com/john.karagiannis.96 John Karagiannis

      also there is not Marbel, its Marvel comics. Unless you are referring to another comic book firm i am unaware of.

  • Pingback: Links 30/7/2012: Wine 1.5.9, Warsow 1.0 Released | Techrights

  • http://varemenos.com/ Adonis K. (Varemenos)

    Shouldn’t there be a tool (like firebug) dedicated to CSS debugging and also another tool that would contain different gnome-shell styled elements for quicker debugging/styling and lastly an actual documentation. Immo if these 3 things were available now, the customization of gnome-shell would be 10 times higher in quality

    • gnome

      seems useful but it would confuse the gnomes… i mean the users :)

      • http://varemenos.com/ Adonis K. (Varemenos)

        well it would be a tool for developers, not users.
        Pretty much same concept as looking glass but with focus on CSS instead of javascript.

        • name

          cuz they have done so many great things for users and now it’s time to do something for the developers!?!?!?!?

          • http://varemenos.com/ Adonis K. (Varemenos)

            well by helping the developers they help the users