How to create new Mint Themes

[MatNikel]

Hi guys

I'm a tecnician IT student and one of my aims is to develop new themes and extensions for Mint.

How can I begin in this area and share my creations in cinnamon spices?

Thanks

[sebastjava]

You can start with my Do-It-Yourself

WARNING: This repository is currently going through a major overhaul. So, this Do-It-Yourself could momentarily disappear and then reappear a week later. All kinds of crazy things could happen...

[MatNikel]

Thanks sebastjava
But, I'm beginner and totally lost with some especific terms as pop-up submenu and others.

Do you have a video explaning it?

[sebastjava]

I don't have any video, sorry. Beginner level ? Okay.

You could start just doing some fun experiments with Oomox. Available in your Software Manager.

Going further, for whatever you want, with whatever method you use, you should find WidgetFactory to be useful. Check my screenshot below. WidgetFactory is part of the Gtk-3-examples package. Available in your Software Manager. This WidgetFactory is in the Programming section in my Cinnamon menu. I can't remember for sure, but I think I possibly had to add it there myself, by opening the menu editor to add this menu item, launched with the gtk3-widget-factory command. Or else you can just type gtk3-widget-factory in your terminal. Or create some custom launcher.

Next thing you need to know, is all the GTK 3 themes are build using Cascaded Style Sheets (CSS). If you have some experience in creating basic static web pages, using HTML and CSS, then you won't be totally lost.

This WidgetFactory lets you check lots of GTK elements in one single window. And then you can find the inspector in the top-right menu. This inspector has many interesting features. It enables you to see the CSS selectors and classes corresponding to each element. And then you can do some live testings, adding some custom CSS directly into the inspector interface and looking at instant results.

Next, you will want to do some quick testings on the real thing: your desktop environment. Usually, your official themes are located at /usr/share/themes. You should not try to edit themes in there. It would require using a sudo command every five minutes and thus you could make bad, fatal mistakes. To go quick and without using any sudo commands, you can start by duplicating an entire theme into the ~/.themes directory. Example:

Code: Select all

cp -r /usr/share/themes/Mint-Y ~/.themes

EDIT: To be able to see this ~/.themes directory, in your home folder, in your file manager, you must select Show Hidden Files in the View menu, or just press Ctrl+H.

The themes in this home ~/.themes overrides the ones in /usr/share/themes. You can try doing some tweaking in ~/.themes/Mint-Y/gtk-3.0/gtk.css, using any simple text editor such as Xed. Just edit, save, and then go into Menu > Preferences > Themes (or Appearance) and switch back and forth between Mint-X and Mint-Y to force instant refresh. Check the results.

That's already tons of readings to start with. I don't think there is an easy way. But it is quite possible you could find a video somewhere.

WAIT ! There is one last thing you must know before starting anything. Doing some weird random experiments with GTK is probably not seriously dangerous, but it can get very scary. What if you make some bad mistake and loose all the buttons and active elements ? If you are not an expert with the Terminal and keyboard shortcuts, you will be lost ! Well, in the worst case, there is one button that still works: the real, physical, power button on your computer. So, you can always restart your computer with the USB drive you first used to install your system, and from there, from this live session, you can go into your HDD, and simply delete this ~/.themes directory. Then you can restart your computer again, normally, and you will be back with a functional GUI, provided you haven't done any modifications into the root /usr/share/themes...

WidgetFactory

[MatNikel]

Thanks
I'm trying to modify the Mint y theme with some blur.

The command: filter: blur doesn't work.

Can you help me with it?

[sebastjava]

Let's take it step-by-step.

Step 1: Find the right CSS selector. Test it with some basic modifications, like changing the background-color. Does it work ? Check my example below.

Step 2: Search the web for some examples on how to use this blur filter. I never tried this before. Is it compatible with your GTK engine, currently installed version ? I did a 30s search, and it seems this filter: blur(4px); only works on images ?

It would help if you could share some coding here, so we can see what you are trying to do, what is your CSS selector, and how are you trying to use this filter.

● ● ●

Example on using WidgetFactory (part of the Gtk-3-examples package)

WidgetFactory quick demo (click to enlarge)

Code: Select all

/*
Here is a quick example on finding the right CSS selector and making some basic modifications. This headerbar now has a blue background, but only when focused.

To find my way, I started by clicking here in this WidgetFactory inspector on the objects tab, then clicked the top-left icon to select an object, selected this headerbar, and then looked at the CSS Selector from the drop-down menu.

I also took a look at the real thing: /usr/share/themes/Mint-Y/gtk-3.0/gtk.css
And then I just typed this and got instant results: 
*/

headerbar:not(:backdrop).titlebar {
  background-color: #2980B9;
}

P.S.: I am currently very busy, not always quick to reply...

[MatNikel]

filter: blur(4px), doesn't works.

But, we have lots of blur themes for KDE....

[sebastjava]

I did a quick web search and it seems this blur is not included in the GTK 3. Maybe in the future GTK 4. So, you just can't get this to work with the current Mint 20.3. AFAIK.