XF 2.2 How to target specific custom thread field via CSS?

sbj

Well-known member
I try to style a specific custom thread fields. I can't find out what CSS to use to target specific fields.

Tried so far:

CSS:
[data-field="my_field"]
{
    >.pairs > dd
    {
        background: red;
    }
}

But it doesn't work. Tried other variations but no luck so far.

Anybody could help?
 
Solution
This should work for all thread view types, regardless of the exact template name:

Less:
[data-template*="thread_view"]
{
    .pairs[data-field="test"] > dd
    {
        background: red;
    }
}

Replace test with the name of the custom thread field.
That works in the thread creation view.

Which view are you trying to style it in and which specific section are you targeting?

Edit: I see now - give me a minute, I'm making ciabatta.
 
  • Love
Reactions: sbj
This should work for all thread view types, regardless of the exact template name:

Less:
[data-template*="thread_view"]
{
    .pairs[data-field="test"] > dd
    {
        background: red;
    }
}

Replace test with the name of the custom thread field.
 
Solution
This should work for all thread view types, regardless of the exact template name:

Less:
[data-template*="thread_view"]
{
    .pairs[data-field="test"] > dd
    {
        background: red;
    }
}
Boom, it works. Thanks. I still can't get around these css classes. Like brackets, dots, arrows. Never sure which one to use when and in what order.
 
Back
Top Bottom