XenForo [cXF] Move thread status icons

[CR LEAKS]

Would you like to have thread status icons on the left side before thread title?



Add this to your extra.less template:

@media (min-width: @xf-responsiveMedium) {
[data-template="forum_view"], &[data-template="whats_new"], &[data-template="whats_new_posts"],
&[data-template="conversation_list"], &[data-template="forum_view_type_suggestion"],
&[data-template="forum_view_type_question"], &[data-template="forum_view_type_article"],
&[data-template="search_forum_view"] {
.structItem-statuses {
float: none;
&>li {
margin-left: 0;
padding-right: 5px;
padding-top: 1px;
}
}
}
}

*this will work on thread list, what's new and new posts page, on mobile view there will be no difference

Would you like to move only some of the thread status icons?
Examples:



Add this to your extra.less template:

@media (min-width: @xf-responsiveMedium) {
[data-template="forum_view"], &[data-template="whats_new"], &[data-template="whats_new_posts"],
&[data-template="conversation_list"], &[data-template="forum_view_type_suggestion"],
&[data-template="forum_view_type_question"], &[data-template="forum_view_type_article"],
&[data-template="search_forum_view"] {
    .structItem-statuses {
        float: none;
        >li {
            float: none;
            margin-left: 0px;
            .structItem-status--sticky, .structItem-status--attention {
                float: left;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--watched {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--poll {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--locked {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--deleted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--moderated {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--upvoted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--downvoted {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--discussion {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--article {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--question {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--suggestion {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--solved {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--redirect {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--starred {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--resource {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
            .structItem-status--attention {
                float: right;
                padding-left: 5px;
                padding-top: 1px;
            }
        }
    }
}
}

To change the icon side edit float class for each icon and choose left or right.

Note: make sure you always have these combinations: if you have float: left, make sure you have padding-right OR if you have float: right, make sure you have padding-left.

*this will work on thread list, what's new and new posts page, on mobile view there will be no difference