Change background image
LOVE quotion

Bắt đầu từ 4.53' thứ Hai ngày 17/10/2011


You are not connected. Please login or register

LOVE quotion » INTERNET » Forumotion » Quote & Code

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]

Nuts
Nuts Tích cực

Cấp bậc: Tích cực

Bài viết : 300

Danh vọng : 648

Uy tín : 23

Tường nhà Tường nhà Xem bài viết Bài viết Kết bạn Kết bạn Chặn người này Ngăn cấm
Trước hết mình nói các giá trị của quote mặc định để các bạn tự làm theo ý thích nhé. Mặc định trong CSS nó như thế này:

code CSSÝ nghĩa
.quote{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #444444;
line-height: 125%;
background-color: #fafafa;
border: #d1d7dc;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}

Font
Kích thước font
màu chữ
chiều cao dòng
màu nền
Màu đường viền (khung)
Kiểu khung
Độ dày cạnh trái khung
Độ dày cạnh trên khung
Độ dày cạnh phải khung
Độ dày cạnh dưới khung
Chỉ cần sửa các giá trị mặc định này lại đôi chút là nhìn được rồi, đâu cần gì cao siêu.

Còn nâng cao thêm một chút các bạn có thế tham khảo và bổ sung các giá trị khác như:
Code CSSÝ nghĩa
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: justify;
font-weight: Bold;
background-image:url('link ảnh nền');		Khoảng cách giữa biên khung và chữ
Bo tròn góc
Bo tròn góc
Căn chữ đều hai bên
Chữ đậm
Hình nền (Thay cho background-color là màu nền
Các bạn có thể tìm thêm các giá trị khác

Ví dụ mình viết thế này:

Code:
.quote{
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #0000A0;
    line-height: 125%;
    background-color: #FCF9D8;

        padding:10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        text-align: justify;
        font-weight: Bold;
        background-image:url('http://i66.servimg.com/u/f66/14/26/60/46/backgr11.jpg');

    border: #FF0000;
    border-style: solid;
    border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 3px;
    border-bottom-width: 3px;}

Kết quả:

Quote & Code Back10

Còn đây là của Chinh Phục:

Code:
    .quote {-moz-border-radius: 7px; -webkit-border-radius: 7px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px; text-indent: 2em;
    line-height: 125%; min-width:500px; padding:6px;
    border:1px solid #d4d4d4;
    background: #fafafa url('http://i634.photobucket.com/albums/uu67/Trongtuan60/Quote.png') no-repeat top left;
    }
    .quote .quote {background-color:#EFE0E6}
    .quote .quote .quote {background-color:#EBEADD}
    .quote table {margin:5px 16px 0 16px;text-indent:0px!important}

Và đây là cho Code:

Code:
.code{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #444444;
line-height: 125%;
background-color: #fafafa;
border: #d1d7dc;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
max-width: 500px}

Bạn có thể tùy chỉnh dòng cuối để có độ rộng phù hợp.

Thêm JS vào widget hoặc Mô tả đoạn CODE sau để có phần 'Select Content' cho code. CHVL2 cho vào cuối header.

Code:
<script type="text/javascript" src="http://scriptfm.googlecode.com/files/select.js"></script>
      
DuyHung
DuyHung Xuất sắc

Cấp bậc: Xuất sắc

Giới tính : Nam

Bài viết : 1260

Danh vọng : 2272

Uy tín : 32

Tường nhà Tường nhà Xem bài viết Bài viết Kết bạn Kết bạn Chặn người này Ngăn cấm
Code này có sửa lại một chút, bổ sung style và cố định chiều rộng khung code là 500px

Bước 1: Thêm vào CSS

Code:
td.code {
width:500px;
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 11px;color: #666666;
background : #fff url(http://a.imageshack.us/img178/1307/prepb3.jpg) repeat left top;
overflow : auto;text-align:left;
border : 1px solid #99cc66;
padding : 0px 0px 0 30px;
margin:1em 0 1em 0;
line-height:17px;
}

Bước 2: Code script, với code này bạn có thể tạo trang HTML đưa vào hoặc lưu thành file js rồi up lên host

Code:
function selectCode(a) {
    var e = a.parentNode.parentNode.getElementsByTagName('DIV')[0];
    if (window.getSelection)    {
      var s = window.getSelection();
        if (s.setBaseAndExtent)      {
          s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }     
    else
      {
          var r = document.createRange();
          r.selectNodeContents(e);
          s.removeAllRanges();
          s.addRange(r);
      }
    }
    else if (document.getSelection)    {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
    }
    else if (document.selection)    {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();   
}
}
 
jQuery(document).ready(function(){
  jQuery("td.code").parent().parent().parent().css('width','500px');
  jQuery("td.code").parent().prev().html('<strong>CODE:</strong><a style="float: right;" href="#" onclick="selectCode(this); return false;"><font color=#1A7EAD><strong>CHỌN TOÀN BỘ</strong></font></a>');
});
notecode='Click để chọn nội dung trong CODE';
      
DuyHung
DuyHung Xuất sắc

Cấp bậc: Xuất sắc

Giới tính : Nam

Bài viết : 1260

Danh vọng : 2272

Uy tín : 32

Tường nhà Tường nhà Xem bài viết Bài viết Kết bạn Kết bạn Chặn người này Ngăn cấm
Chức năng:

- Khung code cố định giữa bài viết, rộng 500px.
- Click chọn toàn bộ code.
- Ẩn/hiện khung code (mặc định là ẩn).
- Style chuyên nghiệp.

Hướng dẫn: Display - Templates - General - Overall_header
Tìm đoạn này:

Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>

... và chèn vào bên dưới bằng code sau:

Code:
<script src="http://fmvi-group.googlecode.com/files/Fmvi-Group-select-code-phpBB2.js" type="text/javascript"></script>

Hoặc chủ động hơn, tạo file js với code dưới đây và đưa lên host:

Code:
function selectCode(a) {
    var e = a.parentNode.parentNode.getElementsByTagName('DIV')[0];
    if (window.getSelection)    {
      var s = window.getSelection();
        if (s.setBaseAndExtent)      {
          s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }   
    else
      {
          var r = document.createRange();
          r.selectNodeContents(e);
          s.removeAllRanges();
          s.addRange(r);
      }
    }
    else if (document.getSelection)    {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
    }
    else if (document.selection)    {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select(); 
}
}

jQuery(document).ready(function(){


jQuery("td.code").parent().prev().css({'background':'#FFF','font':'bold 11px tahoma','color':'#FFF','text-align':'left', 'text-shadow':'green 0.1em 0.1em 0.2em','padding':'0px', 'align':'left','vertical-align':'middle', 'height':'16px','width':'100%'});

jQuery("td.code").parent().parent().parent().css({'width':'545px','background':'#FFF','align':'justify','padding': '5px 5px 5px 5px','align':'center','border-radius': '5px 5px 5px 5px','border-color': '#000000 #ABABAB #ABABAB #000000'});

jQuery("td.code").parent().prev().html('<span class="fmcode" style="float:right;"><img src="http://i28.servimg.com/u/f28/16/48/23/13/collap11.gif" alt="" border="0" /><img style="display:none;" src="http://i28.servimg.com/u/f28/16/48/23/13/collap10.gif" alt="" border="0" /></span><font color="blue"><strong>&nbsp;CODE:</strong></font><a style="float:right;" href="#" onclick="selectCode(this); return false;"><font color="green"><strong>CHỌN TOÀN BỘ&nbsp;</strong></font></a>');

    $(".fmcode").click(function() {
        $(this).children("img:eq(0)").toggle();
        $(this).children("img:eq(1)").toggle();
        $(this).parent().next().children().toggle();
    });

$(".code").css({'font-family': 'Courier','width' : '500px','display': 'block','font-size':'1em','color':'green','background':'url(http://a.imageshack.us/img178/1307/prepb3.jpg)repeat scroll left top #FFFFFF','margin': '1em 0','overflow':'auto','text-align':'left','border':'1 solid #99cc66','padding':'0 0 0 30px','line-height':'17px','overflow': 'auto'});
$(".code div.cont_code").css({'width' : '500px','height':'auto','overflow':'auto'});

jQuery("td.code").hide();

});
notecode='Click để chọn nội dung trong CODE';



Không cần thay thế đoạn code trong header, bạn chỉ cần chèn đoạn code có đường dẫn file js vào header hay footer đều được. Lưu ý đặt trước thẻ /body.

      
Sponsored content

#4Quote & Code Empty Re: Quote & Code

Sponsored content

Cấp bậc:

Tường nhà Tường nhà Xem bài viết Bài viết Kết bạn Kết bạn Chặn người này Ngăn cấm
      

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]

LOVE quotion » INTERNET » Forumotion »Quote & Code

Quyền hạn của bạn

Bạn không có quyền trả lời bài viết
free counters



  • Đoàn Ngọc Khánh

    mobile phone 098 376 5575


    Đỗ Quang Thảo

    mobile phone 090 301 9666


    Nguyễn Văn Của

    mobile phone 090 372 1401


    IP address signature
    Free forum | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất