Change your N9 desktop background vol. 2

Hi!

A few weeks ago kuzmichov posted instructions to talk.maemo.org on how to change the background of your N9’s home screen.

Kuzmichov’s instructions change the backround of the component behind all the swipable home screens. Today we’ll be changing the backgrounds of the 3 individual screens.

For that, we need to edit a different .css file,
/usr/share/themes/base/meegotouch/meegotouchhome/style/meegotouchhome.css

We want to add a background-image tag into three CSS blocks: SwipeEventsStyle, SwipeLauncherStyle and SwipeSwithcerStyle.

Naturally, we’ll need three images as well, let’s name them like this:

background-image-launcher.png
background-image-events.png
background-image-switcher.png

Copy these images into /usr/share/themes/blanco/meegotouch/images/backgrounds/

The code in the CSS blocks of meegotouchhome.css will become like this:

SwipeEventsStyle {
… code …
background-image: background-image-events
}

SwipeLauncherStyle {
… code …
background-image: background-image-launcher
}

SwipeSwitcherStyle {
… code …
background-image: background-image-switcher
}

In addition to that, comment out/remove the background-color tag from NotificationAreaStyle, so the notification area background will become transparent. The messages themselves will still have a semi-transparent background color (most likely there’s a tag for that too but don’t know where).

Reboot, and you should have three nice background images!

You can download the modified meegotouchhome.css from here.

For some reason, when swiping between the events feed and app grid, there’s a 1 pixel wide column
between the backgrounds. Most likely there’s not much that can be done for that, but it’s a minor glitch anyway : )

Here’s an example of my home screens:

Have fun!