pinned.json But why? ¯_(ツ)_/¯

[Mezo0n]

so i was trying out this dock , and i really like it .
but while trying to pinn some bin to it
{ "Pinned": [ "org.telegram.desktop", "Spotify", "Anki", "Code", "thunar", "librewolf", "Alacritty", "com.github.th_ch.youtube_music" ] }
the "com.github.th_ch.youtube_music" doesn't open after i pinned it , actually I'm not so sure,but i also noticed that zen also has no icon ,if i can add one to it then we're good.
i also want some more explanation for what i can do with themes or the config itself like what options do i have , or should i discover it myself? haha
for example i want only the app with the button visible with almost transparent background but it's not working and i haven't played with any other settings so
blur is true and background-color is transparent

[sujer-ux]

Regarding the missing icon and the app not launching: This happens because the .desktop file name doesn't match the app's class name, so the dock can't find it. Check the actual .desktop file name and whether it even exists. For example, look in /usr/share/applications.

About the configuration complexity: I don’t have time to properly document the project yet. For now, it’s assumed that users who want to customize the appearance have some knowledge of CSS.

[sujer-ux]

#1 (comment)

[Mezo0n]

Thanks! I did actually solved it. But didn't noticed that I haven't marked it as solved lol.
But now actually I have another problem with the theme I would like for example to show only the buttons but not the window(background) so I tried to make it transparent and didn't work.
There are lines in the theme that charging them is just useless,(not sure why).
Also I want really to ask about how possible it is to make hypr-dock integrated in a yay or something, I can't stand the idea that it takes part of my home directory ( I'm noob so I'm not sure if there's another way to do it but I'm just saying I hate it how it looks there in the home directory alone next to my other importantdirectories if you know what i mean)
@sujer-ux

[sujer-ux]

Provide specific examples of how you edit the config and what result you want to achieve.

Also, clarify how exactly you installed hypr-dock. Did you follow the instructions completely?

@Mezo0n

[Mezo0n]

first here's my

hyprland.conf : 
decoration {
    rounding = 5
    rounding_power=2
    blur {
        enabled = true
        size = 0
        passes = 1
        size = 2
        new_optimizations = true
        vibrancy = 0.1696
        xray = false
    }
    and my other configs : 
    
[@Arch-linux ~]$ cat ~/.config/hypr-dock/config.jsonc 
{
    "CurrentTheme": "lotos",

    // Icon size (px) (default 23)
    "IconSize": 23,

    // Window overlay layer height (auto, exclusive-top, exclusive-bottom, background, bottom, top, overlay) (default "auto")
    "Layer": "auto",

    // Window position on screen (top, bottom, left, right) (default "bottom")
    "Position": "bottom",

    // Use system gap (true, false) (default "true")
    "SystemGapUsed": "true",

    // Indent from the edge of the screen (px) (default 8)
    "Margin": 3
}
[@Arch-linux ~]$ cat ~/.config/hypr-dock/themes/lotos/style.css 
/* Dock window background: transparent + blur handled by Hyprland */
window {
  background-color: rgba(0, 0, 0, 0.2);  /* slight tint for blur visibility */

  border-radius: 70px;

  padding: 1px;
}

/* App container */
#app {
  background: rgba(0, 0, 0, 0);
  border-radius: 16px;
  margin: 6px;
}

/* App buttons: basic look */
button {
  background-color: rgba(0, 0, 0, 0);
  padding: 10px 10px 8px 10px;
  border-radius: 16px;
  border: none;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, padding 0.2s ease-in-out, margin 0.2s ease-in-out;
}

/* Hover: highlight with enhanced raise effect and glow, minimal disturbance */
button:hover {
  box-shadow: 0 5px 8px rgba(255, 255, 255, 0.2), 0 2px 3px rgba(255, 255, 255, 0.1); /* Stronger vertical offset for elevation */
  background-color: rgba(255, 255, 255, 0.06);
  padding: 14px 10px 6px 10px; /* Increase top padding more, decrease bottom for noticeable lift */
  margin: -4px 0 2px 0; /* Stronger upward shift, slight bottom margin to balance */
  border-radius: 16px;
}

/* App icons: fixed size with lift on hover */
button image {
  border-radius: 8px;
  margin: 0;
  min-width: 32px;
  min-height: 32px;
  transition: margin 0.25s ease-in-out; /* Smooth transition for icon lift */
}

/* Lift the icon itself on button hover */
button:hover image {
  margin: -4px 0 0 0; /* Pull the icon up by 4px to match button lift */
}

#app.active {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}[@Arch-linux ~]$ cat ~/.config/hypr-dock/themes/lotos/lotos.jsonc 
{
    // Blur window ("true", "false") (default "on")
    "Blur": "true",

    // Distance between elements (px) (default 9)
    "Spacing": 5
}[@Arch-linux ~]$ ls ~/hypr-dock/
bin	docs	go.sum    LICENSE  Makefile  README.md
configs  go.mod  internal  main     pkg       README_RU.md
[@Arch-linux ~]$ 

in my case it's not even blurry.
i simply make install like manually installing any app outside the package-manger
and then (as usual) deleted it but it did cause the hypr-dock to be deleted as well.

so here's my dock and i want to see my wallpaper for example in between the apps too (i tried fully transparent but as you can see it doesn't even takes effects the color I'm choosing) :

i also have another issue as you can see i have round edges because of

border-radius: 70px;

and it shows black-bleedings on the corners ( you know where the edges are cut too) and it looks bad whenever i hover my mouse to it) i don't know, i tried to get a screenshot to explain it but i couldn't catch this event , ( but you can imagine black sharp edges on the corners.(I'm not sure if fully transparent configs may solve this issue but I'm mainly aiming to it).
hope i covered all the annoying points (but to be honest i was looking for a dock that is exactly does this job and i don't wanna change to another one so) :))
best luck!
@sujer-ux

[sujer-ux]

#2 (comment)

[Mezo0n]

so here's an updated version ( still nothing , i forgot to tell you that i have tried transparent before , but my eyes failed me for the window thing, so forgive me on that on haha)

[@Arch-linux ~]$ cat ~/.config/hypr-dock/config.jsonc 
{
    "CurrentTheme": "lotos",
    "IconSize": 23,
    "Layer": "auto",
    "Position": "bottom",
    "SystemGapUsed": "true",
    "Margin": 3
}
[@Arch-linux ~]$cat ~/.config/hypr-dock/themes/lotos/style.css 
window {
background-color: transparent;
}
#app {
  background: transparent;
  border-radius: 10px;
  padding: 1px;
  margin: 10px;
}
button {
  background-color: #ffffff;
  padding: 15px 10px 8px 10px;
  border-radius: 99px;
  border: none;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, padding 0.2s ease-in-out, margin 0.2s ease-in-out;
}
button:hover {
  box-shadow: 0 5px 8px rgba(255, 255, 255, 0.2), 0 2px 3px rgba(255, 255, 255, 0.1); 
  background-color: rgba(255, 255, 255, 0.06);
  padding: 14px 10px 6px 10px; 
  margin: -4px 0 2px 0; 
  border-radius: 16px;
}
button image {
  border-radius: 99px;
  margin: 0;
  min-width: 32px;
  min-height: 32px;
  transition: margin 0.25s ease-in-out; /* Smooth transition for icon lift */
}
/* Lift the icon itself on button hover */
button:hover image {
  margin: -4px 0 0 0; /* Pull the icon up by 4px to match button lift */
}
#app.active {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
[@Arch-linux ~]$ cat ~/.config/hypr-dock/themes/lotos/lotos.jsonc 
{
    "Blur": "true",
    "Spacing": 5
}

and the results are :

as you can see no white there in the button background for example, the border-radius works only for #window and not the app (I'm not sure why,but as long as i remove all the background i doesn't really matter but i may need the buttons to be rounded in the future I'm not sure yet) as you can saw from the first code it was 70 on border-radius i tried that on #app and didn't work.
and here are all transparent and sadly doesn't work.
and i want you to know that I'm really new to this whole thing so it may be for another mistake or i don't know maybe i miss configured the hover thing ( i just copied pasted it from the guys in the comment " much appreciated tho @sam08sk"
and i would really like to see some of the already made configuration things like more than that "glowing or i don't know jumping after clicking haha!"
@sujer-ux

[sujer-ux]

#3 (comment)

@Mezo0n

[sujer-ux]

window {
  background-color: transparent;
}

#app {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0px;
  padding: 0px;
}

button {
  background-color: rgba(55, 55, 55, 0.426);
  padding: 10px;
  border-radius: 5px;
  border: none;
}

[Mezo0n]

I set everything to its default then I added what you suggested and here are the results are broken hypr-dock.

[@Arch-linux ~]$ cat ~/.config/hypr-dock/config.jsonc 
{
    "CurrentTheme": "lotos",

    // Icon size (px) (default 23)
    "IconSize": 23,

    // Window overlay layer height (auto, exclusive-top, exclusive-bottom, background, bottom, top, overlay) (default "auto")
    "Layer": "auto",

    // Window position on screen (top, bottom, left, right) (default "bottom")
    "Position": "bottom",

    // Use system gap (true, false) (default "true")
    "SystemGapUsed": "true",

    // Indent from the edge of the screen (px) (default 8)
    "Margin": 8
}
[@Arch-linux ~]$ cat ~/.config/hypr-dock/themes/lotos/lotos.jsonc 
{
    // Blur window ("true", "false") (default "on")
    "Blur": "true",

    // Distance between elements (px) (default 9)
    "Spacing": 5
}
[@Arch-linux ~]$ cat ~/.config/hypr-dock/themes/lotos/style.css 
window {
  background-color: transparent;
}

#app {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0px;
  padding: 0px;
}

button {
  background-color: rgba(55, 55, 55, 0.426);
  padding: 10px;
  border-radius: 5px;
  border: none;
}

@sujer-ux

i also tried with systemgaps off :
and here are the results :

[@Arch-linux ~]$ cat ~/.config/hypr-dock/config.jsonc 
{
    "CurrentTheme": "lotos",

    // Icon size (px) (default 23)
    "IconSize": 23,

    // Window overlay layer height (auto, exclusive-top, exclusive-bottom, background, bottom, top, overlay) (default "auto")
    "Layer": "auto",

    // Window position on screen (top, bottom, left, right) (default "bottom")
    "Position": "bottom",

    // Use system gap (true, false) (default "true")
    "SystemGapUsed": "false",

    // Indent from the edge of the screen (px) (default 8)
    "Margin": 8
}
[@Arch-linux ~]$ cat ~/.config/hypr-dock/themes/lotos/lotos.jsonc 
{
    // Blur window ("true", "false") (default "on")
    "Blur": "true",

    // Distance between elements (px) (default 9)
    "Spacing": 5
}
[@Arch-linux ~]$ cat ~/.config/hypr-dock/themes/lotos/style.css 
window {
  background-color: transparent;
}

#app {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  padding: 8px;
  margin: 6px;
}

button {
  background-color: rgba(55, 55, 55, 0.426);
  padding: 10px;
  border-radius: 5px;
  border: none;
}

[sujer-ux]

I have no fucking idea. For some reason, everything works fine for me. And I can't reproduce your conditions

[Mezo0n]

Sheesh , that was intense!
Haha no biggie, man thanks anyways ;)

[postsolar]

Copied your files, works fine for me. Try using the command GTK_DEBUG=interactive hypr-dock instead of hypr-dock. Make sure effective styles (on the right on my screenshot) match expectations.

[postsolar]

I'm a big fan of phocus myself, been using it for ages. Sadly it doesn't have a gtk4 version, so I just ripped its author's GTK4 config. It's fairly easy to configure IMO.

[Mezo0n]

Then do I shall this .
It was my pleasure talking to you and thanks again for bearing that much with me.
you gave me indeed beautiful also helpful information!

[Mezo0n]

@postsolar
so i'm back now i made my gtk (well doesn't look good but tried my best lmao)
anyway it finally worked

thanks to you.
but the issue is i try to save it and it doesn't after i use the CSS tab as it shows in the ss (only in the memory)
in GTK_DEBUG=interactive so everytime i close it ,it goes back to its default which is 37,37,37
I'm not really sure what is the issue now.
sorry to bother you again x.x

[postsolar]

Well, this is expected, this CSS tab is meant for temporary tweaking like this.

To have persistent styling you'd need to use CSS files. You mentioned that no changes to files apply to anything, so it likely means there are some issues with your files, their paths, permissions, etc. Though I couldn't tell what it is, because on the surface it all looks good. Triple-check everything, watch app's logs to stdout (launch it from a terminal), maybe look into enabling debug logging if it's available, maybe try to rebuild the app.

[Mezo0n]

Meh I already gave up .. I'm not sure , and really new to the whole thing so I'll pass , maybe it's something with my settings but all seems to be right as you said , which kinda awkward.
Thanks anyway. I made a lot of progress today haha!