You are not connected. Please login or register

 » Forumotion » Share Code » Css » tùy chỉnh giao diện bài viết và chữ ký - phpBB2 / punBB

tùy chỉnh giao diện bài viết và chữ ký - phpBB2 / punBB

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

๖ۣۜTom

avatar
Admintrator
Admintrator
Chức năng: Code giúp tạo cho bạn một menu quản lý bài viết và chữ ký, ứng dụng cho phiên bản phpBB2, punBB.
Người xem có thể tùy chỉnh giao diện bài viết bằng 3 menu lựa chọn. Các thao tác được lưu lại nên các lựa chọn của người dùng sẽ không bị mất khi chuyển trang.
  • Message:
    • Auto: Tự động thu gọn các bài viết dài hơn 500px
    • Custom: Thu gọn phần bài viết được đánh dấu bằng BBcode dấu ngắt dòng
      Code:
      [hr]
    • None: Hiển thị toàn bộ bài viết

  • Signature:
    • auto: Tự động thu gọn chữ ký dài hơn 300px
    • hide: Ẩn toàn bộ chữ ký
    • show: Hiển thị toàn bộ chữ ký

  • Background:
    • black: Màu nền đen cho bài viết
    • white: Màu nền trắng cho bài viết
    • green: Màu nền lục cho bài viết

Thử nghiệm tại: [You must be registered and logged in to see this link.]


Hướng dẫn: ACP - Display - Templates - viewtopic_body:
Thêm vào đầu viewtopic_body đoạn code sau: [You must be registered and logged in to see this link.]
Code:
<!-- Giao diện menu tùy chỉnh Message-->
<form id="baivongfmvi" style="position: fixed; top: 10px; left: 10px; background: green; color: white; padding: 2px 5px;border-radius: 3px;font-size: 11px;font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;"><span style="padding-right:14px;">Message :</span><span style="padding-right:5px"><input type="radio" name="fruit" id="Auto" checked="checked" value="Auto"><label for="Auto">Auto</label></span><span style="padding-right:5px"><input type="radio" name="fruit" id="custom" value="custom"><label for="custom">Custom</label></span><span style="padding-right:5px"><input type="radio" name="fruit" id="none" value="none"><label for="none">None</label></span></form>

<!-- Giao diện menu tùy chỉnh Signature-->
<form id="fmvibaivong" style="position: fixed; top: 30px; left: 10px; background: green; color: white; padding: 2px 5px;border-radius: 3px;font-size: 11px;font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;"><span style="padding-right:10px;">Signature :</span><span style="padding-right:5px"><input type="radio" name="fruit" id="auto" checked="checked" value="auto"><label for="auto">auto</label></span><span style="padding-right:21px"><input type="radio" name="fruit" id="hide" value="hide"><label for="hide">hide</label></span><span style="padding-right:6px"><input type="radio" name="fruit" id="show" value="show"><label for="show">show</label></span></form>

<!-- Giao diện menu tùy chỉnh Background-->
<form id="fmvigroup" style="position: fixed; top: 50px; left: 10px; background: green; color: white; padding: 2px 5px;border-radius: 3px;font-size: 11px;font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;"><span style="padding-right:0px;">Background :</span><span style="padding-right:3px"><input type="radio" name="fruit" id="black" checked="checked" value="black"><label for="black">black</label></span><span style="padding-right:15px"><input type="radio" name="fruit" id="white" value="white"><label for="white">white</label></span><span style="padding-right:3px"><input type="radio" name="fruit" id="green" value="green"><label for="green">green</label></span></form>

<!-- Giao diện khung ghi chú-->
<div id="notecheckf" style="position: fixed; top: 75px; left: 10px; background: black; color: white;"></div>

<script type="text/javascript">$(function(){if(my_getcookie('maunenbaiviet')=='0'){$("#fmvigroup input#black").attr("checked","checked")}else if(my_getcookie('maunenbaiviet')=='1'){$("#fmvigroup input#white").attr("checked","checked")}else if(my_getcookie('maunenbaiviet')=='2'){$("#fmvigroup input#green").attr("checked","checked")}if($("#fmvigroup input:checked").val()=="black"){$(".chedodocbai").parent().parent().parent().parent().parent().parent().css({'background':'#3A3A3A','color':'#C7C3C3'})}else if($("#fmvigroup input:checked").val()=="white"){$(".chedodocbai").parent().parent().parent().parent().parent().parent().css({'background':'#ebebeb','color':'#000000'})}else if($("#fmvigroup input:checked").val()=="green"){$(".chedodocbai").parent().parent().parent().parent().parent().parent().css({'background':'#144f16','color':'#FFFFFF'})}});$("#fmvigroup input").click(function(){if($("#fmvigroup input:checked").val()=="black"){my_setcookie('maunenbaiviet',0,1,0);$("#notecheckf").text("Kích hoạt chế độ nền màu xám");$("#notecheckf").show().fadeOut(1000);$(".chedodocbai").parent().parent().parent().parent().parent().parent().css({'background':'#3A3A3A','color':'#C7C3C3'})}else if($("#fmvigroup input:checked").val()=="white"){my_setcookie('maunenbaiviet',1,1,0);$("#notecheckf").text("Kích hoạt chế độ nền màu trắng");$("#notecheckf").show().fadeOut(1000);$(".chedodocbai").parent().parent().parent().parent().parent().parent().css({'background':'#ebebeb','color':'#000000'})}else if($("#fmvigroup input:checked").val()=="green"){my_setcookie('maunenbaiviet',2,1,0);$("#notecheckf").text("Kích hoạt chế độ nền xanh lục");$("#notecheckf").show().fadeOut(1000);$(".chedodocbai").parent().parent().parent().parent().parent().parent().css({'background':'#144f16','color':'#FFFFFF'})}});$(function(){if(my_getcookie('rutgonbaiviet')=='0'){$("#baivongfmvi input#Auto").attr("checked","checked")}else if(my_getcookie('rutgonbaiviet')=='1'){$("#baivongfmvi input#custom").attr("checked","checked")}else if(my_getcookie('rutgonbaiviet')=='2'){$("#baivongfmvi input#none").attr("checked","checked")}if(my_getcookie('rutgonchuky')=='0'){$("#fmvibaivong input#auto").attr("checked","checked")}else if(my_getcookie('rutgonchuky')=='1'){$("#fmvibaivong input#hide").attr("checked","checked")}else if(my_getcookie('rutgonchuky')=='2'){$("#fmvibaivong input#show").attr("checked","checked")}if($("#baivongfmvi input:checked").val()=="Auto"){$(".chedodocbai").each(function(){var $baivietdai=$(this);if($(this).height()>500){$(this).css({'overflow':'hidden','max-height':'300px'});$('<br/><button style="float:right; padding:1px" class="baivietquadai"><img title="Xem bài viết chi tiết" src ="http://i48.servimg.com/u/f48/16/58/89/73/more10.gif" alf="chi tiết"/></button>').insertAfter(this);$('.baivietquadai').click(function(){$baivietdai.css({'overflow':'hidden','max-height':'100%'});$(this).remove()})}})}else if($("#baivongfmvi input:checked").val()=="custom"){my_setcookie('rutgonbaiviet',1,1,0);$(".chedodocbai").each(function(){if($(this).html().search("<hr>")==-1){$(this).css({'overflow':'hidden','max-height':'100%'})}else{$(this).before('<div class="rutgonver2">'+$(this).html().slice(0,$(this).html().indexOf("<hr>"))+'</div><button style="float:right; padding:1px" class="baivietquadai"><img title="Xem bài viết chi tiết" src ="http://i48.servimg.com/u/f48/16/58/89/73/more10.gif" alf="chi tiết"/></button>');$(this).hide();$('.baivietquadai').click(function(){$(this).prev().hide();$(this).next().show();$(this).remove()})}})}else if($("#baivongfmvi input:checked").val()=="none"){$(".chedodocbai").css({'overflow':'hidden','max-height':'100%'})}});$("#baivongfmvi input").click(function(){$('.baivietquadai').remove();$(".rutgonver2").hide();$(".chedodocbai").show();$(".chedodocbai").css({'overflow':'hidden','max-height':'100%'});if($("#baivongfmvi input:checked").val()=="Auto"){$("#notecheckf").text("Kích hoạt chế độ tự động ẩn bài dài");$("#notecheckf").show().fadeOut(1000);my_setcookie('rutgonbaiviet',0,1,0);$(".chedodocbai").each(function(){var $baivietdai=$(this);if($(this).height()>500){$(this).css({'overflow':'hidden','max-height':'300px'});$('<br/><button style="float:right; padding:1px" class="baivietquadai"><img title="Xem bài viết chi tiết" src ="http://i48.servimg.com/u/f48/16/58/89/73/more10.gif" alf="chi tiết"/></button>').insertAfter(this);$('.baivietquadai').click(function(){$baivietdai.css({'overflow':'hidden','max-height':'100%'});$(this).remove()})}})}else if($("#baivongfmvi input:checked").val()=="custom"){$("#notecheckf").text("Kích hoạt chế độ ẩn đoạn ngắt dòng");$("#notecheckf").show().fadeOut(1000);my_setcookie('rutgonbaiviet',1,1,0);$(".chedodocbai").each(function(){if($(this).html().search("<hr>")==-1){$(this).css({'overflow':'hidden','max-height':'100%'})}else{$(this).before('<div class="rutgonver2">'+$(this).html().slice(0,$(this).html().indexOf("<hr>"))+'</div><button style="float:right; padding:1px" class="baivietquadai"><img title="Xem bài viết chi tiết" src ="http://i48.servimg.com/u/f48/16/58/89/73/more10.gif" alf="chi tiết"/></button>');$(this).hide();$('.baivietquadai').click(function(){$(this).prev().hide();$(this).next().show();$(this).remove()})}})}else if($("#baivongfmvi input:checked").val()=="none"){$("#notecheckf").text("Kích hoạt chế độ xem bình thường");$("#notecheckf").show().fadeOut(1000);my_setcookie('rutgonbaiviet',2,1,0);$(".chedodocbai").css({'overflow':'hidden','max-height':'100%'})}});$(function(){$('div.hieuungchuky img').css('max-width','600px');if($("#fmvibaivong input:checked").val()=="auto"){$('div.hieuungchuky').each(function(){if($(this).height()>350){$(this).css({'overflow':'hidden','max-height':'250px','max-width':'100%'});$(this).hover(function(){$(this).css({'overflow':'hidden','max-height':'100%','max-width':'100%'})},function(){$(this).css({'overflow':'hidden','max-height':'250px','max-width':'100%'})})}})}else if($("#fmvibaivong input:checked").val()=="hide"){$('div.hieuungchuky').hide()}else if($("#fmvibaivong input:checked").val()=="show"){$('div.hieuungchuky').show().css({'overflow':'hidden','max-height':'100%','max-width':'100%'})}});$("#fmvibaivong input").click(function(){$('div.hieuungchuky img').css('max-width','600px');$('div.hieuungchuky').show().css({'overflow':'hidden','max-height':'100%','max-width':'100%'});if($("#fmvibaivong input:checked").val()=="auto"){$("#notecheckf").text("Kích hoạt chế độ tự động ẩn một phần chữ ký");$("#notecheckf").show().fadeOut(1000);my_setcookie('rutgonchuky',0,1,0);$('div.hieuungchuky').each(function(){if($(this).height()>350){$(this).css({'overflow':'hidden','max-height':'250px','max-width':'100%'});$(this).hover(function(){$(this).css({'overflow':'hidden','max-height':'100%','max-width':'100%'})},function(){$(this).css({'overflow':'hidden','max-height':'250px','max-width':'100%'})})}})}else if($("#fmvibaivong input:checked").val()=="hide"){$("#notecheckf").text("Kích hoạt chế độ tự động ẩn toàn bộ chữ ký");$("#notecheckf").show().fadeOut(1000);my_setcookie('rutgonchuky',1,1,0);$('div.hieuungchuky').hide()}else if($("#fmvibaivong input:checked").val()=="show"){$("#notecheckf").text("Kích hoạt chế độ tự động hiện toàn bộ chữ ký");$("#notecheckf").show().fadeOut(1000);my_setcookie('rutgonchuky',2,1,0);$('div.hieuungchuky').show().css({'overflow':'hidden','max-height':'100%','max-width':'100%'})}});</script>

Chỉnh sửa các phần sau theo hướng dẫn cho từng phiên bản.
  • phpBB2: Tìm trong viewtopic_body:
    Code:
    {postrow.displayed.MESSAGE}
    Thay bằng
    Code:
    <div class="chedodocbai">{postrow.displayed.MESSAGE}</div>
    Tìm :
    Code:
    {postrow.displayed.SIGNATURE}
    Thay bằng
    Code:
    <div class="hieuungchuky">{postrow.displayed.SIGNATURE}</div>
  • punBB: Tìm trong viewtopic_body:
    Code:
    {postrow.displayed.MESSAGE}
    Thay bằng
    Code:
    <div class="chedodocbai">{postrow.displayed.MESSAGE}</div>
    Tìm :
    Code:
    {postrow.displayed.SIGNATURE_NEW}
    Thay bằng
    Code:
    <div class="hieuungchuky">{postrow.displayed.SIGNATURE_NEW}</div>


Ghi chú: Các bạn có thể chỉnh sửa giao diện mỗi menu nhưng không được tách các thành phần ra khỏi form của nó.
Phần script bạn có thể chỉnh sửa màu nền và kích thước ẩn/hiện bài viết, chữ ký.
Viết bởi baivong - FMvi.tk



[center]Yahoo Hỗ Trợ [You must be registered and logged in to see this link.]
Chào Mừng Khách viếng thăm đã đến với 4rum
:000001:
Xem lý lịch thành viên http://www.vn-answer.tk
Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

No Comment.

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết