1. 游客欢迎来到XFUM社区,请仔细阅读本站规则
    下载中心的资源要先点赞再购买才能下载,商店是不需要点赞的
  2. 如何购买积分下载资源,请看此贴

插件 教程 [SSD] User Group Badges & Promotions | 徽章插件和设置教程

admin2017-03-30

  1. admin  2017-03-30

    积分
    #1
    先发一个效果图,另外本站也在使用中,首先你需要购买帖子中的插件 [SSD] User Group Badges,然后按教程去做。
    upload_2016-6-7_10-18-37.png
    Create a User Group |创建用户组​

    First thing we want to do is create a new user group in XenForo:
    Go to:
    ACP --> Users --> User Groups --> Create New User Group 后台 - 用户管理 - 用户组,新建一个用户组(想用多个徽章就需要创建多个用户组,然后使用【用户组提升】来改变用户的第二用户组)
    1. upload_2016-6-7_10-27-50.png
    2. upload_2016-6-7_10-23-1.png
    Adding The Badge To The User Group |添加徽章到用户组中​
    Scroll down, and select "Glyph Icon" as your badge type to use Font Awesome.打开用户组列表选择一个用户组,找到如图位置选择 Glyph Icon。
    upload_2017-3-30_15-46-39.png

    Badge Class will be the icon, so lets head over to Font Awesome's icon list: 接下来就是到 fontawesome 官网去找你想要的图标字体
    http://fontawesome.io/icons/

    I'm using the graduation cap icon but use whatever you wish: 笔者选择了 graduation 博士帽,点击进去找到它的代码是
    代码:
    fa fa-graduation-cap

    upload_2016-6-7_10-33-21.png

    If you click on the icon, you'll see it says "fa-graduation-cap"
    upload_2016-6-7_10-35-47.png


    Type: fa fa-graduation-cap into the Badge Class field. 然后就是把 fa fa-graduation-cap 填写到 Badge Class 选项那里(如下图)

    Now head over to Flat UI Colors: 这里推荐两个选择背景颜色的网站,用的都是当前流行的扁平化配色
    https://flatuicolors.com/
    Flat UI Colors
    Copy Paste Color Pallette from Flat UI Theme
    https://FLATUICOLORS.COM



    We will be using Midnight Blue (#2c3e50) for our color, click the color which copies it, and paste into the Badge Background Color field: 最后我们选择了 #2c3e50 这个颜色并填写到Badge Background Color 选框中。

    It should now look like this:
    upload_2016-6-7_10-29-48.png


    Our user group is now done, scroll to the very bottom and click, Save User Group. 这样你的用户组就能再帖子列表中看到徽章了。

    Add The User Group Promotion | 新增用户组提升​
    Now click User Group Promotions, and click Create New Promotion: 在后台 -用户管理 -用户组里面有个叫【用户组提升】的选项,点击进去,添加新用户组提升策略
    1. upload_2016-6-7_10-40-49.png
    2. upload_2016-6-7_10-41-34.png


    Title will be Veteran Member, user group obviously Veteran Member and the promotion should be active by default. 输入你需要的名字,譬如:老兵,然后勾选 老兵 这个用户组(首先你得先创建几个用户组,用于徽章的使用)
    upload_2016-6-7_10-43-11.png

    Now click Apply This Promotion While... and scroll down to Content and Achievements: 然后点击选项卡第二项
    upload_2017-3-30_16-5-6.png


    The number here should be identical to what makes a veteran member in your User Title Ladder, type it in, scroll to the bottom and save the promotion.
    这里笔者勾选了 用户发布表少于 X 条信息,并填入1000(意思就是用户发了1000帖),最后确定保存,只要用户达到这个要求就自动提升用户组。

    upload_2016-6-7_10-44-9.png

    Rebuild Caches| 创建用户组提升后需要重建缓存​
    Head over to Tools and click Rebuild Caches: 后台 - 系统工具 - 重建缓存
    upload_2016-6-7_10-46-9.png


    Scroll down and rebuild your User Group Promotions: 找到 重建用户组提升 点击立即重建。
    upload_2016-6-7_10-47-12.png

    Check your forum, you should now have a cool Glyph beside your veteran members postbit!! :) 到现在你已经全部设置完成,可以正常使用徽章插件了。
     

    附件文件:

  2. admin  2017-03-30

    积分
    #2
    补上一个附件教程:在论坛帮助页面加入徽章升级的介绍
    All we're gonna do is use the Help Pages in XenForo to create this: 在后台 - 控制面板 - 帮助页面 -创建帮助页面
    upload_2016-6-9_12-11-40.png

    This is how I filled in the fields but fill yours in however you want: 输入标题、描述还有URL短语
    upload_2016-6-9_12-12-35.png

    In the page content field, I made a small HTML table and placed the code there. 笔者创建了一个简单的HTML文件内容如下,有需要的请根据自己情况修改

    Now you coding ninja's might look at this and puke, it's the best I could do with my limited knowledge though.
    HTML:
    <table class="badges">
    
    <tr>
        <th>Badge</th>
        <th>Name</th>
        <th>Earned After...</th>
    </tr>
    
    <tr>
        <td>
        <i class="fa fa-star"    style="background-color:#c0392b;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Admin</td>
        <td>N/A</td>
    </tr>
    
    <tr>
        <td>
        <i class="fa fa-shield"    style="background-color:#d35400;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Moderator</td>
        <td>N/A</td>
    </tr>
    
    <tr>
        <td>
        <i class="fa fa-comment"    style="background-color:#2ecc71;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Member</td>
        <td>100 posts</td>
      </tr>
    <tr>
        <td>
        <i class="fa fa-comment"    style="background-color:#1abc9c;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Active Member</td>
        <td>250 posts</td>
      </tr>
    <tr>
        <td>
        <i class="fa fa-comment"    style="background-color:#9b59b6;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Well-Known Member</td>
        <td>500 posts</td>
      </tr>
    <tr>
        <td>
        <i class="fa fa-graduation-cap"    style="background-color:#34495e;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Veteran Member</td>
        <td>1000 posts</td>
      </tr>
    <tr>
        <td>
        <i class="fa fa-trophy"    style="background-color:#7f8c8d;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Supporting Member</td>
        <td>Purchse of a supporting membership</td>
      </tr>
    <tr>
        <td>
        <i class="fa fa-shopping-cart"    style="background-color:#e67e22;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Vendor</td>
        <td>You become a Vendor</td>
      </tr>
    <tr>
        <td>
        <i class="fa fa-file-image-o"    style="background-color:#f1c40f;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Gallery Contributer</td>
        <td>10 images to the Image Gallery</td>
      </tr>
    <tr>
        <td>
        <i class="fa fa-thumbs-up"    style="background-color:#bdc3c7;color:white;-webkit-border-radius: 100%;-moz-border-radius: 100%;-khtml-border-radius: 100%;border-radius: 100%;width: 24px;height: 24px;text-align: center;line-height: 24px;"></i>
        </td>
        <td>Well Liked</td>
        <td>100 likes are recieved</td>
      </tr>
    </table>
    
    </body>
    </html>
    Now add this code to your EXTRA.CSS file:
    代码:
    table.badges th {
        text-align:left;   
        border:none;
        outline:none;
    }
    
    table.badges tr td {
        border:none;
        outline:none;
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    In the Help Section you should now have a nice little chart foe your members: 这将帮助你的会员了解如何获取徽章
    upload_2016-6-9_12-17-40.png
    To alter the code for your needs, just change the values of which font icon you used, and the appropriate background color:
    如果你喜欢这段html的配色,其实只要找到代码中画圈部分设置徽章就可以了。
    upload_2016-6-9_12-19-37.png
     
    • plair
      plair CUST

      plair

       
      注册日期
      2016-09-09
      帖子
      6
      点赞
      0
      点数
      3
      会话

    plair  2017-03-30

    积分
    #3
    好复杂的感觉
     
    • plair
      plair CUST

      plair

       
      注册日期
      2016-09-09
      帖子
      6
      点赞
      0
      点数
      3
      会话

    plair  2017-03-30

    积分
    #4
    这只是用户组标识,不能算是徽章插件,要有发,有收才行
     
    • plair
      plair CUST

      plair

       
      注册日期
      2016-09-09
      帖子
      6
      点赞
      0
      点数
      3
      会话

    plair  2017-03-30

    积分
    #5
    还真扣小数点后两位,这也是赞啊x'D
     
    • Feiyang
      Feiyang Newbie

      Feiyang

       
      注册日期
      2017-01-22
      帖子
      6
      点赞
      0
      点数
      3
      会话

    Feiyang  2017-05-16

    积分
    #6
    666666这玩意不错啊
     
    • Feiyang
      Feiyang Newbie

      Feiyang

       
      注册日期
      2017-01-22
      帖子
      6
      点赞
      0
      点数
      3
      会话

    Feiyang  2017-05-17

    积分
    #7
    附件与描述不符#手动滑稽
    7463c47511927b74.png
    47826feffac31726.png
    这家也和TH一样改名过了?
     
  3. admin  2017-05-17

    积分
    #8
    可能被人接手开发改过吧,之前卖5刀的,结果有人卖了分享出去,作者才怒删。
     
  4. admin  2017-05-17

    积分
    #9
    @Feiyang 引用了才发现你居然用图床? XF默认编辑器 QQ截图 Ctrl +V 就能粘贴到到编辑器,并自动转换成图片附件的,超方便。
     
  5. diguo520  2017-05-19

    积分
    #10
    我还没有下载呢