I am really struggling with CSS

[xircon]

I can't seem to change some of the elements. Also can't highlight the active workspace on hyprland:

* {
    all: unset;
    font-weight: bold;
}

$bg: #000077         /* This is the main background */;
$bg-light: #9999ff;
$fg: #ffff00;        /* This only affects volume widget */
$active: #ff0000;
$unactive: #d7c1c3;

.bar {
    padding: 0.4rem 1rem;
    background-color: $bg;
    color: $fg;
}

.middle-separator {
    background-color: gray;
    padding: 0 0.03rem;
}

.volume-slider trough {
    min-width: 100px;
    background-color: gray;
    min-height: 0.3rem;
    border-radius: 1rem;

    highlight {
        background-color: $active;
    }

    slider {
        background-color: $fg;
        min-height: 20px;
        min-width: 20px;
        margin: -8px;
        border-radius: 1rem;
    }
}

.workspace {
    border-radius: 1rem;
    padding: 0 0.55rem;
    transition: 0.3s;
    color: #00ffff;
    background: #000099;
}

.workspace:hover {
    background-color: #ff5500;
    color: #ff5500;
}

.workspace.active {
    background-color: #ffff00;
    color: #ff0000;
}

.tray-item {
    all: unset;
}

/* The clock works as expected */
.clock {
    color: #ffff00;
    background-color: rgba(99, 0, 255, 0.9);
    font-size: 1.0rem;
    border-radius: 1rem;
    padding: 2px 2px .75rem;
    margin: 0 0.5rem;
    margin-right: 5px;
    transition: 0.3s;
}

popover.menu {
    contents {
        background-color: $bg;
        padding: 0.35rem;
        border-radius: 1rem;
        modelbutton {
            transition: 0.3s;
            border-radius: 0.5rem;
            padding: 0.25rem 1rem;
        }
        modelbutton:hover {
            background-color: mix($bg, $unactive, 80%);
        }
        separator {
            background-color: mix($bg, $unactive, 90%);
            min-height: 0.1rem;
            margin: 0.5rem 0;
        }

        label:disabled {
            color: $unactive;
        }

        arrow {
            opacity: 0.3;
          
            &:hover { background: none; }
          
            &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
          
            &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
          }

    }
}

I got rid of my original CSS and copied the one in the examples repo. Changed some of the colors to be very visible. I can only affect:

• Bar background
• Volume slider and percentage
• Clock
  Sorry for being a pain! Oh, here is my config.py:

import datetime
import asyncio
from ignis.menu_model import IgnisMenuModel, IgnisMenuItem, IgnisMenuSeparator
from ignis.widgets import Widget
from ignis.utils import Utils
from ignis.app import IgnisApp
from ignis.services.audio import AudioService
from ignis.services.system_tray import SystemTrayService, SystemTrayItem
from ignis.services.hyprland import HyprlandService, HyprlandWorkspace
from ignis.services.niri import NiriService, NiriWorkspace
from ignis.services.notifications import NotificationService
from ignis.services.mpris import MprisService, MprisPlayer

app = IgnisApp.get_default()

app.apply_css(f"{Utils.get_current_dir()}/style.scss")


audio = AudioService.get_default()
system_tray = SystemTrayService.get_default()
hyprland = HyprlandService.get_default()
#notifications = NotificationService.get_default()
#mpris = MprisService.get_default()

def hyprland_workspace_button(workspace: HyprlandWorkspace) -> Widget.Button:
    widget = Widget.Button(
        css_classes=["workspace"],
        on_click=lambda x: workspace.switch_to(),
        child=Widget.Label(label=str(workspace.id)),
    )
    if workspace.id == hyprland.active_workspace.id:
        widget.add_css_class("active")

    return widget


def workspace_button(workspace) -> Widget.Button:
    if hyprland.is_available:
        return hyprland_workspace_button(workspace)
    else:
        return Widget.Button()


def hyprland_scroll_workspaces(direction: str) -> None:
    current = hyprland.active_workspace["id"]
    if direction == "up":
        target = current - 1
        hyprland.switch_to_workspace(target)
    else:
        target = current + 1
        if target == 11:
            return
        hyprland.switch_to_workspace(target)


def scroll_workspaces(direction: str, monitor_name: str = "") -> None:
    if hyprland.is_available:
        hyprland_scroll_workspaces(direction)
    else:
        pass


def hyprland_workspaces() -> Widget.EventBox:
    return Widget.EventBox(
        vertical=True, #<<
        on_scroll_up=lambda x: scroll_workspaces("up"),
        on_scroll_down=lambda x: scroll_workspaces("down"),
        css_classes=["workspaces"],
        spacing=5,
        child=hyprland.bind_many(  # bind also to active_workspace to regenerate workspaces list when active workspace changes
            ["workspaces", "active_workspace"],
            transform=lambda workspaces, active_workspace: [
                workspace_button(i) for i in workspaces
            ],
        ),
    )


def workspaces(monitor_name: str) -> Widget.EventBox:
    if hyprland.is_available:
        return hyprland_workspaces()
    else:
        return Widget.EventBox()


def mpris_title(player: MprisPlayer) -> Widget.Box:
    return Widget.Box(
        spacing=10,
        setup=lambda self: player.connect(
            "closed",
            lambda x: self.unparent(),  # remove widget when player is closed
        ),
        child=[
            Widget.Icon(image="audio-x-generic-symbolic"),
            Widget.Label(
                ellipsize="end",
                max_width_chars=20,
                label=player.bind("title"),
            ),
        ],
    )


def media() -> Widget.Box:
    return Widget.Box(
        spacing=10,
        child=[
            Widget.Label(
                label="No media players",
                visible=mpris.bind("players", lambda value: len(value) == 0),
            )
        ],
        setup=lambda self: mpris.connect(
            "player-added", lambda x, player: self.append(mpris_title(player))
        ),
    )


def hyprland_client_title() -> Widget.Label:
    return Widget.Label(
        #vertical = True, #<<
        ellipsize="end",
        max_width_chars=40,
        label=hyprland.active_window.bind("title"),
    )


def client_title(monitor_name: str) -> Widget.Label:
    if hyprland.is_available:
        return hyprland_client_title()
    else:
        return Widget.Label()


def current_notification() -> Widget.Label:
    return Widget.Label(
        ellipsize="end",
        max_width_chars=20,
        label=notifications.bind(
            "notifications", lambda value: value[-1].summary if len(value) > 0 else None
        ),
    )


def clock() -> Widget.Label:
    # poll for current time every second
    return Widget.Label(
        css_classes=["clock"],
        label=Utils.Poll(
            1_000, lambda self: datetime.datetime.now().strftime("%H%n%M%n --%n%d")
        ).bind("output"),
    )


def speaker_volume() -> Widget.Box:
    return Widget.Box(
        child=[
            Widget.Icon(
                image=audio.speaker.bind("icon_name"), style="margin-right: 5px;"
            ),
            Widget.Label(
                label=audio.speaker.bind("volume", transform=lambda value: str(value))
            ),
        ]
    )


def hyprland_keyboard_layout() -> Widget.EventBox:
    return Widget.EventBox(
        on_click=lambda self: hyprland.main_keyboard.switch_layout("next"),
        child=[Widget.Label(label=hyprland.main_keyboard.bind("active_keymap"))],
    )


def keyboard_layout() -> Widget.EventBox:
    if hyprland.is_available:
        return hyprland_keyboard_layout()
    else:
        return Widget.EventBox()


def tray_item(item: SystemTrayItem) -> Widget.Button:
    if item.menu:
        menu = item.menu.copy()
    else:
        menu = None

    return Widget.Button(
        child=Widget.Box(
            child=[
                Widget.Icon(image=item.bind("icon"), pixel_size=24, hexpand=True),
                menu,
            ]
        ),
        setup=lambda self: item.connect("removed", lambda x: self.unparent()),
        tooltip_text=item.bind("tooltip"),
        on_click=lambda x: menu.popup() if menu else None,
        on_right_click=lambda x: menu.popup() if menu else None,
        css_classes=["tray-item"],
    )


def tray():
    return Widget.Box(
        vertical = True, #<<
        setup=lambda self: system_tray.connect(
            "added", lambda x, item: self.append(tray_item(item))
        ),
        spacing=10,
    )


def speaker_slider() -> Widget.Scale:
    return Widget.Scale(
        vertical = True, #<<
        min=0,
        max=100,
        step=1,
        value=audio.speaker.bind("volume"),
        on_change=lambda x: audio.speaker.set_volume(x.value),
        css_classes=["volume-slider"],  # we will customize style in style.css
    )


def create_exec_task(cmd: str) -> None:
    # use create_task to run async function in a regular (sync) one
    asyncio.create_task(Utils.exec_sh_async(cmd))


def logout() -> None:
    if hyprland.is_available:
        create_exec_task("hyprctl dispatch exit 0")
    elif niri.is_available:
        create_exec_task("niri msg action quit")
    else:
        pass


def power_menu() -> Widget.Button:
    menu = Widget.PopoverMenu(
        model=IgnisMenuModel(
            IgnisMenuItem(
                label="Lock",
                on_activate=lambda x: create_exec_task("swaylock"),
            ),
            IgnisMenuSeparator(),
            IgnisMenuItem(
                label="Suspend",
                on_activate=lambda x: create_exec_task("systemctl suspend"),
            ),
            IgnisMenuItem(
                label="Hibernate",
                on_activate=lambda x: create_exec_task("systemctl hibernate"),
            ),
            IgnisMenuSeparator(),
            IgnisMenuItem(
                label="Reboot",
                on_activate=lambda x: create_exec_task("systemctl reboot"),
            ),
            IgnisMenuItem(
                label="Shutdown",
                on_activate=lambda x: create_exec_task("systemctl poweroff"),
            ),
            IgnisMenuSeparator(),
            IgnisMenuItem(
                label="Logout",
                enabled=hyprland.is_available or niri.is_available,
                on_activate=lambda x: logout(),
            ),
        ),
    )
    return Widget.Button(
        child=Widget.Box(
            child=[Widget.Icon(image="system-shutdown-symbolic", pixel_size=25, hexpand=True), menu]
        ),
        css_classes=["pbutton"],
        on_click=lambda x: menu.popup(),
    )


def left(monitor_name: str) -> Widget.Box:
    return Widget.Box(
        vertical = True, #<<
        child=[workspaces(monitor_name)], spacing=10 #, vertical=True 
    )


def center() -> Widget.Box:
    return Widget.Box(
        vertical = True, #<<
        child=[
            #current_notification(),
            Widget.Separator(vertical=True, css_classes=["middle-separator"]),
            #media(),
        ],
        spacing=10,
    )


def right() -> Widget.Box:
    return Widget.Box(
        vertical = True, #<<
        child=[
            tray(),
            #keyboard_layout(),
            speaker_volume(),
            speaker_slider(),
            clock(),
            power_menu(),
        ],
        spacing=10,
    )


def bar(monitor_id: int = 0) -> Widget.Window:
    monitor_name = Utils.get_monitor(monitor_id).get_connector()  # type: ignore
    return Widget.Window(
        namespace=f"ignis_bar_{monitor_id}",
        monitor=monitor_id,
        anchor=["left", "top", "bottom"],
        
        exclusivity="exclusive",
        child=Widget.CenterBox(
            vertical=True,
            css_classes=["bar"],
            start_widget=left(monitor_name),  # type: ignore
            center_widget=center(),
            end_widget=right(),
        ),
    )


# this will display bar on all monitors
for i in range(Utils.get_n_monitors()):
    bar(i)

[linkfrg]

Everything seems good for me. Probably you have a modified ~/.config/gtk-4.0/gtk.css.
You can override it by using app.widgets_style_priority = "user" and passing style_priority="user" to app.apply_css():

app = IgnisApp.get_default()
app.widgets_style_priority = "user"
app.apply_css(f"{Utils.get_current_dir()}/style.scss", style_priority="user")

[xircon]

Will do, I tried vertical=True but it had no effect. Currently stuck in the land of windows :(

def speaker_slider() -> Widget.Scale:
    return Widget.Scale(
        vertical = True, #<<<<<<<<<<<<<<<<<
        min=0,
        max=100,
        step=1,
        value=audio.speaker.bind("volume"),
        on_change=lambda x: audio.speaker.set_volume(x.value),
        css_classes=["volume-slider"],  # we will customize style in style.css
    )

Is this in the wrong place?

[linkfrg]

You should set min-height instead of min-width in css

[xircon]

Promise no more questions 😄 Thank you again for your patience and your speedy responses.

[linkfrg]

You're welcome. Feel free to ask more questions, GTK is sometimes very confusing

[xircon]

This is what I ended up with, it is not final (is it ever!!!), and very "Teletubbies" 😀

[rdchhddkhv]

Tiddlytubbies is not widely remembered due to its short run low audience engagement and the significant rise of streaming services since then the show began airing on Nickelodeon from July 29th 2021 to March 8th 2023 it only had four seasons and lasted for 2 years in the early 2020s and and children who were born in the 2010s were 11 years old over the age range to watch it while old enough children at this age have shifted their viewing habits toward on demand streaming whereas tiddlytubbies might have been simply overshadow by more significant programming YTV had shifted its overall programming strategy invested as heavily promoting shows it didn't fully owned the rights to potentially impacting tiddlytubbies visibility on air the show didn't receive widespread marketing or accessibility have some other shows on the network tiddlytubbies only aired for a limited time on the YTV from 2021 to 2023 and the Creator GH greenblade stated that he didn't want to extend the show be on the results of its viewership and audience limited run and airing schedule and premiered on a lesser known Canadian channel called YTV from core's entertainment which many show that aired on that channel weren't well received such as airing on the Nicktoons channel in 2022 further contributing to its diminished recognition and its demise limited exposure marketing compared to others show on major networks or streaming services tiddlytubbies may have less extensive marketing and promotion leading to lower awareness among viewers inconsistent viewing schedule it might have aired during off peak viewing hours or was an aired frequently or regularly on the channel while it gained popularity through social media and on the internet it's popularity on the air may have not been as frequent or advertised as its counterpart Teletubbies well the concept of Teletubby babies was unique it may not have resonated with a broad audience as the original Teletubbies

[linkfrg]

thanks for the information

[rdchhddkhv]

You're welcome