(*-*) ทำหน้า Portal จากฟรี CSS Template
แก้ไขครั้งสุดท้าย 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"><!]></item>
<item id="tplname"><!]></item>
<item id="directory"><!]></item>
<item id="copyright"><!></item>
เอาไฟล์ xml ใส่ใน ./template/ชื่อโฟเดอร์สกิน/
3. หลังจากนั้นคัดลอกไฟล์ CSS Template เข้าไปไว้ในโฟเดอร์
ไฟล์ htm ไปไว้ในโฟเดอร์ ./template/ชื่อโฟเดอร์สกิน/portal หมายเหตุ:ไฟล์ html ให้เปลี่ยนนามสกุลเป็น htm ก่อน
ไฟล์ภาพเอาไว้ใน ./template/ชื่อโฟเดอร์สกิน/images
ไฟล์css เอาไว้ใน ./template/ชื่อโฟเดอร์สกิน/common
4. เปิดไฟล์ htm ขึ้นมาแล้วทำการแก้ URL css หรือ URL ภาพ ให้ถูกต้อง
เปิดไฟล์ index.htm ขึ้นมา เราอยากให้ DIY ใส่ตรงไหนได้บ้างให้เพิ่มโค้ดนี้เข้าไป
<!----><div id="04" class="area"></div><!----> หมายเหตุ: ตรง diy=04 นั้นห้ามกำหนดซ้ำกันเด็ดขาด
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
เปิดไฟล์ 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>เหลือไว้ตัดแล้วจะเหลือ เพื่อช่วยตอนปรับแต่งด้วย DW<link href="css.css" type="text/css" rel="stylesheet" />//แก้ให้ถูก href="css.css"ช่วนตอนแก้ไขไฟล์ index.htm ใน DW ดูง่ายขึ้นเมื่อทำเสร็จลบออกเลย
แล้วเพิ่มโค้ดเดิมอีกชุดแก้ไข URL เพื่อใช้จริง<link href="template/โฟเดอร์เก็บสกิน/.../css.css" type="text/css" rel="stylesheet" />// คือเปรียบเสมือนมันไล่จาก root เว็บเข้ามาจนถึงไฟล์ cssตัวนี้จะเป็นตอนเรียกผ่านเบราเซอร์
ด้านบนสุดของโค้ดเพิ่ม
<!--{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 เลื่อนลงไปล่างสุดของโค้ด
หาโค้ด</body>
</html> เพิ่มด้านบนด้วย<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 && !isset($_G['cookie']['checkpm'])}-->
<script type="text/javascript" src="home.php?mod=spacecp&ac=pm&op=checknewpm&rand=$_G"></script>
<!--{/if}-->
<!--{if !isset($_G['cookie']['sendmail'])}-->
<script type="text/javascript" src="home.php?mod=misc&ac=sendmail&rand=$_G"></script>
<!--{/if}-->
<!--{/if}-->
<!--{if $_GET['diy'] == 'yes' && ($_G == 'topic' || $_G) && (empty($do) || $do != 'index') && !empty($_G['style']['tplfile'])}-->
<script type="text/javascript" src="{$_G}common_diy.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G}portal_diy.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_GET['diy'] == 'yes' && $space['self'] && $_G == 'space' && $do == 'index'}-->
<script type="text/javascript" src="{$_G}common_diy.js?{VERHASH}"></script>
<script type="text/javascript" src="{$_G}space_diy.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_G['member']['newprompt'] && (empty($_G['cookie']['promptstate_'.$_G]) || $_G['cookie']['promptstate_'.$_G] != $_G['member']['newprompt']) && $_G['gp_do'] != 'notice'}-->
<script type="text/javascript">noticeTitle();</script>
<!--{/if}-->
<!--{eval output();}-->เข้าหน้าเว็บแล้วทดสอบดู
ดาวน์โหลดไฟล์ตัวอย่าง
////////////////////////VEDIO วีดีโอ/////////////////////////
ตอนที่ 1
aPa1CZjVxeU
ตอนที่ 2
qNslR6ySDHw
ไฟล์ตัวอย่างตอนที่ 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,small)}-->
// ชื่อสมาชิก
<a href="home.php?mod=space&uid=$_G" target="_blank" title="{lang visit_my_space}">
{$_G}
</a>
// เครดิต
<a href="home.php?mod=spacecp&ac=credit&showcredit=1" id="extcreditmenu"{if !$_G} onMouseOver="delayShow(this, showCreditmenu);" class="showmenu"{/if}>{lang credits}: $_G</a>
ข.สมาชิกยังไม่เข้าระบบ ในส่วนไฟล์ login_socialkpk.htm (สร้างขึ้นเอง) ใน template\ชื่อโฟเดอร์เทมเพลต\member
ส่วนนี้จะเป็นฟอร์มล็อกอินดูโค้ดจากไฟล์ login_simple.htm ก็ได้ ตัวอย่างโค้ด
<!--{if CURMODULE != 'logging'}-->
<script type="text/javascript" src="{$_G}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}class="a" {/if}$nav></li>
<!--{/if}-->
<!--{/loop}-->
</ul>
แล้วปัญหาตรงภาษาอังกฤษที่มากับเมนูให้คุณใช้ CSS กำหนดรูปแบบเอาเอง
.discuz li a {............................} //สำหรับข้อความชื่อเมนู
.discuz li a span {....................} //สำหรับตัวอังกฤษ
โค้ด CSS ใส่เข้าไปเองนะครับ เช่นไม่ต้องการให้ตัวล่างแสดงข้อความก็ใส่
.discuz li a span { display:none; }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ขอบคุณครับ เยี่ยม รายละเอียดเยอะจัง -*-
เดี๋ยวจะมานั่งอ่านนะครับ.. ขอบคุณมากครับ ^^ น่าสนใจครับ กำลังศึกษาเลย สวัสดีค่ะ คืออยากจะทราบเกี่ยวกับการเปิดใช้แถบข้างเหมือนในรูปนะค่ะ ช่วยแนะนำหน่อยนะค่ะ ทำตามไม่ทันเลย
งง ขอผ่านแล้วกันนะครับ ลงไฟล์ Yahoo ติดตั้งเรียบร้อยแล้ว เปิดใช้เรียบร้อยแล้ว แต่หน้า portal ยังเหมือนเดิมเลยครับ pekasus ตอบกลับเมื่อ 2015-4-19 23:12
ลงไฟล์ Yahoo ติดตั้งเรียบร้อยแล้ว เปิดใช้เรียบร้อยแล้ว แต่หน้า portal ยังเหมือนเดิมเลยครับ
ไม่ทราบว่าคุณใช้ Discuz เวอร์ชั่นไหนครับ
ตอนนี้ผมเปลี่ยนไปใช้ 3.1 แล้วต้องขอโทษด้วยครับที่ไม่สามารถแก้ปัญหาให้คุณได้
ตอนผมทดลองตอนนั้นก็ใช้ได้อยู่นะครับ ไม่ทราบว่าคุณได้ลองอัพเดทแคชดูไหมครับ
หน้า:
[1]