XF 2 Tip More obvious voting and solution marking for question threads

BattleKing

Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
Joined
May 24, 2020
Messages
3,514
Points
523

Reputation:

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:

1645639041800.png



It will be this:


1645639051800.png



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


Code:
       <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.
 
Top