Inline property style

[fslef]

Hello community,

In the post here, @Craig posted a screenshot with inline properties are nicely formatted.

Is there anyone could explain me how to do the same ?

Thanks in advance,

[Craig]

Hi @fslef,

It’s a custom CSS snippet that I use to format inline Dataview fields. Here it is:

.obsidian/snippets/dataview-inline-fields.css

/* Make task pills cuter. */
span.dataview.inline-field {
    white-space: nowrap;
}

span.dataview.inline-field-key {
    border: thin solid var(--text-muted);
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: hsl(
        var(--accent-h), 
        var(--accent-s), 
        calc(var(--accent-l) / 0.5 ));
}

span.dataview.inline-field-value {
    border: thin solid var(--text-muted);
    border-left: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

[fslef]

awesome. Thanks for sharing @Craig.

Is there any way to make this style applied to any pages as well, not only to dataview.
(sorry but i’m not confortable with css)

[Craig]

You’re welcome!

This CSS snippet applies only to inline Dataview fields.

Did you have another page element in mind that you wanted to style like this?

[fslef]

@Craig

Did you have another page element in mind that you wan

just any inline field from any pages but is not from a dataview query.
(e.g any task I can add to my daily journal)

[fslef]

Searching how to proceed, I’ve noticed your css snippet is working as expected but only in read view.
I am wondering if the same style can be applied in edit mode as well.

[Craig]

No, I’m afraid it’s not possible to apply the inline field formatting in edit mode. Or, at least, I don’t know how it would be done.

In reading mode, the inline fields have specific style ids that can we can target with CSS. But in edit mode, they just appear as “bare links” with no special styles. So I don’t see any way to style them.

Sorry.

[fslef]

Ok then. No problem If this is not possible.
Thanks for your support anyway