» 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)

Go down  Message [Page 1 of 1]

1 Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sun Nov 18, 2012 2:16 pm

An Hùng BMT

avatar
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




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





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)




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




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ả.


-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.



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



Facebook: www.Facebook.com/AnHungMedia
Website: www.anhungbmt.com

hamthe

avatar
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

avatar
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ừ ::))



Facebook: www.Facebook.com/AnHungMedia
Website: www.anhungbmt.com

hamthe

avatar
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

avatar
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 ^^!



Facebook: www.Facebook.com/AnHungMedia
Website: www.anhungbmt.com

nh0kl0k

avatar
Thành Viên
Thành Viên
check thử

phạm văn hà

avatar
Thành Viên
Thành Viên
rip mãi mà ko dk.. huhu ...

An Hùng BMT

avatar
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 ^^!



Facebook: www.Facebook.com/AnHungMedia
Website: www.anhungbmt.com

VND2012RS

avatar
Thành Viên
Thành Viên
RIP viewtopic thy ntn ha hung

10 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Thu Dec 27, 2012 5:09 am

lasperpen

avatar
Thành Viên
Thành Viên
tks an hung nhiu se se se

11 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sat Mar 09, 2013 5:52 am

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

avatar
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 :))

12 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sat Mar 09, 2013 8:22 am

An Hùng BMT

avatar
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



Facebook: www.Facebook.com/AnHungMedia
Website: www.anhungbmt.com

13 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sat Mar 09, 2013 11:33 am

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

avatar
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ũ

14 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sun Mar 10, 2013 4:33 am

ZjkXjnhZaj :)

avatar
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

15 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sun Mar 10, 2013 4:34 am

ZjkXjnhZaj :)

avatar
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

16 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sun Mar 10, 2013 3:11 pm

An Nguyễn

avatar
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 ?

17 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Tue Mar 12, 2013 8:23 am

alo123

avatar
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 :)

18 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Tue Mar 12, 2013 9:50 am

An Hùng BMT

avatar
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...



Facebook: www.Facebook.com/AnHungMedia
Website: www.anhungbmt.com

19 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Tue Mar 12, 2013 11:15 am

alo123

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

20 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Mon Apr 29, 2013 4:51 pm

lasperpen

avatar
Thành Viên
Thành Viên
tks bài viết nhá đại ca, làm dc ùi cheers

21 Re: Hướng Dẫn Rip Skin VBB qua FM (punbb) on Sat Oct 05, 2013 12:46 pm

An Nguyễn

avatar
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