Ubuntu – Create Ubuntu theme with pure HTML/JS/CSS

12.10themes

I'm wondering if someone can point me in the right direction for creating an Ubuntu theme using pure HTML/CSS/JS. I'm hoping there is some existing back-end to GNOME3 or Unity I can simply install and create my theme as easily as I'd create a website.

P.S.: If there is no such way to create a theme or add to the default theme, then alternatively if you can, please give me some details about what systems/libraries I'd have to hook into or extend. I'm a C++ developer so I suppose if I really have to, I can make this possible. Hoping though that something already exists.

Thanks for your help!

Best Answer

You cannot do this. Most of the applications in Ubuntu are not HTML web apps embedded running on a common API, like say they would be on WebOS or the new FirefoxOS. However, GTK+ 3.x and Qt 4 and 5 do use a specialized CSS syntax for creating themes.

There is some documentation available in the GtkCssProvider API documentation. There is also some documentation for Qt in the Qt Style Scheets documentation.

However, even if you create some themes, it will not apply to all applications, and any application can still force its own style, if the author of it so chooses.

Related Solutions

Ubuntu – How to set the own (HTML) theme in LightDM

Caution: Do not try this if you are not completely comfortable booting without X to repair lightdm configuration.

The package lightdm-webkit-greeter is not included in the ubuntu repository yet. To build your own greeter with HTML, CSS and Javascript, you'll have to download and install the lightdm-webkit-greeter code from Launchpad (lp:lightdm-webkit-greeter). I also merged in the changes in lp:~elementaryart/lightdm-webkit-greeter/fixes-ubuntu-old

You'll then have to alter the Lightdm configuration to use the webkit greeter as opposed to unity (or whatever was default).

I believe there is a bug in the lightdm-webkit-greeter.conf file, where it refers to a webkit-theme called "default", that should be "webkit".

I currently use the webkit greeter to log in and can tell you that it is slow and unpolished at the moment.

Step by step:

(be prepared to fix the greeter configuration without a GUI if this fails)

bzr branch lp:lightdm-webkit-greeter
cd lightdm-webkit-greeter
bzr merge lp:~elementaryart/lightdm-webkit-greeter/fixes-ubuntu-old
./autogen.sh (you'll have to install some dependencies here - probably only libwebkit-dev)
make
sudo make install
gksudo gedit /etc/lightdm/lightdm.conf
Set greeter-session=lightdm-webkit-greeter (remember the old setting as a fallback if you can't log in with your new settings)
gksudo gedit /etc/lightdm/lightdm-webkit-greeter.conf
Set the webkit-theme=webkit

This should work to enable the default webkit login. Now you can edit the theme here:

gksudo gedit /usr/share/lightdm-webkit/themes/webkit/index.html

Edit: Another warning - you can seemingly lock yourself out of gnome if this does not work.

Ubuntu – Override css in a gnome shell extension with a shell theme

Given the CSS you provided, I was able to force the styling by using the important rule.

#dashtopanelScrollview .app-well-app:hover .overview-icon,
#dashtopanelScrollview .app-well-app:focus .overview-icon {
    background: red!important;
}

#dashtopanelScrollview .app-well-app:hover > :first-child,
#dashtopanelScrollview .app-well-app:focus > :first-child {
    background-color: red!important;
}

Best Answer

Related Solutions

Ubuntu – How to set the own (HTML) theme in LightDM

Ubuntu – Override css in a gnome shell extension with a shell theme

Related Question