Hi,
I am new to Linux and Zorin and I want to change the background color of the task bar and start menu.
So, is there a possibility via a User-CSS (like it is with Firefox)? Maybe you also know a good tutorial for beginners?
I use Zorin OS 16.1 Core with GNOME.
Thanks a lot for your hints!
Yes, the gnome-shell.css file for the theme you are using determines the Taskbar color.
For the App Menu, I would need to ask you to be a bit more specific on what color you are referring to. The background behind the button is one class that can be set. The highlight button can be set. And... the icon color can also be set (not in the .css, it must be done in a different way.)
I mostly theme Mate, XFCE, Cinnamon and other desktop environments... So I do not recall the specific classes you need to set your parameters in for Gnome. I do not theme Gnome. But if needed, I can probably look them up. OR user @Storm has some experience in theming the gnome-shell, too.
Thank you for your information, Aravisian 
I could find it and with this Tutorial I managed to change the task bar color 
Regarding the App Menu. I want to set the background behind the button as well the highlight button.
Hm, maybe also the icon color, it depends if it fits with the "new" color.
Thanks again!
You might try:
#panel .panel-button {
background-color: rgba(0,0,0,0.0)
}
#panel .panel-button:hover, #panel .panel-button:active {
background-color: rgba(0,0,0,0.0)
}
Replace the rgba color with one of your choice or a hex of your choice.
Changing the Icon color would mean changing the Image Color in the .svg file.
Great, it worked. Thanks Aravisian
Just a few more questions:
Is it possible to set the panel background color transparency?
For example I use this code:
#panel {
background-color: red;
}
Is it also possible to change the color of the start menu (see attached screenshot)?
It would be also background color, text color and the mouse hover color.
Yes, you can use the rgba value instead of naming the color or using the hex code.
Let's avoid any debates about Google for a moment... this is just an easy starting step...
Google search #000000
The search will place a Color Picker right at the top of the search hits.
You can test and explore how a color picker works.
To the left, is the RGB value and moving right, you see the same colors HEX value.
RGBA includes the (A)lpha Transparency value.
RED should be #F0F0F0, I think... so that can be a starting point. You can use the color slider to adjust and fine-tune that.
Then look at the rgb color.
All you need to do is add the Alpha - which is done with 0.0 for no transparency up to 0.99 for very transparent. I recommend starting at 0.3 and adjusting from there.
So...
I think rgb for red is 240,240,240, your Red Transparency: rgba(240,240,240,0.3)
You can research and install a Color Picker application if you feel you may be enjoying theme customizing in the future. I use Gpick since it allows me to click on a color and identify its color codes.
Quick .css properties 101:
Font color is the property color. For Symbolic Icons, the color property can affect them, too. But it will not effect regular icons.
Mouse Hover in this case shows the menuitem class.
And background, just as with the panel, is the background-color property.
You may need to test and play with things a bit... I do not theme Gnome these days, so this is guesswork for me, as well.
But you might look at (the rgba is an example color):
.popup-menu.panel-menu {
background-color: rgba(240,240,240,0.3);
color: #000000
}
.popup-menu-item:active, .popup-menu-item.selected, .popup-menu-item:checked, .popup-menu-item:checked.selected, .popup-menu-item:checked:active {
background-color: rgba(240,240,240,0.3);
}
Thanks a lot for your quick tutorial, this really helped me!
I tried it out and yes it worked
Regarding this:
.popup-menu.panel-menu {
background-color: rgba(240,240,240,0.3);
[not this: color: #000000]
}
It only changes the background frame (see screenshot the red one).
But I get the background color with this (in this example green):
.popup-menu-content {
background-color: rgba(14,199,36,0.99);
}
Is it also possible to change the color of the divider, buttons and search or are these also icons?
Another question regarding the icons. These two (start button and open applications):
Where I can find the .svg and how can I “replace” it with the new one (I think the original will still stay, right)?
I wonder what the treeview class would yield?
Flying off the cuff because I have about two minutes before I vanish...
Divider would be separator, Buttons are button but I think in that gnome-shell, it is handled differently - I will need to look into that. Search is entry.
Try /usr/share/icons/hicolor/symbolic/apps
Since I do not use Gnome, I am guessing.
Thanks a lot, Aravisian, I got it
Try /usr/share/icons/hicolor/symbolic/apps
In this directory I didn’t find it. But it seems to be in this one – is it right?
Do I have to replace both icons or do I have to do it differently?
I would rename the original to start-here-symbolic-bkp.svg
Then add the icon of your choice renamed to start-here-symbolic.svg
I am not sure what you mean by both... If you want your Places icon swapped, you can do that as well...
Thanks, yes, this is what I meant
I tried it out but it has no effect. Did I do this correctly (the red one should be the “new”)?
@Nimar , I am sorry
Can you run a Search in your / root directory for
start-here-symbolic and you could try start-here as well.
See if any copies are placed elsewhere.
I tried this while using Zorin OS Lite, which does not use the start-here-symbolic icon at all... So I may have gotten misleading results on location.
I did the search - here are the results (there are also a lot of .png, so I only searched the .svg):
Now I finally had time to try out the directories (except the Snap ones). Unfortunately without success 
Does anyone have an idea?
Just another question. I'm not sure if this is due to the particular application or in general.
Is it possible to change the background color of the top bar of a program (see Screenshot)?
Yes, that is in the gtk.css not the gnome-shell.css
You can create a custom gtk.css file in your home config directory (~/.config/gtk-3.0) that takes priority over the system theme, allowing you to customize small details without changing the theme file.
Try:
window.ssd headerbar.titlebar, .titlebar {
background-color: rgba(0,0,0,0.1);
}
Be sure to use the HEX color code or RGBA code you prefer.
You can also have some fun with it by using other properties like min-height to change the size of the titlebar.
You can change the border-radius or border-color. You can create interesting shadow effects with the box-shadow property. And you can change the text color or symbolic icon color with the color property.
Please keep in mind that there is an active view to a window and an inactive view, so an inactive window can have differences allowing you to differentiate at a glance which window is active.
The inactive classes bear the :backdrop, so for example, the titlebar text color for in inactive window:
headerbar .title:backdrop, .titlebar:not(headerbar) .title:backdrop {
color: rgba(0,0,0,0.1);
}
As for the App Menu Icon:
I do not theme Gnome (for reasons). In every other desktop, this menu icon can be adjusted using the gtk.css.
With Gnome, however, that is separated into the gnome-shell and on Zorin OS, there is an additional gnome-extension to handle that, too.
Since I am using Zorin OS Lite, I do not have any gnome-extensions installed in order to examine them to see if that is related. I will need to fire up a copy of Zorin Core and try taking a look...
Many thanks, Aravisian
I have managed to do this with the gtk.css.
Since I am using Zorin OS Lite, I do not have any gnome-extensions installed in order to examine them to see if that is related. I will need to fire up a copy of Zorin Core and try taking a look...
Oh, I see, GNOME is more complex 
Thanks a lot for your effort, I really appreciate it