[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 [TUTs] zProfile 1.2 Ajouter 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 [TUTs] zProfile 1.2 Editer. 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 [TUTs] zProfile 1.2 Editer, 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:
  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
  Bài viết hay nhất13
You cannot reply to topics in this forum