Customizing themes and appearances

Funny I always saw the taskbar at the top as something weird, but now it's just so natural to me. I don't think I could get used to having all the open apps, clock, etc at the bottom of the screen.

Cool theme, how did you get that background on the file explorer?

2 Likes

I'm actually unsure how that works. its built in the theme. Also yea i need the taskbar atop.

2 Likes

In .css, you can add a background image using the background-image parameter set in the class of the object you want the image in.
Sounds funny, but is actually very easy. You can experiment (and play around with) a custom gtk.css file placed in location ~/.config/gtk-3.0
That way, it will not ruin your existing theme. You can just modify or delete that custom file at need or to recover back to the previous.

Your class tree in this case would be .view and the window so, .window as such for most file managers:

.thunar .view, .nemo-window .view

Howver Gnome handles Nautilus differently and makes it a Notebook Stack because Gnome is Gnome and .... yeah...

.thunar .view, .nemo-window .view, .nautilus-window notebook > stack

Set your background image by directing to the path to the image file. I prefer to place the image in the same directory as the gtk.css file. The sourcing circles outward from the gtk.css, so placing it next to it makes only one tree jump:

.thunar .view, .nemo-window .view, .nautilus-window notebook > stack
background-image: url("generic-image.png")

But let's say that it is in your /usr/pixmaps directory:

.thunar .view, .nemo-window .view, .nautilus-window notebook > stack
background-image: url("/usr/pixmaps/generic-image.png")

4 Likes

Thanks! I will give this a try, can make for some interesting effect. I assume this is possible as well with the menu bar of the window (not the taskbar but with each individual window's bar)? This could made a cool cohesive theme when combined with some of the cool Firefox and/or Vivaldi themes.

1 Like

It is in desktops that support Menubar - gnome does not.
So if using Cinnamon or XFCE (Zorin Lite), you can use the menubar or .menubar class. Here is an example from my Mercury theme:

 menubar, .menubar {
     min-height: 26px;
     color: #FFF;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.8);
     -GtkWidget-window-dragging: true;
     background-image: url("assets/toolbar-light.png"), linear-gradient(to bottom, #212121 0%, #313131 90%, #141414 100%);
     background-repeat: no-repeat;
     border: 1px solid #212121;
}

You also have the Toolbar:

toolbar, toolbar.osd, .osd toolbar, .primary-toolbar, .inline-toolbar, toolbar.inline-toolbar, .inline-toolbar, toolbar.inline-toolbar, .bottom-toolbar.toolbar {
     -GtkWidget-window-dragging: true;
     min-height: 32px;
     color: #FFF;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
     background-image: url("assets/toolbar.png");
     background-repeat: repeat;
     background-position: center;
     background-size: auto;
     padding: 2px;
     border-radius: 2px;
     border-top: 1px solid #242424;
     border-left: 1px solid #242424;
     border-right: 1px solid #515151;
     border-bottom: 1px solid #515151;
}

You may want to keep it consistent across different function toolbars, like the statusbar or the actionbar:

toolbar, actionbar, searchbar, statusbar, toolbar.osd, .osd toolbar, .primary-toolbar, .inline-toolbar, toolbar.inline-toolbar, .location-bar, .inline-toolbar, toolbar.inline-toolbar, .bottom-toolbar.toolbar, .gedit-side-panel-paned statusbar {
     -GtkWidget-window-dragging: true;
     min-height: 32px;
     color: #FFF;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
     background-image: url("assets/toolbar.png");
     background-repeat: repeat;
     background-position: center;
     background-size: auto;
     padding: 2px;
     border-radius: 2px;
     border-top: 1px solid #242424;
     border-left: 1px solid #242424;
     border-right: 1px solid #515151;
     border-bottom: 1px solid #515151;
}

But again, it is different in Gnome. Nautilus will require:

.nautilus-window headerbar .path-bar-box {
     background-image: url("assets/toolbar.png");
     background-size: auto;
     background-position: center;
}
2 Likes

Sadly this feature has been written off in GTK4. So it won't work on Zorin OS 17 when its released.

2 Likes

thanks guys for the wealth of knowledge.

And why in the world would you come to that conclusion ..... I've never heard you make that comment before ..... :rofl: :rofl: :sunglasses:

I'm behavin'.

1 Like

I've noticed that ..... congrats ..... I'm trying not to rattle your cage to much .... :thinking: :grinning:

1 Like

No, you ain't. :stuck_out_tongue:

2 Likes

Well, that's something to try out then thanks for the explanation!