XF 2.2 Custom thread fields - Title above field?

Cannabis Ape

Active member
Hi there and a merry christmas.

Can someone show me the snippet to get the title of custom thread fields above the field type? So instead of:

Name: me

it shows:
Name:
me

Cheers.
 
Solution
A couple of ways.

Less:
[data-template = "thread_view"]
{
    .pairs--customField
    {
        &:after
        {
            content: "\a";
            white-space: pre;
        }

        & > dt,
        & > dd
        {
            display: block;
        }      
    }
}

Less:
[data-template = "thread_view"]
{
    .pairs--customField
    {
        padding-bottom: 10px;

        & > dt,
        & > dd
        {
            display: block;
        }      
    }
}

This is probably the best for aesthetics:
Less:
[data-template = "thread_view"]
{
    .pairs--customField
    {
        padding-bottom: 10px;

        &:last-child
        {
            padding-bottom: 0px;
        }

        & > dt,
        & > dd
        {...

Cannabis Ape

Active member
[data-template = "thread_view"] { .pairs--customField > { & dt, & dd { display: block; } } }
That's exactly what I meant but as I have multiple titles and field types, how can I get a break/empty line between each separate title/field type?

Now like this:

Name:
me
Age:
99

To be like this:

Name:
me

Age:
99

I tried a few things within your CSS code but I had some very strange results lol.
 

Brogan

XenForo moderator
Staff member
A couple of ways.

Less:
[data-template = "thread_view"]
{
    .pairs--customField
    {
        &:after
        {
            content: "\a";
            white-space: pre;
        }

        & > dt,
        & > dd
        {
            display: block;
        }      
    }
}

Less:
[data-template = "thread_view"]
{
    .pairs--customField
    {
        padding-bottom: 10px;

        & > dt,
        & > dd
        {
            display: block;
        }      
    }
}

This is probably the best for aesthetics:
Less:
[data-template = "thread_view"]
{
    .pairs--customField
    {
        padding-bottom: 10px;

        &:last-child
        {
            padding-bottom: 0px;
        }

        & > dt,
        & > dd
        {
            display: block;
        }      
    }
}
 
Solution
Top