Search found 3 matches for tut

[TUTs] Chatbox VHG 3.0

Diễn đàn: Lưu trữTrả lời: 75Lượt xem: 11698

 28.06.15 20:20

I. Giới thiệu.







Chatbox này do mình phát triển dựa trên chatbox 8 mặc định của fm. Với giao diện đơn giản và các chức năng được tối ưu đem đến cho các bạn một chatbox vừa gọn nhẹ vừa đa năng.






[You must be [You must be registered and logged in to see this link.] and [You must be registered and logged in to see this link.] to see this image.]





Demo trực tiếp: Chatbox


II. Chức năng



  1. Đăng nhập tự động. Ngay cả khi dissconect cũng sẽ tự đăng nhập lại.
  2. Sử dụng bộ font emoticont thay thế cho emoticont bằng hình ảnh sẵn có của fm để giảm thời gian tải ảnh.
  3. Hỗ trợ Buzz như yahoo.
  4. Hỗ trợ các khung chèn link, chèn ảnh và chèn youtube.
  5. Xem video youtube bằng popup.
  6. Hỗ trợ chat riêng. Với nội dung chat riêng được mã hóa. Cho dù có xem trên link /chatbox cũng sẽ mã hóa. Giúp bảo vệ một ích riêng tư của thành viên. (Chức năng này hiện vẫn đang phát triển, có thể sẽ xảy ra một số lỗi nhỏ. Sẽ cố gắng khắc phục vào version kế.



III. Cài Đặt.


Vào Acp > Moduel > Chatbox > Cấu Hình 
Chọn:


  1. Activate the ChatBox : Có
  2. Display users avatars in the chatbox : Muốn bật avata thì chọn có, còn nếu không thì chọn không.
  3. Chatbox display: Do no display



Vào ACP > Moduel > HTML pages management > Tạo một html mới. Chép toàn bộ code này vào.

HTML:


Thêm vào code này vào index_body chỗ nào tùy thích.. Tốt nhất là đề sau {CHATBOX_TOP}:

Code:
<iframe scrolling="no" width="100%" height="340" src="{page}" frameborder="0" allowfullscreen=""></iframe>




Thay {page} thành địa chỉ trang html bạn tạo ở trên.


IV. Tống Kết


Vậy là xong rồi. Mọi thứ còn lại js sẽ tự động làm. Bạn không cần phải làm gì nữa. Mọi góp ý và thắc mắc vui lòng gửi tại topic này. Xin cám ơn.


Tags: [You must be registered and logged in to see this link.]

[TUTs] Sitemap Forum giao diện Xenforo

Diễn đàn: TUTsTrả lời: 1Lượt xem: 2168

 16.06.15 14:07

Sitemap Forum giao diện Xenforo


Giới thiệu


Sitemap hay còn gọi là sơ đồ diễn đàn - là danh sách giản lược các chỉ mục, giúp người dùng có thể truy cập nhanh chuyên mục mình cần. Trong forumotion, ta có jumpbox với chức năng tương tự, tuy nhiên nó nằm ở dạng select, option tag nên khó chỉnh giao diện, vì lý do này mà một số diễn đàn muốn sử dụng nó như: tạo sơ đồ, khung điều hướng nhanh,... cũng phải nhập thủ công. Trong tutorial này, mình sẽ chuyển jumpbox sang dạng sitemap, sử dụng ul, li tag.
( Copy gần như nguyên văn của @Zzbaivong )

Trong tutorial có sử dụng Gist của @Zzbaivong, các bạn có thể xem qua tại: [Gist] Tạo sitemap cho diễn đàn từ jumpbox

Vì vậy nên đây không hẳn là code do mình làm, chỉ là 1/5 của nó thôi, lão @Zzbaivong nói là "không thích làm nữa vì một số lý do" =))) nên mình hoàn thiện nó trong tutorial này

Topics tagged under tut on DEVs forumvi WrIKgin
Đây là thành quả sau khi thực hiện Tut


Hướng dẫn


ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Chèn đoạn sau vào:
Code:
/* SitemapForum by Mạc Lục Phàm */
body.hiddenOverflow{overflow:hidden;}
.sitemapOpen{background:url('http://i57.servimg.com/u/f57/18/74/01/46/quickn10.png') no-repeat left center;display:inline-block;cursor:pointer;padding:4px;padding-left:24px;font-weight:700;}
#sitemapOverlay{background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;width:100%;height:100%;display:none;z-index:9999;}
#sitemapSection{width:80%;margin:10%;background:#fafafa;border:10px solid #ddd;box-sizing:border-box;}
#sitemapHeading{font-size:16px;line-height:normal;padding:5px 15px;background:#333;color:#fff;font-weight:700;}
#sitemapMain{display:table;width:100%;}
#sitemapMain .sitemapColumn{display:table-cell;}
#sitemapMain .sitemapInhead{padding:5px 20px;background:#eee;}
#sitemapMain .sitemapQuickLinks{display:block;list-style:none;border-bottom:1px solid #eee;}
#sitemapMain .sitemapQuickLinks a{display:block;padding:5px 20px;}
#sitemapMain .sitemapQuickLinks a:hover{background:#eee;}
#zzSitemap{overflow:auto;height:237px;}
#zzSitemap ul{list-style:none;}
#zzSitemap ul li a{display:block;padding:5px 15px;}
#zzSitemap ul li a:hover{background:#eee;}
#zzSitemap ul > li > ul > li{padding-left:15px;}
#sitemapOption{text-align:right;}
#sitemapOption a{display:inline-block;margin:10px 25px;padding:5px 15px;background:#333;color:#fff;border:1px solid #aaa;box-shadow:0 1px 2px #eee;cursor:pointer;}


ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Topics tagged under tut on DEVs forumvi AjouterCreate a new javascript
Title * : Sitemap Forum
Placement : In all the pages
Javascript Code * :
Code:
$(function() {
  var $smOpen = $('.sitemapOpen'),
      $smClose = $('#sitemapClose'),
      $smMain = $('#sitemapOverlay'),
      $bodyOv = $('body');

  $smOpen.click(function() {
    $smMain.fadeIn();
    $bodyOv.addClas('hiddenOverflow');
  });
  $smClose.click(function() {
    $smMain.fadeOut();
    $bodyOv.removeClas('hiddenOverflow');
  });

  /* Chuyển jumpbox thành sitemap by Zzbaivong */
  var $cat = $("<ul>", {
    "data-level": 2,
    "class": "group-map"
  });

  $("#zzSitemap").html($cat);

  var $link = "";
  var $li = "";
  var catLevel = 2;
  var currLevel = 0;

  $('option', '[name="selected_id"]').each(function() {

    var $this = $(this);
    var $val = $this.val();

    if ($val != "-1") {

      var $html = $this.html();
      var $name = $html.match(/^.*\|--(.*)/)[1];
      currLevel = $html.split(/&nbsp;|\|/).length;

      if (catLevel < currLevel) {
        $li.addClass("cat-map");
        $("<ul>", {
          "data-level": currLevel,
          "class": "group-map"
        }).appendTo($li);
      }

      $link = $("<a>", {
        href: "/" + $val + "-jump",
        text: $name
      });

      $li = $("<li>", {
        html: $link
      });

      $li.appendTo('.group-map[data-level="' + currLevel + '"]:last');

      catLevel = currLevel;

    }

  });

});


ACP >> Display >> Templates >> Quản Lý Tổng Thể >> overall_footer_end
Tìm
Code:
<!-- BEGIN switch_facebook_login -->


Chèn vào trước nó:
Code:
<div id="sitemapOverlay">
  <div id="sitemapSection">
    <h3 id="sitemapHeading"> Điều hướng nhanh </h3>
 
    <div id="sitemapMain">
      <div class="sitemapColumn" style="width:30%;border-right:1px solid #ddd;">
        <div class="sitemapInhead"> Liên kết thông dụng </div>
        <ul class="sitemapQuickLinks">
          <li><a href="/">Trang chủ</a></li>
          <li><a href="/forum">Diễn đàn</a></li>
          <!-- BEGIN switch_user_logged_out -->
          <li><a href="/register">Đăng ký</a></li>
          <li><a href="/login">Đăng nhập</a></li>
          <!-- END switch_user_logged_out -->
          <!-- BEGIN switch_user_logged_in -->
          <li><a href="/login?logout=1">Thoát</a></li>
          <!-- END switch_user_logged_in -->
        </ul>
        <!-- BEGIN switch_user_logged_in -->
        <ul class="sitemapQuickLinks">
          <li><a href="/profile?mode=editprofile">Sửa thông tin</a></li>
          <li><a href="/profile?mode=editprofile&page_profil=avatars">Đổi ảnh đại diện</a></li>
          <li><a href="/search?search_id=newposts">Xem bài viết mới</a></li>
          <li><a href="/privmsg?folder=inbox">Tin nhắn riêng</a></li>
        </ul>
        <!-- END switch_user_logged_in -->
      </div>
      <div class="sitemapColumn" style="width:70%">
        <div class="sitemapInhead"> Danh sách diễn đàn </div>
        <div id="zzSitemap"></div>
      </div>
    </div>
 
    <div id="sitemapOption">
      <a id="sitemapClose"> Đóng </a>
    </div>
  </div>
</div>


Tiếp theo là nút nhấn vào sẽ hiện sitemap:

Code:
<a class="sitemapOpen" href="#sitemap"> Điều hướng nhanh </a>

Các bạn có thể để nó ở bất cứ chỗ nào các bạn cho là phù hợp.


Lưu ý

Như đã nói ở phần hướng dẫn, tutorial này dựa vào jumpbox mặc định của forumotion chuyển về dạng sitemap, nếu bạn chưa biết nó là cái gì thì hình dáng của nó như thế này ở cuối forum:
Topics tagged under tut on DEVs forumvi 4pWLjlq

Nếu bạn chỉ ẩn nó thì không sao, tut vẫn hoạt động bình thường, nhưng nếu bạn đã xóa nó khỏi forum thì bắt buộc phải thêm lại.
Đây là code của nó trong overall_footer_begin
Code:
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}" id="qjump">
 <fieldset>{S_JUMPBOX_SELECT}</fieldset>
 </form>



Nguồn

Zzbaivong - devs.forumvi.com
KirigayaKazuto (Mạc Lục Phàm) - devs.forumvi.com
Tags: #tutorial #tut #sitemap #jumbox #xenforo #gist

[TUTs] Việt hóa Post option

Diễn đàn: TUTsTrả lời: 9Lượt xem: 3462

 15.06.15 10:09

Đây là cách để đưa các nút Quote, Edit, Delete,... từ dạng hình ảnh về dạng văn bản thuần.

Lưu ý: Tut này được viết dựa trên mã nguồn mặc định của viewtopic_body trên tất cả các version. Nếu bạn đã đổi template này thì phải kiểm tra lại phần tử bọc ngoài của các nút này.

Đây là kết quả bạn có được:
https://jsfiddle.net/maclucpham/Lgk8rh1u/embedded/result/


Hướng dẫn


ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Chèn đoạn này vào CSS:
Code:
/* Việt hóa postOption */
a[href^="/"][href*="mode="][href*="p="] {display:inline-block;padding:2px 8px;}
a[href^="/"][href*="mode="][href*="p="] .optionpLink {padding-left:5px;}


ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Topics tagged under tut on DEVs forumvi AjouterCreate a new javascript

Title * : Việt hóa postOption
Placement : In the topic
Javascript Code * :

Code:
$(function() {
  var version = 0;
  var selection = [".posting-icons", ".post-options", ".profile-icons"][version];
  var topicOption = {
    'edit': {
      text: "Sửa bài viết",
      icon: "pencil"
    },
    'delete': {
      text: "Xóa bài viết",
      icon: "times"
    },
    'quote': {
      text: "Trích dẫn",
      icon: "comment"
    },
    'ip': {
      text: "Xem IP",
      icon: "flag"
    }
  };
  $.each(topicOption, function(mode, val) {
    $(selection).find('a[href*=' + mode + ']').html('<i class="fa fa-' + val.icon + '"></i><span class="optionpLink">' + val.text + '</span>');
  });
});


Ghi chú:

Trong hướng dẫn trên ở dòng thứ 2, các bạn sẽ thấy số 0:
Code:
 var version = 0;


Đây là phiên bản Forumotion của bạn. Mặc định mình để là invision
Thay vào đó là một trong các giá trị sau tùy theo phiên bản của forum bạn:
0 : Invision
1 : punBB & phpBB2
2 : phpBB3

Nếu template viewtopic_body của bạn đã thay đổi thì dòng thứ 2 và 3:
Code:
 var version = 0;
  var selection = [".posting-icons", ".post-options", ".profile-icons"][version];


Các bạn sử thành
Code:
 var selection = "selector";

Thay selector thành Phần tử bọc ngoài của postOption


Nếu forum bạn chưa có bộ Font Awesome thì vào over_header đặt sau
Code:
{CSS}

đoạn code này:
Code:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />


Để tìm hiểu về bộ font này, mời các bạn xem qua bài viết: [Tips] Huớng dẫn sử dụng Font Awesome


Nguồn


KirigayaKazuto (Mạc Lục Phàm) - devs.forumvi.com
Tags: #mod #tutorial #tut #việt-hóa #post-option


Back to top