Motivations

This theme is modified from Creative Commons template named Colourise 1.0. The project is motivated from Thai Drupal Community discussion about "Lacking of Thai documentations for Drupal theme creating".

So I wrote some articles in Thai to demonstrate Drupal Colurise Theme Transfering. And the output is now being on drupal.org. Currently, I use this theme as an alternative on this site so you can preview it with theme switch menu on the sidebar.

• 1 comment
• Read more
• ภาษาไทย

แรงขับดัน

ธีมนี้ดัดแปลงจากครีเอทีฟคอมมอนส์เทมเพลตที่ชื่อว่า Colourise 1.0 โปรเจ็คต์เริ่มต้นเพราะการถกประเด็นใน Thai Drupal Community ว่า "หาแหล่งข้อมูลที่เป็นภาษาไทยเกี่ยวกับการทำธีม drupal ได้ยากมาก"

นั่นเป็นแรงขับหนึ่งที่ทำให้ผมเขียนบทความในบล็อกแห่งนี้ เพื่อสาธิต วิธีการสร้างธีม drupal จาก Free CSS Template และตอนนี้มันก็ถูกเก็บไว้ที่ โปรเจ็คต์ใน drupal.org เรียบร้อยแล้ว คุณสามารถดูตัวอย่าง Drupal Colourise Theme ได้ในเว็บไซต์แห่งนี้ โดยใช้เมนู theme switch ในแถบด้านข้างครับ

แรงบันดาลใจ

1. Colourise 1.0 : ดีไซน์ที่เล่นกับความมืด จน header ดูโดดเด่นหลากสีสัน ธีมนี้กำหนดความกว้างหน้าเว็บตายตัว มีแทบด้านขวาข้างเดียว พร้อมกับบล็อคด้านล่างอีก 3 บล็อค และแน่นอน มันเป็น Valid XHTML/CSS ส่วนที่เปลี่ยนแปลงจากดั้งเดิมก็คือ เรื่องตัวอักษรที่ผมแก้ CSS ให้สีสันมันอ่านได้ง่ายขึ้น และให้เหมาะกับทั้งฟอนต์ไทยและอังกฤษ
2. Nathan Smith's Grid and CSS framework : The 960 Grid System เป็นคล้ายๆกับ CSS Framework ที่จะช่วยให้เรามีความสุขกับ CSS มากขึ้น เพราะมันมาพร้อมกับการเตรียมโค้ด CSS ให้เราเอาไปใช้งานได้แทบจะทันที โดยใช้ความกว้าง 960 พิกเซลเป็นตัวตั้ง สำหรับการจัดเลย์เอาต์แบบ Grid ให้ทุกอย่างดูเป็นระเบียบ (สำหรับ Colourise ผมปรับจาก 960 เป็น 900 พิกเซล)

Features

• Tableless design
• Fixed width layout
• 2 columns with single right sidebar
• 3 footer block regions
• Top and bottom content block regions
• Site name
• Site slogan
• Mission statement
• Top search box
• Shortcut icon
• Primary Links
• Accessibility Navigation
• W3C Valid XHTML 1.0 strict and CSS 2.1
• Cross-browser compatibility (IE6/7, Opera, Safari, and Firefox)

หวังว่าธีมนี้คงถูกใจคนที่ไม่ชอบกราฟิคมากมาย แต่ต้องการธีมที่เป็น valid xhtml/css

Download Colourise Theme for Drupal

• Add new comment
• Read more
• English

ก่อนที่ผมจะลืมไปซะก่อน ก็เอาธีม Colourise ที่แก้ไข CSS แล้ว มาไว้ให้ทดลองใช้กันครับ ผมใส่คอมเมนต์ภาษาไทยไว้ในไฟล์ page.tpl.php ให้ด้วย เผื่อใครอยากจะดูตัวอย่างโค้ดไว้ทำธีมด้วยตัวเอง นอกจากนี้ก็มีอีกหลายจุดที่เพิ่มเข้ามาจาก EP.3 แต่ผมขี้เกียจเขียนอธิบายไว้ใน blog นี้ ก็ลองเปรียบเทียบดูในโค้ดเอาเองนะครับ ส่วนเรื่องการใช้งาน เท่าที่เช็คใน IE ก็ปกติสุขดี เพราะโยนภาระไปให้ Javascript จัดการแทน (ใส่ลงไปดื้อๆในไฟล์ page.tpl.php นั่นแหละ) แต่ก็มีบางจุดที่ยังต้องแก้ไขอยู่ เช่น สีของพื้นหลังและตัวหนังสือ , เลย์เอาต์ในส่วน admin และ system ส่วนไฟล์ที่แพ็คไว้มันใหญ่ขึ้นเท่าตัว เพราะรวม Javascript กับ Screenshot แบบเต็มหน้าเข้าไปด้วย

ส่วนเรื่องโครงสร้างและรูปแบบการเขียนโค้ด ผมยึดตาม ธรรมเนียมของ drupal เป็นหลัก เพราะกะว่าจะส่งไปที่ drupal.org ด้วย แต่ตอนนี้ยังสมัคร CVS account ไม่ผ่าน (เคี่ยวมิใช่เล่น ผมสมัครรอบแรกสอบตก เพราะเค้าบอกว่า ตัวอย่างโค้ดน้อยเกินไป สมัครรอบสองยังไม่มีฟีดแบ็คกลับมา)

หากมีปัญหาการใช้ธีมหรือข้อเสนอแนะอื่นๆ ก็ยินดีรับฟังเสมอครับ มาแลกเปลี่ยนความรู้กัน และจะได้นำมาปรับปรุง ตามแบบฉบับลูกทุ่ง Open Source Cowboy!

Edit : ตอนนี้ผมได้ CVS account จาก drupal.org แล้ว ก็ขอเอา file ตัวอย่างออกไปนะครับ โดยคุณสามารถดาวน์โหลดเวอร์ชั่นล่าสุดของ Drupal Colourise ได้ที่ http://drupal.org/project/colourise หรือ อ่านรายละเอียดภาษาไทยเพิ่มเติมได้ที่ http://webzer.net/drupal/theme/colourise

• gibbo's blog
• Add new comment
• Read more

สำหรับ Episode 3 ของการแปลง Colourise (free css template) เป็นธีมของ drupal6.x นี้ ก็คงเป็นตอนสุดท้ายที่ผมจะเขียน แต่ไม่ใช่ขั้นตอนสุดท้ายของการพัฒนาธีม แต่หลังจากผ่านขั้นตอนพื้นฐานของการทำธีม drupal ก็จะเป็นเรื่องการตกแต่ง ซึ่งเน้นไปที่ css มากกว่า drupal และผมตั้งใจว่าจะแยกเรื่อง css ออกมาเขียนต่างหาก เพราะมันสามารถเอาไปพัฒนาธีม/เทมเพลตสำหรับ cms ตัวอื่นๆได้เช่นกัน

ขั้นตอนที่เหลือสำหรับ Drupal Colourise Theme ก็คือ กำหนดตำแหน่ง block เพิ่มเติม , เปลี่ยน path ของไฟล์ให้เป็นระเบียบ แล้วก็เพิ่มและเคลียร์สิ่งที่ไม่จำเป็นออกไปจาก css

• gibbo's blog
• 4 comments
• Read more
• 1 attachment

คราวที่แล้ว เราแนะนำให้ drupal รู้จักธีม Colourise ของเราไปแล้ว พร้อมทั้งจัดการนำส่วนเนื้อหาหลัก กับ sidebar มาแสดงในธีม คราวนี้มาสนุกกับส่วน header และ footer กันดีกว่า ก่อนอื่นเปิดใช้งานธีม Colourise ใน drupal เลยครับ ถ้าใครติดตั้ง โมดูล Switchtheme แล้ว ก็จัดการเอา block ของมันมาไว้ที่ right sidebar ได้เลย เวลาเปลี่ยนธีมกลับไปกลับมาจะได้ไม่ลำบาก

• gibbo's blog
• Add new comment
• Read more
• 1 attachment