แจกของฟรี

Inspect Element เป็นเครื่องมือตรวจค้นหาตำแหน่ง class ของไฟล์ .css เครื่องมือตัวนี้มีติดมาให้ใช้ฟรี ใน Browser เวอร์ชั่นสูงๆ เหล่านี้
FireFox , Google Chrome และ Internet Explorer ปุ่มทางลัดกด F12 หรือคลิกขวาเลือก Inspect element

ในตัวอย่างที่จะใช้อธิบายในครั้งนี้ จะเป็น Browser FireFox
สามารถใช้ค้นหาได้ทุกเว็บไซต์ ขั้นตอนการใช้ก็ไม่ได้ยากอะไรเลย

ขั้นตอนแรกเปิด Browser FireFox และเปิดเว็บไซต์ที่ต้องการแก้ไขขึ้นมา
ในที่นี้จะเป็นการหา class จาก SMF 2.0.7 (Simple Machines Forum) ที่ธีม default/css/index.css

คลิกขวา ณ จุดที่เราต้องการดู  class และคลิกขวาเลือก ตรวจดูส่วนประกอบ 




ในตัวอย่างผมชี้เม้าส์ทเลือกดูที่ tltle ของเว็บ Bangkok Welovethailand
ใน รูปล่างซ้ายมือจะเห็น คลาส forumtitle นี่เป็นคลาสที่ใช้ควบคุม ของชื่อไตเติ้ลเว็บของเรา คราวนี้สังเกตุไปที่ ด้านขวามือจะปรากฎ color #346 , font-family: Geneva,verdana,sans;
 รวมทั้งขนาด font-size: 22.4667px;
 ผม จะทดลองเปลี่ยนสี จากสี color #346 น้ำเงินเข้ม เป็นสีแดงสด #FF0000 ให้สังเกตุในรูปตรงลูกศรสีฟ้า มันจะมีสามเหลี่ยมสีเทา ให้เราคลิกเปิดเข้าไปดูรายละเอียดเพิ่มเติมได้อีก




ให้ สังเกตุรายละเอียดเมื่อคลิกเข้ามาดู  a:link #346  index.css:5 หมายถึงสีของลิงค์นี้อยู่ในไฟล์ index.css บันทัดที่ 5 (ผมทดลองด้วย default ธีมนะครับ ใครใช้ธีมอื่นอาจแตกต่างกันออกไป) ให้กดคลิกเข้าไปที่ index.css:5




เมื่อ กดคลิกเข้ามาที่ index.css:5 มันก็จะเปิดไฟล์ index.css รวมทั้งตำแหน่งบันทัดที่ 5 ให้เราสามารถแก้ไขสีได้ตามใจเรา ในที่นี้ผมจะลองเปลี่ยนจากสี color #346 น้ำเงินเข้ม เป็นสีแดงสด #FF0000 โดยคลิก ตรง #346 แล้วแทนที่ด้วย #FF0000 ดูภาพต่อไป




ตอน นี้สีลิงค์ทั้งเว็บถูกเปลี่ยนเป็นสีแดงสดไปแล้ว อะไรที่เป็นลักษณะลิงค์ a:link ก็จะถูกเปลี่ยนเป็นสีนี้หมดเช่นกัน ไม่ต้องตกใจนะครับว่าไฟล์ index.css ใน server จะเสียหายหรือถูกเปลี่ยนไปด้วย นี่แค่ทดลองหลอกๆ ไม่เกี่ยวกับ index.css ใน server เมื่อออกจากหน้านี้หรือกด F5 รีเฟรช ค่าต่างๆก็จะกลับมาปกติเช่นเดิม แต่เราสามารถกด Save และตั้งชื่อ index.css อันใหม่นี้เก็บไว้ใน คอมเราเลยได้อีกด้วย เวลาจะใช้ ก็คลิก Import  index.css อันใหม่ขึ้นมา



สังเกตุลูกศรสีฟ้า ให้คลิกเมื่อต้องการหาตำแหน่งใหม่ หลังคลิกก็นำเมาส์ทไปชี้ยังตำแหน่งใหม่ ก็จะปรากฎ class




ต่อ ไปผมจะเปลี่ยนสี การทักทายสมาชิก จากสีเทา   body #444 index.css:49 ให้เป็นสีน้ำเงิน #0033FF ในภาพ จะเห็นเพียง <span></span> (แต่ถ้าคลิกสามเหลี่ยมเพื่อขยายดูจะเจอเพียง DEMO : Welove Thailand ซ่อนอยู่ภายใน span )
ดังนั้นคลาสชุดนี้จึงอยู่ภายใต้การควบคุมของ <li class="greeting"> ด้านบนถัดขึ้นไป และถ้าเราเปลี่ยนสีเทาจากคลาส body #444 จะทำให้ตัวหนังสือที่เกี่ยวข้องใน body เป็นสีใหม่ทั้งหมดด้วย ผมกดคลิกที่ มุมขวาตรงคำว่า index.css:49




เมื่อ กดคลิกที่  index.css:49 ระบบจะเปลี่ยนเข้ามายังหน้า เครื่องมือแก้ไขสไตล์ css แล้วพามายังบันทัดที่ 49 ตรง color: #444 เราก็เปลี่ยนเป็นสีน้ำเงิน color: #0033FF ผลที่ได้ทันตาเห็นคือ ตัวหนังสือใดๆที่อยู่ภายใต้ body, td, th, tr จะถูกเปลี่ยนเป็นสีน้ำเงินทั้งหมดดังภาพด้านล่าง
 




เปลี่ยนสีและขนาดของเมนู คลาส สีนั้นอยู่ที่ class="dropmenu" เนื่องจากคลาสซ้อนกัน เราจึงต้องก็อปปีคำว่า dropmenu ไปค้นหาเอง



วิธี คือให้เราคลิกไปที่แท็บ เครื่องมือแก้ไขสไตล์ แล้วกด Ctrl+F วางคำที่ก็อปปี้มา dropmenu แล้วกด Enter ไล่หาตำแหน่งที่เราต้องการเปลี่ยนสี และขนาด ในที่นี้ผมจะเปลี่ยนจากเมนูสีดำ color: #000; เป็นสีฟ้าสว่าง #0099FF และเปลี่ยน font-size: 0.9em; เป็น font-size: 1.2em;




ต่อไปผมต้องการอยากให้มันเป็นตัวหนา bold ผมก็แค่พิมพ์แทรกโค้ดชุดนี้เพิ่มลงไป font-weight: bold;
 



ต่อไปผมจะทดลองเปลี่ยนโลโก้มุมบนขวา จากลิงค์ http://bangkok.welovethailand.com/Themes/default/images/smflogo.png เป็น http://www.welovethailand.com/webboard/Themes/Vertex-Theme2-0-2-v1-2/images/vertex_image/banner_logo.png (แค่ทดลองเท่านั้นนะครับ ถ้าเปลี่ยนจริงต้องไปแก้ไขที่รูป smflogo.png ใน /Themes/default/images/smflogo.png)





เสร็จ หน้าแรก ผมก็กด Save ตั้งชื่อ index.css เก็บไว้ในคอมเราก่อน แต่ในที่นี้ผม เซฟเป็นชื่อ (sample.css) เวลาจะใช้ทดสอบครั้งต่อไปก็ Import มันเข้ามา  โดยค่าสี ค่าขนาดต่างๆ ที่เราปรับแต่งไปมันจะอยู่ในไฟล์ตัวใหม่นี้ เราก็ใช้ไฟล์นี้ แก้ไขส่วนอื่นๆต่อไปแล้วกด Save เก็บไว้เช่นเดิม จนพอใจ แล้วจึงนำไฟล์  index.css นี้ทับไปยังไฟล์เดิมของธีมที่เราใช้ ก็ได้เช่นกัน โดยก่อนที่จะทับไฟล์เดิม ให้ copy ทำสำเนาไฟล์  index.css เดิมไว้ก่อนกันการผิดพลาด (การ import  index.css จากในคอมเราอาจแสดงผลไม่ร้อยเปอร์เซ็นต์ เนื่องจากไฟล์อยู่ในคอมผิดที่ผิดทางที่ควรจะอยู่ใน server มากกว่า)






ในส่วนอื่นๆ หน้าอื่นๆเราก็ใช้หลักการค้นหาและแก้ไข เช่นเดียวกันหมด
เราอาจโหลดไฟล์ css มาแก้ไขจริงไปทีละสเต็ปเลยก็ได้  Themes/ธีมที่ใช้ปัจจุบัน/css/index.css << แก้ไขที่ไฟล์นี้


เตือน ! โปรดอย่านำเครื่องมือนี้ไปใช้งานผิดประเภท เช่น นำไปใส่ร้ายป้ายสีกัน ในเฟสบุค หรือ Social Network ต่างๆ
ตัวอย่างเช่น นำไปเปลี่ยนข้อความของท่านอื่นๆ จากจริงเป็นเท็จ แล้ว capture ภาพไปโพสท์ส่งต่อๆกันไป












credit: http://www.welovethailand.com/webboard/index.php?topic=4185.0