วิธีเปลี่ยนโลโก้ Joomla

อันนี้ก็เป็นหนึ่งในคำถามที่พบบ่อยเช่นกันนะครับ
นั่นก็คือ อยากจะเปลี่ยนโลโก้ของJoomlaให้เป็นโลโก้เว็บของเราเอง ทำอย่างไร?
วิธีทำนั้นไม่ยากเลยครับ
แต่ก่อนที่เราจะทำ ผมอยากแนะนำให้ทุกคนใช้firefoxกันนะครับ เพื่อความสะดวก ใครยังไม่มีก็ไปโหลดกันครับ ดาวน์โหลด firefox

ขั้นตอนที่ 1.หลังจากที่ทุกท่านติดตั้ง firefox แล้ว ก็เปิดหน้าเว็บของท่านเลยครับ คลิกขวาที่ Joomla Logo เลือก View Background Image ครับ



ขั้นตอนที่ 2.เราจะเห็นรูปโลโก้ Joomla นะครับว่าอยู่ที่ไหนให้เซพมาไว้ที่เครื่องPCเราครับ




ขั้นตอนที่ 3.เปิดดูรูปครับว่าขนาดเท่าไหร่ และนามสกุลอะไร

ตัวอย่างนี้
ชื่อรูป: mw_joomla_logo
ขนาด: 298x75 pixels
นามสกุล: png


ขั้นตอนที่ 5.ออกแบบโลโก้ของคุณเองครับ ให้ขนาด กว้างxยาว เท่ากับโลโก้ Joomla เดิม จากนั้นเซพชื่อเดิม และนามสกุลเดิม (อาจจะเซพทับหรือเซพไว้คนที่ละกันก็ได้ครับ)
ผมออกแบบเล่นๆมาแบบนี้นะครับ

ขั้นตอนที่ 6.ต่อไปก็อัพโหลดขึ้นไปไว้ที่เว็บไซต์เราเลยครับ

จำได้มั้ยครับว่าควรอัพโหลดไปไว้ตำแหน่งไหน?
ที่นี่ครับ

Root/templates/ชื่อเทมเพลตที่เราใช้/images

หรือตัวอย่างนี้ก็คือ

Root/templates/rhuk_milkyway/images

ขั้นตอนที่ 7.เขียนทับไปเลยครับ ไม่ต้องกลัว



ขั้นตอนที่ 8.ลองกลับมาดูหน้าเว็บเราครับว่าโลโก้เปลี่ยนหรือยังครับ ดูด้วยFirefox หรือ IE ก็ได้ครับ



ขั้นตอนที่ 9.ถ้ายังไม่เปลี่ยนให้ลอง Clear Cache ดูครับ เปิดfirefox เลือก Tools=>Clear Private Data=>ติ๊กทุกอัน แล้วคลิกClear Private Data Now เลยครับ


เสร็จแล้ว เรียบร้อยครับ :)

หมายเหตุ

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

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

Welcome to The Frontpage เอาออกอย่างไร (Joomla!)

หลังจากที่ผมได้เข้าร่วมเว็บบอร์ดหลักของJoomla มาได้เกือบปี
คำถามนี้เป็นหนึ่งในคำถามที่พบบ่อยมาก (Frequently Asked Question)
นั่นคือ ปกติแล้วเวลาเราติดตั้ง Joomla ใหม่ๆ
ที่หน้าแรกของเว็บไซต์ หรือ เรียกว่า โฮมเพจ จะมีคำว่า "Welcome to The Frontpage" อยู่
คำถาม คือ แล้วจะแก้หรือเอาออกอย่างไร จริงๆแล้วไม่ยากเลยครับ

Welcome to the frontpage ตามรูป

ขั้นตอนที่ 1 ไปที่หน้าAdmin ครับ เลือก Menus=> Main Menu



ขั้นตอนที่ 2 เลือก Home ครับ หรือ หน้าหลัก (ภาษาไทย)


ขั้นตอนที่ 3 จากนั้นเข้าไปที่ Parameters (Systems) เจอแล้วนะครับ Page Title ไงครับ อยากได้อะไรก็พิมพ์เลยครับ

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

Joomla! 1.5.9 ออกแล้วจ้า!!

หลังจากที่ทีมงานjoomla เพิ่งออกเวอร์ชั่น 1.5.8 ได้ไม่นาน พี่แกก็ออกเวอร์ชั่นใหม่ คือjoomla 1.5.9 แล้วครับ และยังบอกให้ทุกคนที่ใช้joomla 1.5.x รีบทำการอัพเกรดด้วยเพื่อความปลอดภัย

มีหลายเว็บไซต์ หรือ เว็บบอร์ด ที่ถามถึงการอัพเกรดเวอร์ชั่นนะครับ ว่าทำยังไง ซึ่งทางJoomla เองก็ได้ออกคู่มือการอัพเกรดเวอร์ชั่น joomlaออกมา
ซึ่งเขียนได้ดีมากๆครับ
แต่ถ้าใครอ่านแล้วยังมึน งง ว่าทำอย่างไร? ก็ลองอ่านวิธีทำด้านล่างของผมละกัน :)

อธิบายกันก่อน

     [ไม่จำเป็น] หมายถึง ขั้นตอนนี้อาจจะข้ามไปก็ได้
     [จำเป็น] หมายถึง ขั้นตอนนี้สำคัญ และจำเป็นต้องทำในการอัพเกรดเวอร์ชั่น

วิธีการอัพเกรดJoomla เวอร์ชั่น

1. [จำเป็น] เลือกไฟล์ที่จะดาวน์โหลดให้ถูกก่อนนะครับ จากนั้นทำการดาวน์โหลด
      Joomla 1.5.9 สามารถดาวน์โหลดได้ที่นี่

บางคนงงว่าควรดาวน์โหลดอันไหน
-ดูว่าตัวเองใช้เวอร์ชั่นอะไรก่อนครับ ถ้าใช้เวอร์ชั่น 1.5.7 ก็ให้โหลด joomla 1.5.7 to 1.5.9 package

ไฟล์มันมี 3 นามสกุล คือ .zip, .tar.gz, .tar.bz2 แล้วควรดาวน์โหลดอันไหน?
-ไม่ต้องกลัวครับ, ถ้าใช้WindowXp หรือ Vista ก็เลือกไฟล์นามสกุล zip
แต่ถ้าใ้ช้Linux ก็เลือก 2 อันหลัง

2. [จำเป็น] แบ็คอัพไฟล์ทั้งหมดบนโฮสต์มาไว้ที่เครื่องคอมพิวเตอร์ของเราครับ
      ตรงนี้ไม่ยากอะไร แ่ค่ใช้โปรแกรม ftp เช่นfilezilla
      จากนั้น copy ไฟล์ทั้งหมดของเราบนโฮสต์มาไว้ในเครื่องครับ (ตรงนี้อาจกินเวลานานมาก แนะนำให้ไปทำอย่างอื่นระหว่างรอ อิอิ)

ลองดูรูปประกอบวิธีการbackup fileครับ ง่ายๆ แค่เลือกไฟล์ทั้งหมด dragมาไว้ที่เครื่องเรา

3. [จำเป็น] แบ็คอัพฐานข้อมูล หรือ database ทั้งหมด
      ถ้าทำไม่เป็น ให้ลองดู VDO สอนวิธี export ฐานข้อมูลมายังเครื่องเราครับ

4. [ไม่จำเป็น] ตั้งค่าเว็บไซต์เราให้เป็นออฟไลน์ครับ
      ไปที่Admin=> Grobal Config=>Site Offline=>yes
      ตรงนี้ไม่จำเป็นต้องทำก็ได้ครับ แต่เพื่อความปลอดภัย ผมแนะนำว่าให้ทำครับ อาจจะทำตอนกลางคืนช่วงที่ไม่มีคนเข้าเว็บก็ได้ (แต่ถ้าอัพเกรดจาก joomla 1.0.x ไปเป็น Joomla 1.0.15 ตรงนี้จำเป็นนะครับ)

5. [จำเป็น] Extract หรือแตก ไฟล์ Packageที่เราโหลดมาจากขั้นตอนที่ 1มา extractในเครื่องคอมพิวเตอร์ของเรานะครับ
     ตรงนี้อาจจะใช้ WinZip, WinRAR ก็ได้ตามสะดวกครับ

6. [จำเป็น] อัพโหลดไฟล์ทั้งหมดที่เราแตกไว้ในเครื่องเราไปไว้บนโฮสต์ครับ เขียนทับทั้งหมด (overwrite all)
      ตรงนี้ก็ใช้เวลาพอควร แต่ไม่นานเท่าไหร่ครับ
7. [จำเป็น] หลังจากอัพโหลดเสร็จแล้ว เข้าไปLoginหน้า Admin อีกครั้ง ตรวจดูว่ามีคำเตือนอะไรขึ้นมาหรือเปล่า ให้ปฏิบัติตามครับ
8. [ไม่จำเ้ป็น] ถ้าใครตั้งค่าเว็บไซต์เป็นออฟไลน์ไว้ใ้ห้ไปแก้เป็นออนไลน์อีกครั้งครับ
      โดยไปที่ Admin=> Grobal Config=>Site Offline=>no
9. [จำเป็น]ลองเช็คหน้าเว็บดูว่ามีปัญหาหรือเปล่า เช็คอย่างละเอียดนะครับ
10. ถ้าไม่มีปัญหาอะไรก็เรียบร้อยครับ สำหรับการอัพเกรดเวอร์ชั่น ไม่ยากเลยนะครับ :)

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีอัพเกรดเวอร์ชั่น Mamboboard

ถ้าคุณเป็นคนหนึ่งที่ใช้mamboboard และต้องการอัพเกรดเวอร์ชั่น
Mamboboardเวอร์ชั่นล่าสุดสามารถดาวน์โหลดได้จากเว็บไซต์หลักของmamboboard
แต่น่าเสียดาย... เว็บนั้นกลับไม่ได้พูดถึงวิธีการอัพเกรดเวอร์ชั่นเลยว่าทำอย่างไร??
ไม่ต้ิองห่วงครับ ผมเองก็ใช้mamboboardเหมือนกัน
ลองมาดูวิธีอัพเกรดกันเลย

อธิบายกันซักนิด
[ไม่จำเป็น] หมายถึง ขั้นตอนนี้อาจจะข้ามไปก็ได้ ไม่จำเป็นต้องทำ หากคุณไม่ได้ดัดแปลงอะไรเลย จากmamboboard เวอร์ชั่นที่คุณใช้อยู่ (บางขั้นตอนแม้จะไม่จำเป็นแต่ก็ควรทำ)
[จำเป็น] หมายถึง ขั้นตอนนี้จำเป็นต้องทำนะครับในการอัพเกรด

วิธีการอัพเกรด
1. [ไม่จำเป็น] ให้ปิด (unpublish) เมนูที่ลิงก์ไปmamboboardก่อนครับ
2. [ไม่จำเป็น] เซตค่าmamboboardให้เป็นoffline (ในmamboboard configuration)
3. [ไม่จำเป็น] แบ็คอัพฐานข้อมูลครับ (เข้าหน้าphpmyadmin ดูแถวที่มีคำว่า _sb_ ทั้งหมด)
4. [ไม่จำเป็น] แบ็คอัพเทมเพลตที่ใช้ หากทำการดัดแปลงเทมเพลต ถ้าไม่ได้ดัดแปลงอะไรก็ไม่จำเป็นครับ (Root/components/com_mamboboard/templates)
5. [ไม่จำเป็น] แบ็คอัพอีโมติคอน หากทำการดัดแปลงอีโมติคอน ถ้าไม่ได้ดัดแปลงอะไรก็ไม่จำเป็นครับ (Root/components/com_mamboboard/emoticons)
6. [ไม่จำเป็น] แบ็คอัพไฟล์ rules.txt (Root/components/com_mamboboard/rules.txt)
7. [ไม่จำเป็น] แบ็คอัพ avatars (รูปตัวแทน)ของผู้ใช้ (Root/components/com_mamboboard/avatars)
8. [จำเป็น] แบ็คอัพไฟล์และรูปที่ผู้ใช้อัพโหลดนะครับ (Root/components/com_mamboboard/uploaded)
9. [จำเป็น] Uninstall Mamboboard ในหน้าadminครับ
10.[จำเป็น] Install mamboboard เวอร์ชั่นใหม่
11.[จำเป็น] เอารูปและไฟล์ที่เราแบ็คอัพไว้ upload กลับไปที่เดิม
12.[ไม่จำเป็น] อัพโหลด avatars กลับไปที่เดิม
13.[ไม่จำเป็น] อัพโหลด rules.txt
14.[ไม่จำเป็น] อัพโหลด อีโมติคอน กลับไปที่เดิมครับ (ถ้าไม่ได้ดัดแปลงอีโมติคอน ก็ไม่จำเป็นครับ)
15.[ไม่จำเป็น] อัพโหลด เทมเพลตที่เราดัดแปลง กลับไปที่เดิม
16.[จำเป็น] จากนั้นให้สร้างmenu ใหม่ลิงก์ไปหาmamboboard ครับ
17.เรียบร้อย :)

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

ทำเว็บให้น่าสนใจยิ่งขึ้นด้วย Lightbox

เดี๋ยวนี้เว็บไซต์ใหม่ๆ มักจะใช้ lightbox กันนะครับ ไม่ว่าจะทำแกลลอรี่ หรือ ใส่บริเวณรูปในบทความก็ตาม
ถ้าใครยังไม่รู้จักว่า Lightbox คืออะไร ลองคลิกที่รูปตัวอย่างด้านล่างดูครับ...

น่าสนใจใช่มั้ยครับ? คราวนี้เรามาลองดูวิธีทำกัน!

ขั้นตอนที่ 1. ไปโหลด lightbox (ไฟล์ Zip) ที่เว็บนี้ก่อนนะครับ

http://www.huddletogether.com/projects/lightbox2/

ขั้นตอนที่ 2. พอโหลดมาลงเครื่องแล้วก็ Extract เลยครับ

ขั้นตอนที่ 3. จากนั้นไฟล์ที่Extractออกมา่จะเป็นโฟลเดอร์ชื่อ lightbox2.04 เปิดเข้าไปดูเลยครับ จะเจอไฟล์ index.html ซึ่งมีคู่มือการใช้อยู่ ถ้าใครอ่านรู้เรื่องทำเป็นแล้วก็ไม่ต้องอ่านบล็อกผมต่อแล้วล่ะครับ อิอิอิ แต่ถ้าไม่รู้เรื่องก็ลองอ่านขั้นตอนต่อไปเลย :)

ขั้นตอนที่ 4. เพื่อความเข้าใจเบื้องต้นนะครับ ให้คุณเตรียมรูปอย่างน้อยซัก 3 รูปครับ จากนั้นตั้งชื่อ สมมติว่าเป็น picture01.jpg, picture02.jpg, picture03.jpg

ขั้นตอนที่ 5. จากนั้นให้Resizeทั้ง 3 รูปเลยครับ แล้วตั้งชื่อว่า picture01-thumbnail.jpg, picture02-thumbnail.jpg, picture03-thumbnail.jpg
ตอนนี้คุณมี 6 รูปแล้วนะครับ ให้เอาไปรวมกันที่โฟลเดอร์เดียว
ผมสมมติชื่อ folder เป็น example-pics ครับ
ขั้นตอนที่ 6. ให้อัพโหลดโฟลเดอร์ example-pics ไปที่เว็บไซต์ของคุณนะครับ ตัวอย่างนี้ผมอัพโหลดไปไว้ที่ตำแหน่งrootนะครับ ตามนี้

Root/example-pics

รูปแสดงวิธีการอัพโหลดโฟลเดอร์ example-pics ด้วย filezilla

ขั้นตอนที่ 7.คราวนี้กลับมาดูที่โฟลเดอร์lightbox2.04 เพื่อความสะดวกให้คุณเปลี่ยนชื่อโฟลเดอร์นี้เป็นlightboxเฉยๆนะครับ ไม่ต้องมี 2.04
ขั้นตอนที่ 8.ต่อไปก็อัพโหลดโฟลเดอร์lightboxไปที่เว็บไซต์ของคุณเลย ตัวอย่างนี้ผมอัพโหลดไปที่ rootนะครับ

Root/lightbox

ขั้นตอนที่ 9.โอเคครับ, ให้นำโค้ดนี้ไปใส่ใน template html นะครับ ระหว่าง tag <head>...</head>

<link rel="stylesheet" href="URLเว็บไซต์คุณ/lightbox/css/lightbox.css" type="text/css"
media="screen" />
<script src="URLเว็บไซต์คุณ/lightbox/js/prototype.js" type="text/javascript">
</script>
<script src="URLเว็บไซต์คุณ/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript">
</script>
<script src="URLเว็บไซต์คุณ/lightbox/js/lightbox.js" type="text/javascript">
</script>

อย่าลืมเปลี่ยนคำว่า"URLเว็บไซต์คุณ"ด้วยนะครับ :)

ขั้นตอนที่ 10.และเวลาจะใช้lightboxก็ให้ใช้โค้ดนี้ครับ

<a href="URL ของรูปขนาดเต็ม" rel="lightbox" title="ใส่ชื่อรูป">
<img src="URL ของรูป thumbnail" alt="ใส่ชื่อรูป" /></a>

สำหรับตัวอย่างนี้ (หมายถึง 6 รูปที่เตรียมไว้ในขั้นตอนที่4-5) โค้ดก็จะเป็นแบบนี้ครับ:

<a href="http://www.เว็บของคุณ.com/example-pics/picture01.jpg" rel="lightbox" title="picture01">
<img src="http://www.เว็บของคุณ.com/example-pics/picture01-thumbnail.jpg" alt="picture01" /></a>

<a href="http://www.เว็บของคุณ.com/example-pics/picture02.jpg" rel="lightbox" title="picture02">
<img src="http://www.เว็บของคุณ.com/example-pics/picture02-thumbnail.jpg" alt="picture02" /></a>

<a href="http://www.เว็บของคุณ.com/example-pics/picture03.jpg" rel="lightbox" title="picture03">
<img src="http://www.เว็บของคุณ.com/example-pics/picture03-thumbnail.jpg" alt="picture03" /></a>

ขั้นตอนที่ 11.ทำเสร็จแล้วก็ลองเปิดดูนะครับ ชื่นชมผลงานซักหน่อย 555 :)

หมายเหตุ:

• หากมีรูปที่เกี่ยวข้องกัน อยากจะทำเป็นกลุ่มเดียวกัน เช่น ใน 100 รูป อาจจะมี กลุ่มรูปรถยนต์ 50 รูป กลุ่มรูปต้นไม้ 30 รูป กลุ่มอื่นๆ 20 รูป เราอาจจะใส่โค้ดเพิ่ม [ชื่อกลุ่ม] ไว้หลังโค้ดตรงนี้ rel="lightbox[ชื่อกลุ่ม]" ซึ่งมีประโยชน์เมื่อเปิดดูรูปใดรูปหนึ่งในกลุ่มดังกล่าวแล้ว จะสามารถใช้แป้นลูกศรบนคีย์บอร์ดเลื่อนรูปไปข้างหน้า หรือ ถอยหลัง ไปยังรูปถัดไปได้
• อาจจะลองประยุกต์ใช้lightbox กับ photoshop automate web photo gallery ดูก็ได้ครับ
  

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

มาทดลองเปลี่ยนสไตล์ Module กัน (Joomla!)

เคยอยากลองเปลี่ยนสไตล์ให้กับModuleมั้ยครับ? บางครั้งModuleทุกอันหน้าตาเหมือนๆกันเด๊ะ ก็อาจจะทำให้หน้าตาเว็บเราไม่น่าสนใจเท่าไรนัก ยิ่งถ้าไม่มีเนื้่อหาที่น่าสนใจอีกก็อาจจะทำให้หน้าเว็บดูหน้าเบื่อก็ได้ครับ บทความนี้ผมจะแนะนำการกำหนดสไตล์ของModuleนะครับ ซึ่งJoomlaเรียกตรงนี้ว่า module class suffix.

สำหรับ Joomla เวอร์ชั่น 1.0.x

ขั้นตอนที่ 1. ก่อนอื่นต้องพอเข้าใจ CSS style ก่อนนะครับ เปิดไฟล์ template CSS (Template_CSS.CSS) แล้วลองดูในส่วนของ...

• table.moduletable ตัวนี้คือสไตล์ที่กำหนดทั้ง Module
• table.moduletable td ตัวนี้กำหนดสไตล์ของContentใน Module
  
• table.moduletable th ตัวนี้กำหนดส่วนหัวไตเติ้ลของModule
  

ขั้นตอนที่ 2. พอเข้าใจบ้างนะครับ ต่อไปผมจะเปลี่ยนหัวไตเติ้ลของModuleตามรูปด้านล่างครับ ให้คุณเตรียมรูปที่จะใช้ไว้ครับ (ขนาดตามเหมาะสมนะครับอยู่ที่CSSแหละครับ ถ้าำกำหนดเป็นก็ใช้รูปกว้างยาวเท่าไรก็ได้เลยครับ)



ขั้นตอนที่ 3. เตรียมรูปไว้แล้วอัพโหลดไปที่ตำแหน่งนี้ครับ

URL = Root/Templates/ชื่อเทมเพลตที่ใช้/Images

อันนี้คือรูปที่ผมจะใช้ทำBackgroundนะครับ ก็อัพโหลดไปตำแหน่งดังกล่าวเลย

ขั้นตอนที่ 4. ไปที่ Template CSS แล้วดูตั้งแต่บรรทัด table.moduletable {

table.moduletable {
width:100%;
margin-bottom:5px;
border-spacing:0;
border-collapse:collapse;
padding:0;
}

table.moduletable th {
background:url(../images/subhead_bg.png) repeat-x;
color:#FFF;
text-align:left;
padding-top:4px;
padding-left:4px;
height:21px;
font-weight:700;
font-size:12px;
text-transform:uppercase;
}

table.moduletable td {
font-size:12px;
font-weight:400;
margin:0;
padding:0;
}

... CSS ตัวอย่างข้างบนแตกต่างกันไปแต่ละเทมเพลตนะครับ ไม่ต้องตกใจ...

ต่อไปเอาโค้ดด้านล่างนี้ไปใส่ครับต่อจากCSSด้านบน

table.moduletable_shogi {
width:100%;
margin-bottom:5px;
border-spacing:0;
border-collapse:collapse;
padding:0;
}

table.moduletable_shogi th {
background: url(../images/new_bg.jpg) no-repeat;
color: #336699;
text-align: center;
padding-top: 15px;
padding-left: 4px;
height: 51px;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}

table.moduletable_shogi td {
font-size:12px;
font-weight:400;
margin:0;
padding:0;
}

อธิบายโค้ดที่จะนำมาใส่ซักนิด

• ผมตั้งชื่อ Module Class Suffix ว่า _shogi(โชกิ คือ หมากรุกญี่ปุ่น) โดยใส่ไว้หลังคำว่า table.moduletable เพื่อกำหนด Module Class Suffix ใหม่ขึ้นมาครับ คุณอยากได้ชื่ออะไรก็ใส่ได้เลยนะครับ
• สังเกตโค้ดCSSตรง background: url อันนี้คือชี้ไปตำแหน่งของรูปที่เราอัพโหลดขึ้นไปครับ
  
• ส่วนอื่นๆอยากดัดแปลงความสูง ขนาดตัวอักษร สี อย่างไร ตามสะดวกนะครับ
  

หลังจากใส่โค้ดของผมไปแล้ว ก็จะเป็นแบบนี้นะครับ :

table.moduletable {
width:100%;
margin-bottom:5px;
border-spacing:0;
border-collapse:collapse;
padding:0;
}

table.moduletable th {
background:url(../images/subhead_bg.png) repeat-x;
color:#FFF;
text-align:left;
padding-top:4px;
padding-left:4px;
height:21px;
font-weight:700;
font-size:12px;
text-transform:uppercase;
}

table.moduletable td {
font-size:12px;
font-weight:400;
margin:0;
padding:0;
}

table.moduletable_shogi {
width:100%;
margin-bottom:5px;
border-spacing:0;
border-collapse:collapse;
padding:0;
}

table.moduletable_shogi th {
background: url(../images/new_bg.jpg) no-repeat;
color: #336699;
text-align: center;
padding-top: 15px;
padding-left: 4px;
height: 51px;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}

table.moduletable_shogi td {
font-size:12px;
font-weight:400;
margin:0;
padding:0;
}

ขั้นตอนที่ 5. ใกล้เสร็จแล้วครับ... คลิกเข้าไปที่ Module ที่เราต้องการเปลี่ยนสไตล์ครับ จากนั้นที่ช่อง Module Class Suffix ให้ใส่ชื่อ _shogi (หรือ ชื่ออื่นที่คุณตั้ง)ลงไปครับ แล้วก็เซพ



โอเคครับ เรียบร้อย กลับมาดูหน้าตาเว็บไซต์เราซะหน่อย Background ของ Module เปลี่ยนไปแล้ว!!!



สำหรับJoomla 1.5.x

• จริงๆผมใช้ joomla 1.0.x นะครับ ตัวอย่างข้างบนก็เป็นของ 1.0.x แต่ถ้าเข้าใจแล้ว 1.5.x ก็ทำได้เหมือนกันครับ
  
• เนื่องจาก Joomla 1.5.x ปกติจะโครงสร้างโมดูลจะใช้ Div (<div>...</div>)เป็นหลักนะครับ ไม่เหมือนกับ Joomla 1.0.x ที่ใช้ Table (<table>...</table>)เป็นหลัก ดังนั้นถ้าอยากจะทำวิธีที่ว่ามานี่ให้ไปแก้ CSS ในส่วน div.moduletable แทนนะครับ ไม่ใช่ table.moduletable เหมือนด้านบนนะครับ
  
• ถ้าจะตั้งชื่อ module class suffix ใหม่ของเราเองก็เหมือนเดิมครับให้พิมพ์ไว้ด้านท้าย => div.moduletable_ชื่อที่เราตั้ง

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

มาสร้าง Gif Animation กันเถอะ

ความจริงแล้วการทำ gif อนิเมชั่นมีหลายวิธีนะครับ แต่ถ้าใครมีPhotoshop และImageReadyอยู่แล้ว ก็ลองทำด้วยวิธีนี้ดูครับ ง่ายดี

ขั้นตอนที่ 1. ตรวจดูว่าเครื่องมี Adobe Photoshop ลงไว้ยังครับ ปกติถ้าลง Photoshopไว้แล้ว,ก็จะมีImageReady ด้วยอยู่แล้วครับ

ขั้นตอนที่ 2. เตรียมรูปที่จะนำมาทำครับ ตัวอย่างนี้ผมเตรียม 4 รูป ตามด้านล่างเลย


ขั้นตอนที่ 3. เปิดทุกรูปที่จะนำมาทำอนิเมชั่นด้วยPhotoshopครับ จากนั้นลากทุกรูปมารวมกันที่รูปเดียวครับ (ถ้าจะให้ตรงกันเป๊ะให้กดShiftค้างไว้ด้วยครับ)



ขั้นตอนที่ 4. ตอนนี้หากเพื่อนๆทำตามรูป 4 รูปก็จะมาอยู่ไฟล์เดียวกันแล้ว ขั้นตอนต่อไปให้เราคลิกที่ปุ่มImageReadyในPhotoshop เพื่อย้ายไปโปรแกรม ImageReadyครับ แต่ก่อนจะไปเซพไว้ก่อนก็ดีครับ เซพเป็นPSDนะครับ



ขั้นตอนที่ 5. พอเข้ามาที่Image Readyแล้ว
ให้เปิดหน้าต่าง Animation ครับ (เลือกwindow=>ติ๊กถูกที่ animation).
จากนั้นคลิกที่ปุ่ม Duplicate เพื่อคัดลอกFrame (ผมก็อปปี้เพิ่มอีก 3 Frameนะครับ)



ขั้นตอนที่ 6. Frame 1. ให้มันแสดงเฉพาะ picture01 และซ่อนlayerอื่นๆไว้ [ตรงแถบLayerที่เป็นรูปดวงตานะครับ ถ้ามีดวงตาหมายถึงแสดง (show) ถ้าไม่มีแสดงว่าซ่อนครับ], Frame 2. แสดงเฉพาะpicture02, Frame 3. แสดงเฉพาะ picture03, Frame 4. แสดงเฉพาะ picture04. (ลองกดplayดูได้ครับถ้าปรับเสร็จแล้ว) จากนั้นตรงเวลาด้านล่าง0.1sec ให้เราปรับเวลาตามชอบใจครับ




ขั้นตอนที่ 7. ถ้าปรับแต่งเสร็จเรียบร้อยแ้ล้วให้เซพโดยเลือก Save Optimized As. มันจะเซพเป็นนามสกุล gif



เสร็จแล้ว! แค่นี้ก็เรียบร้อยครับ :)


หมายเหตุ

• ถ้าเข้าใจวิธีการทำอาจจะไม่ต้องเตรียมรูปแยกกันไว้ก่อนก็ได้ครับ คือ ทำในphotoshopแยกLayerไว้เองเลย
• วิธีการนี้สามารถใช้ในการทำแบนเนอร์หรืออีโมติคอนก็ได้ครับ
• แต่ถ้าจะทำอีโมติคอนต้องตั้งขนาดรูปไว้ที่ 50x50 พิกเซลนะครับ
  

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีใส่ Moduleในบทความ Joomla!

เคยคิดอยากจะลองใส่โมดูลต่างๆ ไม่ว่าจะเป็นโพลล์, ตัวนับจำนวนผู้เข้าชม, Google Adsense ไว้ในบทความมั้ยครับ? ลองมาดูกันครับว่าทำยังไง :)

Joomla 1.0.x

ขั้นตอนที่ 1. ไปหน้า Admin page แล้วให้ตรวจดู mambot ที่ชื่อ Load Module Positions ว่าเปิดใช้อยู่หรือยังครับ จากนั้นคลิกเข้าไปดูครับ Load Module Positions

• Published ให้เลือกใช่ คือ เปิดใช้งาน


• Styles ตรงนี้เท่าที่ทดลองดูเลือกอะไรก็ได้นะครับ คือถ้าเลือกแล้วมันจะสร้างHTML tag ขึ้นมาครอบ Module เราไว้ครับ ไม่ว่าจะเป็นdiv tag (<div>...</div>) หรือ table tag (<table>...</table>) ดังนั้นผมว่าเลือก raw output ดีกว่าครับ จะได้ไม่สับสน

ขั้นตอนที่ 2.ไปที่ Site=>Template Manager=>Module Positions ให้สร้างPosition ใหม่ครับ คือ พิมพ์ตั้งชื่ออะไรก็ได้ในช่องที่ว่างๆด้านล่างนะครับ (ผมตั้งชื่อว่า example)

ขั้นตอนที่ 3. ไปที่ Module manager แล้วก็copy module ที่เราต้องการแสดงในบทความนะครับ หรือจะสร้างใหม่ก็ได้ (ตัวอย่างนี้ผม copy module โพลล์นะครับ poll)


ขั้นตอนที่ 4. ให้คลิกเข้าไปตั้งค่าตัวmoduleที่เราcopyไว้ หรือ ตัวที่เราสร้างใหม่ครับ

• Position ให้เลือกไปที่Module position ที่เราสร้างไว้ครับ


• Published ให้เลือก ใช่


• Menu Item Link(s): ให้เืลือก All

ขั้นตอนที่ 5. คราวนี้เราก็สร้างบทความครับ ตรงไหนอยากใส่Module ดังกล่าวก็แค่พิมพ์ {mosloadposition ชื่อPositionที่ัตั้งไว้} (ของผมชื่อว่า example, ผมก็พิมพ์แค่ {mosloadposition example}) เรียบร้อยครับ คราวนี้Module ก็มาปรากฎในบทความของเราแล้ว!!


สำหรับ Joomla 1.5.x:

• Joomla 1.5.x mambot เปลี่ยนชื่อครับเป็น plugin


• การสร้างmodule positionใหม่ ให้เราเข้าไปที่Moduleตัวที่เราต้องการนำไปใส่ในบทความนะครับ ที่เมนูDropdown Position ให้เราคลิกเข้าไปที่ช่องแล้วตั้งชื่อใหม่ได้เลยนะครับ (คลิกที่ชื่อ ไม่ใช้คลิกที่ลูกศรนะครับ)



• เวลาจะใช้ให้พิมพ์ {loadposition ชื่อPositionที่่ตั้งไว้} แทนที่จะเป็น {mosloadposition ชื่อPositionที่่ตั้งไว้} แบบ Joomla 1.0.x

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

เปิดหน้าเว็บอื่นในเว็บ Joomla! ของคุณ

ฟังก์ชัน Wrapperใน Joomla! เป็นฟังก์ชันที่ใช้ในการเปิดหน้าเว็บอื่นในเว็บไซต์ joomla ของคุณ วิธีการใช้ก็ไม่ได้ยากอะไรครับ มาดูกันเลย
ขั้นตอนที่ 1. ไปที่หน้า Admin=>Menu=>Main Menu=>New=>เลือก Wrapper แล้วคลิก Next

ขั้นตอนที่ 2. ที่หน้า Wrapper ลองมาดูว่าต้องปรับอะไรกันบ้างครับ

-Details

• Name: ใส่ชื่อเมนู
• Wrapper Links: ใส่URLของเว็บไซต์อื่นที่ต้องการแสดง

-Parameters

• Menu Image:ตรงนี้ข้ามไปครับ ไม่จำเป็นต้องเลือก
  
• Page Class Suffix: ปล่อยว่างไว้ (ตรงนี้เอาไว้แต่งสไตล์ของหน้าเว็บ ซึ่งต้องแก้ไขCSSด้วยครับ ถ้าอยากทำ)
  
• Back Button: เลือก ซ่อน หรือ แสดง หรือ ตาม Grobal Setting
  
• Page Title: แสดง หรือ ซ่อน ชื่อที่ตั้งไ้ว้ (ด้านล่าง)
  
• Page Title: ตั้งชื่อหน้านี้ครับ ตั้งตามเว็บที่เราจะเปิดก็ได้ครับ หรือ ปล่อยไว้ก็ได้
  
• Scroll Bars: เลือก Auto ดีที่สุดครับ
  
• Width: ใส่ขนาดความกว้างของWrapper
• Hight: ใส่ขนาดความสูงของWrapper
• Auto Hight: ถ้าเลือก Yes Joomla จะทำการคำนวณความสูงของหน้าเว็บอื่นที่เราต้องการเปิดในเว็บเราให้เหมาะสม Wrapper ครับ
  
• Auto Add: ตรงนี้เลือกก็ได้ไม่เลือกก็ได้ครับ คือจะเติม http:// ในกรณีที่เราไม่ได้พิมพ์URLเต็มๆไว้ในช่อง Wrapper Links: (เช่นพิมพ์แค่ www.เว็บอื่น.com)

เรียบร้อยครับ. เซตค่าต่างๆเสร็จก็คลิกปุ่มเซพเลยครับ...

Youtube ในไทยโอเทลโล่ :)

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีเอาปุ่ม Community Builder Button ออกจากหน้าProfile

หากใครใช้ community builder จะเห็นว่ามีปุ่มชื่อ community builder เมื่อคลิกก็จะลิงก์ไปยังหน้าเครดิตทีมงานพัฒนา คอมโพเนนท์ ตัวนี้นะครับ ซึ่งในComfiguration ของคอมโพเนนท์ตัวนี้เองก็ไม่มีวิธีปิดปุ่มนี้เสียด้วย แล้วเราจะปิดยังไงล่ะครับ ลองมาดูกันเลย

ปุ่มที่ว่าด้านบนครับ

ขั้นตอนที่ 1. ไปหน้า Admin => Component=>Community Builder=>Tab Management

ขั้นตอนที่ 2. ที่ Tab Management, ให้เลือก Menu ครับ

ขั้นตอนที่ 3. ดูที่ช่อง first menu name: นะครับ เดิมเป็น _UE_MENU_CB ให้ลบทิ้งซะ ปล่อยว่างๆไว้ครับ

เรียบร้อยครับ กดเซพก็เป็นอันเสร็จกระบวนการ ลองกลับมาดูหน้าProfileกันใหม่ครับ

ปุ่ม Community Builder หายไปแล้ว!!!

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

วิธีทำเว็บแกลลอรี่ด้วยPhotoshop

หากคุณใช้Joomla ทำเว็บไซต์ แล้วอยากทำเว็บแกลลอรี่ คุณจำเป็นต้องลงคอมโพเนนท์ที่ใช้ทำแกลลอรี่ไม่ว่าจะเป็น Datso Gallery, Joom Gallery, Ako gallery ซึ่งส่วนใหญ่ก็คล้ายๆกัน คอมโพเนนท์พวกนี้ก็สะดวกดีครับสำหรับทำแกลลอรี่เล็กๆ ไม่กี่ 10 รูป แต่ถ้าอยากทำแกลลอรี่ใหญ่ๆ มากกว่า 200 รูป ผมแนะนำว่าให้ใช้Photoshop สร้างแกลลอรี่ดีกว่าครับเร็วกว่าเยอะเลย!! ผมคิดว่าอาจจะเป็นวิธีที่ง่ายและดีที่สุดด้วยครับ ในการทำแกลลอรี่(สำหรับคนที่เขียนเว็บด้วยDreamweaver หรือ HTML ก็ใช้วิธีนี้ได้นะครับ)

ขั้นตอนที่ 1. เครื่องคุณต้องลงPhotoshop ก่อนครับ (photoshop 7 หรือ CS ขึ้นไปครับ)

ขั้นตอนที่ 2. เตรียม 2 โฟลเดอร์ ดังนี้

1. โฟลเดอร์ที่ 1 ให้ใส่รูปที่ต้องการทำแกลลอรี่


2. โฟลเดอร์ที่ 2 เตรียมไว้สำหรับเซพไฟล์ที่โปรแกรมPhotoshopจะสร้างขึ้น

ผมเตรียม 2 โฟลเดอร์ไว้ที่Desktop ชื่อว่า Source Image และ Gallery

โฟลเดอร์ Source Image ใส่รูปที่จะทำแกลลอรี่ไว้ครับ ส่วนโฟลเดอร์ Gallery ว่างๆไว้ไม่มีอะไรข้างใน

ขั้นตอนที่ 3. เปิด Photoshop, เลือกเมนู=>file=>Automate=>Web Photo Gallery

ขั้นตอนที่ 4. ตอนนี้มาอยู่ที่ฟังก์ชัน Automate Web Photo Gallery แล้วครับ ซึ่งมีเมนูย่อยๆตามนี้

-Styles Menu: เลือกสไตล์ของแกลลอรี่ที่ชอบ ( มีเยอะครับ ลองทุกอันก็ได้ครับ :))

-อีเมล: ใส่อีเมลของเว็บเรา หรือเว้นไว้ก็ได้ครับ

-Source Images

• Use: คลิก Browse แล้วเลือกไปที่โฟลเดอร์แรกที่เตรียมไว้ครับ (ของผมชื่อ Source Image) จากนั้นคลิก OK.
  

• Destination: คลิก Browse แล้วเลือกไปที่โฟลเดอร์ที่ 2ที่เตรียมไว้ครับ ( ของผมโฟลเดอร์Gallery) จากนั้นคลิก OK

-Option

• General: ปรับแต่งไฟล์แกลลอรี่ที่จะสร้าง


• Banner: ใส่ข้อมูลต่างๆลงไปครับ ชื่อเว็บ ชื่อผู้ถ่าย และอื่นๆ


• Large Image: ปรับแต่งคุณภาพและขนาดของรูปใหญ่ที่แสดงในแกลลอรี่


• Thumbnails: ปรับแต่งขนาดของทัมบ์เนล


• Custom Colors: ปรับแต่งสีฟอนต์ และสไตล์ CSS

ขั้นตอนที่ 5. ปรับเสร็จแล้วก็คลิก OK เลยครับ

ขั้นตอนที่ 6. แกลลอรี่จะสร้างโดยอัตโนมัติครับ เร็วมากๆ ถ้ายังไม่ถูกใจก็ทำใหม่ได้ครับ

ขั้นตอนที่ 7. จากนั้นก็อัพโหลดขึ้นเว็บเราเลยครับ! ใช้โปรแกรม ftp ที่คุณใช้นะครับ เอาเฉพาะโฟลเดอร์ที่ 2 (ของผมชื่อ Gallery)อัพโหลดขึ้นไปที่เว็บคุณครับ (แนะนำว่าให้วางที่Rootครับ)

เรียบร้อยครับ!!!

ถ้าทำตามตัวอย่างนี้ URL ที่จะเข้าถึงหน้า Gallery ก็จะเป็นแบบนี้ครับ:

http://yourwebsite/Gallery/index.htm

หมายเหตุ:

• ถ้าคุณมีโฟลเดอร์ชื่อ Galleryอยู่ที่ root อยู่แล้ว ก็ไม่ต้องทำตั้งชื่อผมก็ได้ครับ เปลี่ยนชื่อโฟลเดอร์ที่ 2 เป็นอะไรก็ได้ตามชอบใจเลยครับ(แต่เปลี่ยนแล้ว URL ตรงคำว่าGalleryก็เปลี่ยนด้วยนะครับ)


• คุณสามารถแก้ไข index.htm ให้เข้ากับเว็บคุณได้นะครับ เช่นเติม Header กับ Footer ของเว็บคุณเข้าไป


• ถ้าอยากปรับแต่ง CSSสไตล์ ก็เข้าไปปรับที่ไฟล์ชื่อ galleryStyle.css อยู่ในโฟลเดอร์ย่อยชื่อ images


• ดูตัวอย่างเว็บผมที่ใช้วิธีนี้ทำแกลลอรี่ได้ครับ Example Gallery (มากกว่า 200 รูปครับ แต่ใช้เวลาทำแค่ครึ่งชั่วโมง :))

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...

ปัญหาหน้าแรกเมื่ออัพเกรด Joomla จากเวอร์ชัน 1.0.10 ไปยัง 1.0.15

ผมอัพเกรด joomla จากเวอร์ชัน 1.0.10 ไปยัง 1.0.15 แล้วเจอปัญหาที่หน้าแรกครับ

ถ้าคลิกที่ read more...หรือ อ่านรายละเอียดเพิ่มเติม...เพื่อเข้าไปอ่านบทความแล้วกลับกลายเป็นว่าบทความนั้นแสดงโดยที่โมดูลต่างๆยังแสดงครบเหมือนหน้าแรกไม่ผิดเพี้ยน... เกิดอะไรขึ้นครับ??? ถ้าลองสังเกตURL เวลาคลิกที่ read more... จะพบว่า URLจะพ่วง itemid=1 แถมมาด้วยซึ่งหมายถึงหน้าแรกนั่นเอง และแน่นอนว่าเราไม่ต้องการ

วิธีแก้ปัญหานี้ ให้ไปที่หน้าAdmin=>Grobal Configuration=>Content=>Itemid Compatibility Mode=>ตรงนี้ให้เลือก Joomla! 1.0.11 and before แล้วคลิกเซพ

เท่านี้ก็เรียบร้อยครับ Itemid=1 หายไปแ้ล้ว!!!

---

เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...