trying to set taskbar background

[mrsteve0924]

trying to get a semi-transparent taskbar background. i thought this would work but it's not. any suggestions? thanks

i should mention i am using wayfire

button#taskbar_normal {
   background-color: rgba(0.033,0.041,0.047,0.5);
}
button#taskbar_active,
button#taskbar_normal:hover {
  outline-style: none;
  box-shadow: none;
  background-image: none;
  border-radius: 3px;
  border-image: none;
  border-width: 0px;
  -GtkWidget-hexpand: false;
}

[LBCrion]

taskbar_normal mode decorates a taskbar item in normal state. For semi

transparent background example, take a look at t2.config. you would need to set semi transparent background on the main bar window and transparent backgrounds on widgets

On Sat, 17 Jun 2023, 23:19 callmejoe, @.***> wrote:

trying to get a semi-transparent taskbar background. i thought this would work but it's not. any suggestions? thanks

button#taskbar_normal { background-color: rgba(0.033,0.041,0.047,0.5); } button#taskbar_active, button#taskbar_normal:hover { outline-style: none; box-shadow: none; background-image: none; border-radius: 3px; border-image: none; border-width: 0px; -GtkWidget-hexpand: false; }

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/101, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFE2UYYTQH5K4GJVA3TXLYNNFANCNFSM6AAAAAAZKON7IY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[mrsteve0924]

@LBCrion thanks for that. i got the bar transparent with

window {
  background-color: rgba(0.033,0.041,0.047,0.5);
}

But I cant figure out how to get the launcher buttons background also trannsparent i've tried adding background: none in button#module and button#launcher and I tried adding few things to launcher button { ...

but nothing works

[LBCrion]

Would you mind posting your config?

On Mon, 19 Jun 2023, 04:17 callmejoe, @.***> wrote:

@LBCrion https://github.com/LBCrion thanks for that. i got the bar transparent with

window { background-color: rgba(0.033,0.041,0.047,0.5); }

But I cant figure out how to get the launcher buttons background also trannsparent i've tried adding background: none in button#module and button#launcher and I tried adding few things to launcher button { ...

but nothing works

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/101#issuecomment-1596386854, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFCJR2LHMQ4LAAVLDP3XL6ZDJANCNFSM6AAAAAAZKON7IY . You are receiving this because you were mentioned.Message ID: @.***>

[mrsteve0924]

@LBCrion here is the config. thanks

EDIT: I was able to get the launchers' backgrounds removed by setting style = "launcher" and adding background: none to button#launcher

i dont think it makes the launcher transparent though but it's better.

I cant do the same for the tray icons; pulse-module and network-module. i added background: none to button#module but that doesnt seem to work

sfwbar.config

\# Override a gtk theme #theme = "Adwaita-dark" \# Display minimized windows on taskbars across all outputs DisownMinimized = false \# Select terminal emulator to use Set Term = "gnome-terminal" \# Window Placer - Only works with sway placer { xorigin = 5 # place the first window at X% from the left yorigin = 5 # place the first window at X% from the top xstep = 5 # step by X% of desktop horizontally ystep = 5 # step by X% of desktop vertically children = true } \# Task Switcher - move through open windows with switcher { interval = 700 icons = true labels = false cols = 5 } \# Panel Layout layout { \#include("startmenu.widget") \# add a launcher button { action = "firefox" # launch firefox on click value = "firefox" # set icon on the button tooltip = "Firefox Web Browser" css = "* { min-height: .75cm; min-width: .75cm; }" # set icon size style = "launcher" } button { action = "gnome-terminal --title=standard" value = "gnome-terminal " tooltip = $Term css = "* { min-height: .75cm; min-width: .75cm; }" style = "launcher" } button { action = "thunar" value = "thunar" tooltip = "Thunar File Manager" css = "* { min-height: .75cm; min-width: .75cm; }" style = "launcher" } button { action = "thunderbird" value = "thunderbird" tooltip = "Mail Client" css = "* { min-height: .75cm; min-width: .75cm; }" style = "launcher" } button { action = "chromium --no-sandbox -ozone-platform-hint=auto" value = "chromium" tooltip = " Chromium Web Browser" css = "* { min-height: .75cm; min-width: .75cm; }" style = "launcher" } button { action = "play" value = "/usr/share/icons/Adwaita_old/24x24/legacy/media-playback-start.png" tooltip = "Play Song Library" css = "* { min-height: .75cm; min-width: .75cm; }" style = "launcher" } \# add a taskbar css = "* { min-height: 50px }" include("winops.widget") taskbar { css = "* { -GtkWidget-hexpand: true; }" # take up empty space, set icon size css = "* { padding-left: 10px; padding-right: 800px }" style = "taskbar" rows = 1; icons = true; labels = true; sort = false; filter = output title_width = 25 action[3] = Menu "winops" } \#Pager - switch between workspaces. only works with sway \# pager { \# style = "pager" \# rows = 1 \# pins = "1","2","3","4" \# preview = true \# } tray { rows = 1 } include("pulse-module.widget") include("network-module.widget") label { css = "* { padding-left: 5px; }" } grid { css = "* { -GtkWidget-direction: bottom; }" label { value = Time("%k:%M") style ="clock" } label { value = Time("%x") style ="clock" } } } \#CSS \#hidden { -GtkWidget-visible: false; } window { background-color: rgba(0.033,0.041,0.047,0.7); } button#startmenu { border: none; } button#module { border: none; padding: 3px; margin: 0px;0 background: none; -GtkWidget-vexpand: true; } button#launcher { padding: 0px 5px 0px 5px; background: none; border-style:none; box-shadow: none; } button#module image { min-height: 24px; min-width: 24px; padding: 0px; margin: 0px; background: none; -GtkWidget-valign: center; -GtkWidget-vexpand: true; } button#taskbar_normal, button#taskbar_active, button#taskbar_normal:hover { outline-style: none; box-shadow: none; background-image: none; border-radius: 3px; border-image: none; border-width: 0px; -GtkWidget-hexpand: false; } grid#taskbar > :not(:last-child) button#taskbar_normal:hover, grid#taskbar > :not(:last-child) button#taskbar_active, grid#taskbar > :not(:last-child) button#taskbar_normal { border-radius: 0px; border-right: 1px solid alpha(@theme_fg_color,0.15); } button#taskbar_active { background-color: rgba(199,227,255,0.6); } button#taskbar_normal:hover { background-color: rgba(213,213,213,0.6); } button#taskbar_normal grid, button#taskbar_active grid, button#taskbar_normal:hover grid { -GtkWidget-valign: center; } button#taskbar_normal image, button#taskbar_active image, button#taskbar_normal:hover image { min-width: 24px; min-height: 24px; padding-right: 6px; } button#taskbar_normal label, button#taskbar_active label, button#taskbar_normal:hover label { } button#tray_active, button#tray_passive, button#tray_attention { margin: 0px; border: none; padding: 0px; } button#tray_active image, button#tray_passive image, button#tray_attention image { outline-style: none; box-shadow: none; -GtkWidget-valign: center; -GtkWidget-vexpand: true; min-height: 24px; min-width: 24px; padding: 3px; margin: 0px; border: none; } grid#pager { border-radius: 3px; border-color: @theme_fg_color; border-style: solid; border-width: 1px; margin: 2px; padding: 0px; } button#pager_normal, button#pager_visible, button#pager_focused { outline-style: none; box-shadow: none; background-image: none; border-radius: 5px; border-image: none; border: none; outline: 0px; margin-right: 2px; margin-left: 2px; padding: 0px; font: 0.3cm Sans; -GtkWidget-halign: center; -GtkWidget-valign: center; } button#pager_focused { background-color: rgba(199,227,255,0.6); } button#pager_preview { background-image: none; border-radius: 0; border-image: none; border-color: #000000; border-width: 0.25mm; color: #777777; min-width: 5cm; min-height: 2.8125cm; } \#menu_item, \#menu_item image, \#menu_item label { -GtkWidget-halign: start; } \#menu_item image { min-width: 16px; min-height: 16px; padding-right: 2px; } label#clock { padding-left: 2px; padding-right: 2px; } label { font: 14px Sans; } chart#cpu_chart { background: rgba(127,127,127,0.3); min-width: 9px; -GtkWidget-vexpand: true; margin: 2px; border: 1px solid @theme_fg_color; color: red; } progressbar#memory { -GtkWidget-direction: top; -GtkWidget-vexpand: true; min-width: 9px; border: 1px solid @theme_fg_color; margin: 2px; } progressbar#memory trough { min-height: 2px; min-width: 9px; border: none; border-radius: 0px; background: rgba(127,127,127,0.3); } progressbar#memory progress { -GtkWidget-hexpand: true; min-width: 9px; border-radius: 0px; border: none; margin: 0px; background-color: alpha(green,0.9); } grid#switcher_active image, grid#switcher_active { min-width: 1.25cm; min-height: 1.25cm; border-image: none; padding: 1.25mm; background-color: #bbddff; border-radius: 1.25mm; -GtkWidget-hexpand: true; } grid#switcher_normal image, grid#switcher_normal { min-width: 1.25cm; min-height: 1.25cm; border-image: none; padding: 1.25mm; -GtkWidget-direction: right; -GtkWidget-hexpand: true; } window#switcher { border-style: solid; border-width: 0.25mm; border-color: #000000; border-radius: 1.25mm; padding: 1.25mm; -GtkWidget-hexpand: true; } grid#switcher { border-radius: 1.25mm; padding: 1.25mm; -GtkWidget-hexpand: true; }

[LBCrion]

There is a typo in the button#module CSS section margin: 0px;0, if you remove zero at the end, module buttons should become transparent. Both launchers and modules (with the above change) are transparent, but they are displayed over the bar itself, so if the bar is translucent, you should have the same degree of translucency for the empty space and the button background. Also, if the icons you're using don't have transparent background, they will be rendered with their own background, since it's part of the image.

[LBCrion]

One other thing to note, you currently include "winops.widget" from within layout section, since winops.widget doesn't have any widgets associated with it, just functions, it triggers some warnings on startup. If you include it from outside of the layout section, the warnings will go away. There shouldn't be any impact on functionality either way.

[mrsteve0924]

thanks for the reply. i fixed the typo and that removed the backgrounds from the tray icons. I see now that my launcher icons do not have transparent backgrounds so i'll have to work on that.

and moving that winops.widget got rid of that annoying warning. thanks. i couldnt figure out where that was coming from.