XF 2.1 How to align prefix and title based on title position?

[sbj]

From this:




To this:

 

[sbj]

Anyone?

 

[BassMan]

What about this?

 

[sbj]

That would be probably much better!

 

[BassMan]

What about mobile?

Leave it default?

 

[BassMan]

Add to your extra.less template:

@media (min-width: @xf-responsiveWide) {
    .structItem-title .label {
        width: 130px;
        text-align: center;
    }
}

This code will leave prefix on screens smaller than your setting for responsive wide intact.

Change width: 130px; for your prefixes to suit, change text-align: center; to right if you want to align text in prefix to the right.

 

[BassMan]

You can have it like this if for some reason you like/need it like this:

 

[sbj]

For mobile a different approach would be better, if possible. Same width as your example, but:

Instead of this:



It would be better, if all prefixes would be like a title and then the thread titles, like this (first one). But only if possible easily.

You can have it like this if for some reason you like/need it like this:

That looks also nice and modern, have to test it though how it would work.


Also is it somehow possible say to enable first approach for node X, and second approach for the rest or sth.?

 

[BassMan]

Examples:




OR something like this:

That looks also nice and modern, have to test it though how it would work.

Add this to your extra.less template:

.structItem-title .label {
    float: right;
}

If you use this on mobile it will look like this:

Also is it somehow possible say to enable first approach for node X, and second approach for the rest or sth.?

Add the data-container-key like this:

@media (min-width: @xf-responsiveWide) {
    [data-container-key="node-92"] .structItem-title .label {
        width: 130px;
        text-align: center;
    }
}

Change node number to suit your needs.

 

[sbj]

Thanks, perfect! Much cleaner approach in my opinion.

Examples:

OR something like this:

What's the code for this?

 

[BassMan]

@media (max-width: @xf-responsiveWide) {
    .structItem-title .label {
        display: block;
        width: 130px;
        text-align: center;
    }
}

You'll need to play with max-width: @xf-responsiveWide to suit your needs for mobile and bigger screens. To have it like this only on mobile change it to max-width: @xf-responsiveMedium, for instance.

Also, remove width: 130px for different look.