» Công Nghệ Thông Tin » Chinh Phục Forumtion » Các Code Hay » Hướng Dẫn Rip Skin VBB qua FM (punbb)


You are not connected. Please login or register

Hướng Dẫn Rip Skin VBB qua FM (punbb)

+6
lasperpen
VND2012RS
phạm văn hà
nh0kl0k
hamthe
An Hùng BMT
10 posters

Go down  Message [Page 1 of 1]

An Hùng BMT

An Hùng BMT
Admin
Admin

hyhy... hôm nay rảnh nên chia sẻ ae cách rip skin vbb ->> fm :) đừng ném gạch nha. trình độ mình chỉ có vậy. mình cũng ko có khiếu truyền đạt. nên biết gì viết đó. hyhy cuoi3

Yếu cầu:
bạn phải biết chút ít về HTML và CSS là 0k. nếu chưa biết tý gì lun thì khuyên bạn đừng làm..đọc ko hiểu rồi lại nói mình viết khó hiểu.[/size] sdx

1. dùng google chorme nhé.
tìm trang vbb có skin đẹp để rip nào. :)

Vd trang này nhé: http://diendan.thptquangtrung-binhthuan.edu.vn/

2. vào trang vbb rip. giờ ta lấy CSS nhé


1.RIP CSS

Nhấp chuột phải và chọn kiểm tra phần tử(inspect element)

chú ý vào thẻ <head> </head> như hình


Hướng Dẫn Rip Skin VBB qua FM (punbb) 111

CSs thường là file như thế này :

Code:
css.php?styleid=7&langid=3&d=1326720353&td=ltr&sheet=additional.css

ta nhấp vào link đó và coppy hết . nhét vào css của fm thôi :) sdx
và thêm vào đầu CSS đoạn này nữa

* nếu ko đúng css.. thì cứ VIEWSOURE ra ( ctrl +u) . thấy cái nào .css thì nhấp vào. xem nó có link background của body ko. có thì là nó
Code:
.pun {
line-height: 130%;
margin: 0 auto;
min-width: 768px;
padding: 5px;
width: 99%;
}

Chúng ta phải thay link hình nhé. vì vbb nó dùng host nên link ảnh khi ta coppy là như thế này

VD:
Code:
student/statusicon/forum_link-16.png


ta sửa lại : coppy 1 hình ảnh trên trang đó là sẽ có link ảnh. hoặc làm như hình


Hướng Dẫn Rip Skin VBB qua FM (punbb) 310


và sửa thành

Code:
http://diendan.thptquangtrung-binhthuan.edu.vn/student/statusicon/forum_link-16.png

XONG CSS

3. RIP Header

Ctrl +u -> ctrl +f : <body>

coppy từ sau thẻ <body>. bạn xem cho vừa kết thúc thẻ hoặc tới thanh navbar hay menu.(tới mấy cái chữ tìm kiếm hay forum gì đó.... phải hiểu code nó end ở đâu)


Hướng Dẫn Rip Skin VBB qua FM (punbb) 210

vào header fmvi tìm

Code:
<a id="top" name="top" accesskey="t"></a>

nhét code mình vừa lấy vào trước.

+ nếu rip có cả bảng đăng nhập thì bạn thay đoạn code của bảng đăng nhập đó = code sau:


Code:
<!-- BEGIN switch_user_logged_out -->
                                           <form action="/login?redirect=/" method="post" name="form_login" id="signin">
                                                   <table><tr><td>                           

                                                                                                                      <input class="login_input" id="loganhung"  placeholder="Tên đăng nhập" class="textbox default-value" type="text"  name="username">
                                                                                                                                        </td> </tr>
                                                                                                                         
                                                                                                                          <tr><td>
                                                                                                                          <input class="login_input" id="loganhung"  placeholder="Mật khẩu" class="textbox default-value" type="password"  name="password">
                                                                                                                            </td></tr>
                                                                                                                            <tr><td>
                                             <input type="submit" class="loginbutton" id="login_button" name="login" tabindex="104" value="Đăng nhập" title="Nhập tên tài khoản và mật khẩu của bạn để đăng nhập, hoặc click vào nút " đăng="" ký"="" để="" tạo="" tài="" khoản="" mới."="" accesskey="s">
                                                                                                                </td></tr>
                                          <tr><td>
                                                                                                         
                                          <div id="reminder">
                                             <a href="reminder">Forgot your password?</a>
                                              <br>
                                             <a href="register">Register an Account!</a>
                                          </div>
                                          </td></tr>
                                       </table>
                                          <input type="hidden" name="hash_passwrd" value="" />
                                       </form>
                                                                                              
      <script type="text/javascript">//<![CDATA[
$(function(){$('#signin').attr('action','/login?redirect='+this.location.pathname);});//]]></script> <!-- END switch_user_logged_out -->
XONG HEADER :) sdx

4. index_box và body để mặc định nếu là skin đơn giản :) bom

cho vào css:
Code:
#main-content{ width:96%;}
.pun .main-content { margin:0px;
padding:0px;
width:100%;}
.main .main-head {
background-image: url(http://i36.servimg.com/u/f36/17/86/68/28/nav110.jpg);
color:#000000;
}

.main-foot{background-image: url(http://i36.servimg.com/u/f36/17/86/68/28/nav110.jpg);
  color:#000000;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}


thay 2 link hình trong code = link hình navbar. dạng như thế này

Hướng Dẫn Rip Skin VBB qua FM (punbb) 310


5.footer_end
ctrl + f : footer
coppy cho đến khi kết thúc thẻ sá

vào footer fm cho vào cuối :)





6.RIP Index_box

+ chú ý khi rip index_box phải chọn box có ít chuyên mục nhất cho nó gọn. như hình mình chọn :)
-Kiểm tra phần tử ngay tiêu để của chuyên mục đó ta dc..
-Để con chuột vào chỗ nào mà nó tô đên cả chuyên mục đó. rồi chuột phải Edit HTML. coppy tất cả.

Hướng Dẫn Rip Skin VBB qua FM (punbb) 110
-Thường có dạng <table> </table> hoặc <ol> </ol>

coppy hết ta dc đoạn dạng này (mỗi skin có dạng khác nhau nha.)

Code:
<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">

<tbody>

   <tr>
      <td class="tcat" colspan="5">
         
         <a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_46')"><img id="collapseimg_forumbit_46" src="images/hgvstyle/buttons/collapse_tcat.gif" alt="" border="0"></a>
         
         <a href="forumdisplay.php?f=46">•♫ FOR GAMER ♫•</a>
         
         
      </td>
   </tr>

</tbody>



<tbody id="collapseobj_forumbit_46" style="">

<tr align="center">
   <td class="alt2" width="7%"><img src="images/hgvstyle/statusicon/forum_new.gif" alt="" border="0" id="forum_statusicon_464" title="Double-click this icon to mark this forum and its contents as read" style="cursor: pointer;"></td>
   <td class="alt1Active" align="left" id="f464" width="48%">
      <div>
         <a href="forumdisplay.php?f=464"><strong><font color="red">Cộng Đồng Game Thủ</font></strong></a>
         <span class="smallfont">(<b><font color="#8B2252">406</font></b>)</span>
      </div>
      
      
      
   </td>
   <td class="alt2" width="29%">
<div class="smallfont" align="left">
   <div>
      <span style="white-space:nowrap">
      <img class="inlineimg" src="images/icons/icon15.gif" alt="" border="0">
      
      <a href="showthread.php?goto=newpost&amp;t=605601" style="white-space:nowrap" title="Tới bài chưa đọc trong chủ đề 'Can Mua Acc Zing Speed Ai Co Thi Zo!!!'"><strong>Can Mua Acc Zing...</strong></a></span>
   </div>
   <div style="white-space:nowrap">
      Người gửi: <a href="member.php?find=lastposter&amp;f=496"><b>ASDnhoxpro</b></a>
   </div>
   <div align="right" style="white-space:nowrap">
      Hôm nay <span class="time">02:49 PM</span>
      <a href="showthread.php?p=4432342#post4432342"><img class="inlineimg" src="images/hgvstyle/buttons/lastpost.gif" alt="Tới bài mới nhất" border="0" title="Tới bài mới nhất"></a>
   </div>
</div>
</td>
   <td class="alt1" width="8%">89,618</td>
   <td class="alt2" width="8%">626,483</td>
   
</tr>


</tbody>


</table>


ta thay tất cả index_box của forumvi . lưu lại và ra xem thử. nếu nó chưa hiện hình ảnh gì cả. thì ta phải tìm css cho nó. Còn nếu hiện giống demo thì ta nhảy qua bước này.

Hướng Dẫn Rip Skin VBB qua FM (punbb) 111

nhìn bên tay phải. nhấp vào mũi đó ta sẽ có css. và cũng nhớ là thay link hình nhé.:)



-Bắt đầu thay. cho đoạn coppy vừa dc vào index_box (forumvi).

+ta thay tiêu đề như box trên là
For Game thành
Code:
{catrow.tablehead.L_FORUM}

+tên chuyên mục là Cộng đồng game thủ thành
Code:
<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
+ cho tiếp đoạn code dưới nó lun
Code:
<br />
{catrow.forumrow.FORUM_DESC}
<br>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}


+ đoạn người gửi cuối của box demo kia là



Code:
<span style="white-space:nowrap">
      <img class="inlineimg" src="images/icons/icon15.gif" alt="" border="0">
      
      <a href="showthread.php?goto=newpost&amp;t=605601" style="white-space:nowrap" title="Tới bài chưa đọc trong chủ đề 'Can Mua Acc Zing Speed Ai Co Thi Zo!!!'"><strong>Can Mua Acc Zing...</strong></a></span>
   </div>
   <div style="white-space:nowrap">
      Người gửi: <a href="member.php?find=lastposter&amp;f=496"><b>ASDnhoxpro</b></a>
   </div>
   <div align="right" style="white-space:nowrap">
      Hôm nay <span class="time">02:49 PM</span>

thay =
Code:
<span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}

[size=16]                     </span>
+ thay số chủ đề của box trên là 89,618 thành[/size]
Code:
{catrow.forumrow.TOPICS
+ thay số bài viết của box trên là 626,483 thành
Code:
{catrow.forumrow.POSTS}

- giai đoạn này là khó nhất nek:
+ cho đoạn này vào đầu index_box (forumvi):
Code:
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
+ bạn tìm thẻ kết thúc của đoạn tiêu đề khi nay ta thay. như demo trên thì là </tbody>
ta cho code này sau nó

Code:
<!-- END tablehead -->

   <!-- BEGIN forumrow -->

+ tiếp ở đó nó sẻ mở 1 thẻ mới có khi là <tbody> lun. hoặc <table>. vậy thì tiếp tục tìm đoạn kết thúc của thẻ này và cho sau nó đoạn code
Code:
<!-- END tablehead -->

   <!-- BEGIN forumrow -->

+ và cuối cùng cho đoạn này vào cuối index_box

Code:
<!-- END tablefoot -->
<!-- END catrow -->


hề hề.. xong rồi.. lưu và xem kết quả..giờ ngồi edit lại thôi. :))
các bạn phải kiên trì nhé.. q2e21xx
mình chỉ hướng dẫn cơ bản. ko đi sâu dc.. vì mỗi skin là có cấu trúc khác nhau... sd Sau này khi các bạn rip dc skin thì các bạn sẽ hiểu điều đó.. afro

Chúc Bạn Thành Công. q2e21xx
[code]



Last edited by An Hùng on Sat May 04, 2013 5:18 pm; edited 10 times in total

hamthe

hamthe
Thành Viên
Thành Viên

An Hùng ơi nhưng mà rip nó kèm theo cả cái đăng nhập @@! mình đăng nhập vào rồi vẫn hiện và cái đấy ko dùng đăng nhập được

An Hùng BMT

An Hùng BMT
Admin
Admin

ak.. bạn vào header mặc định. để lấy đoạn login.... cái này bạn phải học html để biết....
đây là đoạn form đăng nhập :
Code:
<fieldset id="logindetails" class="logindetails">
      <table cellpadding="0" cellspacing="3" border="0">
      <tr>
        <td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">User Name</label></td>
        <td><input type="text" class=" loginInput default-value" size="10" name="username" id="navbar_username" tabindex="101" style="color: rgb(119, 119, 119); "> </td>

        <td class="smallfont"><label for="navbar_password">Password</label></td>
        <td><input type="password" class="loginInput default-value" tabindex="102" size="10" name="password" id="navbar_password_hint" ></td>
                  <td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />Remember Me?</label></td>
          <td><input type="submit" class="mainoption" name="login" value="Đăng nhập" /></td>
      </tr>
      </table>
        </fieldset>
cái này nữa :

Code:
<input type="hidden" name="s" value="" />
      <input type="hidden" name="securitytoken" value="guest" />
      <input type="hidden" name="do" value="login" />
      <input type="hidden" name="vb_login_md5password" />
      <input type="hidden" name="vb_login_md5password_utf" />
      </form>
                  <script type="text/javascript">
        YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
        YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
        vB_XHTML_Ready.subscribe(function()
        {
        //
            YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
            YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
            YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
            YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
        });
       
        function navbar_username_focus(e)
        {
        //
            var textbox = YAHOO.util.Event.getTarget(e);
            if (textbox.value == 'User Name')
            {
            //
              textbox.value='';
              textbox.style.color='#000000';
            }
        }

        function navbar_username_blur(e)
        {
        //
            var textbox = YAHOO.util.Event.getTarget(e);
            if (textbox.value == '')
            {
            //
              textbox.value='User Name';
              textbox.style.color='#777777';
            }
        }
       
        function navbar_password_hint(e)
        {
        //
            var textbox = YAHOO.util.Event.getTarget(e);
           
            YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
            YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
            YAHOO.util.Dom.get('navbar_password').focus();
        }

        function navbar_password(e)
        {
        //
            var textbox = YAHOO.util.Event.getTarget(e);
           
            if (textbox.value == '')
            {
              YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
              YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
            }
        }
        </script>

bạn cứ lấy skin mặc định của fm mà thay từ từ ::))

hamthe

hamthe
Thành Viên
Thành Viên

Mình không hiểu ý bạn. Mình tìm trong header không thấy code trên ???. Ý bạn là :
- Thay cả 2 code đó vào
- Tìm trong header đó xóa đi ?
- Hay phương án khác ???
=> À với bạn chỉ thêm cho mình cách view index_body và index_box nhé

An Hùng BMT

An Hùng BMT
Admin
Admin

her.. mình nói trong header mặc định của fm ak"... chứ rip skin nào cũng có đoạn đó hết....
bạn rip được skin rồi hở... chúc mừng nha... :)) cho xem demo phát nào ^^!

nh0kl0k

nh0kl0k
Thành Viên
Thành Viên

check thử

phạm văn hà

phạm văn hà
Thành Viên
Thành Viên

rip mãi mà ko dk.. huhu ...

An Hùng BMT

An Hùng BMT
Admin
Admin

hehe...bạn cứ làm từ từ... đọc kỹ kỹ... kiên trì chút... ^^! thế nào bạn cũng thành 1 riper của fm ^^!

VND2012RS

VND2012RS
Thành Viên
Thành Viên

RIP viewtopic thy ntn ha hung

lasperpen

lasperpen
Thành Viên
Thành Viên

tks an hung nhiu se se se

๑۩۞๖ۣۜKu•๖ۣۜMa۞۩๑

๑۩۞๖ۣۜKu•๖ۣۜMa۞۩๑
Thành Viên
Thành Viên

chỉ e cách lấy header tới khúc đó hết biết làm rồi :))

An Hùng BMT

An Hùng BMT
Admin
Admin

thì bạn cứ đọc kỹ vào là sẽ dc... đừng nóng vội... phải kiên trì chút đi... nếu dễ thì ai cũng rip dc rồi....

b1. ctrl + U : để view soure của trang đó.
b2. ctrl + F : nhập vào <body> rồi nhấn enter để tìm.

rồi coppy từ sau thẻ <body> .. cho đến thanh navbar là 0k

๑۩۞๖ۣۜKu•๖ۣۜMa۞۩๑

๑۩۞๖ۣۜKu•๖ۣۜMa۞۩๑
Thành Viên
Thành Viên

Anh hùng chút pmmm yaoo kumakhanh chỉ e lấy header nha :)) làm hoai cug như cũ

ZjkXjnhZaj :)

ZjkXjnhZaj :)
Thành Viên
Thành Viên

Yeah!!! đã được cái header . mà cái css sao mà nó bị lỗi kô . fix quài kô đc. fix đc. cái này . thì còn cái kia :-ss

ZjkXjnhZaj :)

ZjkXjnhZaj :)
Thành Viên
Thành Viên

Yeah!!! đã được cái header . mà cái css sao mà nó bị lỗi kô . fix quài kô đc. fix đc. cái này . thì còn cái kia :-ss

An Nguyễn

An Nguyễn
Thành Viên
Thành Viên

css.php?styleid=7&langid=3&d=1326720353&td=ltr&sheet=additional.css

Húng nói CSS thường có dang như thế nhưng trong đó nó có 3 cái như vậy lận . thế ta lấy doạn nào ?

alo123

alo123
Thành Viên
Thành Viên

http://club157.us.to/ 1 ví dụ điển hình đã rip được css + header rồi nhé , An Hùng hướng dẫn rip Body + box đi , mình đang tìm cách rip footer đây :)

An Hùng BMT

An Hùng BMT
Admin
Admin

hề.. hề... uhm...hôm nào thi xong đã... viết tiếp TUT nhá... footer là dex nhất... cứ view soure là nó nằm cuối cùng...

alo123

alo123
Thành Viên
Thành Viên

chỉ cần box + body đi nhé , footer dưới cùng dễ thôi :)

lasperpen

lasperpen
Thành Viên
Thành Viên

tks bài viết nhá đại ca, làm dc ùi cheers

An Nguyễn

An Nguyễn
Thành Viên
Thành Viên

có 1 số skin tìm CSS ntn này không được

Sponsored content



Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum