New footer css

[jessebot]

Hi Textual friends!

Sorry if this has been asked before, but I am using the new footer in 0.63.3 and my tcss has broken. Here's what I was doing before:

$orange: rgb(253,205,54);
$light_cornflower: rgb(122,162,247);
$navy: rgb(35,35,54);

/* Matches the bottom footer text on every page */
Footer {
    background: $background 1%;
}

Footer .footer--description {
    color: $light_cornflower;
    background: $navy 50%;
}

Footer .footer--key {
    color: $navy;
    background: $light_cornflower;
}

Footer .footer--highlight {
    color: $orange;
    background: $navy 50%;
}

Footer .footer--highlight-key {
    color: $navy;
    background: $orange;
}

which would give me the following:

Now after the textual update to 0.63.3 this tcss doesn't seem to work, so the footer looks like this:

I didn't see any notes in the docs on tcss updates, but please let me know if I missed an announcement somewhere else.

Best regards and thanks for all you do :)

[TomJGooding]

The best way to understand how to style any widget in Textual is to have a look at the source code. I agree it would be nice if this was more discoverable by including this somehow in the docs..

You'll see the new Footer is composed of FooterKey widgets and doesn't have any of those old component classes.

Here's my quick attempt to replicate the styling but you might need to experiment! Unfortunately it looks like the new Footer doesn't have any gap between the key and the description which doesn't look great if you've added a background for the key - I might raise an issue for that.

from textual.app import App, ComposeResult
from textual.widgets import ClassicFooter, Footer, Static


class FooterApp(App):
    BINDINGS = [("space", "switch_footer", "Switch Footer")]

    CSS = """
    $orange: rgb(253,205,54);
    $light_cornflower: rgb(122,162,247);
    $navy: rgb(35,35,54);

    Screen {
        align: center middle;
    }

    #footer-type-label {
        width: auto;
    }

    ClassicFooter {
        background: $background 1%;
    }

    ClassicFooter .footer--description {
        color: $light_cornflower;
        background: $navy 50%;
    }

    ClassicFooter .footer--key {
        color: $navy;
        background: $light_cornflower;
    }

    ClassicFooter .footer--highlight {
        color: $orange;
        background: $navy 50%;
    }

    ClassicFooter .footer--highlight-key {
        color: $navy;
        background: $orange;
    }

    Footer {
        background: $background 1%;
    }

    Footer > FooterKey {
        color: $light_cornflower;
        background: $navy 50%;
        .footer-key--key {
            color: $navy;
            background: $light_cornflower;
        }

        &:hover {
            color: $orange;
            background: $navy 50%;
            .footer-key--key {
                color: $navy;
                background: $orange;
            }
        }
    }
    """

    footer_type = "classic"

    def compose(self) -> ComposeResult:
        yield Static(
            f"{self.footer_type.title()} Footer",
            id="footer-type-label",
        )
        yield ClassicFooter()

    def action_switch_footer(self) -> None:
        if self.footer_type == "classic":
            self.query_one(ClassicFooter).remove()
            self.mount(Footer())
            self.footer_type = "new"
        else:
            self.query_one(Footer).remove()
            self.mount(ClassicFooter())
            self.footer_type = "classic"

        self.query_one(Static).update(
            f"{self.footer_type.title()} Footer",
        )


if __name__ == "__main__":
    app = FooterApp()
    app.run()

[jessebot]

awesome, thank you so much! This worked, but you're right, there is a weird missing space

other than that, I'm good to go :)