[Question/Need help] How to center title

[TornaxO7]

Hello, I'm trying to configure wired and I'm almost done. I just need a little help because I just can't find the issue in my config file.

The problem

I'd like to have the title centered over the ScrollText.

The config file

Here's my config file:

``` ( max_notifications: 0, timeout: 10000, poll_interval: 32, replace_enabled: false, replacing_resets_timeout: true, closing_enabled: true, history_length: 10, focus_follows: Mouse, print_to_file: None, min_windows_width: 100, min_window_height: 10, layout_blocks: [ ( name: "root", parent: "", hook: Hook(parent_anchor: TR, self_anchor: TR), offset: Vec2(x: -7.0, y: 7.0), params: NotificationBlock(( monitor: 0, border_width: 3.0, border_rounding: 3.0, //background_color: Color(r: 0.15686, g: 0.15686, b: 0.15686, a: 1.0), background_color: Color(hex: "#EDE9D8"), border_color: Color(hex: "#ebdbb2"), border_color_low: Color(hex: "#82937D"), border_color_critical: Color(hex: "#8A0808"), border_color_paused: Color(hex: "#B2A8A7"), gap: Vec2(x: 0.0, y: 8.0), notification_hook: Hook(parent_anchor: BR, self_anchor: TR), )), ), ( name: "image", parent: "root", hook: Hook(parent_anchor: TL, self_anchor: TL), offset: Vec2(x: 0.0, y: 0.0), // https://github.com/Toqozz/wired-notify/wiki/ImageBlock params: ImageBlock(( image_type: Hint, // We actually want 4px padding, but the border is 3px. padding: Padding(left: 7.0, right: 0.0, top: 7.0, bottom: 7.0), rounding: 1.0, scale_width: 100, scale_height: 100, filter_mode: Lanczos3, )), ), ( name: "summary", parent: "image", hook: Hook(parent_anchor: TR, self_anchor: TL), offset: Vec2(x: 0.0, y: 0.0), // https://github.com/Toqozz/wired-notify/wiki/TextBlock params: TextBlock(( text: "%s", font: "Liberation Sans Bold 15", ellipsize: Middle, color: Color(hex: "#9AB9CB"), color_hovered: Color(hex: "#00A7FF"), padding: Padding(left: 7.0, right: 7.0, top: 7.0, bottom: 0.0), dimensions: (width: (min: 300, max: 300), height: (min: 0, max: 0)), )), ), ( name: "body", parent: "summary", hook: Hook(parent_anchor: BM, self_anchor: MT), offset: Vec2(x: 0.0, y: 0.0), // https://github.com/Toqozz/wired-notify/wiki/ScrollingTextBlock params: ScrollingTextBlock(( text: "%b", font: "Liberation Sans Bold 13", color: Color(hex: "#9AB9C0"), color_hovered: Color(hex: "#00A7FF"), padding: Padding(left: 7.0, right: 7.0, top: 3.0, bottom: 7.0), width: (min: 0, max: 300), scroll_speed: 0.25, lhs_dist: 35.0, rhs_dist: 35.0, scroll_t: 1.0, )), ), //( // name: "progress", // parent: "body", // hook: Hook(parent_anchor: BM, self_anchor: TM), // offset: Vec2(x: 0.0, y: -3.0), // params: ProgressBlock(( // padding: Padding(left: 7.0, right: 7.0, top: 7.0, bottom: 7.0), // border_width: 3.0, // border_rounding: 5.0, // fill_rounding: 3.0, // border_color: Color(hex: "#D7CE9B"), // background_color: Color(hex: "#DFD1B8"), // fill_color: Color(hex: "#B1C9B1"), // width: -1.0, // height: -1.0, // )), //), ], shortcuts: ShortcutsConfig ( notification_interact: 1, notification_close: 2, // notification_closeall: 99, notification_pause: 3, //notification_action1: 3, // notification_action2: 99, // notification_action3: 99, // notification_action4: 99, ), ) ```

Do you have an idea how I can fix this?

[Toqozz]

The normal way to "center" something over something else is to parent it to that thing with the anchor on the middle of both things, sorta like this:

(
    name: "summary",
    parent: "body",
    hook: Hook(parent_anchor: MT, self_anchor: MB),
    offset: Vec2(x: 0.0, y: 0.0),
    params: TextBlock((
...
    )),
),

(
    name: "body",
    parent: "root",
    hook: Hook(parent_anchor: TL, self_anchor: TL),
    offset: Vec2(x: 0.0, y: 0.0),
    params: ScrollingTextBlock((
...
    )),
),

Which would give you the summary text centered over the body text. We can add an image, with the text centered beside the image, like so:

(
    name: "image",
    parent: "body",
    hook: Hook(parent_anchor: TL, self_anchor: MR),
    offset: Vec2(x: 0.0, y: 0.0),
    params: ImageBlock((
...
    )),
),

Which from memory is what the default config does.

This isn't exactly what you asked for though, since you want the text at the top of the image. I don't think there's a way to do that yet besides manually offsetting the image:

(
    name: "image",
    parent: "body",
    hook: Hook(parent_anchor: TL, self_anchor: TL),
    offset: Vec2(x: 0.0, y: -15.0),      // change this to match correctly
    params: ImageBlock((
...
    )),
),

HOWEVER, that got me thinking that I'll just add a text alignment option for TextBlock so you can do it as you tried to in your initial config.

Hopefully I've answered some questions there though.

[TornaxO7]

Hopefully I've answered some questions there though.

Aye! Should I close this issue?

[Toqozz]

I've added an alignment option for text blocks, it's available on master.

You should be able to use it along with the dimensions param to center stuff easily now :):

name: "summary",
parent: "image",
hook: Hook(parent_anchor: TR, self_anchor: TL),
offset: Vec2(x: 0.0, y: 0.0),
// https://github.com/Toqozz/wired-notify/wiki/TextBlock
params: TextBlock((
    text: "%s",
    font: "Liberation Sans Bold 15",
    ellipsize: Middle,
    align: Center,        // here!
...
    dimensions: (width: (min: 300, max: 300), height: (min: 0, max: 0)),
)),