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

Add to your extra.less template:
Less:
@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.
 
  • Like
Reactions: sbj
For mobile a different approach would be better, if possible. Same width as your example, but:

Instead of this:

1566496540264.png

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.


1566496941079.webp


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.?
 
Examples:

Screenshot 2019-08-22 at 20.11.11.png


OR something like this:


Screenshot 2019-08-22 at 20.11.59.png


That looks also nice and modern, have to test it though how it would work.
Add this to your extra.less template:
Less:
.structItem-title .label {
    float: right;
}

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


Screenshot 2019-08-22 at 20.18.28.png


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:

Less:
@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.
 
Last edited:
  • Like
Reactions: sbj
Thanks, perfect! Much cleaner approach in my opinion.

Examples:

Screenshot 2019-08-22 at 20.11.11.png



OR something like this:


Screenshot 2019-08-22 at 20.11.59.png
What's the code for this?
 
Less:
@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.
 
  • Like
Reactions: sbj
Back
Top Bottom