You Got A Question? Ask    GNOME Community!


Create a GNOME Shell Theme with Less Stylesheets

This post was made with an older stylesheet

There are plenty of frameworks that extend CSS and construct robust, clean, structured stylesheets by removing the chaos that CSS brings. I am using two of them, Less and SASS (Sccs) which are probably and the most popular dynamic CSS languages.

Less is the Node and Twitter (Bootstrap) way and is processed either on client (web-browser) or at server (with Node). SASS is the Ruby way and is compiled only in server side. Both frameworks are offering the same things as Nested Rules, Mixins, Variables,  Selection Inheritance, Functions and more.  The syntax is a bit different but people won’t find it hard to write in both languages at the same time.

You can check more at:

While I am mostly using SASS in this post I will show Less which I like it more anyway.


Why Less?

Why to use Less CSS for creating Shell Themes?

  • Because Less is More
  • Because Shell Theme is 2.500 lines of CSS mess
  • Because is faster, easier, funnier
  • Because this is the right way to write stylesheets

*Notice that I don’t really know what CSS Shell is using for Theming, but it looks like a Sub/Super Set of CSS3 (If anyone has more info, please leave a comment). Some CSS3 features don’t work in Shell, when some Shell peudoclasses don’t exists in CSS3. I am saying because Less Compiler might produce some unsupported CSS -which I don’t think so anyway.


GNOME Shell Theming

GNOME doesn’t support GNOME Shell Theming. Therefore you will need the User-Themes Extension and Tweak Tool to use or create new themes. User Theme Extension is made by Giovanni Campagna who is a core Shell Developer, so is okay to use that extension.

If you don’t already know how to Theme GNOME you can check out on this guide, which is little bit obsolete in some things, and I need to revisit it at some point.


Node JS

Because we can’t use Less files directly we need to compile them into CSS. There are many compilers we can use, but I think the easiest way is to intall Less with Node’s NPM. It is very important to make an isolated installation for Node and JavaScript Packages, but I am not going to cover this how to.

You can check at:

A system wide installation (not recommended!) will be kinda like

Install Node and NPM (@your-upgrade-tool: yum || apt-get || whatever else)

$ sudo @your-upgrade-tool install node

Install Less Compiler

$ npm install -g less

Compile a Less file to CSS (ie gnome-shell.less)

$ lessc gnome-shell.less gnome-shell.css

Overriding Shell Theme

I am not a GNOME Shell Theme developer, I don’t know how to write a GNOME Shell Theme, so the last thing I want to do, is to fork (copy) the 2.500 lines of Shell Adwaita Theme and creating a new Theme over it.

Instead I am going to override the default Theme and I will just change some thinks that I don’t like –actually I will make it worse as you can see ;)

gnome-shell-less

On the left the default theme, on the right the theme I made with Less

 I will override the default theme and I will named it “myShell”. To create a new theme just create this structure.

~/.themes/
~/.themes/myShell/
~/.themes/myShell/gnome-shell
~/.themes/myShell/gnome-shell/gnome-shell.css
~/.themes/myShell/gnome-shell/gnome-shell.less

Edit the gnome-shell.css and add this line

@import url("/usr/share/gnome-shell/theme/gnome-shell.css");

This basically loads all the CSS from the default Theme.

Open Tweak Tool and apply the myShell at GNOME Shell Themes. Now you have an identical to default theme.


Write some Less

Launch a text editor and open:

The default CSS that we need to copy the classes that will override

/usr/share/gnome-shell/theme/gnome-shell.css

Our custom CSS theme file

~/.themes/myShell/gnome-shell.css

And the less theme that we will compile into CCS later on

~/.themes/myShell/gnome-shell.less

sublime

This is Sublime Text 3 editor, is not Open Source, it costs $70 for a single license and I am just using it cause currently Eclipse throws me a Java Exception. Anyway those are my three files.


GNOME Shell CSS

This is my gnome-shell.css and I just want to override just two classes

@import url("/usr/share/gnome-shell/theme/gnome-shell.css");

.popup-menu {
    min-width: 200px;
}

.popup-menu-item:active {
    background-color: #4c4c4c;
}

.popup-menu to change the default min-width

.popup-menu-item-active:active to change the background color on Shell Menus on mouse hover.


GNOME Shell Less

And this is my gnome-shell.less file which I am going to convert into css to be able to use it.

/** Set a min width variable**/
@minWidth:200px;

/**Create a grey color by mixing white with black
with 50% of both **/
@grey: mix(#fff, #000, 50%);

/** Set the min width * 2. That means 400px **/
.popup-menu {
    min-width: (@minWidth * 2);
}

/** Giving a grey color to my popup menu **/
.popup-menu-item {
    background-color: @grey;
}

/** Make hover background a bit lighter from the popupmenu
so I can recognize it on hover **/
.popup-menu-item:active {
    background-color: (@grey + #111);
}

While this example illustrates some functionality of Less, doesn’t demonstrates inheritance which is actually the strongest point of Less. You can create really robust and easy to maintain stylesheets.

Then I will compile that file to CCS

$ lessc gnome-shell.less gnome-shell.css

And it will output

.popup-menu {
  min-width: 400px;
}
.popup-menu-item {
  background-color: #808080;
}
.popup-menu-item:active {
  background-color: #919191;
}

Which is what looks on the previous figure and I can now use it on Shell. A useful tip is when you do some changes in Shell Themes you can apply them by just restarting Theme.

Alt+F2 <r> //Will restart the Shell
Alt+F2 <rt>  //Will restart just Shell Theme

That was all :)


 
  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://funsurf-blog.blogspot.com/ Satyajit Sahoo

    WOW!

  • bimsebasse

    Wonder if this makes it easier or harder to update a theme.

    • alex285

      I am wondering if is possible to make a Shell Theme completely with less. If you can, yes it will be easier to maintain a theme. If you have to mix css and less, I doubt.

    • airtonix

      Well, for a start you can work on modularised mixins then use the processor to compile a single css file.

      Sass allows you to import a plain.css in your sass files which then gets included in the compiled output. I’m not sure what LessCSS does and I couldn’t care since it’s about as useful to me as windows xp.

  • airtonix

    To be brutually honest, you should be using Sass instead of LessCSS. Far more features and a whole lot more stable than LessCSS.

    Also to say that Sass is the Ruby way simply because it’s created in Ruby is disingenuous. I use Sass in all my Django projects and never have I had to touch or know anything about Ruby to operate sass. Which is good because I like Ruby about as much as I like LessCSS or Bootstrap, which is not a lot for those who can’t sense my elitist tone.

    • alex285

      I was totally ignoring that you Django could parse by default Sass. But I like the fact that Less can be compiled in Browser, because sometimes you just build HTML Templates, so is very handy.

      In any case you are definitely right, in this example Sass fits more. I guess I talked about Less because is more popular (I think) and easier to compile with Node.

      • airtonix

        I should probably clarify why I mentioned Django, which is that while Sass is ruby, that’s the last interaction with any ruby code me or my django projects have. I simply use the client side file watcher in development.

        It has nothing to do with asset pipelining (the client side rendering example you give), which I personally believe is just going to introduce more problems.

        My philosophy is that if i have a thing (sass & css) which I can prevent from creating fatal errors in production, then why not do so? It just seems so obvious to me that any errors would be so much more trivial and impact customers far less if I take care of it in local development.

        The moment I decide to dynamically create css from sass or less on the server while in production, I am effectively saying “I no longer want personal free time”, because essentially when a problem occurs in that rendering pipeline you will wish you pre-rendered this stuff.
        Trust me, I’ve painfully experimented with server side LessCSS and Sass asset pipelines. It’s not worth it.

        #first tab

        mkdir -p ~/Dev/new-website
        cd ~/Dev/new-website
        mkvirtualenv new-website
        workon new-website
        gem install compass zurb-foundation
        cd ~/Dev/new-website/project/base
        compass create static
        django-admin new-project project
        mkdir -p ~/Dev/new-website/project/base/
        # massage my settings file
        ./project/manage.py runserver 0:8000

        # second tab

        cd ~/Dev/new-website/project/base/static
        compass watch

  • etnbrd

    I started a shell theme with your idea : using Less to ease the development.
    https://github.com/etnbrd/Ink

    I’ve been inspired by the theme Holo from tiheum I worked on last year, but it’s obsolete now.
    https://github.com/gravitezero/Holo