Push Notification (thông báo đẩy) đang được ưa chuộng ở nhiều trang web hiện đại, nhằm gửi thông báo quan trọng đến người dùng, ngay trên trình duyệt của họ.

Hình thức gửi thông báo này có phần tương tự API HTML5 Notification trước đây, nhưng tối ưu hơn ở điểm có thể gửi thông báo ngay cả khi người dùng không mở trang web. Và nó cũng thân thiện với người dùng hơn so với hình thức gửi Email vì nội dung sẽ hiển thị ngay khi mở trình duyệt và họ có thể dừng nhận tin bất kỳ lúc nào.

Để ứng dụng công nghệ Push Notification thì trang web của bạn phải được bật SSL (HTTPS), và cấu hình server khá rắc rối. Nếu làm thế thì Forumotion xem như vô vọng rồi. Vì vậy, chúng ta sẽ dùng một dịch vụ trong gian là OneSignal để gửi thông báo. Có nhiều dịch vụ tương tự bao gồm miễn phí và trả phí, có cả từ Việt Nam nữa, nhưng mình chọn OneSignal vì nó cho phép tùy biến tốt hơn và hoàn toàn miễn phí.

Demo

Hướng dẫn cài đặt

Vì bài viết chứa rất nhiều hình ảnh nên mình sẽ chỉ để hình thu nhỏ, các bạn đọc hướng dẫn khó hiểu thì nhấn vào đó để xem hình gốc.

Bước 1

Mở trang OneSignal.com, nhấn vào nút Sign up free để đăng ký tài khoản.



Bạn có thể dùng tài khoản Github, Facebook có sẵn, hoặc dùng Email của bạn.
Trong mục Company or Organization Name, hãy nhập tên diễn đàn của bạn.

Bước 2

Sau khi đăng ký thành công, đăng nhập vào trang quản lý, lúc này bạn chưa có ứng dụng nào được tạo.



Nhấn Add a new app để tạo ứng dụng mới.
Trong mục App name, điền tên diễn đàn của bạn.
Nhất Create để tạo ứng dụng.

Bước 3

Chọn nền tảng cho ứng dụng vừa tạo.



Chọn Website Push, vì diễn đàn cũng Forumotion thuộc kiểu trang web.
Nhấn Next để tiếp tục.

Bước 4

Chọn nền tảng để cấu hình.



Chọn Google Chrome & Mozilla Firefox để cấu hình trước. Nếu bạn nào sử dụng Mac thì cấu hình Safari trước cũng được.
Nhấn Next để tiếp tục.

Bước 5

Cấu hình cho Google Chrome và Mozilla Firefox.

Để thực hiện được bước này, bạn phải có Server API Key và Sender ID.

Hướng dẫn tạo Server API Key và Sender ID:

Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.



Site URL: Điền URL diễn đàn của bạn. Ví dụ:

Code:

http://devs.forumvi.com

Google Server API Key: Điền Server API Key của ứng dụng bạn tạo trên Google Services Wizard.
Default Notification Icon URL: Điền URL icon, kích thước tối thiểu 192 x 192 px. Bạn nên dùng logo của diễn đàn, nếu không, có thể dùng URL sau:

Code:

http://i.imgur.com/srF9Tzi.png

Tích vào My site is not fully HTTPS.
Choose Subdomain: Nên điền tên miền diễn đàn, nó sẽ được dùng làm tên miền phụ của OneSignal. Ví dụ mình điền devs, nó sẽ thành:

Code:

https://devs.onesignal.com

Google Project Number: Điền Sender ID của ứng dụng bạn tạo trên Google Services Wizard.
Nhấn Save và qua bước tiếp theo.

Bước 6

Chọn bộ SDK để tích hợp vào diễn đàn.



Chọn Website Push.
Nhấn Next để tiếp tục.

Bước 7

Cài đặt SDK của OneSignal vào diễn đàn.



Ghi lại mã Your App ID.
Không đóng OneSignal. Đi đến diễn đàn của bạn để cài đặt SDK.
Lưu ý không dùng trình duyệt ở chế độ ẩn danh, tắt các tiện ích chặn Popup và nên dùng Google Chrome.

Sao chép và chỉnh sửa code sau:

Code:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
    var OneSignal = OneSignal || [];
    OneSignal.push(['init', {
        appId: 'APP_ID',
        safari_web_id: 'SAFARI_WEB_ID',
        autoRegister: true,
        subdomainName: 'SUBDOMAIN',
        notifyButton: {
            enable: true,
            size: 'small',
            position: 'bottom-left',
            prenotify: true,
            showCredit: false,
            text: {
                'tip.state.unsubscribed': 'Đăng ký nhận thông báo',
                'tip.state.subscribed': 'Bạn đã đăng ký nhận thông báo',
                'tip.state.blocked': 'Bạn đã chặn hiển thị thông báo',
                'message.prenotify': 'Click để đăng ký nhận thông báo',
                'message.action.subscribed': 'Cảm ơn bạn đã đăng ký!',
                'message.action.resubscribed': 'Bạn đã đăng ký nhận thông báo',
                'message.action.unsubscribed': 'Bạn đã hủy đăng ký nhận thông báo',
                'dialog.main.title': 'Quản lý thông báo',
                'dialog.main.button.subscribe': 'ĐĂNG KÝ',
                'dialog.main.button.unsubscribe': 'HỦY ĐĂNG KÝ',
                'dialog.blocked.title': 'Bỏ chặn thông báo',
                'dialog.blocked.message': 'Thực hiện các hướng dẫn sau để cho phép thông báo:'
            }
        },
        welcomeNotification: {
            title: 'SITE_NAME',
            message: 'Cảm ơn bạn đã đăng ký!'
        },
        promptOptions: {
            siteName: 'SITE_NAME',
            actionMessage: 'Chúng tôi muốn hiển thị thông báo cho bạn khi có bài viết hoặc cập nhật mới.',
            exampleNotificationTitle: 'Thông báo mẫu',
            exampleNotificationMessage: 'Ví dụ cách thông báo sẽ hiển thị',
            exampleNotificationCaption: 'Bạn có thể dừng nhận thông báo bất kỳ lúc nào',
            acceptButtonText: 'CHO PHÉP',
            cancelButtonText: 'BỎ QUA'
        }
    }]);
</script>

Trong code trên:
Thay APP_ID bằng mã Your App ID vừa lấy.
Thay SUBDOMAIN bằng tên miền phụ từ OneSignal tạo ở Bước 5 (mục Choose Subdomain).
Thay 2 vị trí SITE_NAME bằng tên diễn đàn của bạn.

Sau khi chỉnh sửa xong, mở template overall_header:
ACP >> Display >> Templates >> General >> overall_header

Tìm </head> và thêm code vừa chỉnh sửa vào phía trước nó.
Save template và Publish.

Bước 8

Kiểm tra hoạt động. Truy cập diễn đàn của bạn và kiểm tra thông báo.



Nhấn CHO PHÉP trong bảng yêu cầu xác nhận hiện ra. Nếu không hiện thì có thể code bạn sửa bị sai, kiểm tra lại Bước 7.

Sau đó một Popup sẽ hiện ra. Nhấn Cho phép (Allow) khi được yêu cầu xác nhận hiển thị thông báo.



Nếu nó không hiện, kiểm tra xem bạn có dùng tiện ích chặn Popup không, nếu có thì tắt nó đi, rồi nhấn vào icon thông báo ở góc dưới, bên trái diễn đàn.
Nếu bạn dùng trình duyệt ẩn danh sẽ không thể cho phép hiển thị thông báo được.

Bước 9

Kiểm tra người dùng nhận thông báo. Lúc này thì đó chính là bạn.



Nhấn vào nút Check Subscribed Users.
Nếu bạn làm Bước 8 đúng thì sẽ qua được bước này. Nhấn Next để tiếp tục.

Bước 10

Kiểm tra hoạt động của ứng dụng.



Nhấp vào nút Send Test Notification, một thông báo sẽ được hiện ra.



Nhấn vào thông báo vừa hiện ra, trình duyệt sẽ mở một tab mới, dẫn đến trang kiểm tra ứng dụng hoạt động.



Tắt trang kiểm tra đó và quay lại trang cấu hình. Nhấn vào nút Check Notification Status.
Nhấn Done.



Vậy là bạn đã cấu hình xong cho Google Chrome và Mozilla Firefox. Nhấn Done để kết thúc.

Bước 11

Cấu hình cho Safari.



Nhấn vào App Settings.
Nhấn nút Configure ở dòng Apple Safari.

Bước 12

Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.



Site Name: Điền tên diễn đàn của bạn
Site URL: Điền URL diễn đàn của bạn.
Không tích vào I'd like to upload my own .p12 certificate
Tích vào I'd like to upload my own notification icons, và tải lên logo diễn đàn của bạn theo các kích thước được yêu cầu. Nếu không, bạn có thể tải về Bộ icon BELL để sử dụng.
Nhấn Save và qua bước tiếp theo.

Bước 13

Lấy mã Web ID cho Safari



Đóng Dialog lại, bằng cách nhấn vào Kí hiệu X.
Do mình không có máy Mac nên không hướng dẫn tiếp được. Hơn nữa, bước tiếp theo chỉ là kiểm thử ứng dụng tương tự như Google Chrome và Mozilla Firefox, chỉ còn thêm Web ID cho Safari vào code mà còn sai nữa thì mình cũng chịu.
Dù sao bạn cũng yên tâm, mình đã nhờ người kiểm tra bằng Safari trên Mac rồi, đảm bảo hoạt động.



Sau khi đóng Dialog thì tại dòng cấu hình Apple Safari bạn sẽ thấy mã Web ID của nó, sao chép lại.
Đi đến diễn đàn của bạn, mở template overall_header.
Tìm trong code mà bạn đã thêm vào ở Bước 7.
Thay SAFARI_WEB_ID bằng mã Web ID mà bạn vừa lấy được.
Save template và Publish.

Vậy là xong rồi đó, giờ bạn đã có thể tạo thông báo cho người dùng (nếu họ cho phép).

Cách tạo thông báo

Nhấn New Message
Điền tiêu đề thông báo trong mục Title và nội dung trong mục Content.



Nhấn vào Options để mở tùy chọn thêm.



Mở mục Launch URL và điền URL, để khi người dùng nhấn vào thông báo, trình duyệt sẽ chuyển đến URL đó.

Các tùy chọn khác, ít dùng hơn:
Include Additional Data: Bạn sẽ cần biết cách dùng API, có kiến thức javascript kha khá mới dùng được.
Include Android / iOS Action Buttons: Dùng cho ứng dụng Web, không sài được.
Include Chrome Web Push Action Buttons: Tùy chọn này chỉ hoạt động trên Google Chrome 48+, nó cho phép tạo thêm tối đa 2 nút phụ bên dưới thông báo.



Sau khi thông báo được gửi, bạn cũng có thể xem thống kê số người dùng tương tác với nó.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #firefox #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #notification #chrome #safari

Trong forum về code như Devs forumvi thì vấn đề màu mè cho khung code luôn được đặt lên hàng đầu. :D

Trước đây, mình đã có hướng dẫn vài cách ứng dụng các plugin syntax highlighter cho forum, mỗi cái có ưu và nhược điểm riêng, tạm kể ra vài tội như:
- Google Code Prettify: Tự nhận diện ngôn ngữ nhưng không chính xác lắm, xử lý rất chậm khi gặp code dài, kích thước file js lớn.
- Prismjs: Lỗi ở một số mã Regexp phức tạp, không tự nhận diện ngôn ngữ.
- CodeMirror: Không tự nhận diện ngôn ngữ, kích thước file js khá lớn.

Hôm nay mình sẽ hướng dẫn cách dùng highlightjs, một plugin syntax highlighter khắc phục được các nhược điểm trên.

Demo

Tính năng

1. Hỗ trợ 146 ngôn ngữ và 66 giao diện (Xem ví dụ).
   
2. Tự động nhận diện ngôn ngữ.
   
3. Kích thước file js nhỏ ~17Kb.
   
4. Sao chép nhanh dùng Clipboard.
   

Hạn chế

1. Không hỗ trợ phpBB2. Do cấu trúc phpBB2 khác biệt với 3 mã nguồn còn lại, và ít người dùng nên mình không làm.
   
2. Làm nổi bật cú pháp không chi tiết bằng 3 plugin mình giới thiệu trước đây.
   
3. Không có các tính năng phụ như: số dòng, tìm dòng, chọn giao diện, chọn toàn bộ (đã thay bằng nút copy). Mình thấy các tính năng này ít dùng, lại làm chậm xử lý nên bỏ bớt cho nó nuột.
   

Hướng dẫn

ACP >> Display >> QLTT >> overall_header

Tìm:

Code:

<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

Và thêm vào bên dưới nó, code sau:

Code:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github-gist.min.css">
<style>
/* Zzhljs - http://devs.forumvi.com */
dl.codebox:not(.spoiler) dt {
    display: none;
}
dl.codebox:not(.spoiler) dd {
    border: 0 none;
    background: #f8f8f8;
    position: relative;
    max-height: 100%;
}
.clipboard {
    display: block;
    color: #333;
    position: absolute;
    right: 4px;
    top: 4px;
    background: url(http://i.imgur.com/o9NOYtH.png) no-repeat center center #eee;
    border: 1px solid #D5D5D5;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    transition: opacity 0.3s ease-in-out 0s;
    opacity: 0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-appearance:none;
    cursor: pointer;
}
.clipboard.check-circle {
    background-image: url(http://i.imgur.com/CBEkyLH.png);
}
.clipboard.exclamation-triangle {
    background-image: url(http://i.imgur.com/QQkE9Wj.png);
}
dl.codebox:not(.spoiler) dd:hover .clipboard {
    opacity: 1;
}
.clipboard:hover {
    background-color:#ddd;
    border-color:#ccc;
}
.hljs {
    background: #f8f8f8;
}
dl.codebox:not(.spoiler) code,
.codebox:not(.spoiler) dd.cont_code {
    max-height: 100%;
    margin: 0;
}
.codebox:not(.spoiler) {
    background-color: transparent;
    border: 0 none;
    margin: 0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
/* Zzhljs - http://devs.forumvi.com */
jQuery(function($){
    var $code = $("code");
    if ($code.length) {
        hljs.configure({
            useBR: true
        });
        $code.each(function (i, block) {
            hljs.highlightBlock(block);
        });

        function fallbackMessage(action) {
            var actionMsg = '';
            var actionKey = (action === 'cut' ? 'X' : 'C');

            if (/iPhone|iPad/i.test(navigator.userAgent)) {
                actionMsg = 'No support!';
            } else if (/Mac/i.test(navigator.userAgent)) {
                actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
            } else {
                actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
            }

            return actionMsg;
        }

        function afterClipboard(ele) {
            setTimeout(function(){
                ele.className = 'clipboard clipboard';
            }, 400);
        }

        var snippets = document.querySelectorAll('.codebox:not(.spoiler) > dd');

        [].forEach.call(snippets, function (snippet) {
            snippet.firstChild.insertAdjacentHTML('beforebegin', '<i class="clipboard clipboard" data-clipboard></i>');
        });

        var clipboardSnippets = new Clipboard('[data-clipboard]', {
            target: function (trigger) {
                return trigger.nextElementSibling;
            }
        });

        clipboardSnippets.on('success', function (e) {
            e.clearSelection();
            e.trigger.className = 'clipboard check-circle';
            afterClipboard(e.trigger);
        });

        clipboardSnippets.on('error', function (e) {
            e.trigger.className = 'clipboard exclamation-triangle';
            afterClipboard(e.trigger);
            alert(fallbackMessage(e.action));
        });
    }
});
</script>

Tài nguyên

Icon từ FlatIcon.
Javascript plugin HighlightJs và ClipboardJs.
Ứng dụng cho Forumotion viết bởi Zzbaivong.

---

Tags: #mod #template #tutorial #highlight #clipboard #hljs

fancyFBcmt - Xem ảnh trong Fancybox với facebook bình luận

Lấy ý tưởng từ plugin WP Fancybox Gallery With Facebook Comment Support viết cho WordPress, mình đã viết plugin fancyFBcmt, với chức năng tương đương, và tối ưu hơn.
fancyFBcmt là một fancybox helper, viết bằng API fancybox2, nên thừa hưởng tất cả những ưu điểm của fancybox2.

Chức năng

1. Thiết kế giao diện xem ảnh tương đồng với facebook.
   
2. Căn chỉnh vị trí, kích thước fancybox thumbnail helper, thêm hiệu ứng cho khung bình luận.
   
3. Tự tắt khung bình luận khi màn hình quá hẹp và khi facebook bị chặn.
   
4. Lưu lại khung bình luận khi xem ảnh lặp lại (ver WP tạo bình luận mới).
   
5. Giả liên kết để sử dụng nhiều ảnh trong cùng một trang, liên kết này có thể dùng để kích hoạt fancyFBcmt.
   

Demo

Hướng dẫn

Bước 1

Kích hoạt Facebook Connect

ACP >> Modules >> Facebook Connect >> Cấu hình diễn đàn

Nếu bạn chưa tạo ứng dụng trên facebook thì truy cập: https://developers.facebook.com/apps/?action=create

Nếu bạn chưa đăng ký tài khoản Deverloper, nhấn vào Register as a Deverloper để đăng ký

Trường hợp tài khoản bạn chưa được kích hoạt, thì truy cập: https://www.facebook.com/settings?tab=mobile
Làm theo hướng dẫn, sau đó quay lại trang đăng ký, thực hiện các bước tiếp theo.

Nếu bạn đã đăng ký tài khoản Deverloper, nhấn vào Create a New App và điền các thông tin cần thiết.

Khi tạo app thành công bạn sẽ có được App ID và Facebook secret code để kích hoạt Facebook Connect.



Tiếp theo bạn cần kích hoạt app bạn vừa tạo.
Tại tab Thiết lập, bạn nhấn vào Thêm nền tảng >> Trang Web và nhập URL của diễn đàn và ô Site URL.
Sau đó mới điền Domain vào App Domains (Không có http://).

Đăng ký nhiều Domain:

Và kích hoạt app tại tab Trạng thái & Đánh giá.



Thế là xong phần app Facebook.

Bước 2

Chỉnh sửa Templates

Vì mặc định forumotion chỉ dùng Facebook Connect để đăng nhập và đăng ký nên ngoài các trang đó nó không hiển thị ở các trang khác, mà mình cần sử dụng nó ở trong bài viết.
Ngoài ra, nếu bạn muốn dùng Facebook Connect ở tất cả các trang như trường hợp dùng login popup thì sẽ phải kích hoạt ở tất cả các trang.

ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:

Code:

{NAMESPACE_FB_LIKE} {NAMESPACE_FB}

Thay bằng:

Code:

xmlns:fb="http://ogp.me/ns/fb#"

Tìm:

Code:

{META_FB_LIKE}

Thay bằng:

Code:

<meta property="fb:admins" content="<AdminID>"/>
<meta property="fb:app_id" content="<AppID>"/>

Để có Admin ID, bạn truy cập https://graph.facebook.com/<username>
Thay <username> bằng username tài khoản Facebook của bạn.
Lấy thông số id thay vào <AdminID>.
Thay <AppID> bằng code App ID tạo ở bước 1.

Tìm:

Code:

<!-- BEGIN switch_fb_login -->
<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->

Thay bằng:

Code:

<script src="//connect.facebook.net/vi_VN/all.js" type="text/javascript"></script>
<script src="//illiweb.com/rs3/90/frm/ograph/fb_login.js" type="text/javascript"></script>

ACP >> Display >> Templates >> QLTT >> overall_footer_end

Tìm:

Code:

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_facebook_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

Thay bằng:

Code:

<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
if(location.pathname != "/login" && location.pathname != "/register" && GetParam("page_profil") != "facebook" && window.FB){
        FB.init({
                appId: '<App ID>',
                status: true,
                cookie: true,
                xfbml: true,
                oauth: true
        });
}
if(window.FB){
        function FacebookInviteFriends() {
            FB.ui({
                method: 'apprequests',
                message: '{SITENAME_TITLE}{PAGE_TITLE}'
            });
        }
        $("#cont_fb_invit").replaceWith('<a class="FacebookInviteFriends" href="javascript:;" onclick="FacebookInviteFriends();">Mời bạn bè tham gia diễn đàn</a>');
}
//]]>
</script>

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
if(window.FB){
        FB.Event.subscribe('auth.logout', function(response) {
                if ($('a#logout'))
                {
                        var lien_redir = $('a#logout').attr('href');
        
                        if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
                        {
                                document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
                        }
                }
        });
        
        $(function() {
                $('a#logout').click(function() {
                        FB.logout();
                });
        });
}
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

Thay <App ID> bằng code App ID tạo ở bước 1.

Bước 3

Thêm CSS

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* fancyFB v0.1 by Zzbaivong */
.fancybox-overlay,.fancybox-comments-block,#fancybox-thumbs,.fancybox-overlay *,.fancybox-comments-block *,#fancybox-thumbs *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{border:0;outline:none;vertical-align:top;margin:0;padding:0}
.fancybox-wrap{position:fixed;top:0;left:0;z-index:802}
.fancybox-skin{position:relative;background:url(http://i56.servimg.com/u/f56/18/59/49/93/fancyb10.gif) center center no-repeat #111}
.fancybox-opened{z-index:803}
.fancybox-outer,.fancybox-inner{position:relative}
.fancybox-inner{overflow:hidden}
.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap;margin:0;padding:15px}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%}
.fancybox-image{max-width:100%;max-height:100%}
.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(http://i56.servimg.com/u/f56/18/59/49/93/fancyb20.png);opacity:0.8;z-index:900}
#fancybox-loading{}
#fancybox-loading div{}
.fancybox-close{background-position:0 -114px;position:fixed;top:0;left:0;width:45px;height:45px;cursor:pointer;z-index:804}
.fancybox-nav{position:fixed;top:0;width:20%;height:100%;cursor:pointer;text-decoration:none;background:transparent url(http://i56.servimg.com/u/f56/18/59/49/93/blank10.gif);-webkit-tap-highlight-color:rgba(0,0,0,0)}
.fancybox-prev{left:0}
.fancybox-next{right:0}
.fancybox-nav span{position:fixed;top:50%;width:45px;height:57px;margin-top:-75px;cursor:pointer;visibility:hidden}
.fancybox-prev span{left:0;background-position:0 0}
.fancybox-next span{right:0;background-position:0 -57px}
.fancybox-tmp{position:absolute;top:-99999px;left:-99999px;visibility:hidden;max-width:99999px;max-height:99999px;overflow:visible!important}
.fancybox-lock{overflow:hidden!important;width:auto}
.fancybox-lock body{overflow:hidden!important}
.fancybox-lock-test{overflow-y:hidden!important}
.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:801;background:url(http://i56.servimg.com/u/f56/18/59/49/93/overla11.png)}
.fancybox-overlay-fixed{position:fixed;bottom:0;right:0}
.fancybox-lock .fancybox-overlay{overflow:hidden}
.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:805}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:805;text-align:center}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);text-shadow:0 1px 2px #222;color:#fff;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
.fancybox-title-inside-wrap{padding-top:10px}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}
#fancybox-thumbs{position:fixed;left:0;width:100%;overflow:hidden;z-index:805}
#fancybox-thumbs.bottom{bottom:2px}
#fancybox-thumbs.top{top:2px}
#fancybox-thumbs ul{position:relative;list-style:none;margin:0;padding:0}
#fancybox-thumbs ul li{float:left;opacity:0.5;padding:1px}
#fancybox-thumbs ul li.active{opacity:0.75;border:1px solid #fff;padding:0}
#fancybox-thumbs ul li:hover{opacity:1}
#fancybox-thumbs ul li a{display:block;position:relative;overflow:hidden;border:1px solid #222;background:#111;outline:none}
#fancybox-thumbs ul li img{display:block;position:relative;border:0;max-width:none;padding:0}
.fancybox-comments-block{position:fixed;z-index:999;top:0;right:0;background:#f2f2f2;height:100%;display:block;overflow:auto;overflow-x:hidden;width:430px;margin-right:0!important;padding:0 5px}
.fancybox-nav:hover span,.fancybox-opened .fancybox-title{visibility:visible}
.zzbv_FBcmt{position:absolute;top:0;right:0;z-index:0;background:inherit;height:100%;width:100%;padding:0 5px}

Bước 4

Tạo file javascript

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management

Title * : Fancybox min v2.1.5 + mousewheel + fancythumbs + fancyFBcmt
Placement : In the topics
Javascript Code * :
http://pastebin.com/xR5eim31

Tùy biến với tham số

THAM SỐ	PHÂN LOẠI	MẶC ĐỊNH	GHI CHÚ
numberPosts	number	7	Số bình luận tối đa sẽ hiển thị.
commentsWidth	number	420	Chiều rộng phần bình luận.
colorScheme	string	"light"	Dùng "dark" cho giao diện bình luận tối.

Nguồn

Plugin Fancybox2 (fancyapps.com)
Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

zzChat - Chatbox forumvi - v0.2

zzChat là là một ứng dụng chat sử dụng dữ liệu từ chatbox mặc định trong forumotion, cải tiến và bổ sung các chức năng mới, giúp cho việc chat trở nên thú vị hơn.

Demo

Chức năng

1. Chat riêng giữa 2 thành viên với nhau.
   
2. Chọn màu chữ ngẫu nhiên.
   
3. BUZZ, gây chú ý cho người chat khác.
   
4. Tự đăng nhập, chống kick.
   
5. Tích hợp bộ smiley mặc định của facebook.
   
6. Thông báo số tin nhắn mới.
   
7. Giữ lại tin cũ, giúp cuộc trò chuyện không bị gián đoạn.
   

Hướng dẫn

Bước 1

Tạo trang HTML mới, sử dụng code sau:

Code:

<!DOCTYPE HTML>
<html>

<head>
   <meta charset="utf-8" />
   <title>Chatbox forumvi</title>
   <link rel="stylesheet" type="text/css" href="http://baivong.github.io/cdn/zzchat/0.2/zzchat.min.css" />
</head>

<body>

   <div id="chatbox-forumvi">

      <div id="chatbox-header">
         <div id="chatbox-me">
            <h2>...</h2>
            <div id="chatbox-action-logout"></div>
            <div class="chatbox-action-checkbox autologin">
               <input type="checkbox" id="chatbox-input-autologin" name="autologin" checked />
               <label for="chatbox-input-autologin">Tự đăng nhập</label>
            </div>
            <div id="chatbox-hidetab" class="show"></div>
         </div>
         <div id="chatbox-title" data-id="publish">
            <h2>Kênh chung</h2>
            <div class="chatbox-action-group edit"></div>
            <div class="chatbox-action-group add"></div>
            <div class="chatbox-action-group close chatbox-action" data-action="/out"></div>
            <div class="chatbox-action-checkbox refresh">
               <input type="checkbox" id="chatbox-input-autorefesh" name="autorefesh" checked />
               <label for="chatbox-input-autorefesh">Tự cập nhật</label>
            </div>
         </div>
      </div>

      <div id="chatbox-tabs">
         <div id="chatbox-list">
            <div class="chatbox-change active" data-id="publish">
               <h3>Kênh chung</h3>
               <span class="chatbox-change-mess" data-mess="0"></span>
            </div>
         </div>
         <div id="chatbox-members"></div>
         <div id="chatbox-copyright">© 2014 - devs forumvi</div>
      </div>

      <div id="chatbox-main">
         <div id="chatbox-wrap">
            <div class="chatbox-content" data-id="publish">
            </div>
         </div>
         <div id="chatbox-messenger-form">
            <form id="chatbox-form" data-key="">
               <input type="hidden" name="sbold" id="chatbox-input-bold" value="0" />
               <input type="hidden" name="sitalic" id="chatbox-input-italic" value="0" />
               <input type="hidden" name="sunderline" id="chatbox-input-underline" value="0" />
               <input type="hidden" name="sstrike" id="chatbox-input-strike" value="0" />
               <input type="hidden" name="scolor" id="chatbox-input-color" value="333333" />
               <div id="chatbox-messenger">
                  <input type="text" name="message" id="chatbox-messenger-input" data-id="publish" maxlength="1024" autocomplete="off" />
               </div>
               <div id="chatbox-option">
                  <div id="chatbox-option-bold">B</div>
                  <div id="chatbox-option-italic">I</div>
                  <div id="chatbox-option-underline">U</div>
                  <div id="chatbox-option-strike">S</div>
                  <div id="chatbox-option-color" style="background: #333333;"></div>
                  <div id="chatbox-option-smiley"></div>
                  <div id="chatbox-option-buzz">BUZZ</div>
                  <div id="chatbox-option-submit">
                     <input type="submit" value="Gửi tin" id="chatbox-submit" />
                  </div>
               </div>
            </form>
         </div>
      </div>

   </div>

   <audio id="chatbox-buzz-audio">
      <source src="http://baivong.github.io/cdn/zzchat/sound/buzz.ogg" type="audio/ogg" />
      <source src="http://baivong.github.io/cdn/zzchat/sound/buzz.mp3" type="audio/mpeg" />
   </audio>

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

   <script type="text/javascript" src="http://baivong.github.io/cdn/zzchat/0.2/zzchat.min.js"></script>
</body>

</html>

Chú ý: Ghi nhớ page_id của trang HTML vừa tạo.

Bước 2

Thay thế mã {CHATBOX_TOP} trong index_body bằng:

Code:

<!-- BEGIN switch_user_logged_in -->
<div class="main">
   <div class="main-content chatbox clearfix">
      <div id="chatbox_top" style="height: 420px; border: 1px solid #DDD;">
         <iframe src="/h{PAGE_ID}-chatbox" id="frame_chatbox" scrolling="auto" frameborder="0" height="100%" width="100%"></iframe>
      </div>
      <div style="resize">
         <img src="http://2img.net/i/fa/resize.gif" onmousedown="javascript:resizeElement(event, 'chatbox_top');" alt="" style="cursor:se-resize; float: right;" />
      </div>
   </div>
</div>
<!-- END switch_user_logged_in -->

Invision:

Chú ý: Thay {PAGE_ID} trong code trên bằng, số page_id của trang HTML tạo ở bước 1.

Bước 3

Thêm vào CSS

Code:

#chatbox_header, #chatbox_members, #chatbox, #chatbox_footer {
   display: none;
}

Ghi chú

Trong zzChat, các chức năng luôn có sẵn nút bấm hoặc danh sách lựa chọn để sử dụng, tuy nhiên bạn cũng có thể dùng nhanh bằng cách lệnh CMD:

• /toggle : Đóng mở cột thông tin thành viên. Lưu ý: Khi cột thành viên đóng lại, bạn sẽ không bị làm phiền bởi chức năng BUZZ
  
• /chat {NICKNAME} : Sử dụng chức năng chat riêng. Trong đó: {NICKNAME} là thành viên bạn muốn chat.
  
• /out : Rời khỏi phòng chat riêng.
  
• /buzz : Kích hoạt chức năng BUZZ.
  Các lệnh CMD mặc định của chatbox vẫn được giữ nguyên
  

Vì zzChat được phát triển hướng đến chức năng chat riêng, chat nhóm (đang phát triển) nên trong lúc bạn chat thì các tin nhắn cũ sẽ không bị mất đi, dù Mod/Admin dọn dẹp chatbox bằng chức năng Clear.
Theo dõi và tham gia phát triển zzChat tại https://github.com/baivong/chatbox

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

Treo câu đối tết ở 2 bên diễn đàn không phải là điều mới lạ, hay khó khăn. Vấn đề ở đây là treo sao cho đẹp, không bị lệch hay đè lên nội dung chính.



Ưu điểm:
Tương thích với nhiều cỡ màn hình.
Đáp ứng khi chiều rộng trình duyệt thay đổi.
Sử dụng được cho diễn đàn không cố định chiều rộng.

Vì kích thước mỗi diễn đàn khác nhau nên không có một code chung cho tất cả.
Bạn điền thông tin vào form dưới đây để lấy code riêng cho diễn đàn mình.

Công cụ tạo Code câu đối

http://jsfiddle.net/baivong/6wnza/show/

Ghi chú:

1. Loại chiều rộng: Nếu chiều rộng của bạn không cố định (ví dụ: 98% hoặc 100%) thì chọn loại Co giãn.
   
2. Selector: Điền selector của khung tạo nên chiều rộng của diễn đàn với loại Co giãn. Các selector mặc định:
   punBB: .pun
   phpBB2: .bodylinewidth
   phpBB3: #wrap
   Invision: #ipbwrapper
   
   
3. Chiều rộng: Nếu chiều rộng của bạn là Cố định thì bạn nhập kích thước chiều rộng (width). Nếu chiều rộng của diễn đàn là Co giãn thì bạn nhập kích thước chiều rộng tối thiểu (min-width).
   

Sau đó, nhấn Lấy code, bạn sẽ có được CSS và HTML câu đối để nhúng vào diễn đàn.

CSS câu đối: Thêm vào CSS của diễn đàn
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:
Optimize your CSS: Không

HTML câu đối:
ACP >> Display >> QLTT >> overall_header
Thêm code HTML vào bên dưới:

Code:

<body>

Nếu bạn dùng phpBB3 hoặc Invision, không sửa được Templates thì dùng Javascript để chèn:

Code:

$(function(){
   $("body").append('<div class="caudoi trai"></div><div class="caudoi phai"></div>');
});

---

Tags: #tutorial

Forumotion Backup Templates

Giới thiệu

Tiện ích này sẽ giúp bạn lưu trữ và cài đặt tất cả Template trong Forumotion một cách nhanh chóng và chính xác.

• Tất cả Template sẽ được nén vào một tệp zip nên rất thuận tiện lưu trữ và chia sẻ.
  
• Cài đặt tệp zip lưu trữ từ máy sẽ có đủ thông tin và được cảnh báo về phiên bản giúp tránh nhầm lẫn.
  
• Chế độ One-Click: Đơn giản hóa thao tác với 1 click, sử dụng khi cần cài đặt và lưu trữ toàn bộ Template.
  
• Thông báo trên màn hình khi tiến trình hoàn tất, bạn chỉ cần giữ tab mở trong lúc tiện ích đang xử lý và làm việc khác.
  
• Để đảm bảo bạn không vô tình tắt trình duyệt khi tiến trình đang chạy, một cảnh báo đã được thêm vào.
  

Cài đặt

Google Chrome: http://1drv.ms/1SxX5cj
Sau khi tải xong, bạn mở tab chrome://extensions/ và kéo thả file cxr vừa tải vào để cài đặt.
Firefox: https://addons.mozilla.org/en-US/firefox/addon/forumotion-backup-templates/
Opera: https://addons.opera.com/en/extensions/details/forumotion-backup-templates/

Phiên bản Userscript cho các trình duyệt khác: Xem tại đây.

Ảnh chụp màn hình

Xem thêm ảnh chụp màn hình khác tại đây.

Video hướng dẫn

Google Chrome: https://www.youtube.com/watch?v=OV9ZX2uj5ec
Firefox: https://www.youtube.com/watch?v=jvyc1vfIZ9I
Opera: https://www.youtube.com/watch?v=0nhHRSeWWRI

Mã nguồn

https://github.com/baivong/ForumotionBackupTemplates

Tài nguyên

jsZip (v2.5.0) By StuartKnightley
jszip-utils (v0.0.2) By Stuart Knightley, David Duponchel
FileSaver (2015-05-07.2) By Eli Grey
ForumotionBackupTemplates (v2.0.1) By Zzbaivong

Tác giả

Zzbaivong (http://devs.forumvi.com)

---

Tags: #google-chrome #firefox #opera #template #extension #tutorial #backup #add-on #hot

Mặc dù Forumtion đã câp nhật URL theo tiêu đề từ rất lâu, tuy nhiên đến nay vẫn không hỗ trợ Tiếng Việt.
Cách thường dùng nhất hiện nay là cài đặt ngôn ngữ hệ thống về Tiếng Anh, cách này không tiện với những diễn đàn mà thành viên ít dùng Tiếng Anh, hơn nữa URL cũng không hiển thị tốt với Tiếng Việt có dấu (lỗi mất chữ đ).
Bài viết này, mình sẽ hướng dẫn cách tạo URL theo tiêu đề mà không phụ thuộc vào ngôn ngữ diễn đàn.

Demo

Phần 1

Sửa URL trên thanh địa chỉ trình duyệt

ACP >> Display >> Templates >> QLTT >> overall_header
Tìm:

Code:

<title>{SITENAME_TITLE}{PAGE_TITLE}</title>

Thêm vào bên dưới:

Code:

<script type="text/javascript">
//<![CDATA[
function lang_vi(a) {
    a = a.toLowerCase();
    a = a.replace(/\u00e0|\u00e1|\u1ea1|\u1ea3|\u00e3|\u00e2|\u1ea7|\u1ea5|\u1ead|\u1ea9|\u1eab|\u0103|\u1eb1|\u1eaf|\u1eb7|\u1eb3|\u1eb5/g, "a");
    a = a.replace(/\u00e8|\u00e9|\u1eb9|\u1ebb|\u1ebd|\u00ea|\u1ec1|\u1ebf|\u1ec7|\u1ec3|\u1ec5/g, "e");
    a = a.replace(/\u00ec|\u00ed|\u1ecb|\u1ec9|\u0129/g, "i");
    a = a.replace(/\u00f2|\u00f3|\u1ecd|\u1ecf|\u00f5|\u00f4|\u1ed3|\u1ed1|\u1ed9|\u1ed5|\u1ed7|\u01a1|\u1edd|\u1edb|\u1ee3|\u1edf|\u1ee1/g, "o");
    a = a.replace(/\u00f9|\u00fa|\u1ee5|\u1ee7|\u0169|\u01b0|\u1eeb|\u1ee9|\u1ef1|\u1eed|\u1eef/g,
        "u");
    a = a.replace(/\u1ef3|\u00fd|\u1ef5|\u1ef7|\u1ef9/g, "y");
    a = a.replace(/\u0111/g, "d");
    a = a.replace(/\W+/g, "-");
    a = a.replace(/^\-+|\-+$/g, "");
    a = a.replace(/(-group)$/, "");
    return a.replace(/(-page-\d+)$/, "")
}
var path = location.pathname,
    canonical = path + location.search + location.hash;
/(\-category|\-forum|\-topic|\-group)/.test(path) && history.replaceState(null, null, canonical.slice(1).replace(/(\-category|\-forum|\-topic|\-group)/, "-" + lang_vi(document.title)));
//]]>
</script>

Phần 2

Sửa URL liên kết (tùy chọn)

Tạo file javascript, đặt In all the pages.

Code:

$(function() {
    $("a[href^='/c'], a[href^='/f'], a[href^='/t']").attr({
        href: function() {
            var a = $.trim($(this).text());
            if ("" != a) return this.href.replace(location.origin, "").replace(/(\-category|\-forum|\-topic)/, "-" + lang_vi(a.replace(/Re:\s/i, "")))
        }
    });
});

Ngoài lề

ligerv từng bàn về Việt hóa URL có tốt cho SEO không, vì ở đây là dùng javascript, mình cũng không chắc về vụ SEO nhưng xem trên Google analytics thì nó hiển thị URL Tiếng Việt, có vẻ là chỉ cần chạy trước mã theo dõi của Google là được.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #tutorial #việt-hóa #permarklink

zzfavouriteBox - Tạo chuyên mục ưa thích

zzfavouriteBox sẽ tạo nhóm các chuyên mục ưa thích của bạn và đặt ở đầu diễn đàn để bạn dễ dàng truy cập vào lần sau.

Giới thiệu

Thông thường, trong diễn đàn có nhiều mục, mỗi thành viên có nhu cầu khác nhau nên chắc chắn sẽ có các mục ưa thích được sử dụng thường xuyên hơn và các mục không hoặc ít sử dụng.
Để đáp ứng nhu cầu đó, một cách thông dụng là xắp xếp các chuyên mục có tỷ lệ xem cao hơn lên đầu, một số diễn đàn sẽ sử dụng chức năng ẩn/hiện chuyên mục hoặc cho phép thành viên xắp xếp lại thứ tự chuyên mục theo ý thích.
Bài này mình sẽ hướng dẫn các bạn một cách khác, đó là tạo một nhóm chuyên mục ảo để chứa các mục ưa thích.

Demo

Hướng dẫn

Bước 1

CSS
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* zzfavouriteBox by baivong - http://www.devs.cf/ */
#indexBox .zzheart{display:inline-block;background:url(//i56.servimg.com/u/f56/18/59/49/93/heart10.png) no-repeat;background-position:0 0;width:16px;height:16px;cursor:pointer;margin-left:5px;opacity:.5;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease}
#indexBox .zzlove{background-position:0 -16px}
#indexBox .zzheart:hover{opacity:1}

Bước 2

Template index_box:
ACP >> Display >> QLTT >> index_box

Tìm:

Code:

<div class="main">

Thay bằng:

Code:

<div id="indexBox" class="main">

Tìm:

Code:

<!-- BEGIN switch_on_index -->

Thêm vào trước nó:

Code:

<!-- zzfavouriteBox by baivong - http://www.devs.cf/ -->
<script type="text/javascript">
//<![CDATA[
var zzfavourite = {
   wrapAll: "#indexBox",
   title: "#indexBox .forumtitle",
   item: "tr",
   wrapItem: ".statused",
   boxContent: ".main-content",
   favouriteCal: '<div class="main-head favouriteBox"><div class="page-title"><h2>Ưa thích</h2></div></div><div class="main-content favouriteBox"><table cellspacing="0" class="table"><thead><tr><th class="tcl">Forum</th><th class="tc2">Topics</th><th class="tc3">Posts</th><th class="tcr">Last Posts</th></tr></thead><tbody id="favourites" class="statused"></tbody></table></div>',
   pageIndex: "",
   favouriteBox: function () {
      $("#favourites").length || $(zzfavourite.wrapAll).prepend(zzfavourite.favouriteCal)
   },
   start: function () {
      if ("/" == location.pathname || "/forum" == location.pathname) zzfavourite.pageIndex = !0;
      $(zzfavourite.title).after('<div class="zzheart"></div>');
      $(zzfavourite.wrapAll).on("click", ".zzheart", function () {
         var t = $(this);
         if (t.hasClass("zzlove")) {
            var c = t.prev().attr("href"),
               a = RegExp("\\b" + c.match(/\/f(\d+)-.*/)[1] + "\\b\\s?");
            my_setcookie("favouriteBox", my_getcookie("favouriteBox").replace(a, ""), !0);
            t.removeClass("zzlove");
            if (zzfavourite.pageIndex) {
               var d = t.closest(zzfavourite.item),
                  b = $(zzfavourite.title + "[href='" + c + "']:last").closest(zzfavourite.item);
               d.fadeOut(300, function () {
                  b.closest(zzfavourite.boxContent).is(":hidden") && b.closest(zzfavourite.boxContent).fadeIn().prev().fadeIn();
                  b.find(".zzheart").removeClass("zzlove").end().fadeIn(300);
                  d.remove();
                  $("#favourites " + zzfavourite.item).length || $(".favouriteBox").remove()
               })
            }
         } else if (c = t.prev().attr("href").match(/\/f(\d+)-.*/)[1], t.addClass("zzlove"),
            a = my_getcookie("favouriteBox"), null == a || "" == a ? my_setcookie("favouriteBox", c, !0) : RegExp("\\b" + c + "\\b\\s?").test(a) || my_setcookie("favouriteBox", a + " " + c, !0), zzfavourite.pageIndex) {
            zzfavourite.favouriteBox();
            var e = t.closest(zzfavourite.item);
            e.fadeOut(300, function () {
               e.clone().appendTo("#favourites").fadeIn(300);
               0 == t.closest(zzfavourite.wrapItem).height() && t.closest(zzfavourite.boxContent).hide().prev().hide()
            })
         }
      });
      var b = my_getcookie("favouriteBox");
      null != b && "" != b && ($.each($.trim(b).split(" "), function (c, a) {
         var d = $(zzfavourite.title + "[href^='/f" + a + "-']");
         d.next().addClass("zzlove");
         zzfavourite.pageIndex && (zzfavourite.favouriteBox(), d.closest(zzfavourite.item).hide().clone().appendTo("#favourites").show(), 0 == d.closest(zzfavourite.wrapItem).height() && d.closest(zzfavourite.boxContent).hide().prev().hide())
      }), $("#favourites").is(":empty") && $(".favouriteBox").remove())
   }
};
zzfavourite.start();
//]]>
</script>

Bước 3

Cấu hình
ACP >> Display >> Homepage >> Structure and hierarchy >> Index packing
Split categories on index: Medium

Hướng dẫn tùy chỉnh

Nếu bạn đã đã sửa cấu trúc index_box, sẽ có thể sẽ bị lỗi khi sử dụng code trên. Trong trường hợp đó, bạn cần sửa lại các tham số cho phù hợp. Tham khảo sơ đồ sau:



Trong đó:

wrapAll: khung bao toàn bộ các nhóm chuyên mục.
boxHead: tiêu đề mỗi nhóm chuyên mục. Không có tham số cho boxHead, phải đặt nó ở ngay trước boxContent.
boxContent: khung mỗi nhóm chuyên mục.
wrapItem: khung bao các mục (diễn đàn con). wrapItem và boxContent có thể trùng nhau.
item: mỗi mục (diễn đàn con).
title: tiêu đề mỗi mục (diễn đàn con).
favouriteCal: Đây là cấu trúc một nhóm chuyên mục rỗng, tức là không có item, dùng để tạo khung cho nhóm chuyên mục ảo. Trong đó boxHead và boxContent được thêm class favouriteBox, wrapItem thêm id favourites.

Lưu ý: Đặt các thông số tùy chỉnh trước khi chạy hàm start(). Ví dụ:

Code:

zzfavourite.boxContent = ".box";
zzfavourite.item = "li";
zzfavourite.start();

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

Thống kê bài viết 5 cột

Chức năng

Thống kê bài viết, với 5 cột, 7 thông tin:

1. 12 bài viết mới nhất
   
2. 5 chủ đề được xem nhiều nhất
   
3. 5 chủ đề thảo luận nhiều nhất
   
4. 5 thành viên tạo chủ đề nhiều nhất
   
5. 5 thành viên gửi bài nhiều nhất
   
6. 5 thành viên gửi bài nhiều nhất tuần
   
7. 5 thành viên gửi bài nhiều nhất tháng
   

Demo

Hướng dẫn

Bước 1

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Thêm vào CSS:

Code:

/* Latest topics */
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left,#left *,#left li:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#left table.table{border-collapse:collapse;empty-cells:show;table-layout:fixed;width:100%}
#left a{text-decoration:none}
#left td{width:25%;vertical-align:top;border-width:0 1px}
#left .double{border-left:0;width:50%}
#left li{position:relative;width:100%;list-style-type:none;height:22px;line-height:24px;border-bottom:1px dashed #CCC;counter-increment:Zzindex}
#left li:before{content:counter(Zzindex);display:block;height:16px;background:#98D0FF;position:absolute;left:-23px;font-size:11px;top:5px;border-radius:2px;text-align:center;width:18px;color:#FFF;line-height:16px}
#left li:after{content:" ";background:#98D0FF;display:block;width:6px;height:6px;position:absolute;top:10px;left:-8px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#d47a2a}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#b9ba45}
#left li:nth-child(4):before,#left li:nth-child(4):after{background:#aad655}
#left li:nth-child(5):before,#left li:nth-child(5):after{background:#55e7aa}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;width:60%;height:inherit}
#active_topics a,#viewed_topics a{width:70%}
#left #recent_topics a{width:80%}
#left .lastRight{right:0;text-align:right;position:absolute;top:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;left:auto}
#left ul,#left th{padding-left:34px;padding-right:10px;margin:0}
#left ul{height:114px}
#left .changeLast{border:0 none!important;background:inherit;margin-top:0!important;margin-bottom:-1px;padding:0!important}
#left .changeLast,#left th h2{color:#777}
#left th{width:25%;vertical-align:middle}
th.topicLast{border-top:1px solid #F3F3F3!important}
th.double{text-align:left}
#recent_topics li{margin:.5px 0}
#left #recent_topics .lastRight{width:20%!important}
.half li:nth-child(6),.half li:nth-child(7),.half li:nth-child(8),.half li:nth-child(9),.half li:nth-child(10),#active_starters,#users_month{display:none}
/* Tooltip */
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}

Bước 2

ACP >> Display >> QLTT

over_header: Tìm và xóa đoạn sau

Code:

<div id="{ID_LEFT}">
        <!-- BEGIN giefmod_index1 -->
        {giefmod_index1.MODVAR}
        <!-- BEGIN saut -->
        <div style="height:{SPACE_ROW}px"></div>
        <!-- END saut -->
        <!-- END giefmod_index1 -->
</div>

index_body: Tìm

Code:

{CHATBOX_TOP}

...và thêm vào trước nó:

Code:

<div id="{ID_LEFT}" class="main">
 <div class="main-head">
 <div class="page-title">
 <h2>Thống kê bài viết</h2>
 </div>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">
 <tbody class="statused">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- END giefmod_index1 -->
 </tbody>
 </table>
 </div>
 <script type="text/javascript">
 //<![CDATA[
 var versionMinor = parseFloat(navigator.appVersion),
 versionMajor = parseInt(versionMinor),
 IE = document.all && !window.opera && 7 > versionMajor,
 IE7 = document.all && !window.opera && 7 <= versionMajor,
 OP = window.opera,
 FF = document.getElementById,
 NS = document.layers;

 function get_item(a, c) {
 if (IE) return c ? window.opener.document.all[a] : document.all[a];
 if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
 if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
 }

 var current_tooltip;

 function show_tooltip(a, c) {
 var b = get_item("tooltip");
 b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
 b.style.zIndex = 1000;
 b.style.position = "absolute";
 b.innerHTML = "<p>" + c + "</p>";
 b.style.visibility = "visible";
 a.onmousemove = move_tooltip;
 a.onmouseout = function() {
 b.style.visibility = "hidden"
 };
 a.title = ""
 }
 var offsetxpoint = -60,
 offsetypoint = 20,
 real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
 real_body = document.documentElement ? document.documentElement : document.body;

 function move_tooltip(a) {
 var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
 d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
 b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
 e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
 f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
 current_tooltip = get_item("tooltip");
 current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
 current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
 }
 $("#recent_topics li a:first-child").mouseover(function() {
 show_tooltip(this, $(this).next().html())
 });
 $("#active_topics a, #viewed_topics a").mouseover(function() {
 show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));
 }).after(function() {
 return '<span class="lastRight">' + this.title.replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'
 });
 $(".changeLast").change(function() {
 $(".half.group_" + $(this).data("group")).hide();
 $("#" + this.value).show();
 });
 //]]>
 </script>
</div>

Bước 3

ACP >> Display >> Portal

Thay thế toàn bộ các temp sau:

mod_most_active_starters:

Code:

<!--<td>-->
 <ul id="active_starters" class="half group_post">
 <!-- BEGIN POSTER -->
 <li>
 {POSTER.NAME}
 <span class="lastRight">
 {POSTER.NB_TOPICS}
 </span>
 </li>
 <!-- END POSTER -->
 </ul>
</td>

mod_most_active_topics:

Code:

<tr>
 <th class="topicLast">
 <h2>Thảo luận nhiều nhất</h2>
 </th>
 <th class="topicLast">
 <h2>Lượt xem nhiều nhất</h2>
 </th>
</tr>
<tr>
 <td>
 <ul id="active_topics" class="half">
 <!-- BEGIN TOPIC -->
 <li>
 <span style="display:none">{TOPIC.TITLE}</span>
 <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
 </li>
 <!-- END TOPIC -->
 </ul>
 </td>
<!--</tr>-->

mod_most_viewed_topics:

Code:

<!--<tr>-->
 <td>
 <ul id="viewed_topics" class="half">
 <!-- BEGIN TOPIC -->
 <li>
 <span style="display:none">{TOPIC.TITLE}</span>
 <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
 </li>
 <!-- END TOPIC -->
 </ul>
 </td>
</tr>

mod_recent_topics:

Code:

<!-- BEGIN classical_row -->
<tr>
 <th class="double">
 <h2>Bài viết mới
 <span class="right">Người gửi cuối</span>
 </h2>
 </th>
 <th>
 <select class="changeLast" data-group="post">
 <option value="top_posters">Viết bài nhiều nhất</option>
 <option value="active_starters">Tạo chủ đề nhiều nhất</option>
 </select>
 </th>
 <th>
 <select class="changeLast" data-group="time">
 <option value="users_week">Tích cực nhất tuần</option>
 <option value="users_month">Tích cực nhất tháng</option>
 </select>
 </th>
</tr>
<tr>
 <td class="double" rowspan="3">
 <ul id="recent_topics">
 <!-- BEGIN recent_topic_row -->
 <li>
 <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
 <div class="tooltip_data" style="display:none">
 <p>
 <span style="color:red">Tiêu đề</span>: {classical_row.recent_topic_row.L_TITLE}
 </p>
 <p>
 <span style="color:blue">Gửi lúc</span>: {classical_row.recent_topic_row.S_POSTTIME}
 </p>
 </div>

 <!-- BEGIN switch_poster -->
 <a class="lastRight" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
 <!-- END switch_poster -->
 <!-- BEGIN switch_poster_guest -->
 <span class="lastRight">
 {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
 </span>
 <!-- END switch_poster_guest -->
 </li>
 <!-- END recent_topic_row -->
 </ul>
 </td>
<!-- </tr> -->
<!-- END classical_row -->

mod_top_post_users_month:

Code:

<!--<tr>-->
 <!--<td>-->
 <ul id="users_month" class="half group_time">
 <!-- BEGIN POSTER -->
 <li>
 {POSTER.NAME}
 <span class="lastRight">
 {POSTER.NB_POSTS}
 </span>
 </li>
 <!-- END POSTER -->
 </ul>
 </td>
</tr>

mod_top_post_users_week:

Code:

<td>
 <ul id="users_week" class="half group_time">
 <!-- BEGIN POSTER -->
 <li>
 {POSTER.NAME}
 <span class="lastRight">
 {POSTER.NB_POSTS}
 </span>
 </li>
 <!-- END POSTER -->
 </ul>
<!--</td>-->

mod_top_posters:

Code:

<td>
 <ul id="top_posters" class="half group_post">
 <!-- BEGIN POSTER -->
 <li>
 {POSTER.NAME}
 <span class="lastRight">
 {POSTER.NB_POSTS}
 </span>
 </li>
 <!-- END POSTER -->
 </ul>
<!--</td>-->

Bước 4

ACP >> Modules >> Portal & Widgets >> Forum widgets management


Kích hoạt cột widget trái


Xắp xếp widget theo thứ tự


Tùy chỉnh recent topics

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial #latest-topics

zzMudim - Thêm bộ gõ Tiếng Việt vào diễn đàn

Trong lúc lang thang tìm thông tin về phpBB3, mình lạc đến diễn đàn ytuongsangtaovn, diễn đàn này sử dụng bộ gõ AVIM với giao diện khá gọn và tiện dụng, có một hạn chế là nó không chạy trong iframe, nên sẽ không dùng được trong chatbox và chế độ wysiwyg. Vì vậy, mình đã sử dụng bộ gõ Mudim và sửa lại một chút để có giao diện như thế.

Chức năng

1. Sửa lỗi không gõ Tiếng Việt trong search box.
   
2. Thêm tuỳ chọn vị trí đặt Mudim panel.
   
3. Tạo giao diện thứ 2 cho Mudim panel.
   

Demo

Hướng dẫn

Đặt code dưới đây vào vị trí muốn hiển thị bộ gõ Mudim. Nên đặt trong Temp overall_header hoặc overall_footer.

Code:

<div id="zzMudimFork"></div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/126946313/mudim-0.9-r162-fork.js"></script>

Mã nguồn mudim-0.9-r162-fork.js:

Chú ý: Để sử dụng bộ gõ Mudim trong chatbox, bạn cần chuyển chatbox về dạng iframe.

Phiên bản áp dụng

phpBB2, phpBB3, punBB, Invision

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

jQuery plugin Announcement sẽ gói gọn tất cả thông báo vào một bảng nhỏ nằm bên dưới diễn đàn, cách sử dụng không có nhiều khác biệt với chức năng mặc định nên bạn sẽ không gặp chút khó khăn nào để làm quen với nó.
Nếu bạn đã thấy nhàm chán với thông báo chạy phía trên diễn đàn thì đây chắc chắn sẽ là lựa chọn tuyệt vời dành cho bạn.

Demo

https://baivong.github.io/announcement/

Chức năng

1. Giữ lại các tuỳ chọn của chức năng thông báo mặc định.
   
2. Dễ dàng xem từng tin riêng.
   
3. Cho phép người dùng ẩn hoặc tắt bảng.
   
4. 15 hiệu ứng chuyển tin.
   

Hướng dẫn

Cài đặt

ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.css

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.css

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.js

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.min.js

Tìm:

Code:

Ticker.start({
    height : {switch_ticker.HEIGHT},
    spacing : {switch_ticker.SPACING},
    speed : {switch_ticker.SPEED},
    direction : '{switch_ticker.DIRECTION}',
    pause : {switch_ticker.STOP_TIME}
});

và thay bằng:

Code:

var tickerDirection = '{switch_ticker.DIRECTION}',
    tickerEffect = '',

    tickerWidth = {switch_ticker.SPACING},
    tickerHeight = {switch_ticker.HEIGHT};

if (tickerWidth === 0) tickerWidth = 'auto';
if (tickerHeight === 0) tickerHeight = 'auto';

switch (tickerDirection) {
    case 'top':
        tickerEffect = 'zoom-in';
        break;

    case 'left':
        tickerEffect = 'rotate-left';
        break;

    case 'bottom':
        tickerEffect = 'zoom-out';
        break;

    case 'right':
        tickerEffect = 'shuffle';
        break;

    default:
        tickerEffect = 'fading';
}

$('#announcements').announcement({

    title: 'Thông báo',

    showToggle: true,
    showClose: !!{switch_ticker.STOP_TIME},

    position: 'bottom-right',

    width: tickerWidth,
    height: tickerHeight,

    speed: {switch_ticker.SPEED},

    effect: tickerEffect

});

Nếu bạn muốn bảng thông báo nằm bên trái thì trong code trên, dòng 38, sửa bottom-right thành bottom-left. Ở dòng 33, bạn cũng có thể thay Thông báo, bằng tiêu đề khác phù hợp hơn.

Tìm:

Code:

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="padding-top:4px;">
    <div class="module main">
        <div class="main-content clearfix">
            <div id="fa_ticker_container">
                <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                    <div class="fa_ticker_content">
                        <!-- BEGIN ticker_row -->
                        <div>{switch_ticker.ticker_row.ELEMENT}</div>
                        <!-- END ticker_row -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END switch_ticker -->

và thay bằng:

Code:

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="display: none;">
    <ul id="announcements">
        <!-- BEGIN ticker_row -->
        <li>{switch_ticker.ticker_row.ELEMENT}</li>
        <!-- END ticker_row -->
    </ul>
</div>
<!-- END switch_ticker -->

Tìm và xoá:

Code:

<!-- BEGIN switch_ticker_new -->
Bao gồm cả code nằm bên trong nó
Có 3 đoạn switch_ticker_new như thế này
<!-- END switch_ticker_new -->

Sử dụng

ACP >> QLTT >> Messages and e-mails >> Announcements

>> General announcements options: Tùy chọn chức năng

• Activate announcements : Bật/tắt chức năng thông báo
  
• Announcements display : Trang sẽ hiển thị thông báo
  
• Scrolling : Hiệu ứng chuyển tin thông báo.
  
• Scrolling speed : Thời gian chuyển giữa 2 tin kế tiếp. Đơn vị: giây(seconds).
  
• Stop time : jQuery Announcement sử dụng thông số này với vai trò showClose, nhận 2 giá trị 0 hoặc 1 để tắt hoặc bật nút đóng.
  
• Space between announcements (in pixels) : jQuery Announcement sử dụng thông số này với vai trò width để xác định chiều rộng. Đơn vị: px(pixels).
  
• Announcements block height (in pixels) : jQuery Announcement sử dụng thông số này với vai trò height để xác định chiều cao. Đơn vị: px(pixels).
  

>> Announcements: Danh sách các tin thông báo

Bạn có thể thêm nhiều thông báo mới bằng cách click vào nút +.
Nếu bạn chọn Scrolling là Deactivate, thì thông báo sẽ chỉ hiển thị duy nhất tin đầu tiên.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial #mod #jquery-plugin #phpbb2 #phpbb3 #punbb #invision #announcements

Xem ảnh bằng lightBox kết hợp Lazyload

Giới thiệu

lightBox là một plugin xem ảnh trong popup rất nhẹ và mượt, rất thích hợp cho việc xem ảnh lớn hoặc ảnh cần người dùng tập trung quan sát.
Lazyload sẽ giúp ảnh hiện lần lượt mỗi khi bạn kéo thanh cuộn đến vị trí ảnh, tránh tình trạng dồn thanh cuộn khi ảnh nhiều và tải không đồng đều.
Trong code này mình đã tùy chỉnh để bạn có thể sử dụng cùng lúc 2 plugin này, ngoài ra bạn cũng thế thêm chú thích cho ảnh, hay chuyển đổi ảnh từ liên kết.

Demo

Hướng dẫn

Bước 1

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

.lb_lazy img{display:block;max-width:600px;min-width:150px;cursor:url(//dl.dropboxusercontent.com/u/126946313/zoomin.cur), -webkit-zoom-in;margin:0 auto}
/* Lightbox @leandrovieira ver 0.5 */
#jquery-overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:500px}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana, Helvetica, sans-serif;background-color:#fff;line-height:1.4em;overflow:auto;width:100%;margin:0 auto;padding:0 10px}
#lightbox-container-image-data{color:#666;padding:0 10px}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:700}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:.7em}

Bước 2

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript: In the topics

Code:

(function(b){b.fn.lightBox=function(a){function p(){b("body").append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+a.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+a.imageBtnClose+'"></a></div></div></div></div>');var c=l();b("#jquery-overlay").css({backgroundColor:a.overlayBgColor,opacity:a.overlayOpacity,width:c[0],height:c[1]}).fadeIn();var g=m();b("#jquery-lightbox").css({top:g[1]+c[3]/10,left:g[0]}).show();b("#jquery-overlay,#jquery-lightbox").click(function(){h()});b("#lightbox-loading-link,#lightbox-secNav-btnClose").click(function(){h();return!1});b(window).resize(function(){var a=l();b("#jquery-overlay").css({width:a[0],height:a[1]});var c=m();b("#jquery-lightbox").css({top:c[1]+a[3]/10,left:c[0]})})}function d(){b("#lightbox-loading").show();a.fixedNavigation?b("#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide():b("#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide();var c=new Image;c.onload=function(){b("#lightbox-image").attr("src",a.imageArray[a.activeImage][0]);q(c.width,c.height);c.onload=function(){}};c.src=a.imageArray[a.activeImage][0]}function q(c,g){var e=b("#lightbox-container-image-box").width(),k=b("#lightbox-container-image-box").height(),d=c+2*a.containerBorderSize,f=g+2*a.containerBorderSize,e=e-d,k=k-f;b("#lightbox-container-image-box").animate({width:d,height:f},a.containerResizeSpeed,function(){r()});0==e&&0==k&&(b.browser.msie?n(250):n(100));b("#lightbox-container-image-data-box").css({width:c});b("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({height:g+2*a.containerBorderSize})}function r(){b("#lightbox-loading").hide();b("#lightbox-image").fadeIn(function(){b("#lightbox-container-image-data-box").slideDown("fast");b("#lightbox-image-details-caption").hide();a.imageArray[a.activeImage][1]&&b("#lightbox-image-details-caption").html(a.imageArray[a.activeImage][1]).show();1<a.imageArray.length&&b("#lightbox-image-details-currentNumber").html(a.txtImage+" "+(a.activeImage+1)+" "+a.txtOf+" "+a.imageArray.length).show();s()});a.imageArray.length-1>a.activeImage&&(objNext=new Image,objNext.src=a.imageArray[a.activeImage+1][0]);0<a.activeImage&&(objPrev=new Image,objPrev.src=a.imageArray[a.activeImage-1][0])}function s(){b("#lightbox-nav").show();b("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({background:"transparent url("+a.imageBlank+") no-repeat"});0!=a.activeImage&&(a.fixedNavigation?b("#lightbox-nav-btnPrev").css({background:"url("+a.imageBtnPrev+") left 15% no-repeat"}).unbind().bind("click",function(){a.activeImage-=1;d();return!1}):b("#lightbox-nav-btnPrev").unbind().hover(function(){b(this).css({background:"url("+a.imageBtnPrev+") left 15% no-repeat"})},function(){b(this).css({background:"transparent url("+a.imageBlank+") no-repeat"})}).show().bind("click",function(){a.activeImage-=1;d();return!1}));a.activeImage!=a.imageArray.length-1&&(a.fixedNavigation?b("#lightbox-nav-btnNext").css({background:"url("+a.imageBtnNext+") right 15% no-repeat"}).unbind().bind("click",function(){a.activeImage+=1;d();return!1}):b("#lightbox-nav-btnNext").unbind().hover(function(){b(this).css({background:"url("+a.imageBtnNext+") right 15% no-repeat"})},function(){b(this).css({background:"transparent url("+a.imageBlank+") no-repeat"})}).show().bind("click",function(){a.activeImage+=1;d();return!1}));t()}function t(){b(document).keydown(function(c){null==c?(keycode=event.keyCode,escapeKey=27):(keycode=c.keyCode,escapeKey=c.DOM_VK_ESCAPE);key=String.fromCharCode(keycode).toLowerCase();key!=a.keyToClose&&"x"!=key&&keycode!=escapeKey||h();key!=a.keyToPrev&&37!=keycode||0==a.activeImage||(a.activeImage-=1,d(),b(document).unbind());key!=a.keyToNext&&39!=keycode||a.activeImage==a.imageArray.length-1||(a.activeImage+=1,d(),b(document).unbind())})}function h(){b("#jquery-lightbox").remove();b("#jquery-overlay").fadeOut(function(){b("#jquery-overlay").remove()});b("embed, object, select").css({visibility:"visible"})}function l(){var a,b;window.innerHeight&&window.scrollMaxY?(a=window.innerWidth+window.scrollMaxX,b=window.innerHeight+window.scrollMaxY):document.body.scrollHeight>document.body.offsetHeight?(a=document.body.scrollWidth,b=document.body.scrollHeight):(a=document.body.offsetWidth,b=document.body.offsetHeight);var e,d;self.innerHeight?(e=document.documentElement.clientWidth?document.documentElement.clientWidth:self.innerWidth,d=self.innerHeight):document.documentElement&&document.documentElement.clientHeight?(e=document.documentElement.clientWidth,d=document.documentElement.clientHeight):document.body&&(e=document.body.clientWidth,d=document.body.clientHeight);pageHeight=b<d?d:b;pageWidth=a<e?a:e;return arrayPageSize=[pageWidth,pageHeight,e,d]}function m(){var a,b;self.pageYOffset?(b=self.pageYOffset,a=self.pageXOffset):document.documentElement&&document.documentElement.scrollTop?(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft):document.body&&(b=document.body.scrollTop,a=document.body.scrollLeft);return arrayPageScroll=[a,b]}function n(a){var b=new Date;do var d=new Date;while(d-b<a)}a=jQuery.extend({overlayBgColor:"#000",overlayOpacity:0.8,fixedNavigation:!1,imageLoading:"http://i56.servimg.com/u/f56/18/59/49/93/loadin10.gif",imageBtnPrev:"http://i56.servimg.com/u/f56/18/59/49/93/prevla10.gif",imageBtnNext:"http://i56.servimg.com/u/f56/18/59/49/93/nextla10.gif",imageBtnClose:"http://i56.servimg.com/u/f56/18/59/49/93/closel10.gif",imageBlank:"http://2img.net/i/fa/empty.gif",containerBorderSize:10,containerResizeSpeed:400,txtImage:"Image",txtOf:"of",keyToClose:"c",keyToPrev:"p",keyToNext:"n",imageArray:[],activeImage:0},a);var f=this;return this.unbind("click").click(function(){b("embed, object, select").css({visibility:"hidden"});p();a.imageArray.length=0;a.activeImage=0;if(1==f.length)a.imageArray.push([this.getAttribute("href"),this.getAttribute("title")]);else for(var c=0;c<f.length;c++)a.imageArray.push([f[c].getAttribute("href"),f[c].getAttribute("title")]);for(;a.imageArray[a.activeImage][0]!=this.getAttribute("href");)a.activeImage++;d();return!1})}})(jQuery);
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.data(j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.data(j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/iphone|ipod|ipad.*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent) || jQuery(function (a) {
   a(".post-entry img").not("img[src^='data:image'], img[src^='http://latex.codecogs.com/gif.latex?'], img[src*='illiweb.com'], img[src*='imgfast.net']").replaceWith(function () {
      return '<a href="' + this.src + '">DEVs</a>'
   });
   a(".post-entry a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif'],a[href$='.bmp']").not("a[href*='illiweb.com']").not("a[href*='imgfast.net']").attr({
      "class": "lb_lazy",
      title: function () {
         var b = a(this).text();
         return "" == b || this.href == b ? "DEVs" : b
      }
   }).html(function () {
      return '<img alt="zzBv" data-original="' +
         this.href + '" />'
   });
   a(".lb_lazy img").lazyload({
      threshold: 200,
      effect: "fadeIn"
   });
   a(".lb_lazy").lightBox()
});

Ghi chú

Để đăng ảnh, bạn chỉ cần nhập liên kết, code sẽ chuyển thành ảnh khi người dùng xem, hoặc bạn cũng có thể dùng BBcode IMG như bình thường.
Để đăng ảnh với chú thích, bạn sử dụng BBcode URL với URL là liên kết ảnh, và Description sẽ là chú thích. Ví dụ:

Code:

[url=http://i56.servimg.com/u/f56/18/59/49/93/ia_ful10.jpg]IA (イア) Japanese VOCALOID[/url]

Chú thích sẽ xuất hiện trong lightBox, khi người xem nhấn vào ảnh.

Nguồn

Plugin Lightbox (leandrovieira.com)
Plugin Lazyload (www.appelsiini.net)
Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

Tạo tiền tố tự động theo tên chuyên mục khi gửi bài

Giới thiệu

Code này sẽ tự tạo thêm tiền tố(prefix) vào đầu tiêu đề khi bạn bắt đầu đăng bài mới, tiền tố này sẽ thay đổi tùy theo tên chuyên mục. Vì trong thống kê bài viết mới của forumotion không có thông tin chuyên mục, nên với cách này bạn sẽ có thể biết được điều đó.

Hướng dẫn

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Title * : Tạo tiền tố tự động
Placement : In all the pages
Javascript Code * :

Code:

$(function() {
 var $forumId = $('input[name="f"]'),
 $subjectInput = $('input[name="subject"]'),
 $selectBox = $('select[name="selected_id"]');
 if ($forumId.length && $subjectInput.length && $selectBox.length && "/post" == location.pathname) {
 var prefix = '[' + $selectBox.find('option[value="f' + $forumId.val() + '"]').text().match(/[\|\s\-]+([^\|]+)/)[1] + '] ';
 if (!/^(1|2)$/.test($forumId.val()) && $subjectInput.val().indexOf(prefix) === -1) {
 $subjectInput.val(prefix + $subjectInput.val());
 }
 }
});

Ghi chú:

Trong hướng dẫn trên ở dòng 7, có đoạn:

Code:

!/^(1|2)$/.test($forumId.val()) &&

Đây là đoạn code loại trừ chuyên mục không tự tạo tiền tố. Trong đó 1 và 2 là Forum Id của chuyên mục.

Nếu bạn muốn tạo tiền tố tự động cho toàn diễn đàn thì xóa đoạn code đó đi.

Nếu bạn muốn loại trừ chuyên mục nào thì thay thế số 1 và 2 bằng Forum Id tương ứng. Ví dụ:
Loại trừ chuyên mục 10, sửa (1|2) thành (10)
Loại trừ chuyên mục 10, 20, 30 (1|2) thành (10|20|30) chú ý dấu | ngăn cách giữa các Forum Id.

Nếu bạn muốn chỉ tạo tiền tố cho chuyên mục 1 và 2 thì xóa dấu ! đi.

Sử dụng chung với zzPrefix sẽ cho kết quả tốt nhất.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

zzRank - Thêm huân chương theo số bài viết

zzRank sẽ tạo ra rank cho từng mức bài viết, kết hợp với điều kiện điểm thưởng và lượt cảm ơn.

Chức năng

Khi bạn sử dụng rank mặc định của forumotion sẽ chỉ có một huy hiệu cho mỗi cấp bậc. Với zzRank, bạn có thể tạo ra một bộ sưu tập huy hiệu cho từng cấp bậc, dựa trên số bài viết của thành viên đó. Ngoài ra, bạn cũng có thể bổ sung thêm các điều kiện về điểm thưởng, lượt cảm ơn để làm phong phú thêm bộ sưu tập rank.
Các thông số cho từng mức rank viết ở dạng plainObject nên rất dễ tùy chỉnh và áp dụng.

Demo

http://jsfiddle.net/baivong/a5k3yjgo/2/show/

Hướng dẫn

Bước 1

Tìm trong temp viewtopic_body:

Code:

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

Sửa thành:

Code:

<!-- BEGIN profile_field -->
<p class="profile_field_mess">
    {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</p>
<!-- END profile_field -->

Bước 2

Đặt code sau ở nơi muốn hiển thị rank:

Code:

<div class="rank_mess"></div>

Lưu ý: Vị trí của code phải nằm trong .post

Bước 3

Tạo một file js, check vào In the topics:

Code:

/*!
 * zzRank v0.2 by Zzbaivong <devs.forumvi.com>
 * Thêm huân chương dựa theo số lượng bài viết
 */
$(function() {
    var data_rank = {
        10: {
            title: "10 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên. Điểm thưởng tối thiểu là 20.",
            icon: "http://blog.uhm.vn/emo/laluot/2.gif",
            point: 20
        },
        50: {
            title: "50 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 50 bài viết trở lên. Điểm tưởng lớn hơn hoặc bằng số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/5.gif",
            point: ">"
        },
        100: {
            title: "100 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 100 bài viết trở lên. Được cảm ơn từ 10 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/20.gif",
            thank: 10
        },
        500: {
            title: "500 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 500 bài viết trở lên. Điểm tưởng lớn hơn hoặc bằng số bài viết. Được cảm ơn từ 99 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/10.gif",
            point: ">",
            thank: 99
        },
        x500: {
            title: "Spamer",
            desc: "Thành viên đăng 500 bài viết trở lên, nhưng điểm thưởng thấp hơn số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/24.gif",
            point: "<"
        }
    };
    
    function checkif(key, check, val, post) {
        var cPost = data_rank[key][check];
        if (($.type(cPost) === "number" && cPost <= val) || ($.type(cPost) === "string" && cPost === ">" && val >= post) || ($.type(cPost) === "string" && cPost === "<" && val < post)) {
            return true;
        } else {
            return false;
        }
    }

    function getNumber(t, txt) {
        return parseInt($(t).closest(".post").find(".profile_field_mess:contains('" + txt + ":')").text().match(/\d+/)[0], 10);
    }

    $(".rank_mess").html(function() {
        var all = "";

        var post_mess = getNumber(this, "Posts"),
            point_mess = getNumber(this, "Points"),
            thank_mess = getNumber(this, "Thanked");

        $.each(data_rank, function(key, val) {

            var point = data_rank[key].point,
                thank = data_rank[key].thank;

            if (post_mess >= parseInt(key.match(/\d+/)[0], 10)) {
                if ((point === undefined && thank === undefined) || (point !== undefined && thank === undefined && checkif(key, "point", point_mess, post_mess)) || (point === undefined && thank !== undefined && checkif(key, "thank", thank_mess, post_mess)) || (point !== undefined && checkif(key, "point", point_mess, post_mess) && thank !== undefined && checkif(key, "thank", thank_mess, post_mess))) {

                    all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>';

                }
            }

        });

        return all;
    });
});

Lưu ý: Trong code trên, ở dòng 56, thay từ Posts bằng từ chú thích số lượng bài viết của thành viên, trong diễn đàn của bạn. Tương tự với từ Points, Thanked.

Ghi chú

Chỉnh sửa lại thông số data_rank(dòng 6 - 38) theo ý muốn, trong đó:

Code:

// Đây là thiết lập cho một rank, ở một mức bài viết
10: { // 10 là số bài tối thiểu để đạt được huân chương
    title: "10 bài viết", // Ghi chú ngắn gọn cho huân chương
    desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên.", // Ghi chú chi tiết cho huân chương
    icon: "http://blog.uhm.vn/emo/laluot/2.gif" // Ảnh huân chương sẽ hiển thị
}

Bạn cũng có thể thêm điều kiện point và thank nếu muốn, ví dụ:

Code:

point: ">" // point >= post
point: "<" // point < post
point: 3 // point >= 3

Nếu như mức bài viết trùng nhau, như trong ví dụ trên, trùng mức 500 bài viết, thì bạn thêm ký tự bất kỳ ở trước.
Để thêm từng mức bài khác nhau thì bạn dùng lặp lại cấu trúc trên, lưu ý là ở nhóm cuối cùng không có dấu phẩy (,).
Nếu biết cách sử dụng plainObject, bạn cũng có thể tự thêm các thông tin khác cho phù hợp.

Xem v0.1 tại: https://zzbaivong.forumvi.com/t21-tuts-zzrank-them-huan-chuong-theo-so-bai-viet?showpost=p82

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

Spot.IM là một ứng dụng chat khá đẹp và tiện dụng, đang được nhiều website, diễn đàn ưu thích. Trong khi tình hình chatbox của forumotion có xu hướng thảm hại hóa thì việc các admin thay lòng cũng là điều tất yếu.

Cách đăng ký và sử dụng Spot.IM rất đơn giản, nên mình không hướng dẫn chi tiết.

1. Đầu tiên bạn truy cập vào https://v1.spot.im/spots
   
2. Đăng ký bằng tài khoản mạng xã hội của bạn.
   Lưu ý là lúc nó hiện các yêu cầu thông tin cá nhân thì xem xét cẩn thận, tốt nhất là nên hạn chế tối thiểu quyền của ứng dụng để tránh bị spam mail cho mình và bạn bè/người thân.
   
3. Làm theo các bước hướng dẫn bạn sẽ có được 1 code javascript để chèn vào diễn đàn.
   

Vấn đề ở đây là trong code javascript đó có cặp ký tự đặc biệt mà khi đặt vào Template của forumotion sẽ bị lỗi, nên nhiều bạn chèn code đúng vẫn không chạy được.
Khi lấy được code nó sẽ có dạng tương tự thế này:

Code:

<div id="spot-im-root"></div>
<script type="text/javascript">!function(t,o,p){function e(){var t=o.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"==o.location.protocol?"https":"http")+":"+p,o.body.appendChild(t)}t.spotId="XXXX",t.spotName="",t.allowDesktop=!0,t.allowMobile=!1,t.containerId="spot-im-root",e()}(window.SPOTIM={},document,"//www.spot.im/embed/scripts/launcher.js");</script>

Trong đó XXXX sẽ là id đăng ký Spot.IM của riêng bạn.

Tìm trong code đó, đoạn gần cuối:

Code:

window.SPOTIM={}

...sửa nó thành:

Code:

window.SPOTIM=new Object()

Việc cuối dùng là đem code đã sửa, chèn vào Template overall_footer_end, và đặt trước

Code:

</body>

---

Tags: #tutorial

zzPrettify v2 - Khung code cho diễn đàn chuyên nghiệp

zzPrettify^ver.2 sẽ làm cho khung code của bạn đẹp hơn với Google Code Prettify và tiện lợi hơn với chức năng chọn toàn bộ, chuyển dòng.

Chức năng

1. Phân dòng code
   
2. Màu riêng cho các phần tử, biến, hàm...
   
3. Chọn toàn bộ nội dung code.
   
4. Cuộn nhanh đến dòng chỉ định.
   
5. Chuyển đổi chế độ xem code gốc và code prettify.
   
6. Sửa lỗi màu trên punBB.
   
7. Giao diện mới và sửa một số lỗi nhỏ ở ver.1
   

Demo

Hướng dẫn

Bước 1

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* zzPrettify v2 by devs forumvi */
.codebox,.codebox *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.codebox{background:transparent;border:0 none;margin:0 0 10px}
.codebox dd{background:transparent;margin:0;padding:0}
.codebox > dt{position:relative;background:url(//i83.servimg.com/u/f83/16/58/89/73/page_w10.png) no-repeat scroll 10px center #777;color:#FFF;border:1px solid #e2e2e2;height:30px!important;border-bottom-width:0;line-height:26px!important;padding:2px 10px 0 30px!important}
.codebox dd.cont_code{background:#FFF;max-height:100%!important;overflow:visible!important;position:relative;border:1px solid #e2e2e2}
.cont_code > code{overflow:auto;white-space:pre;display:block;line-height:17px;padding:10px;word-break:break-word}
.pun .controlCode,.pun .controlCode *{transition:all .3s;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s}
.pun .controlCode{position:absolute;right:0;top:-30px;opacity:0}
.pun .codebox:hover .controlCode{opacity:1}
.pun .controlCode *{width:20px;height:20px!important;display:block;float:right;border:1px solid #999;background:url(http://i.imgur.com/ccn5y7c.png) no-repeat center #FFF;margin:4px 4px 0 0 !important}
.pun .controlCode input.findLine{background:url(http://i.imgur.com/8fxbcQy.png) no-repeat center #FFF!important;padding:0!important}
.pun .controlCode input.findLine:focus{background:#FFF!important;width:40px;text-align:center;color:#333;font-size:11px}
.pun .controlCode img.textCode{background-image:url(http://i.imgur.com/gXbPqhr.png)}
.pun .controlCode img.textCode.pretty{background-image:url(http://i.imgur.com/FJOia1z.png)}
.pun .controlCode :hover{cursor:pointer;border-color:#FFF}
/* Code prettify by google */
.prettyprint.linenums{box-shadow:inset 50px 0 0 #eeeeee, inset 51px 0 0 #ececf0}
.prettyprint ol.linenums{padding-left:44px;margin:0}
.prettyprint ol.linenums li{position:relative;padding-left:12px!important;color:#999;line-height:17px;text-shadow:0 1px 0 #fff;white-space:normal}
.pln{color:#48484c}
@media screen {
.lit{color:#195f91}
.fun{color:#dc322f}
.str,.atv{color:#D14}
.kwd,.tag{color:#1e347b}
.typ,.atn,.dec,.var{color:teal}
.com,.pan,.opn,.clo{color:#93a1a1}
}
@media print,projection {
.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:700}
.lit{color:#044}
.pan,.opn,.clo{color:#440}
.atn{color:#404}
.str,.atv{color:#060}
.kwd,.tag{color:#006;font-weight:700}
}

Bước 2

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:

Placement : In the topics
Javascript Code * :

Code:

/* zzPrettify v2 by devs forumvi */
function selectCode(a) {
   a = $(a).parent().next()[0];
   if (window.getSelection) {
      var b = window.getSelection();
      if (b.setBaseAndExtent) b.setBaseAndExtent(a, 0, a, a.innerText.length - 1);
      else {
         window.opera && "<BR>" == a.innerHTML.substring(a.innerHTML.length - 4) && (a.innerHTML += " ");
         var c = document.createRange();
         c.selectNodeContents(a);
         b.removeAllRanges();
         b.addRange(c)
      }
   } else document.getSelection ? (b = document.getSelection(), c = document.createRange(), c.selectNodeContents(a), b.removeAllRanges(), b.addRange(c)) :
      document.selection && (c = document.body.createTextRange(), c.moveToElementText(a), c.select())
}
$(function () {
   $(".post code").length && ($(".post code br").replaceWith("\n"), $(".post code").addClass("prettyprint linenums"), $.getScript("http://www.devs.cf/11727.js", function () {
      prettyPrint();
      $(".codebox dd.cont_code").prepend('<div class="controlCode"><img class="selectCode" title="Click để chọn toàn bộ code" onclick="selectCode(this)" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><img class="textCode" title="Bỏ số thứ tự đầu dòng" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><input class="findLine" title="Nhập số dòng muốn chuyển đến" size="4" maxlength="4" type="text" /></div>');
      $(".codebox dd.cont_code .findLine").on("input", function () {
         this.value = /\d+/g.exec(this.value);
      }).keydown(function (a) {
         var t = $(this);
         if (13 == a.keyCode) {
            a = t.parent().next().find("li:eq(" + (parseInt(this.value, 10) - 1) + ")");
            a.length && $("body, html").animate({
               scrollTop: a.offset().top
            });
            this.value = ""
         } else {
            $("body, html").animate({
               scrollTop: t.offset().top - 5
            });
         }
      }).focus(function () {
         $(this).parent().css("opacity", 1);
      }).blur(function () {
         this.value = "";
         $(this).parent().removeAttr("style");
      });
      $(".textCode").click(function () {
         var _this = $(this),
            code = _this.parent().next();
         _this.toggleClass("pretty");
         if (_this.hasClass("pretty")) {
            $("li", code).after("\n");
            code.removeClass().text(function () {
               return $(this).text()
            }).html(function () {
               return $(this).html().replace(/\n/g, "<br />")
            });
            _this.attr("title", "Thêm số thứ tự đầu dòng").next().hide();
         } else {
            $(".post code br").replaceWith("\n");
            code.addClass("prettyprint linenums");
            prettyPrint();
            _this.attr("title", "Bỏ số thứ tự đầu dòng").next().show();
         }
      });
   }));
});

Không tự động chạy prettyprint:

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

zzPrefix - Màu nền cho tiền tố trên tiêu đề

Bạn nào hay ghé qua các diễn đàn Xenforo sẽ biết cái này, tên gốc là Thread Prefix Listing.
Forumotion thì vốn thiếu thốn sẵn, thấy cái gì hay thì ta mô phỏng lại.

Chức năng

zzPrefix sẽ làm nổi bật các tiền tố đầu tiêu đề bằng cách chuyển các từ đặt trong dấu ngoặc vuông [], sang dạng HTML để mình có thể thêm CSS màu nền cho nó.

Demo

Hướng dẫn

Bước 1

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript: In all the pages

Code:

function lang_vi(a) {
   a = a.toLowerCase();
   a = a.replace(/\u00e0|\u00e1|\u1ea1|\u1ea3|\u00e3|\u00e2|\u1ea7|\u1ea5|\u1ead|\u1ea9|\u1eab|\u0103|\u1eb1|\u1eaf|\u1eb7|\u1eb3|\u1eb5/g, "a");
   a = a.replace(/\u00e8|\u00e9|\u1eb9|\u1ebb|\u1ebd|\u00ea|\u1ec1|\u1ebf|\u1ec7|\u1ec3|\u1ec5/g, "e");
   a = a.replace(/\u00ec|\u00ed|\u1ecb|\u1ec9|\u0129/g, "i");
   a = a.replace(/\u00f2|\u00f3|\u1ecd|\u1ecf|\u00f5|\u00f4|\u1ed3|\u1ed1|\u1ed9|\u1ed5|\u1ed7|\u01a1|\u1edd|\u1edb|\u1ee3|\u1edf|\u1ee1/g, "o");
   a = a.replace(/\u00f9|\u00fa|\u1ee5|\u1ee7|\u0169|\u01b0|\u1eeb|\u1ee9|\u1ef1|\u1eed|\u1eef/g, "u");
   a = a.replace(/\u1ef3|\u00fd|\u1ef5|\u1ef7|\u1ef9/g, "y");
   a = a.replace(/\u0111/g, "d");
   a = a.replace(/\W+/g, "-");
   return a.replace(/^\-+|\-+$/g, "")
}
$(function () {
   $("a[href^='/t'], a[href^='http://" + location.host + "/t']").html(function () {
      var a = $(this).text();
      if (/^\[(code|tool|hỏi đáp|thông báo|zzbaivong)\]/i.test(a)) return a.replace(/^\[[^\[\]]+\]/, function (a) {
         return '<span class="prefix ' + lang_vi(a) + '">' + a.slice(1,-1) + "</span>"
      })
   });
});

Lưu ý:
+ Nếu bạn đang sử dụng code trong bài Việt hóa URL thì trong đó đã có sẵn hàm lang_vi, nên bạn hãy xóa hàm này đi (Dòng 1 - 12).
+ Trong code trên là cách dùng giới hạn từ khóa, mỗi từ cách nhau bằng dấu gạch đứng. Nếu bạn không muốn giới hạn, tức là bất kì từ nào đặt trong dấu ngoặc vuông cũng sẽ chuyển sang dạng tiền tố nổi bật, thì bạn thay đoạn code sau:

Code:

if (/^\[(code|tool|hỏi đáp|thông báo|zzbaivong)\]/i.test(a))

...bằng:

Code:

if(/^\[([^\[\]]+)\]/.test(a))

Bước 2

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

.prefix{background:#008287;color:#FFF;border-radius:2px;display:inline-block;height:18px;line-height:18px;padding:0 4px} /* Mặc định cho các tiền tố chưa đặt style riêng */
.prefix.code{background:#16499a} /* Màu riêng cho tiền tố code */
.prefix.tool{background:#60a917} /* Màu riêng cho tiền tố Tool */
.prefix.thong-bao{background:#fa6800} /* Màu riêng cho tiền tố Thông báo */
.prefix.zzbaivong{background:#4390df} /* Màu riêng cho tiền tố zzbaivong */

Lưu ý:
+ Ngoài dòng css đầu tiên - mặc định, bạn có thể thêm màu tùy ý theo số tiền tố thường gặp trong diễn đàn của bạn.
+ Khi đặt css, bạn đặt như sau .prefix.TÊN-TIỀN-TỐ.
Tên tiền tố đặt theo nguyên tắc: Viết thường, Không dấu, Ký tự đặc biệt thì thay bằng gạch ngang. Ví dụ:

• [Thông báo] => .prefix.thong-bao
  
• [CODE] => .prefix.code
  

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

fb_Vote đánh giá bài viết và thông báo lên tường

fb_Vote sẽ thay đổi giao diện nút #vote mặc định thành giao diện nút like của #facebook(cũ).

Chức năng

1. Vote plus chuyển thành nút Thích, có thể gửi một lời khen lên tường người viết. (nếu họ cho phép)
   
2. Vote minus chuyển thành nút Báo xấu, có thể gửi một báo cáo đến Ban quản trị diễn đàn.
   
3. Các thông số hiển thị ngay bên cạnh nút bấm.
   
4. Cả 2 nút đều có thể gửi thông điệp trực tiếp.
   
5. Thông điệp không được gửi nếu người dùng không nhấn Gửi.
   
6. Có một thông điệp mặc định nếu người dùng không nhập nội dung.
   

Demo

Hướng dẫn

Bước 1

Tắt kiểm duyệt và kích hoạt chức năng Vote, Report của diễn đàn.

ACP >> QLTT >> Forum >> Security
Unauthorize unofficial forms to post messages and private messages on the forum : Không

ACP >> Modules >> Points and reputation >> Points system
Activate points system : Có
Display average points per message : Có

ACP >> QLTT >> Reports >> Report Post Hack - Configuration
Report status : Members
Allows users to report their own posts. Self-Reports : Có
Allows your users to edit their own reports. Report edit by users : Có

Bước 2

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* fb_Vote - DEVs.forumvi.com */
.vote-Zzbaivong, .vote-Zzbaivong *,.vote-Zzbaivong *:before,.vote-Zzbaivong *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.vote-Zzbaivong{margin-left:13em} /* 13em là khoảng cách đến mép trái, sửa nó về 0 hoặc số khác nếu bị lệch */
.vote-Zzbaivong{float:left;height:26px;line-height:24px;position:relative;text-align:left;white-space:nowrap}
.vote-plus-post,.vote-minus-post{z-index:10;position:absolute;top:32px;left:0;display:none;width:250px;background:#FFF;border:1px solid #F2F2F2;box-shadow:4px 4px 7px 0 #999;padding:5px}
.vote-minus-post{left:120px}
.vote-note{height:20px;line-height:20px;font-size:11px;background:#ffffd3;border:1px solid #F7EB93;margin-bottom:2px;padding:0 5px}
.vote-mess{width:200px;resize:vertical;min-height:40px;height:40px}
.vote-Zzbaivong .vote-send{width:36px;margin-top:0!important;margin-left:2px;cursor:pointer;text-align:center;vertical-align:top;height:40px;background:#0085FF;border:1px #87CEEB;color:#FFF}
.vote-plus-post:before,.vote-minus-post:before{content:'';display:inline-block;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #E2E2E2;position:absolute;left:10px;width:10px;right:-10px;top:-10px}
.vote-plus-post:after,.vote-minus-post:after{content:'';display:inline-block;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #fff;position:absolute;left:11px;right:-9px;width:9px;top:-9px}
.vote-plus{background:url(http://i57.servimg.com/u/f57/17/05/17/70/like10.png) no-repeat 5px 2px #deeaf7;height:24px;border:1px solid #C8D7EC;color:#5089BE!important;font-family:sans-serif;border-radius:2px;display:inline-block;padding:0 5px 0 25px}
.vote-plus:hover{border-color:#6A9AD6}
.vote-plus[href="javascript:;"]{color:#666!important;background-color:#DDD;cursor:no-drop;background-image:url(http://i57.servimg.com/u/f57/17/05/17/70/gpqbxh10.png);border-color:#CCC}
.vote-time{position:relative;border-radius:2px;display:inline-block;height:24px;line-height:22px;border:1px solid #D8D7D7;margin:auto 5px;padding:0 5px}
.vote-time:before{content:'';display:inline-block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #CCC;position:absolute;left:-6px;width:6px;top:5px}
.vote-time:after{content:'';display:inline-block;border-bottom:5px solid transparent;border-top:5px solid transparent;border-right:5px solid #fff;position:absolute;left:-5px;width:5px;top:6px}
.vote-minus{margin-left:20px;color:#666!important}
.vote-minus:hover{color:red!important}
.vote-minus[href="javascript:;"]{color:#C5C5C5!important;cursor:no-drop}

Bước 3

ACP >> Display >> QLTT >> Templates >> viewtopic_body

Tìm và xóa đoạn sau:

Code:

<!-- BEGIN switch_vote_active -->
...
<!-- END switch_vote_active -->

Tìm:

Code:

<div class="post-options profile_{postrow.displayed.PROFILE_POSITION}">

hoặc:

Code:

<div class="post-options">

Và thêm vào bên dưới nó code sau:

Code:

<div class="vote-Zzbaivong">
   <!-- BEGIN switch_vote_active -->
   <a class="vote-plus" href="<!-- BEGIN switch_vote -->{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}<!-- END switch_vote -->">
     Thích
    </a>
   <span class="vote-time plus-time">0</span>
   <a class="vote-minus" href="<!-- BEGIN switch_vote -->{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}<!-- END switch_vote -->">
     Báo xấu
    </a>
   <span class="vote-time minus-time">0</span>
   <div class="vote-plus-post vote-cmt">
      <p class="vote-note">Gửi một tin nhắn lên tường.</p>
      <textarea class="vote-mess"></textarea>
      <input class="vote-send" tyle="button" value="Gửi" />
   </div>
   <div class="vote-minus-post vote-cmt">
      <p class="vote-note">Gửi báo cáo lỗi về bài viết này.</p>
      <textarea class="vote-mess"></textarea>
      <input class="vote-send" tyle="button" value="Gửi" />
   </div>
   <input class="vote-tip" type="hidden" value="<!-- BEGIN switch_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_bar --><!-- BEGIN switch_no_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_no_bar -->" />
   <!-- END switch_vote_active -->
</div>

Thêm script dưới đây vào cuối temp viewtopic_body:

Code:

<script type="text/javascript">
 //<![CDATA[
 $(".vote-Zzbaivong").each(function() {
   var b = $(this);
   if (b.is(":empty")) b.html('<a class="vote-plus" href="">Thích</a><span class="vote-time plus-time">0</span><a class="vote-minus" href="">Báo xấu</a><span class="vote-time minus-time">0</span>');
   else {
      var a = b.find(".vote-tip").val(),
         c;
      /Message\sreputation\s:/.test(a) ? (c = a.split(/\W/), a = Math.round(parseInt(c[4], 10) / 100 * parseInt(c[7], 10)), c = parseInt(c[7], 10) - a) : a = c = 0;
      b.find(".plus-time").text(a);
      b.find(".minus-time").text(c)
   }
});
$(document).click(function(b) {
   $(".vote-cmt").fadeOut()
});
$(".vote-Zzbaivong").click(function(b) {
   b.stopPropagation()
});
$(".vote-plus, .vote-minus").one("click", function(b) {
   b.preventDefault();
   var a = $(this);
   b = a.attr("href");
   /us\&p_vote\=/.test(this.href) && (a.parent().children(".vote-plus, .vote-minus").attr("href", "javascript:;"), a.next(".vote-time").text(function() {
      return parseInt($(this).text(), 10) + 1
   }), a.parent().find(".vote-plus").css("background-image", "url(http://i57.servimg.com/u/f57/17/05/17/70/preloa10.gif)"), $.get(b, function() {
      a.parent().children(".vote-plus").removeAttr("style")
   }), a.siblings("." + a.attr("class") +
      "-post").fadeIn().children(".vote-mess").focus())
});
$(".vote-send").one("click", function() {
   var b = $(this),
      a = b.closest(".post"),
      c = a.find("a[href^='/report']").attr("href"),
      d = b.parent().children(".vote-mess").val(),
      f = b.parent().children(".vote-note");
   f.text("Đang xử lý...");
   if ("vote-plus-post vote-cmt" == b.parent().attr("class")) {
      var e = "http://" + location.host + location.pathname + "#" + c.replace(/.*p=(\d+).*/, "$1"),
         c = $.trim(a.find(".user a[href^='/u']:not(:has(img)):first").text()),
         a = a.find(".user a[href^='/u']:first").attr("href").replace(/.*\/u(\d+).*/, "$1"),
         e = "Mình thích bài viết của bạn tại [url=" +
         e + "]" + document.title + "[/url]";
      d.replace(/\s/g, "").length && (e = e + "[quote]" + d + "[/quote]");
      $.post("/privmsg", {
         subject: "Bài viết hay",
         message: e,
         username: c,
         u: a,
         mode: "post_profile",
         folder: "profile",
         post: "Send"
      }, function() {
         f.text("Tin nhắn đã được gửi");
         b.closest(".vote-cmt").delay(300).fadeOut()
      })
   } else 3 >= d.replace(/\s/g, "").length && (d = "Bài viết vi phạm nội quy diễn đàn."), $.post(c, {
      message: d,
      post: "Save"
   }, function() {
      f.text("Báo cáo đã được gửi");
      b.closest(".vote-cmt").delay(300).fadeOut()
   })
});
$(".vote-Zzbaivong > a[href='']").attr("href", "javascript:;");
 //]]>
</script>

Cách dùng khác

1. Không viết lên tường: http://devs.forumvi.com/t15p45-code-fb_vote-danh-gia-bai-viet-va-thong-bao-len-tuong#2170
   
2. Tự động viết lên tường: http://devs.forumvi.com/t15p60-code-fb_vote-danh-gia-bai-viet-va-thong-bao-len-tuong#2195
   

Tác giả

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

CodeMirror là một Text editor, viết bằng Javascript hoạt động trên trình duyệt, được dùng trong dev tool của Chrome, Firefox và nhiều Text editor khác như Brackets,  Light Table, ... Trong forumotion, nó được dùng làm công cụ chỉnh sửa CSS, Templates, trang html.
Ở bài này mình sẽ ứng dụng nó để làm nổi bật cú pháp trong code. Xét về dung lượng, nó có vẻ hơi khủng nếu đem so với 2 cách dùng plugin Google Code Prettify và Prismjs mà mình giới thiệu trước đây. Tuy nhiên, trái với vẻ bề ngoài nặng nề, nó có tốc độ xử lý rất nhanh và ổn định.

Chức năng

Ưu điểm

• Chức năng di chuyển nhanh bằng cách nhập số dòng. Nhập 0 để chuyển đến dòng cuối.
  
• Hỗ trợ chọn nhanh toàn bộ code.
  
• Xử lý nhanh chóng, phân biệt rõ cú pháp trong code.
  
• 30 giao diện thoải mái lựa chọn.
  
• Hỗ trợ rất nhiều Add-on và API nếu bạn muốn tùy chỉnh thêm.
  

Nhược điểm

• Chỉ áp dụng cho 3 loại ngôn ngữ HTML-CSS-JS.
  
• Một số mã regexp không được xác định đúng.
  

Cập nhật: Sử dụng phiên bản mới nhất cho các addon (21/6/2015), và thay thế core của codemirror bằng addon stand-alone, giúp giảm dung lượng từ 192kb xuống còn 48kb.

Demo

Hướng dẫn

Tạo file javascript zzCodeMirror
Title * : zzCodeMirror
Placement : In all the pages
Javascript Code * :

Code:

$(function() {
    window.codeTranslate = {
        gotoLineOffsetTop: 5
    };
    $("code").length && $.getScript("http://baivong.github.io/cdn/devsforumvi/js/35300.js");
});

Trong code trên, gotoLineOffsetTop là tham số khoảng cách của dòng code với mép trên trình duyệt. Nếu bạn sử dụng Toolbar của forumotion thì thay số 5 bằng 35.

Chú ý:
zzCodeMirror không sử dụng được cho phpBB2.
Gỡ bỏ các mod, plugin liên quan đến khung code trước khi sử dụng.
Nên upload lại file CSS và Javascript lên host của riêng bạn khi sử dụng, ví dụ như Google. Xem hướng dẫn tại đây.
zzCodeMirror được tùy biến để nhận dạng 3 ngôn ngữ HTML - CSS - Javascript, đây là phần mình viết thêm nên nếu gặp lỗi thì gửi báo cáo ngay tại chủ đề này. Thử nghiệm tại http://jsfiddle.net/v6WUw/

Phiên bản áp dụng

phpBB3, punBB, Invision

Source code

CSS

http://pastebin.com/523QrtQs

Javascript

http://pastebin.com/icPVNrXK

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

Thống kê bài viết 3 cột

Chức năng

Thống kê bài viết, với 3 cột thông tin:

1. Danh sách bài viết mới
   
2. 10 bài viết được xem nhiều nhất
   
3. 10 bài viết trả lời nhiều nhất
   

Chú ý: Hướng dẫn này dành cho punBB

Demo

Hướng dẫn

Bước 1

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Thêm vào CSS:

Code:

/* Latest topics */
#left,#left *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#content-container div#container{float:none}
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left td{border-width:0 1px;width:25%;vertical-align:top}
#left th{width:25%;vertical-align:middle}
#left .double{border-left:0;width:50%}
#left th.double{padding:0 12px;text-align:left}
#left ul,#left th{padding:10px 10px 10px 30px;margin:0}
#left ul{max-height:210px;overflow:auto}
#left li{counter-increment:Zzindex;height:19px;line-height:19px;position:relative;width:100%;list-style-type:none}
#left li:before{content:counter(Zzindex);display:block;height:17px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:1px;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:10}
#left li:after{content:" ";background:#EBEBEB;display:block;width:6px;height:6px;position:absolute;top:6px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#FD5405}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#FDB55A}
#left li:nth-child(3) ~ li:before,#left li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:absolute;display:block;width:60%;left:0;top:0}
#active_topics a,#viewed_topics a{width:70%}
#left #recent_topics a{width:80%}
#left .lastRight{right:0;text-align:right;position:absolute;top:0;left:auto;width:100px!important}
/* Tooltip */
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}

Bước 2

ACP >> Display >> QLTT

over_header: Tìm và xóa đoạn sau

Code:

<div id="{ID_LEFT}">
        <!-- BEGIN giefmod_index1 -->
        {giefmod_index1.MODVAR}
        <!-- BEGIN saut -->
        <div style="height:{SPACE_ROW}px"></div>
        <!-- END saut -->
        <!-- END giefmod_index1 -->
</div>

index_body: Tìm

Code:

{CHATBOX_TOP}

...và thêm vào trước nó:

Code:

<div id="{ID_LEFT}" class="main">
   <div class="main-head">
      <div class="page-title">
         <h2>Thống kê bài viết</h2>
      </div>
   </div>
   <div class="main-content">
      <table cellspacing="0" class="table">
         <tbody class="statused">            
            <tr>              
               <!-- BEGIN giefmod_index1 -->
               {giefmod_index1.MODVAR}                                
               <!-- END giefmod_index1 -->
            </tr>
         </tbody>
      </table>
   </div>  
   <script type="text/javascript">
      //<![CDATA[          
      var versionMinor = parseFloat(navigator.appVersion),
      versionMajor = parseInt(versionMinor),
      IE = document.all && !window.opera && 7 > versionMajor,
      IE7 = document.all && !window.opera && 7 <= versionMajor,
      OP = window.opera,
      FF = document.getElementById,
      NS = document.layers;
      function get_item(a, c) {        
         if (IE) return c ? window.opener.document.all[a] : document.all[a];        
         if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);        
         if (NS) return c ? window.opener.document.layers[a] : document.layers[a]    
      }          
      var current_tooltip;
      function show_tooltip(a, c) {        
         var b = get_item("tooltip");        
         b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));        
         b.style.zIndex = 1000;        
         b.style.position = "absolute";        
         b.innerHTML = "<p>" + c + "</p>";        
         b.style.visibility = "visible";        
         a.onmousemove = move_tooltip;        
         a.onmouseout = function() {            
            b.style.visibility = "hidden"        
         };        
         a.title = ""    
      }    
      var offsetxpoint = -60,
      offsetypoint = 20,
      real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
      real_body = document.documentElement ? document.documentElement : document.body;
      function move_tooltip(a) {        
         var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
         d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
         b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
         e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
         f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;        
         current_tooltip = get_item("tooltip");        
         current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";        
         current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"    
      }    
      $("#recent_topics li a:first-child").mouseover(function() {        
         show_tooltip(this, $(this).next().html())    
      });    
      $("#active_topics a, #viewed_topics a").mouseover(function() {        
         show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));    
      }).after(function() {        
         return '<span class="lastRight">' + $(this).attr("alt").replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'    
      });     //]]>
   </script>
</div>

Bước 3

ACP >> Display >> Portal

Thay thế toàn bộ các template sau:

mod_recent_topics:

Code:

<!-- BEGIN classical_row -->
<!-- <tr> -->
   <th class="double">
      <h2>Bài viết mới
         <span class="right">Người gửi cuối</span>
      </h2>
   </th>
   <th>
      <h2>Trả lời nhiều nhất</h2>
   </th>
   <th>
      <h2>Lượt xem nhiều nhất</h2>
   </th>
</tr>
<tr>
   <td class="double">
      <ul id="recent_topics">
         <!-- BEGIN recent_topic_row -->
         <li>
            <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
            <div class="tooltip_data" style="display:none">
               <p>
                  <span style="color:red">Tiêu đề</span>: {classical_row.recent_topic_row.L_TITLE}
               </p>
               <p>
                  <span style="color:blue">Gửi lúc</span>: {classical_row.recent_topic_row.S_POSTTIME}                                        
               </p>
            </div>
            <!-- BEGIN switch_poster -->
            <a class="lastRight" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->
            <!-- BEGIN switch_poster_guest -->
            <span class="lastRight">
               {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}                                
            </span>
            <!-- END switch_poster_guest -->
         </li>
         <!-- END recent_topic_row -->
      </ul>
   </td>
<!-- </tr> -->
<!-- END classical_row -->

mod_most_active_topics:

Code:

<td>
   <ul id="active_topics" class="half">
      <!-- BEGIN TOPIC -->
      <li>
         <span style="display:none">{TOPIC.TITLE}</span>
         <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
      </li>
      <!-- END TOPIC -->
   </ul>
</td>

mod_most_viewed_topics

Code:

<!--<tr>-->
   <td>
      <ul id="viewed_topics" class="half">      
      <!-- BEGIN TOPIC -->      
         <li>        
            <span style="display:none">{TOPIC.TITLE}</span>        
            <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
         </li>      
      <!-- END TOPIC -->
      </ul>
   </td>
</tr>

Bước 4

ACP >> Modules >> Portal & Widgets >> Forum widgets management

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial #latest-topics

zzVotePlus - Chức năng bỏ phiếu với giao diện Google plus

Giao diện chức năng vote làm theo mẫu của google plus, vì thế mình chỉ dùng nút vote +, còn nút vote - thì bỏ đi. Nếu diễn đàn bạn từng dùng cả 2 loại trước đây cũng sẽ không bị lỗi khi chuyển sang dùng zzVotePlus.
Ngoài ra, chức năng gửi thông báo lên tường cũng được tích hợp sẵn.

Demo

Hướng dẫn

Bước 1

Thêm vào CSS:

Code:

/* zzVotePlus by Zzbaivong - devs.forumvi.com */
div.vote-zzvote{float:left;margin-left:2em}
div.vote-zzvote > a.vote-plus{background:none no-repeat center #FFF;color:#444;cursor:pointer;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);box-shadow:0 1px 0 rgba(0,0,0,.05);border:1px solid #d9d9d9;border-radius:3px;font-size:11px;font-weight:700;display:inline-block;float:left;height:22px;line-height:20px;transition:background .3s;-webkit-transition:background .3s;-moz-transition:background .3s;padding:0 7px}
div.vote-zzvote > a.vote-plus:hover{border-color:#666}
div.vote-zzvote > a.vote-plus[href=""]{border:0 none;line-height:22px;background-color:#dd4b39;cursor:default;color:#FFF}
div.vote-zzvote > a.vote-plus.dis{background-color:#FFF;color:#CCC}
div.vote-zzvote > a.vote-plus.dis:hover{border-color:#d9d9d9;cursor:not-allowed}

Bước 2

Sửa temp viewtopic_body

Xóa code Temp nút vote mặc định

Code:

<!-- BEGIN switch_vote_active -->
...
<!-- END switch_vote_active -->

Đặt code Temp này ở trong div.post-options

Code:

<!-- zzVotePlus by Zzbaivong - devs.forumvi.com -->
<div class="vote-zzvote">
   <!-- BEGIN switch_vote_active -->
   <a class="vote-plus" href="<!-- BEGIN switch_vote -->{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}<!-- END switch_vote -->">
      +<span class="vote-time" data-vote="<!-- BEGIN switch_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_bar --><!-- BEGIN switch_no_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_no_bar -->">1</span>
   </a>
   <!-- END switch_vote_active -->
</div>

Đặt code javascript này ở trước div.main-foot hoặc cuối template viewtopic_body:

Code:

<!-- zzVotePlus by Zzbaivong - devs.forumvi.com -->
<script type="text/javascript">
   //<![CDATA[
   $(".vote-zzvote:empty").html('<a class="vote-plus dis" href="javascript:;">+<span class="vote-time" data-vote="Message not voted">1</span></a>');
   $(".vote-time").text(function() {
      var a = $(this).data("vote");
      if ("Message not voted" == a) return $(this).data("vote", 0), 1;
      a = a.split(/\W/);
      time = parseInt(a[7], 10);
      percent = parseInt(a[4], 10);
      plus = Math.round(percent / 100 * time);
      $(this).data("vote", plus);
      if (0 !== plus) return plus
   });
   $(".vote-plus").on("click", function(a) {
      a.preventDefault();
      var b = $(this),
         c = $(".vote-time", b); - 1 != this.href.indexOf("eval=plus&p_vote") && (b.css("background-image", "url(http://i57.servimg.com/u/f57/17/05/17/70/preloa10.gif)"), $.post(this.href, function() {
            c.text(parseInt(c.data("vote"), 10) + 1);
            $post = b.closest(".post");
            $user = $post.find(".user a[href^='/u']:not(:has(img)):first");
            $.post("/privmsg", {
               subject: "Bài viết hay",
               message: "Mình thích bài viết của bạn tại [url=" +
                  $post.find(".posthead a[href^='/t'][href*='#']")[0].href + "]" + document.title + "[/url]",
               username: $.trim($user.text()),
               u: $user.attr("href").replace(/.*\/u(\d+).*/, "$1"),
               mode: "post_profile",
               folder: "profile",
               post: "Send"
            }, function() {
               b.removeAttr("style")
            })
         }), this.href = "")
   });
   //]]>
</script>

Chú ý: Nếu bạn nhấn vote mà kết quả trả về là NaN thì ở code javascript, dòng 7 và dòng 12, bạn sửa:

Code:

data("vote"

...thành:

Code:

attr("data-vote"

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial

zzRedirects v3 - Chuyển hướng liên kết ngoài

Chức năng này sẽ tạo ra thông báo nhắc nhở người dùng, khi họ click vào liên kết lạ.
Đối với một Admin, đa phần đều muốn 4rum có lượng truy cập đông, thời gian ở lại lâu, tất nhiên sẽ chẳng ai muốn người xem rời đi chỉ vì click nhầm vào liên kết nào đấy. Một thông báo, nhắc nhở khi người xem click vào liên kết lạ sẽ có ích trong trường hợp này, trong lúc người xem đang suy tư với thì một số Admin còn gắn thêm quảng cáo, hoặc kèm vài lời đe dọa như: Chúng tôi không chịu trách nhiệm khi bạn chuyển đến liên kết này, bala bala...

Demo

https://www.google.com.vn/

Chức năng

• Khi người xem click vào liên kết ngoài (trừ liên kết ảnh), sẽ xuất hiện một thông báo chuyển hướng với 2 lựa chọn: Trở về hoặc tiếp tục.
  
• Tự chuyển trang sau 5 giây nếu người dùng không lựa chọn.
  
• Thông báo lỗi nếu sai thông số chuyển hướng
  

Hướng dẫn

Bước 1

Thêm vào CSS
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* zzRedirects v3 - devs.forumvi.com */
#redirects{background:#FFF;width:75%;margin:30px auto;padding:20px 30px;border:1px solid #DDD}
#redirects h3{border-bottom:1px solid #ddd;font-size:17px;font-weight:400;padding-bottom:10px;color:#830000;margin:0 0 20px}
#redirects p{color:#222;font-size:13px;line-height:20px;margin:5px auto 15px}
.redirectFooter{background-color:#fff;padding:20px 0 30px}
#redirectButtons{float:right;list-style-type:none;margin:0;padding:0}
#redirectButtons li{float:left}
#redirectButtons a{transition:all .2s linear 0;-moz-transition:all .2s linear 0;-o-transition:all .2s linear 0;-webkit-transition:all .2s linear 0;background-color:#0063dc;border:0 none;color:#fff!important;font-size:12px;line-height:30px;min-width:45px;text-align:center;display:block;text-decoration:none!important;padding:0 10px}
#redirectButtons a.cancel{background-color:#eee;color:#888!important;margin-right:10px}
#redirectButtons a:hover{background:#333}

Bước 2

Tạo trang HTML:
ACP >> Modules >> HTML & JAVASCRIPT >> HTML pages management >> Create in advanced mode (HTML)

Do you wish to use your forum header and footer ?: Có
Page content *
punBB:

Code:

<script type="text/javascript">
//<![CDATA[
/* zzRedirects v3 - devs.forumvi.com */
(function() {  
    $("#main-content").html('<div id="redirects"><h3><span id="reTitle">Lỗi</span> chuyển hướng...</h3><p id="redirectMess"><span style="color:red">Không tìm thấy tham số cần thiết.</span><br />Đây là trang xác nhận chuyển hướng đến các liên kết ngoài diễn đàn. Nếu bạn vô tình vào trang này, hãy nhấn vào <a href="/" rel="nofollow" style="font-weight: bold; color: blue;">đây</a> để quay lại. Nếu không, hãy <a href="/contact" rel="nofollow" style="font-weight: bold; color: green;">liên hệ</a> với BQT để báo lỗi này.</p><div class="redirectFooter"><ul id="redirectButtons"><li><a id="fromLink" class="cancel" href="">Quay lại</a></li></ul></div></div>');  
    var b = GetParam("url"),
        d = "/";  
    if (null !== b) {    
        b = decodeURIComponent(b);    
        d = document.referrer;    
        $("#reTitle").text("Đang");    
        $("#redirectMess").html('Bạn đang chuẩn bị rời khỏi <span id="fromTitle">diễn đàn</span> và di chuyển đến đường dẫn: <b><a id="toLink" href="" title="" rel="nofollow">...</a></b> trong vòng <b><span class="delayTime">5</span></b> giây nữa...<br />Bạn có chắc chắn là muốn đến đường dẫn này không?');    
        (a = window.name) && $("#fromTitle").html("<strong>" + a + "</strong>");    
        window.name = "";    
        a = b;    
        35 <= b.length && (a = b.slice(0, 32) + "...");    
        $("#toLink").attr({      
            href: b,
            title: b    
        }).text(a);    
        $("#redirectButtons").append('<li><a href="' + b + '" id="gotoBtn" class="redirectSkip forward" rel="nofollow">Tiếp tục (<span class="delayTime">5</span>)</a></li>');    
        var c, e = 5;    
        c = setInterval(function() {      
            var a = e--;      
            0 > a ? (clearInterval(c), window.location = b) : $(".delayTime").text(a)    
        }, 1E3);    
        $("a", "#redirectButtons").click(function() {      
            clearInterval(c)    
        })  
    }  
    $("#fromLink").attr("href", d)
})();
//]]>
</script>

Chú ý: Ghi nhớ PAGE ID của trang HTML vừa tạo
Nếu diễn đàn của bạn không sử dụng phiên bản punBB, thì ở trong code trên, dòng 5, tìm: #main-content sửa thành:

• Invision: #content
  
• PhpBB2, PhpBB3: #emptyidcc
  

Bước 3

Tạo file Javascript:
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Title * : zzRedirect
Placement : In the topics
Javascript Code * :
punBB, Invision:

Code:

/* zzRedirects v3 - devs.forumvi.com */
$(function() {
   $(".post-entry a").not("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif'],a[href$='.bmp'],a[href^='/'],a[href^='#'],a[href^='?'],a[href^='http://" + location.host + "']").addClass("external").click(function(a) {
      a.preventDefault();
      window.open("/h{PAGE_ID}-redirect?url=" + encodeURIComponent(this.href), document.title);
   });
});

Chú ý: Thay {PAGE_ID} trong code trên bằng số thứ tự trang HTML tạo ở bước 2.
Nếu diễn đàn của bạn sử dụng phiên bản PhpBB2 hoặc PhpBB3, thì ở trong code trên, dòng 3, tìm: .post-entry a sửa thành: .postbody a

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial