แก้ไขครั้งสุดท้าย 2012-4-6 18:18 โดย ethai
(*-*) CSS Template ทำหน้า Portal
/////////////////////////// ส่วนเริ่มต้น ////////////////////////////
1. ก่อนอื่นให้ท่านไปโหลด CSS Template ที่ท่านชอบมาก่อน
ไฟล์ CSS Template ตัวอย่างมีอยู่สี่รูปแบบ
2. สร้างโฟเดอร์ใน ./template/ชื่อโฟเดอร์สกิน
ดาวน์โหลดไฟล์ด้านล่างจะมี header.htm จะตัดโค้ดเหลือแต่ส่วน DIY แต่มีโค้ดส่วนเกิดอยู่ลองไล่ดูครับ ดาวน์โหลดด้านล่างเลย
หลังจากนั้นสร้างโฟเดอร์ย่อย
./template/ชื่อโฟเดอร์สกิน/common
./template/ชื่อโฟเดอร์สกิน/portal
./template/ชื่อโฟเดอร์สกิน/images หรือจะเก็บไฟล์ภาพไว้ที่ static/image/โฟเดอรเก็บไฟล์ภาพ
เอาไฟล์ header.htm ไปใส่ใน ./template/ชื่อโฟเดอร์สกิน/common แก้ชื่อไฟล์ เช่น header_demo.htm
คัดลอกไฟล์ xml ในไฟล์มา (discuz_style_big.xml) แก้
<item id="name"><![CDATA[demo]]></item>
<item id="tplname"><![CDATA[demo]]></item>
<item id="directory"><![CDATA[./template/โฟเดอร์เก็บไฟล์สกิน]]></item>
<item id="copyright"><![CDATA[XXX.com]></item>
เอาไฟล์ xml ใส่ใน ./template/ชื่อโฟเดอร์สกิน/
3. หลังจากนั้นคัดลอกไฟล์ CSS Template เข้าไปไว้ในโฟเดอร์
ไฟล์ htm ไปไว้ในโฟเดอร์ ./template/ชื่อโฟเดอร์สกิน/portal หมายเหตุ:ไฟล์ html ให้เปลี่ยนนามสกุลเป็น htm ก่อน
ไฟล์ภาพเอาไว้ใน ./template/ชื่อโฟเดอร์สกิน/images
ไฟล์ css เอาไว้ใน ./template/ชื่อโฟเดอร์สกิน/common
4. เปิดไฟล์ htm ขึ้นมาแล้วทำการแก้ URL css หรือ URL ภาพ ให้ถูกต้อง
เปิดไฟล์ index.htm ขึ้นมา เราอยากให้ DIY ใส่ตรงไหนได้บ้างให้เพิ่มโค้ดนี้เข้าไป
<!--[diy=04]--><div id="04" class="area"></div><!--[/diy]-->
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
เปิดไฟล์ index.htm ขึ้นมาแล้วทำการตัดโค้ดส่วนนี้ออก- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <link href="css.css" type="text/css" rel="stylesheet" />
- </head>
- <body>
- <link href="css.css" type="text/css" rel="stylesheet" />
แล้วเพิ่มโค้ดเดิมอีกชุดแก้ไข URL เพื่อใช้จริง- <link href="template/โฟเดอร์เก็บสกิน/.../css.css" type="text/css" rel="stylesheet" />
ด้านบนสุดของโค้ดเพิ่ม
<!--{subtemplate common/header_demo}--><style id="diy_style" type="text/css"></style> // ตรงนี้เกี่ยวกับรูปแบบโมดูลถ้าเอาออกจะแก้ไขรูปแบบไม่ได้
// header_demo คือชื่อไฟล์ ./template/ชื่อโฟเดอร์สกิน/portal/header_demo.htm
เมื่อเสร็จจะได้ประมาณ
<!--{subtemplate common/header_demo}--> //ชื่อตรงกับที่แก้ไฟล์ header.htm
<link href="template/big/portal/css.css" type="text/css" rel="stylesheet" />
<link href="css.css" type="text/css" rel="stylesheet" />
<style id="diy_style" type="text/css">
</style>
-----------------------------------------------------------------------------------------------------------------------------------------------------
ส่วน footer เลื่อนลงไปล่างสุดของโค้ด
หาโค้ด เพิ่มด้านบนด้วย- <script src="misc.php?mod=diyhelp&action=get&type=index&diy=$_G['gp_diy']&r={echo random(4)}" type="text/javascript"></script>
- <!--{if !$_G['setting']['bbclosed']}-->
- <!--{if $_G[uid] && !isset($_G['cookie']['checkpm'])}-->
- <script type="text/javascript" src="home.php?mod=spacecp&ac=pm&op=checknewpm&rand=$_G[timestamp]"></script>
- <!--{/if}-->
- <!--{if !isset($_G['cookie']['sendmail'])}-->
- <script type="text/javascript" src="home.php?mod=misc&ac=sendmail&rand=$_G[timestamp]"></script>
- <!--{/if}-->
- <!--{/if}-->
- <!--{if $_GET['diy'] == 'yes' && ($_G[mod] == 'topic' || $_G[group][allowdiy]) && (empty($do) || $do != 'index') && !empty($_G['style']['tplfile'])}-->
- <script type="text/javascript" src="{$_G[setting][jspath]}common_diy.js?{VERHASH}"></script>
- <script type="text/javascript" src="{$_G[setting][jspath]}portal_diy.js?{VERHASH}"></script>
- <!--{/if}-->
- <!--{if $_GET['diy'] == 'yes' && $space['self'] && $_G[mod] == 'space' && $do == 'index'}-->
- <script type="text/javascript" src="{$_G[setting][jspath]}common_diy.js?{VERHASH}"></script>
- <script type="text/javascript" src="{$_G[setting][jspath]}space_diy.js?{VERHASH}"></script>
- <!--{/if}-->
- <!--{if $_G['member']['newprompt'] && (empty($_G['cookie']['promptstate_'.$_G[uid]]) || $_G['cookie']['promptstate_'.$_G[uid]] != $_G['member']['newprompt']) && $_G['gp_do'] != 'notice'}-->
- <script type="text/javascript">noticeTitle();</script>
- <!--{/if}-->
- <!--{eval output();}-->
ดาวน์โหลดไฟล์ตัวอย่าง
////////////////////////VEDIO วีดีโอ/////////////////////////
ตอนที่ 1
ตอนที่ 2
ไฟล์ตัวอย่างตอนที่ 1-2:
/////////////////////////////////// ทำส่วนล็อกอิน //////////////////////////////////
ส่วนล็อกอินนั้นเราจะทำการแก้ไขอยู่ 2 ส่วน
ก.สมาชิกเข้าระบบแล้ว ส่วนในไฟล์ index.htm ใน ./template/ชื่อโฟเดอร์สกิน/portal จากขั้นตอนด้านบน
เราจะเพิ่มโค้ดด้านล่างเข้าไปตรงที่อยากให้สมาชิกล็อกอิน
<!--{eval $mnid = getcurrentnav();}-->
<!--{if $_G['uid']}-->
<ul class="loginmember">
// เมื่อล็อกอินแล้วไม่ว่าจะเป็นผู้ดูแลหรือสมาชิกจะเห็น
[ส่วนนี้แสดงทั้งผู้ดูแลและสมาชิก]
<!--{if $_G['uid'] && getstatus($_G['member']['allowadmincp'], 1)}-->
// เมื่อล็อกอินแล้วผู้ดูแลจะเห็น
[ส่วนผู้ดูแลระบบ]
<!--{/if}-->
<!--{hook/global_usernav_extra2}-->
<!--{hook/global_usernav_extra3}-->
<!--{eval $upgradecredit = $_G['uid'] && $_G['group']['grouptype'] == 'member' && $_G['group']['groupcreditslower'] != 999999999 ? $_G['group']['groupcreditslower'] - $_G['member']['credits'] : false;}-->
// เมื่อล็อกอินแล้วสมาชิกจะเห็น
[ส่วนสมาชิก ]
</ul>
<!--{elseif !empty($_G['cookie']['loginuser'])}-->
<a>admin</a>
<!--{else}-->
// เรียกฟอร์มล็อกอินจากไฟล์ login_socialkpk.htm ใน template\ชื่อโฟเดอร์เทมเพลต\member
<!--{template member/login_socialkpk}-->
<!--{/if}-->
ส่วนที่ต้องทำการแก้ไขคือ [ส่วนนี้แสดงทั้งผู้ดูแลและสมาชิก] [ส่วนผู้ดูแลระบบ] [ส่วนสมาชิก ] และ login_socialkpk แล้วแต่ว่าใครต้องการอย่างไหน ผมจะแนะนำโค้ดบางส่วน
// เมนูเพิ่มเติม
<a href="javascript:;" style="font-size:12px;" id="qmenu" onMouseOver="showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});">เมนูเพิ่มเติม</a>
// ภาพสมาชิก
<!--{avatar($_G[uid],small)}-->
// ชื่อสมาชิก
<a href="home.php?mod=space&uid=$_G[uid]" target="_blank" title="{lang visit_my_space}">
{$_G[member][username]}
</a>
// เครดิต
<a href="home.php?mod=spacecp&ac=credit&showcredit=1" id="extcreditmenu"{if !$_G[setting][bbclosed]} onMouseOver="delayShow(this, showCreditmenu);" class="showmenu"{/if}>{lang credits}: $_G[member][credits]</a>
ข.สมาชิกยังไม่เข้าระบบ ในส่วนไฟล์ login_socialkpk.htm (สร้างขึ้นเอง) ใน template\ชื่อโฟเดอร์เทมเพลต\member
ส่วนนี้จะเป็นฟอร์มล็อกอินดูโค้ดจากไฟล์ login_simple.htm ก็ได้ ตัวอย่างโค้ด
<!--{if CURMODULE != 'logging'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}logging.js?{VERHASH}"></script>
<form method="post" autocomplete="off" name="login" id="loginform_L6zyw" class="cl" onsubmit="pwdclear = 1;ajaxpost('loginform_L6zyw', 'returnmessage_L6zyw', 'returnmessage_L6zyw', 'onerror');return false;" action="member.php?mod=logging&action=login&loginsubmit=yes&loginhash=L6zyw">
//สร้างฟอร์มเองจุดสำคัญจะอยู่ที่สีแดง
//ชื่อสมาชิก
<input type="text" name="username" id="logusername" autocomplete="off" tabindex="1" />
//รหัส
<input name="password" type="password" class="logpassword" id="logpassword" tabindex="902" autocomplete="off" />
// จำการเข้าระบบ
<input type="checkbox" class="pc" name="cookietime" id="cookietime_L6zyw" tabindex="1" value="2592000" />
<input name="submit" type="submit" id="submit" value=" "> //ปุ่ม submit
//จบสร้างฟอร์มเองจุดสำคัญจะอยู่ที่สีแดง
</form>
<!--{/if}-->
หมายเหตุ: สีชมพูนั้นจำเป็นต้องมี ส่วนสีแดงเมื่อเราสร้างช่องกรอกข้อมูลสมาชิกเองเราก็ต้องกำหนด name ตามสีแดง
//////////////////////////////////////////////////////เมนู///////////////////////////////////////////////////////////////////
ใส่โค้ดนี้ลงไปในจุดที่อยากให้เมนูแสดง
- <ul class='discuz'>
- <!--{loop $_G['setting']['navs'] $nav}-->
- <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}-->
- <li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li>
- <!--{/if}-->
- <!--{/loop}-->
- </ul>
.discuz li a {............................} //สำหรับข้อความชื่อเมนู
.discuz li a span {....................} //สำหรับตัวอังกฤษ
โค้ด CSS ใส่เข้าไปเองนะครับ เช่นไม่ต้องการให้ตัวล่างแสดงข้อความก็ใส่
.discuz li a span { display:none; }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 
[คัดลอกลิงก์]
โพสต์ 2011-12-10 11:03:34
|
โพสต์ 2015-4-20 13:32:48
ดู IP
ค้นหาสมาชิก
ดันกระทู้
ปักหมุด
ล๊อคกระทู้
ปลดล๊อคกระทู้
การ์ดสีสัน
ตอบกลับคนแรก
เลื่อนกระทู้ให้อยู่ที่ 1
การ์ดล่องหน