Guide More obvious voting and solution marking for question threads

[FateKid]

Why do this?​

Users often don't realise that question thread posts can by voted on, or that OP can mark as solution.

These simple template edits make it more obvious.

Instead of:


It will be this:



This is still beta because I have not yet worked out how to make the text Mark as solution, change to Unmark as solution when it has been marked (as with the tooltip text).

Two simple template edits:​

In the template app_content_vote.less:​

• Search for @xf-fontSizeLargest and replace with @xf-fontSizeLarge
• Search for .m-faBefore(@fa-var-angle-up); and replace with .m-faBefore(@fa-var-thumbs-up);
• Search for .m-faBefore(@fa-var-angle-down); and replace with .m-faBefore(@fa-var-thumbs-down);

You should now have thumbs up and down. But they are a bit faint so

• Search for opacity: 0.2; and change to something like opacity: 0.7;

Text prompts: in the template post_question_macros:​

(1) Search for <div class="message-column"> and replace with
Code:
<div class="message-column">

<xf:comment>add the word "vote"</xf:comment><span style="color:gray;text-align:center;font-size:11px">Vote:</span>

(style to suit)

(2) Search for <span class="u-srOnly">{{ $post.is_question_solution ? $isSolutionText : $makeSolutionText }}</span>and replace with

<span class="u-srOnly">{{ $post.is_question_solution ? $isSolutionText : $makeSolutionText }}</span>
<xf:comment>add the phrase mark as solution </xf:comment>
<span style="color:gray;text-align:center;font-size:11px">({{ phrase('mark_as_solution') }})</span>

For more dynamic control of styling use a class and define in extra.less

NB:be careful not to erase the closing </a> or you will be sorry.