[TUTs] zProfile 1.2

  Bài viết hay nhất1

Giới thiệu:

zProfile là một sản phẩm được dùng để trang trí profile và tạo sự sáng tạo trong mỗi người dùng. Với zProfile, bạn có thể trang trí profile của bạn theo ý muốn bằng html và css.

Project page:

https://github.com/mysticzero/zProfile

License:

MIT license

Chức năng:


  • Tuỳ chỉnh profile bằng html và css
  • Không chuyển trang khi tuỳ chỉnh
  • Hiện reputation cho người dùng của profile đó
  • Khung soạn thảo nhanh cho wall, không chuyển trang
  • Khoá một vài html tag vì lý do bảo mật và an toàn, đồng thời hỗ trợ chức năng kiểm duyệt từ
  • Thêm bạn, xoá bạn, thêm vào danh sách đen không chuyển trang
  • Người dùng có thể tự thêm chức năng dựa theo function có sẵn trong plugin


Demo:

Spoiler:

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

Bước 1:

ACP -> Users & Groups -> Profiles -> Tạo 2 fields mới -> Tên gì cũng được, Type: Text zone, Necessarily filled ?: No, Display: Profile, Who can modify the profile field value ?: Member himself

Bước 2:

Đây là CSS mặc định cho zProfile, cho vào chỗ Default content: của 1 trong 2 cái vừa tạo ở trên
Code:
body {    background-color: #F1F1F1;    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;    font-size: 12px;}.pun {    background: #fff !important;}#new-message, #profile-head .stats-field {    position: absolute;    bottom: 0px;}#profile-head .stats-field {    right: 10px;}#profile-head .stats-field ul {    list-style: none;}#profile-head .stats-field li, #profile-head .stats-field legend, #profile-head .stats-field li:nth-child(2) label, #profile-head .stats-field li:nth-child(3) label {    display: none;}#profile-head .stats-field li:nth-child(2), #profile-head .stats-field li:nth-child(3) {    display: block;    float: left;    border-radius: 50%;    color: #F0F0F0;    margin: 20px;    width: 50px;    height: 50px;    text-align: center;    line-height: 50px;}#profile-head .stats-field li:nth-child(2) {    background: #03436A;}#profile-head .stats-field li:nth-child(3) {    background: #8F4817;}#tabs ul {    list-style-position: outside;    list-style-type: none;    padding: 0 1.8em;    white-space: nowrap;}#tabs ul li {    float: left;    margin: 0;    padding: 0 4px 0 0;}#tabs ul li a {    float: left;}#tabs li a,.main-head,#pun-intro {    background-color: #312A1E!important;    border: 0!important;}#tabs li a,.main-head,#profile-advanced-add a {    font: 1.1em'Open Sans Condensed',sans-serif;    color: #F0F0F0!important;    text-align: center;    font-weight: bold!important;    text-decoration: none;    line-height: 2em;}#tabs li.activetab a {    text-decoration: underline;}#pun-intro a,#profile-cover a {    color: #F0F0F0!important;    text-decoration: none;}.main-head {    padding: .7em 1.3em;}#profile-advanced-details textarea {    resize: vertical;    height: 90px;    width: calc(100% - 5px);}#tabs li a {    padding: 10px!important;    margin-left: -4px;    background: url("http://2.bp.blogspot.com/-IfiIwt0iR5c/UL4zzUjtGyI/AAAAAAAABho/rlYYH1q2iCY/s1600/sec-sep.gif")no-repeat scroll left top transparent;}.pun {    background-color: #FAFAFA;    width: auto;    padding: 0 !important;}#profile-head {    margin-bottom: 90px;    position: relative;}#profile-cover {    background-color: #227264;    padding: 125px 10px;}#profile-body {    padding: 0 30px;}#profile-advanced-right {    float: right;    width: 302px;}#a:link,#profile-advanced-right.module.main a:link {    color: #626262!important;    text-decoration: none;    transition: color 0.2s ease-in-out 0s;}#profile-advanced-details a:hover,#profile-advanced-right.module.main a:hover {    color: #8F8F8F!important;}#profile-advanced-details .main-content, #profile-advanced-right .main-content {    background-color: #fbfbfb;    border: 1px solid #ddd;    padding: 10px;}.field_uneditable {    border: 1px solid#DDDDDD;    max-height: 60px;    overflow: auto;    padding: 5px;}#copyright a {    color: #000;    text-decoration: none;}#profile-advanced-add a {    display: block;    margin: auto;    max-width: 60%;    padding: 5px;    text-decoration: none;}#profile-advanced-add a:first-child {    background-color: #459766;    margin-bottom: 5px;}#profile-advanced-add a:last-child {    background-color: #FF5959;}#profile-loading {    font-size: 16px;    font-weight: bold;    margin: auto auto 5px;    padding: 10px;    text-align: center;    width: 80px;}#wall-reply {    margin-bottom: 10px;    padding: 5px;}#wall-reply div input[name="subject"] {    float: right;    width: 350px;}#wall-reply div input[name="preview"],#wall-reply div input[name="post"] {    background-color: #F4F4F4;    border: 1px solid#DDDDDD;    cursor: pointer;    margin-left: 6px;}#wall-reply div input[name="subject"] {    float: right;    width: 350px;}#wall-reply div input[name="preview"]:hover,#wall-reply div input[name="post"]:hover {    box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.25);}#outter-wall {    position: relative;    margin-bottom: 8px;}#wall-preview {    position: absolute;    height: 100%;    width: 100%;    background-color: #F4F4F4;    border: 1px#ddd solid;}#profile-advanced-left {    margin: 0!important;}#profile-advanced-layout {    margin: 0!important;    width: calc(100% - 310px);    float: left;}.invisible {    display: none;    visibility: hidden;}#profile-advanced-details dl dd {    margin-left: 10em;    padding-left: 12px;}.ajax-profil_parent {    position: relative;    zoom: 1;}#profile-advanced-details dl {    margin: 10px 0 0;    padding: 8px 10px 8px 0;    width: 98%;}.middleline {    line-height: 2em;}#profile-advanced-details dl dt {    display: block;    float: left;    width: 10em;}#profile-advanced-details div.separator {    border-bottom: 1px solid #dcdcdc;    clear: both;    font-size: 1px;    line-height: 1px;    padding-top: 10px;}#profile-advanced-details .ajax-profil_edit {    left: -4px;    cursor: pointer;    left: -12px;    position: absolute;    top: 6px;}

Bước 3:

Đây là HTML mặc định cho zProfile, cho vào chỗ Default content: của 1 trong 2 cái vừa tạo ở trên
Code:
<font color="white"><center><b>Welcome <a href="/u{UID}">{UNAME}</a> to my profile</b><br><br>Thank you for using zProfile <br>Developed by Zero and released under <a href="https://tldrlegal.com/license/mit-license">the MIT license</a><br>Visit my <a href="https://github.com/mysticzero/zProfile">project page</a> or <a href="http://devs.forumvi.com/t119-tuts-zprofile-11">official thread</a> for more information</center></font>

Bước 4:

Rê chuột vào . Trình duyệt sẽ hiện lên url của cái đó nằm trong tooltip và nhớ số id nằm sau &id= cho 2 cái fields vừa tạo ở trên. Chọn , rồi chọn Replace the content. Làm bước này cho 2 cái fields trên

Bước 5:

Tạo 1 trang HTML mới, ở trong Modules -> HTML pages management, tiêu đề gì cũng được và với nội dung là phần code của Bước 2

Bước 6:

Khi tạo xong, nhớ đường dẫn cho trang html đó. Vào Modules -> Javascript codes management, tạo cái mới, tiêu đề gì cũng được, đặt ở In all the pages, và với nội dung bên dưới
Code:
(function($) {
    $.zprofile = function(options) {
        var settings = $.extend({
            htmlID: 0,
            cssID: 0,
            guest: 1,
            tag: ['<script>', '<html>', '<iframe>', '<body>', '<head>'],
            cssDefault: 0,
            version: 0,
        }, options);
        userid: 0;
        start = function() {
            if (document.getElementById('tabs') && location.pathname.substring(0, 2) == '/u') {
                this.prepare();
                document.getElementById('profile-advanced-layout').insertAdjacentHTML('beforeend', '<div id="copyright"><b>zProfile by Zero</b></div>');

            }
            if (settings.version == 'punbb') {
                $('#profile-advanced-details .main-head').first().remove();
                $('#profile-advanced-add br').remove();
                $('#profile-advanced-layout').before('<div id="profile-head"><div id="profile-cover"></div></div>');
            }
            this.checkLocation('', function() {
                    updateUI($('#field_id' + settings.cssID + ' .field_uneditable').text(), $('#field_id' + settings.htmlID + ' .field_uneditable').text());
                    $('#profile_field_2_' + settings.cssID).after('<a style="cursor:pointer" onclick="zprofile.back()">Default</a>');
                },
                function() {
                    $.get('/u' + location.pathname.match(/[0-9]/), function(data) {
                        css = $(data).find('#field_id' + settings.cssID + ' .field_uneditable').text();
                        html = $(data).find('#field_id' + settings.htmlID + ' .field_uneditable').text();
                        updateUI(css, html);
                    });
                });
            this.checkLocation('stats', function() {
                reputation('#profile-advanced-details');
            }, function() {
                $.get('/u' + location.pathname.match(/[0-9]/) + 'stats', function(data) {
                    reputation(data);
                });
            });
            this.checkLocation('wall', function() {
                this.zeditor.editor();
            });
            $('script').detach();
            $('#profile-advanced-layout, #profile-advanced-right').wrapAll('<div id="profile-body" />');

        };
        prepare = function() {
            uname = _userdata['username'];
            uid = _userdata['user_id'];
            if (settings.guest && document.getElementById('logout') == null) {
                document.body.style.display = 'none';
                alert('Please login to use this feature');
                location.href = 'http://' + location.host;
            }
            if (document.getElementById('logout')) {
                $('#profile-advanced-right .module.main').has('noscript').remove();
                $('#main-content div').first().remove();
            }
            if (uname != $('#profile-advanced-right .h3 span').first().text()) {
                $('#field_id' + settings.htmlID + ', #field_id' + settings.cssID).hide().next().hide();
            }
        };
        updateUI = function(css, html) {
            $('head').append('<style>' + css + '</style>');
            $('#profile-cover').append(html.replace('{UNAME}', uname).replace('{UID}', uid))
        };
        checkLocation = function(mode, succ, fail) {
            if (typeof(succ) === 'function' && location.pathname.replace('/u', '').replace(/[0-9]/g, '') == mode) {
                succ();
            }
            if (typeof(fail) === 'function' && location.pathname.replace('/u', '').replace(/[0-9]/g, '') != mode) {
                fail();
            }
        };

        tabs = function(name, href) {

        };
        loading = function(where, b) {
            a = document.getElementById('profile-loading');
            $('<div id="profile-loading" class="main-content" style="opacity: 1"><img src="http://i11.servimg.com/u/f11/16/80/27/29/ajax-l10.gif" /><br/>Loading...</div>').appendTo(where);
            if (a) b == 'hide' ? a.style.opacity = '0' : a.style.opacity = '1';
        };
        zeditor = {
            editor: function() {
                $.get('/privmsg?mode=post_profile&u=' + location.pathname.match(/\d+/), function(a) {
                    document.getElementById('profile-advanced-details').getElementsByClassName('main-content')[0].insertAdjacentHTML('beforebegin', '<div id="wall-reply" class="main-content"><form action="/privmsg?mode=post_profile" name="post" method="post"><div id="outter-wall"><div id="wall-preview" style="display:none" ondblclick="this.style.display = \'none\'" title="Double click to close this window"></div><textarea id="text_editor_textarea" cols="9" rows="3" name="message" placeholder="Message: ' + $(a).find('.frm-set dd').text().replace(/N/gi, 'N |').replace(/F/gi, 'F |') + '"></textarea></div>' + $('<div/>').append($(a).find('.frm-buttons input[type="hidden"]').clone()).html() + '<div><input type="submit" accesskey="s" tabindex="6" value="Send" name="post"><input type="submit" value="Preview" name="preview"><input type="text" name="subject" id="subject" placeholder="Subject"></div></form></div>');
                    document.forms['post']['post'].addEventListener('click', function(event) {
                        event.preventDefault();
                        zeditor.send();
                    });
                    document.forms['post']['preview'].addEventListener('click', function(event) {
                        event.preventDefault();
                        zeditor.preview();
                    });
                });
            },
            send: function() {
                x = document.getElementById('text_editor_textarea');
                y = document.getElementById('subject');
                if (x.value != '') {
                    $.post('/privmsg?mode=post_profile', $('#wall-reply form[name="post"]').serialize() + '&post=1', function(b) {
                        if (b.indexOf('A new message') > 0) {
                            $.post('/privmsg', $(b).find("form[method='post']").serialize() + '&post=1');
                        }
                        x.value = '';
                        y.value = '';
                        $.get(window.location + 'wall #profile-advanced-details', function(a) {
                            $($(a).find('ol li.clearfix:first').html()).prependTo('#profile-advanced-details ol').hide().fadeIn('slow');
                        });

                    });
                } else {
                    alert('Vui lòng điền nội dung cho tin nhắn')
                }
            },
            preview: function() {
                $.post('/privmsg?mode=post_profile', $('#wall-reply form[name="post"]').serialize() + '&preview=1', function(b) {
                    $('#wall-preview').html($(b).find('.entry-content').html());
                    document.getElementById('wall-preview').style.display = '';
                });
            },
        };
        reputation = function(dom) {
            $('#profile-head').append($(dom).find('.stats-field:eq(0)'));
        };
        start();
        tabs();
    }
}(jQuery));

Hướng dẫn sử dụng:

Code:
$(function() {
    $.zprofile({
        htmlID: '3',
        cssID: '2',
        cssDefault: '/h7-',
        version: 'punbb',
        guest: 0,
    });
});
Hàm ở trên được dùng để tạo settings cho zProfile, mỗi người sẽ khác nhau, ở trên là ví dụ. Bạn phải cần chỉnh sửa thông số của nó lại. Đọc Settings bên dưới để biết thêm chi tiết

Settings:

htmlID - ID của html field, giá trị này mình kêu nhớ ở Bước 4(giá trị mặc định: null)
cssID - ID của css field, giá trị này mình kêu nhớ ở Bước 4(giá trị mặc định: null)
guest - Cấm guest truy cập vào profile (giá trị mặc định: true)
tag - Những HTML tag đã cấm trong zProfile (giá trị mặc định: ['<script>', '<html>', '<iframe>', '<body>', '<head>'])
cssDefault - đường dẫn đến trang tải CSS, giá trị này mình kêu nhớ ở Bước 6 (giá trị mặc định: null)
version - bao gồm giá trị punbb, phpbb3, và invision (giá trị mặc định: null)








Written and distributed by Zero under MIT license @ devs.forumvi.com
Viết và phát hành bởi Zero dưới MIT license @ devs.forumvi.com

Old thread:
Giới thiệu: Đây là ý tưởng do mình nghĩ ra và áp dụng vào cho Chinhphuc. Thấy nhiều người thích nên mình đã viết riêng ra thành một mod mới gọi là zProfile. Mod này thêm nhiều chức năng mới và cải tiến so với mod mình viết cho Chinhphuc.
Tác giả: Zero
Quyền lợi: Bạn được quyền sử dụng miễn phí mod nếu bạn tôn trọng công sức của tác giả, và bản quyền
Phiên bản cũ: https://code.google.com/p/zprofile/

Script đã được cập nhật và sửa lỗi, vui lòng cập nhật lại Default content của CSS và thay script cũ bằng script mới :) (22-05-2013)

Chức năng chỉnh sửa của profile có lúc hoạt động có lúc không. Refresh (F5) nếu không hoạt động. Sẽ được sửa lỗi trong phiên bản sắp tới (22-05-2013)

Chức năng:
- Tuỳ chỉnh giao diện của profile bằng css và html
- Giao diện đẹp, thân thiện, và dễ sử dụng
- Cập nhật css và html không chuyển trang (live editing)
- Khoá một vài html tag vì lý do bảo mật và an toàn, đồng thời hỗ trợ chức năng kiểm duyệt từ
- Xoá quảng cáo cho member
- Thêm bạn, xoá bạn, thêm vào danh sách đen không chuyển trang
- Không chuyển trang khi xem trang khác của profile
- Đồng bộ hoá với zEditor
- Gửi và xem trước tin nhắn không chuyển trang


Chức năng sắp tới:
- Hỗ trợ Invision, và phpBB3
- Hỗ trợ multi-style
- Hỗ trợ giới hạn ký tự, chống spam
- Hiện thông báo nhắc nhở cập nhật phiên bản mới khi phiên bản đang dùng đã outdated
- Chuyển mode dựa theo parameter

Demo:

1) Giao diện đầu tiên của zProfile beta







2) zEditor PE alpha được cài đặt vào cho zProfile (23-02-2013)







3) zEditor PE beta hỗ trợ chức năng preview không chuyển trang (15-05-2013)


Hướng dẫn: (Chỉ hỗ trợ cho punbb mặc định profile chưa chỉnh sửa, mấy phiên bản khác chưa có thời gian)
- ACP -> General -> Forum -> Configuration -> Site description:
Code:
<span id=unl>{USERLINK}</span>
- ACP -> Users & Groups -> Profiles -> Tạo 2 fields mới -> Tên gì cũng được, Type: Text zone, Necessarily filled ?: No, Display: Profile, Who can modify the profile field value ?: Member himself, Default content:
Cho CSS
Code:
body{background-color:#F1F1F1;font-family:'lucida grande',tahoma,verdana,arial,sans-serif}
#tabs li a,.main-head,#pun-intro{background-color:#312A1E!important;border:0!important}#tabs li a,.main-head,#pun-intro,#profile-advanced-add a{font:15px/20px'Open Sans Condensed',sans-serif;color:#F0F0F0!important;text-align:center;font-weight:bold!important}.main-content{padding:4px !important;background-color: #FBFBFB !important;border: 1px solid #DDDDDD !important;}#pun-intro a,#pun-head a{color:#F0F0F0!important;text-decoration:none}#profile-advanced-details textarea{resize:none;height:90px}#tabs li a{padding:10px!important;margin-left:-4px;background:url("http://2.bp.blogspot.com/-IfiIwt0iR5c/UL4zzUjtGyI/AAAAAAAABho/rlYYH1q2iCY/s1600/sec-sep.gif")no-repeat scroll left top transparent}#tabs{top:-32px}.pun{background-color:#FAFAFA;width:auto;padding:30px}#pun-intro{padding:5px;display:inline;border-bottom-right-radius:4px;left:0px;position:absolute;top:0px}#pun-head{background-color:#227264;margin:45px 0;padding:10px}#profile-advanced-details{margin-top:80px}#profile-advanced-right{margin-top:100px}#a:link,#profile-advanced-right.module.main a:link{color:#626262!important;text-decoration:none;transition:color 0.2s ease-in-out 0s}#profile-advanced-details a:hover,#profile-advanced-right.module.main a:hover{color:#8F8F8F!important}.field_uneditable{border:1px solid#DDDDDD;max-height:60px;overflow:auto;padding:5px}#copyright a{color:#000;text-decoration:none}#profile-advanced-add a{display:block;margin:auto;max-width:60%;padding:5px;text-decoration:none}#profile-advanced-add a:first-child{background-color:#459766;margin-bottom:5px}#profile-advanced-add a:last-child{background-color:#FF5959}#profile-loading{font-size:16px;font-weight:bold;margin:auto auto 5px;padding:10px;text-align:center;width:80px}#wall-reply{margin-bottom:10px}#wall-reply div input[name="subject"]{float:right;width:350px}#wall-reply div input[name="preview"],#wall-reply div input[name="post"]{background-color:#F4F4F4;border:1px solid#DDDDDD;cursor:pointer;margin-left:6px}#wall-reply div input[name="subject"]{float:right;width:350px}#wall-reply div input[name="preview"]:hover,#wall-reply div input[name="post"]:hover{box-shadow:inset 1px 1px 0 0 rgba(0,0,0,0.25)}#outter-wall{position:relative;margin-bottom:8px}#wall-preview{position:absolute;height:100%;width:100%;background-color:#F4F4F4;border:1px#ddd solid}
Cho HTML
Code:
<font color="white"><center><b>Thank you for using zProfile <br>© 2013 by <a href="mailto:mark.polo.nguyen@gmail.com">Zero</a>. All rights reserved</b></center></font>
- Bước này quan trọng -> Rê chuột vào -> Trình duyệt sẽ hiện lên url của cái đó nằm trong tooltip -> Nhớ số nằm sau &id= cho 2 cái fields vừa tạo
- ACP -> Modules -> Create a new javascript -> Tên gì cũng được, Placement: In all the pages
Code:
var htmlID = '3';
var cssID = '2';
var guest = 'no'; // yes or no
var tag = ['<script>', '<html>', '<iframe>', '<body>', '<head>'];
var cssDefault = 'body{background-color:#F1F1F1;font-family:\'lucida grande\',tahoma,verdana,arial,sans-serif}#tabs li a,.main-head,#pun-intro{background-color:#312A1E!important;border:0!important}#tabs li a,.main-head,#pun-intro,#profile-advanced-add a{font:15px/20px\'Open Sans Condensed\',sans-serif;color:#F0F0F0!important;text-align:center;font-weight:bold!important}.main-content{padding:4px !important;background-color: #FBFBFB !important;border: 1px solid #DDDDDD !important;}#pun-intro a,#pun-head a{color:#F0F0F0!important;text-decoration:none}#profile-advanced-details textarea{resize:none;height:90px}#tabs li a{padding:10px!important;margin-left:-4px;background:url("http://2.bp.blogspot.com/-IfiIwt0iR5c/UL4zzUjtGyI/AAAAAAAABho/rlYYH1q2iCY/s1600/sec-sep.gif")no-repeat scroll left top transparent}#tabs{top:-32px}.pun{background-color:#FAFAFA;width:auto;padding:30px}#pun-intro{padding:5px;display:inline;border-bottom-right-radius:4px;left:0px;position:absolute;top:0px}#pun-head{background-color:#227264;margin:45px 0;padding:10px}#profile-advanced-details{margin-top:80px}#profile-advanced-right{margin-top:100px}#a:link,#profile-advanced-right.module.main a:link{color:#626262!important;text-decoration:none;transition:color 0.2s ease-in-out 0s}#profile-advanced-details a:hover,#profile-advanced-right.module.main a:hover{color:#8F8F8F!important}.field_uneditable{border:1px solid#DDDDDD;max-height:60px;overflow:auto;padding:5px}#copyright a{color:#000;text-decoration:none}#profile-advanced-add a{display:block;margin:auto;max-width:60%;padding:5px;text-decoration:none}#profile-advanced-add a:first-child{background-color:#459766;margin-bottom:5px}#profile-advanced-add a:last-child{background-color:#FF5959}#profile-loading{font-size:16px;font-weight:bold;margin:auto auto 5px;padding:10px;text-align:center;width:80px}#wall-reply{margin-bottom:10px}#wall-reply div input[name="subject"]{float:right;width:350px}#wall-reply div input[name="preview"],#wall-reply div input[name="post"]{background-color:#F4F4F4;border:1px solid#DDDDDD;cursor:pointer;margin-left:6px}#wall-reply div input[name="subject"]{float:right;width:350px}#wall-reply div input[name="preview"]:hover,#wall-reply div input[name="post"]:hover{box-shadow:inset 1px 1px 0 0 rgba(0,0,0,0.25)}#outter-wall{position:relative;margin-bottom:8px}#wall-preview{position:absolute;height:100%;width:100%;background-color:#F4F4F4;border:1px#ddd solid}';

/////// KHÔNG CHỈNH SỬA MỌI THỨ DƯỚI DÒNG NÀY ///////

$(function () {
  var x = document.getElementById('unl');
  uid = x.childNodes[0].href.substring(x.childNodes[0].href.indexOf('&u=') + 3);
  uname = x.childNodes[0].innerHTML;
  if (document.getElementById('tabs')) {
    if (guest == 'yes' && uid == '-1') {
      document.getElementsByTagName('head')[0].insertAdjacentHTML('afterend', '<style type="text/css">body{display:none}</style>');
      alert('Please login to use this feature');
      location.href = 'http://' + location.host
    }
    if (uid != '-1') {
      $('#profile-advanced-right .module.main').has('noscript').remove();
      $('#main-content div').first().remove();
    }
    if (uname != $('#profile-advanced-right .h3 span').first().text()) {
      $('#field_id' + htmlID + ', #field_id' + cssID).hide().next().hide();
    }
    document.getElementById('profile-advanced-layout').insertAdjacentHTML('beforeend', '<div id="copyright"><b><a href="www.fmvi.vn/t880-">zProfile</a> © 2013 by <a href="mailto:mark.polo.nguyen@gmail.com">Zero</a>. All rights reserved</b></div>');
    $('#pun-head > *, #pun-intro > *, #pun-foot, #pun-visit').remove();
    $('#profile-advanced-add br').remove();
    $('#profile-advanced-details .main-head').first().remove();
    $('#pun-intro').html('<a href="http://' + location.host + '/forum">Back to forum</a>');
    $('#profile-advanced-details textarea').attr({
      'cols': '95',
      'rows': '4'
    });
  }
  setInterval("$(function () {$('#field_id'+cssID+' img.ajax-profil_valid').attr('onclick','zprofile.css()');$('#field_id'+htmlID+' img.ajax-profil_valid').attr('onclick','zprofile.html()')});", 1000);
  $('head').append('<style>' + $("#field_id" + cssID + " .field_uneditable").text() + '</style>');
  $('#profile_field_2_' + cssID).after('<a style="cursor:pointer" onclick="zprofile.back()">Default</a>');
  $('#pun-head').append($('#field_id' + htmlID + ' .field_uneditable').text().replace('{USERNAME}', uname).replace('{USERID}', uid));
  $('#profile-advanced-add a').click(function (a) {
    $.get(this.href);
    a.preventDefault();
    $('#profile-advanced-add').hide();
    alert('Added')
  });
  zprofile.start();

});
$('#text_editor_textarea').keyup(function () {
  var y = document.getElementById('profile_field_2_' + htmlID).value;
  for (var i in tag) {
    regex = new RegExp(tag[i], 'i');
    if (regex.test(y)) {
      alert('No script allowed');
      document.getElementById('profile_field_2_' + htmlID).value = y.replace(regex, '');
    }
  }
});
var zprofile = {
  start: function () {
    zprofile.tabs();
  },
  tabs: function () {
    a = document.getElementById('tabs').getElementsByTagName('li');
    for (i = 0; i < a.length; i++) {
      b = a[i].firstChild.getAttribute('href').replace(/\/u(\d+)/, '').replace('#', 'profile');
      a[i].setAttribute('onclick', 'zprofile.load(this, "' + b + '");return false');
    }
  },
  load: function (a, b) {
    zprofile.loading(document.getElementById('profile-advanced-details'));
    $('#profile-advanced-details').load(a.firstChild.href.replace('?mode=', '') + ' #profile-advanced-details > .main-content');
    if (b == 'wall') {
      zprofile.reply();
    }
    if (b == 'profile') {
      setTimeout(zprofile.reload, 1500);
    }
    document.getElementsByClassName('activetab')[0].removeAttribute('class');
    a.setAttribute('class', 'activetab');
  },
  reload: function () {
    if (document.getElementById('wall-reload')) {
      elem = document.getElementById('wall-reload');
      elem.parentNode.removeChild(elem);
    }
    a = document.createElement('script');
    a.id = 'wall-reload';
    a.innerHTML = document.getElementById('main-content').getElementsByTagName('script')[2].innerHTML;
    document.getElementsByTagName('head')[0].appendChild(a);

  },
  reply: function () {
    $.get('/privmsg?mode=post_profile&u=' + location.pathname.match(/\d+/), function (a) {
      document.getElementById('profile-advanced-details').getElementsByClassName('main-content')[0].insertAdjacentHTML('beforebegin', '<div id="wall-reply" class="main-content"><form action="/privmsg?mode=post_profile" name="post" method="post"><div id="outter-wall"><div id="wall-preview" style="display:none" ondblclick="this.style.display = \'none\'" title="Double click to close this window"></div><textarea id="text_editor_textarea" cols="9" rows="3" name="message" placeholder="Message: ' + $(a).find('.frm-set dd').text().replace(/N/gi, 'N |').replace(/F/gi, 'F |') + '"></textarea></div>' + $('<div/>').append($(a).find('.frm-buttons input[type="hidden"]').clone()).html() + '<div><input type="submit" accesskey="s" tabindex="6" value="Send" name="post" onclick="zprofile.send();return false"><input type="submit" value="Preview" name="preview" onclick="zprofile.preview();return false"><input type="text" name="subject" id="subject" placeholder="Subject"></div></form></div>');
    });
  },
  send: function () {
    x = document.getElementById('text_editor_textarea');
    y = document.getElementById('subject');
    if (x.value != '') {
      $.post('/privmsg?mode=post_profile', $('#wall-reply form[name="post"]').serialize() + '&post=1', function (b) {
        if (b.indexOf('A new message') > 0) {
          $.post('/privmsg', $(b).find("form[method='post']").serialize() + '&post=1');
        }
        x.value = '';
        y.value = '';
        $.get(window.location + 'wall #profile-advanced-details', function (a) {
          $($(a).find('ol li.clearfix:first').html()).prependTo('#profile-advanced-details ol').hide().fadeIn('slow');
        });

      });
    } else {
      alert('Vui lòng điền nội dung cho tin nhắn')
    }
  },
  preview: function () {
    $.post('/privmsg?mode=post_profile', $('#wall-reply form[name="post"]').serialize() + '&preview=1', function (b) {
      $('#wall-preview').html($(b).find('.entry-content').html());
      document.getElementById('wall-preview').style.display = '';
    });
  },
  css: function () {
    $('head style').html($('#profile_field_2_' + cssID).val())
  },
  html: function () {
    $('#pun-head').html($('#profile_field_2_' + htmlID).val().replace('{USERNAME}', uname).replace('{USERID}', uid))
  },
  back: function () {
    $('#profile_field_2_' + cssID).val(cssDefault)
  },
  loading: function (dom) {
    dom.innerHTML = '<div id="profile-loading" class="main-content"><img src="http://i11.servimg.com/u/f11/16/80/27/29/ajax-l10.gif" /><br/>Loading...</div>';
  },
}
- Thay giá trị của var htmlIDvar cssID trong javascript bằng 2 số mà mình kêu nhớ ở bước trên.
Giá trị var guest là dùng để cho khách viếng thăm xem profile hay không
Giá trị var cssDefault là css mặc định của profile. Button này sẽ hiện lên khi chỉnh sửa css. Dành cho mấy bạn mà thích 'phá' mà quên backup  :P
Giá trị var tag là những tag sẽ bị blocked trong HTML
Updates:
Code:

// 16-02-2013
- Ẩn quảng cáo chỉ cho thành viên
// 17-02-2013
- Viết lại function nhận dạng trang profile
- Viết lại function xoá quảng cáo
- Toàn trang sẽ ẩn (không hiện default như trước) khi hiện popup alert
// 18-02-2013
- Thêm var tag
- Không chuyển trang khi xem trang khác của profile (chưa hoàn thành chức năng cho wall)
- Cập nhật css mới (trang trí add to my friend list và add to my foe list)
- Add to my friend list và add to my foe list không chuyển trang, và thông báo "Added" khi thêm thành công
- Chuyển dòng copyright qua chỗ khác
- Ẩn 2 dòng profile CSS và HTML khi người xem profile không phải là chủ profile đó
- Thêm cấm tag iframe
- Xoá quảng cáo ở trên đầu forum
// 22-02-2013
- Thêm function zprofile.wall
- Thêm chức năng trả lời nhanh cho wall - beta
// 23-02-2013
- Thêm zEditor PE (Portable Edition) alpha
- Thêm function zprofile.send, zprofile.preview, zprofile.loading
- Gửi và preview không chuyển trang cho trả lời nhanh ở wall
- Tự động cập nhật tin nhắn sau khi gửi lên nhắn lên wall
// 15-05-2013
- Nâng cấp zEditor PE lên beta
- Sửa lỗi zEditor PE không gửi tin nhắn khi có người khác gửi tin nhắn trước người dùng
- Thêm chức năng preview không chuyển trang cho zEditor
- Thêm chức năng double click trong khung preview để ẩn nó đi
- Chuyển hơn 15% jQuery về Javascript
- Viết lại function zprofile.loading (dựa theo dom)
- Nhận dạng profile theo id thay vì location
- Tốc độ tải profile nhanh hơn 1.5 lần
// 17-05-2013
- Chuyển 1 vài hàm từ jquery sang javascript
- Sửa lỗi khi function zprofile.css xóa mất style đầu tiên.
// 18-05-2013
- Sử dụng case-sensitive cho chức năng chặn html tag
- Chuyển chức năng chặn html tag về regex
- Thêm tag <head>, <body>, <link>, và <html> vào danh sách cấm
- Sửa lỗi khi chuyển qua trang khác, chỉnh sửa profile sẽ không hoạt động
// 22-05-2013
- Chuyển gần hết tất cả hàm vào function
- Đổi tên function zprofile.wall thành zprofile.reply, và zprofile.default thành zprofile.back
- Thêm function zprofile.start, zprofile.start, và zprofile.reload
- Thêm 1 chức năng bí mật cho html và phát hành phiên bản 1.1 :D
Hình demo cho cập nhật sắp tới:

None... :D

Dùng adBlock Plus để tải nhanh hơn x3
Written by Zero © FMVI.VN
Được viết bởi Zero © FMVI.VN

Khi share, nhớ kèm theo tên tác giả và link bài viết. Thanks.
  Bài viết hay nhất2
Mình sẽ cập nhật phiên bản 1.2 tại đây, kèm theo chức năng reputation và hiện recent posts.
  Bài viết hay nhất3
Mong bạn cập nhập sớm nha, cảm ơn bạn đã share
  Bài viết hay nhất4

roseila wrote:Mong bạn cập nhập sớm nha, cảm ơn bạn đã share
hôm bữa làm mất rồi, bữa nào rãnh mình viết lại.
  Bài viết hay nhất5
Méo rất thích cái ZProfile này vì có thể viết thêm html. Nhưng mà giờ thì méo có thể tự làm được :3
  Bài viết hay nhất6
Dùng trang trí profile đẹp lắm :3 tks
  Bài viết hay nhất7
Update bản 1.2. Hiện tại chỉ hoạt động trên punbb. Mấy phiên bản khác chưa test thử.
  Bài viết hay nhất8
Cái phần cho CSS và cho HTML là cho cả hai vào 1 field hay sao vậy bạn
- Xin phép đào lên -
  Bài viết hay nhất9
suỵt! đào mộ, cho hỏi cái trang html ở bước 6 chèn như thế nào: vd cái trang của mình là /h4-page thì ghi trong đó là /h4-page hay là ghi số 4 ko
  Bài viết hay nhất10

Kelvin_Kingleon wrote:suỵt! đào mộ, cho hỏi cái trang html ở bước 6 chèn như thế nào: vd cái trang của mình là /h4-page thì ghi trong đó là /h4-page hay là ghi số 4 ko
Bạn chỉ cần thay số tương ứng với ID trang HTML của bạn là được.
  Bài viết hay nhất11
tks♥ Boom, do ghi sai id mà nó làm ảnh hưởng tới prefix nên xóa rồi, giờ làm lại mới đc ♥__♥
  Bài viết hay nhất12
profile đẹp lắm
You cannot reply to topics in this forum