Custom Dock

[zenzen]

@Fred89

Is it possible to define the color of the border?

#panelBox #panel {
  border: 1px solid blue;
}

You have to define the thickness of the border, the style (I think only solid is allowed) and the color, which can be in hexadecimal or RGB notation, as well as plain names for simple colors like "blue".

For the panel color, you can use something like:

#panelBox {
        background-color: rgba(127, 100, 50, 0.5);
}

Again, you can define the color in any notation as mentioned above. The "A" in RGBA stands for alpha which is the opacity, expressed as a number between 0 (completely transparent) and 1 (completely opaque).

Just as a reminder, the files inside the extension folder might be overwritten during an update, so you might want to keep a copy or notes somewhere else.

[Fred89]

Thank you very much @zenzen

I have tried this but I think I have done something wrong
The border-color works.
But not the panel-color. It is still in the Zorin-blue.

Here is my code:

What did I wrong?

[zenzen]

Try to write your own custom styles at the end of the file, as CSS processes rules in order from top to bottom. If there's another rule after yours that applies some styles to the same property, it would take precedence.

Just in case, remember that changes will only take effect the next time that the extension runs. You can either log out and log back in, or toggle the extension on/off from the Extension Manager.

[Fred89]

Hm, that didn't work either.
I put my code at the end and I also switched the #panelBox #panel (the border still worked) and #panelBox – I also tried it only with the #panelBox. But no effect.
And yes, I also restarted the whole system.

I uploaded my stylesheet.css – maybe I did something wrong?

Or any other ideas?

[zenzen]

Have you set the taskbar to hide (the exact name is Panel Intellihide)? If yes, that might explain it, as CSS rules have this concept of specificity where the more specific you are when applying rules, the higher the precedence.

You can then apply the rules when that is the case. Still at the bottom of the file:

#panelBox,
#panelBox.floating {
	background-color: rgba(235, 12, 12, 1);
}

#panelBox #panel,
#panelBox.floating #panel {
	border: 5px solid yellow;
}

[Fred89]

Thank you very much. Yes, I use Intellihide.
It has now almost worked, but now I also have the red background in addition as the background of the panel (quasi behind where nothing should actually be).

Any idea?

[Ponce-De-Leon]

Delete the Background Color and add it to the Block with the 5px yellow Outline:

#panelBox #panel,
#panelBox.floating #panel {
	border: 5px solid yellow;
	background-color: rgba(235, 12, 12, 1);
}

[zenzen]

Nice, it was driving me crazy!

@Fred89 once you're done, make sure to share the result in this post, I'm really curious what it looks like:

Share your desktop, what does it look like?

[Bildschirmfoto vom 2021-09-19 11-15-56] This is mine at the moment.

[Fred89]

Thank you!
I almost don't dare to say it anymore
But the background no longer works at all. Only the border.

And yes, I rebooted the machine. Strange

[Ponce-De-Leon]

There is already a #panelbox.floating Block existing with a transparent Background Value:

You could add the background-color Value to this or change the transparent Value there to Your Color. I would suggest to start with adding the Value.

[Fred89]

I have tried to change the “transparent” value to a color and to add the background-color. And with both I get this red “double-frame”:

Maybe this is a bug because of the Intellihide?

[Ponce-De-Leon]

I don't think it is a Bug. It is maybe because of the panelBox Value. Because this whole Space could be reserved for it. So, it could color the whole Space. The Thing is: we don't want that space, we want the Taskbar ...

Maybe it would work when You use the Value #panelBox.floating #panel because this for the floating Mode but with Connection to the Panel. Maybe this could be worth a Try.

[Fred89]

Well, I tried the #panelBox.floating #panel thing. Provided I have done it right, it didn’t work:

I tried another one because I saw that there is still a #panel. And then I got this output:

Maybe it helps?

[Ponce-De-Leon]

@Fred89

Maybe it helps?

No, that are specified Places on the Panel.

But did You have added the #panelBox.floating #panel Value or did You used the one that is already there?

[Fred89]

I tried both and both didn't worked

[Aravisian]

You might have to check the gnome Shell .css. The .css for the extension should work but... since this is a system of many moving parts - you end up with extension configurations and shell configurations.

The default Zorin Theme likely matches in both locations, whereas your changes are only reflected in one, not necessarily the .css file that is given system priority to.

Summary

This is also why I no longer create Gnome Themes. Between libadwaita, the Shell and extensions; it is just too convoluted now for a user to re-take control of their desktop.

[Fred89]

Thank you for your suggestion.
I have tried it, but unfortunately there is also no effect.

Didn't think that this is so difficult