ทำ 2 theme ในเวปเดียว :D

ikok's picture
10285
posts

หลังจากที่ทำ blog ของตัวเองแอบเอาไว้ใน mmm ผมคิดว่า จะใช้ theme เดิมของ mmm เลยก็ดูจะกระไรอยู่ วันนี้เลยลองหาทางศึกษาความเป็นไปได้ว่าจะสามารถจัดการ CSS ให้แตกต่างกันเหมือนคนละ theme ในเวปเดียวกันได้หรือไม่บน drupal.org

ได้มาเจอกระทู้นี้ครับ http://drupal.org/node/451446

ที่ผมได้มาเป็นหลักในการแยก theme ของ node หรือว่าเนื้อหาต่าง ๆ ของ drupal ออกจากกัน แต่เดิมผมพอจะทราบวิธีการวาง layout ของ node แต่ละแบบให้แตกต่างกันได้บ้างแล้ว โดยใช้ page-node-xx.tpl.php (ดูตัวอย่างได้จากหน้า iPhone บนเวปครับ)

แต่ที่ผมอยากได้ขึ้นไปอีกคือ ไม่ใช่แค่ layout ที่เปลี่ยนไป แต่ผมอยากเปลี่ยน CSS หรือว่าหน้าตาของ theme ด้วย =)

เลยมาลงที่การควบคุม theme แบบแยกประเภทของ node ครับ ซึ่งเราจะใช้ selector ว่า

.node-type-MyContentType หรือ
.section-MyContentType

ผมไม่แน่ใจว่าทั้งสองแบบแตกต่างกันอย่างไรนะครับ แต่เขาบังคับการแสดงผลให้เป็นส่วน ๆ ไปตาม content type ที่เราต้องการได้ โดยที่ไม่ไปยุ่งกับ theme ส่วนอื่นของเวป .. ผมเลยเอาตรงนี้มาสร้าง CSS เฉพาะกิจขึ้นมาเพื่อควบคุมส่วนของ Kblog (blog ที่คุณกำลังอ่านอยู่ในตอนนี้) ครับ และนี่เป็นวิธีที่ผมใช้ครับ

  1. สร้าง node-kblog.tpl.php ใหม่ขึ้นมา โดยการ copy ไฟล์ node.tpl.php แล้วเปลี่ยนโครงสร้างข้างในเล็กน้อย
  2. จากนั้นผมก็เริ่มลงมือจิ้ม CSS แล้วควบคุมด้วย .node-type-kblog ไม่ก็ .section-kblog เพื่อ theme เฉพาะส่วน content type แบบ Kblog หรือว่า section นี้ครับ ผลที่ได้คือ ได้ CSS ไฟล์เพิ่มจากของเดิมจาก theme ที่ใช้อยู่มาอีกประมาณ 100 บรรทัด :P

เสร็จแล้วก็ได้ออกมาอย่างที่เห็นนี้ครับ ^o^ / ~

Comments

little_fuku's picture
703
posts

โอ้ว

ฉานเกลียด CSS
แง่งๆๆๆๆ

#1
ikok's picture
10285
posts

อย่าเพิ่งต๊กใจก่ะ

เดี๋ยวอีกหน่อยหนูก็จะทำได้ล่ะนะคะ ทำบ่อย ๆ เดี๋ยวก็ได้ล่ะ ;D

#2

My website projects

websites ที่ผมทำครับ ทั้งมีส่วนร่วมทำทั้งหมด หรือบางเวปทำเฉพาะ theme ครับ =)

ไข่ผู้ดี.คอม เป็นเวปที่ผมทำกับเพื่อนที่เป็นดีไซเนอร์ที่ทำงานที่สิงคโปร์เหมือนกัน เอาไว้ให้เอาศิลปะ / งานออกแบบเก๋ ๆ ที่แต่ละคนไปเจอมาแล้วนำมาแบ่งกันดูครับ เอาไว้แทนการ forward ผ่านอีเมล์ ซึ่งจะได้แบ่งให้กลุ่มเพื่อน พี่, น้อง ที่อยู่รอบ ๆ ตัวเราให้ได้ดูกันง่ายขึ้นดัวย

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

Kblog เป็นส่วน blog ของผมเอง ที่เอามาแอบใส่ไว้บน แมคมือใหม่.คอม ที่ตั้งใจว่าจะเขียนเกี่ยวกับเรื่องราวต่าง ๆ ที่นอกเหนือจาก mac ครับ ผมต้องการให้รูปแบบออกมาเรียบ ๆ และดูแตกต่างเหมือนคนละ theme กับ mmm เลยได้เรียนรู้การทำ 2 theme ในเวปเดียวกัน มา

Viztutor.org เป็นเวปที่เกี่ยวกับ 3d ติวเตอร์สำหรับคนที่ทำงานด้าน 3d visualizer (เป็นอาชีพที่ผมทำอยู่ครับ) เอาไว้ให้มีที่เล็ก ๆ แลกเปลี่ยนความรู้, tip & tricks, แสดงงาน หรือว่า 3d models

Nannie-Limited.com เป็นเวป e-commerce เล็ก ๆ ที่ผมทำให้แฟนสาวของผมเอง สร้างด้วยการใช้ CCK+View + ImageCache เสียส่วนใหญ่ โดยที่เน้นความสะดวกในการใช้งาน ทั้งของคนทั่วไป และแฟนของผม

book-garden เป็นห้องสมุดชุมชนเล็ก ๆ ที่ผมได้มีโอกาสเข้าไปมีส่วนร่วมทำกับคุณโอเปิล ซึ่งเป็นหุ้นส่วนอีกคนนึงของร้าน เป็นห้องสมุดขุมชนเล็ก ๆ ที่เราตั้งใจอยากให้คนไทยอ่านหนังสือกันมากขึ้น ด้วยการนำหนังสือที่ตัวเองมีมาแลกกันอ่าน

เวปรักทางไกล.คอม นี้เป็นเวปแรกที่ผมทำเลยครับ (ทำเองกับมือ) ซึ่งก่อนหน้านี้มีผมเริ่มทำ book-garden.com ก่อนในเวลาไล่เลี่ยกันแต่ใช้เวปสำเร็จรูปในตอนนั้นครับ