JoomlaJoomla เทคนิคจูมล่าModify ได้อย่างใจ ตอนที่ 3 เปลี่ยนหน้า Offline Page

Modify ได้อย่างใจ ตอนที่ 3 เปลี่ยนหน้า Offline Page

( 3 Votes )

30 พฤษภาคม 2010 ผู้ชม: 3623

Tags:

นานแล้วครับที่เรายังใช้หน้า Offline ของ Joomla เป็นแบบเดิม ๆ กันอยู่ หากเราทำการตั้งค่า Site Offline เมื่อไหร่ ก็จะเจอกับหน้า Offline ที่จำเจ วันนี้ผมจะพามาเปลี่ยนหน้า Offline กันครับ เราจะได้มีหน้า Offline เมื่อถึงเวลาปรับปรุงเว็บที่เก๋ ไม่ซ้ำใคร ให้เป็นแบบของเราเอง

น้อยครั้งที่เราจะตั้งค่า Site Offline กัน แต่เมื่อถึงเวลาที่เราต้องทำ ก็เลี่ยงไม่ได้

Offline Page

และเมื่อเลี่ยงไม่ได้ ก็จะเจอกับหน้าเจ้ากรรมแบบนี้

Offline Page

เอายังไงดีล่ะครับ ไม่อยากให้ใครรู้เลย ว่าเราใช้ Joomla (เหมือนจะหลบได้ ฮา...) ดังนั้น เรามาเปลี่ยนหน้า Offline แบบสไตล์ของเราดีกว่าครับ ก่อนอื่น ก็ให้ Copy Code นี้


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" lang="" dir="">
<head>
 <jdoc:include type="head" />
 <link rel="stylesheet" href="/templates/system/css/offline.css" type="text/css" />
 
 <link rel="stylesheet" href="/templates/system/css/offline_rtl.css" type="text/css" />
 
 <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
</head>
<body id="off">
<jdoc:include type="message" />
 <center>
 <h1>
 
 </h1>
 </center>
</body>
</html>

นำไปสร้างเป็นไฟล์ชื่อว่า offline.php ครับ แล้วนำไปวางทับในตำแหน่งไดเร็คทอรี่นี้

/template/system/offline.php

จากนั้น ก็เปลี่ยน css กันหน่อยครับ โดย Copy Code นี้

body#off {
 background: #1F1F1F url(../images/offline.png) top center no-repeat;
 color: #888;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 line-height: 1.5em;
}

ไปสร้างเป็นไฟล์ ชื่อว่า offline.css แล้วนำไปวางทับในตำแหน่งไดเร็คทอรี่นี้

/template/system/css/offline.css

เลือกเอาครับว่าจะเก็บไฟล์ตัวเก่าไว้กันเหนียวก็ได้ครับ , ต่อไป ก็นำภาพที่ชื่อว่า offline.png

ไปวางไว้ในไดเร็คทอรี่นี้

/template/system/images/offline.png

ชื่อไฟล์นี้ สามารถเปลี่ยนเอาเองได้ครับ หากเปลี่ยนแล้วก็ต้องไปเปลี่ยนชื่อในไฟล์ offline.css ด้วยนะครับ

เสร็จแล้วครับ ลองตั้งค่า Site Offline เป็น Yes ดูครับ ก็จะได้หน้าเว็บ Offline สวย ๆ แบบนี้

Offline Page

แจ่มครับ หากต้องการเปลี่ยนรูป หรือเปลี่ยนสี ก็แก้ไขในไฟล์ offline.css ได้เลยครับ แค่นี้ก็พอจะเป็นแนวทางให้ทุกท่านได้ลอง Modify ได้อย่างใจ กันได้แล้วครับ , อย่าลืมปรับ Site Offline เป็น No ด้วยล่ะ เดี๋ยวจะเพลินกับหน้า Offline จนคนอื่นไม่ต้องได้ดูอะไรกันพอดี