More obvious voting and solution marking for question threads

More obvious voting and solution marking for question threads 2022-02-26

没有下载权限
XF 兼容性
  1. 2.2.x
摘要
Enhance your question thread posts with simple template edits for better visibility. Add "vote" and "mark as solution" prompts, adjust opacity for thumbs up/down icons, and customize styling using extra.less for a seamless user experience.

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:
Screenshot 2022-02-23 at 12.52.00.webp

It will be this:
Screenshot 2022-02-23 at 12.51.12.webp


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
代码:
<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">({{ $post.is_question_solution ? $isSolutionText : $makeSolutionText}})</span>

NB: if you unmark as solution, the text does not actually change until you refresh the page.

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.
作者
axtona
浏览
633
首次发布
上次更新
评分 0.00 星 0 个评分
链接失效了吗? 发送消息 给 NP 团队,我们会尽快为您处理!
支持开发者 如果您对测试满意或项目已成功盈利,可点击「更多信息」按钮,通过购买来支持开发者!

来自 axtona 的更多资源

巫师PRO A
巫师PRO 13.1.1
将PHP和任何类型的HTML、CSS和JavaScript代码直接放入内容中!
清理大师PRO A
缓存清理程序还可以在您保存文章或其他项目时自动清除Joomla! 缓存。
自动关闭 + 留言通知 A
自动关闭讨论提醒有助于保持较旧的讨论整洁,而不让您的成员感到意外。

相似的资源

返回
顶部