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

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]

Office
Office Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 820

Danh vọng : 1678

Uy tín : 10

Demo:

Bộ gõ tiếng Việt trong suốt và ẩn hiện 38937646
Cách làm: Đầu tiên làm gọn bảng mudim và di chuyển nó như hướng dẫn phía trên.

  • Sửa các thuộc tính của id mudimPanel.

    • Vào CSS tìm #mudimPanel
    • Sửa thuộc tính background để thêm ảnh "Bộ gõ" vào khung điều khiển bộ gõ.
      Ở đây mình sử dụng ảnh này Bộ gõ tiếng Việt trong suốt và ẩn hiện Bogo

      background:#FFF url('http://dl.dropbox.com/u/24716029/images/bogo.jpg') no-repeat right center!important;
    • Tiếp đó sửa thuộc tính padding cho nội dung bên trong không đè lên ảnh nền phía trên:

      padding: 4px 26px 4px 4px!important;
    • Đặt thuộc tính left là -333 để khung điều khiển bộ gõ thụt vào bên trong.

      left:-333px!important;

  • Sửa thuộc tính của mudimPanel khi di chuyển chuột vào.

    • CSS. tìm #mudimPanel:hover
    • thêm vào thuộc tính:

      left:0!important;


Code hoàn chỉnh - Chèn vào CSS:

Code:
/* Bo go trong suot va an hien */
#mudimPanel {
-webkit-transition: all 2s ease; -moz-transition: all 2s ease;
background: white url('http://dl.dropbox.com/u/24716029/images/bogo.jpg') no-repeat right center!important;
-moz-opacity: 0.9; opacity: 0.9; filter: alpha(opacity=90);
bottom: 9px!important;
left: -333px!important;
width: 330px!important;
height: 47px!important;
padding: 4px 26px 4px 4px!important;
font-size: 9px!important;
font-weight: bold;
vertical-align: middle;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
#mudimPanel:hover {
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;
-moz-opacity: 1;opacity: 1;filter: alpha(opacity=100);
left:0!important;
}

Tùy chỉnh:

  • top hoặc bottom - phía trên hoặc phía dưới trang
  • left hoặc right - bên phải hay bên trái trang.
  • 5px : khoảng cách đến phía trên hoặc phía dưới, bên phải hay bên trái trang.
  • width: 330px và height: 47px: chiều rộng và chiều cao của khung
  • font-size: 9px cỡ chữ.
  • background-color:#FFF : màu nền, nếu xoá sẽ trở thành màu vàng nhạt như mudim mặc định

Chú ý : không được bỏ !important ở bất kì thuộc tính nào.

Trong overall_footer_end, chèn script trước /body hoặc template khác cũng được

Code:
<script src=http://mudim.googlecode.com/files/mudim-0.8-r153.js></script>

Với phpBB3 và Invision, js này có thể đưa vào phần mô tả trong Thiết Lập Tổng Quát Diễn Đàn.
      
Office
Office Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 820

Danh vọng : 1678

Uy tín : 10

  • Trước tiên, cần gắn bộ gõ mudim

  • Muốn ẩn đi bạn chèn dòng sau vào CSS :

    Code:
    #mudimPanel {display: none;}

  • Chèn vào template:

    1. Chèn ở Quick Reply :

      * Vào Temp > Quản lý tổng thể > viewtopic_body. Tìm

      Code:
      {QUICK_REPLY_FORM}

      chèn vào phía sau đoạn:

      Code:
      <span class="gensmall">Chọn kiểu gõ :<input name="mudim" id="mudim-off" onclick="Mudim.SetMethod(0);" type="radio"> Tắt<input name="mudim" id="mudim-vni" onclick="Mudim.SetMethod(1);" type="radio"> VNI <input name="mudim" id="mudim-telex" onclick="Mudim.SetMethod(2);" type="radio"> Telex <input name="mudim" id="mudim-viqr" onclick="Mudim.SetMethod(3);" type="radio"> Viqr <input name="mudim" id="mudim-auto" onclick="Mudim.SetMethod(4);" type="radio"> Tổng hợp</span>

    2. Chèn trong trang gửi bài mới

      * Vào Temp > Post & tin nhắn > posting_body : tìm

      Code:
      <img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button>

      Chèn vào phía sau đoạn :

      Code:
      <span class="gensmall"><b>Kiểu gõ :</b>  <input name="mudim" id="mudim-off" onclick="Mudim.SetMethod(0);" type="radio">Tắt<input name="mudim" id="mudim-vni" onclick="Mudim.SetMethod(1);" type="radio">VNI <input name="mudim" id="mudim-telex" onclick="Mudim.SetMethod(2);" type="radio">Telex <input name="mudim" id="mudim-viqr" onclick="Mudim.SetMethod(3);" type="radio">Viqr <input name="mudim" id="mudim-auto" onclick="Mudim.SetMethod(4);" type="radio">Tổng hợp</span>



Ngoài ra có thể chèn vào bất kì chỗ nào các bạn muốn...
      
Office
Office Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 820

Danh vọng : 1678

Uy tín : 10

Bộ gõ ẩn hiện style của eazy.vn Bộ gõ tiếng Việt trong suốt và ẩn hiện Ribbon_bogo

Code:
/* Bộ gõ mudim style by eazy.vn */
#mudimPanel:hover {
left: 0!important;
}
#mudimPanel {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
background: url('http://i1249.photobucket.com/albums/hh511/khoaqtkd/ribbon_bogo.png') 333px 0 no-repeat,url('http://i1249.photobucket.com/albums/hh511/khoaqtkd/bogo_border.png') center right no-repeat, url('http://i1249.photobucket.com/albums/hh511/khoaqtkd/bogo_bg.png') repeat-x 0 center !important;
bottom: 20px!important;
left: -333px!important;
width: 330px!important;
height: 45px!important;
padding: 11px 48px 11px 5px !important;
font-size: 9px!important;
font-weight: bold;
vertical-align: middle;
border: none !important;
}
      
Office
Office Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 820

Danh vọng : 1678

Uy tín : 10

Bộ gõ ẩn hiện style mới của c3zone Bộ gõ tiếng Việt trong suốt và ẩn hiện Rib10

Code:
/* Bộ gõ mudim style new c3zone */
#mudimPanel:hover {
left: 0!important;
}
#mudimPanel {
-moz-transition: all .5s ease;
-webkit-transition: all .5s ease;
background: url(http://c3zone.forumj.net/users/1214/94/30/93/album/rib10.png) center right no-repeat,url(http://c3zone.forumj.net/users/1214/94/30/93/album/ribbg10.png) center left repeat-x!important;
border: 0!important;
bottom: 9px!important;
font-size: 9px!important;
font-weight: 700;
height: 34px;
left: -335px!important;
padding: 20px 40px 11px 5px !important;
vertical-align: middle;
width: 330px!important;
}
      
Office
Office Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 820

Danh vọng : 1678

Uy tín : 10

Bộ gõ ẩn hiện style chinhphuc.info Bộ gõ tiếng Việt trong suốt và ẩn hiện Bogo11 với 2 góc được bo tròn

Code:
/* Bộ gõ mudim style chinhphuc */
#mudimPanel{
background:#FFF url('http://i45.servimg.com/u/f45/16/55/88/76/bogo11.png') no-repeat right center!important;
border:2px solid #727e86!important;
border-radius:0 10px 10px 0;
position:fixed!important;
width:371px!important;
height:35px;
padding:11px 25px 11px 4px!important;
font-size:11px!important;
vertical-align: middle;
bottom:10px!important;
left:-377px!important;
}
#mudimPanel:hover{
left:-2px!important
}
.borderwrap a,.posting-buttons a,.post a,#mudimPanel{
-webkit-transition:All .3s ease;
-moz-transition:All .3s ease;
-o-transition:All .3s ease;
}
      
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

Cập nhật ngày 2/9/2014 cho LQ2 Forum:

Code:
/* Bộ gõ mudim style chinhphuc */
#mudimPanel{
background:#FFF url('http://i45.servimg.com/u/f45/16/55/88/76/bogo11.png') no-repeat right center!important;
border:2px solid #727e86!important;
border-radius:0 10px 10px 0;
position:fixed!important;
width:400px!important;
height:63px;
padding:11px 25px 11px 4px!important;
font-size:11px!important;
vertical-align: middle;
bottom:10px!important;
left:-375px!important;
}
#mudimPanel:hover{
left:-2px!important
}
.borderwrap a,.posting-buttons a,.post a,#mudimPanel{
-webkit-transition:All .3s ease;
-moz-transition:All .3s ease;
-o-transition:All .3s ease;
}
      
      

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]

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