ปรับแต่ง Firefox ให้ได้ดังใจ

ไม่รู้ว่ามีใครมีปัญหาเหมือนผมมั้ย คือว่า การแสดงผลภาษาไทยบน Firefox ในส่วนเนื้อหา เมื่อได้ปรับแต่งตามที่ได้หลายท่านแนะนำกันมาแล้วก็แสดงผลได้ดีไม่มีปัญหา แต่ในส่วนอื่น ๆ ของตัวโปรแกรม เช่น ชื่อ Tab ก็ยังมีปัญหาอยู่ คือเมื่อ Tab ไม่ active อยู่จะมีปัญหาสระลอย จะแก้ใน Preference ก็ไม่ได้เพราะไม่ใช่ส่วนของเนื้อหา

หลังจากลองค้นดูก็ได้รู้ว่า Firefox สามารถปรับแต่งตัวโปรแกรมได้มากกว่าที่ปรับจากเมนู คือการแก้ไขไฟล์ userChrome.css ซึ่งอยู่ในรูปแบบ Style Sheet นี่แหละ โดยจะอยู่ที่ ~/.mozilla/firefox/xxxxxxxx.default/chrome/ ซึ่งจะมีตัวอย่างให้อยู่แล้วในชื่อ userChrome-example.css นอกจากนี้ยังมีไฟล์ userContent.css สำหรับการปรับแต่งการแสดงผลเนื้อหาของหน้าเว็บ

ในเว็บของ Mozilla เองก็มีตัวอย่างให้ดูครับ http://www.mozilla.org/unix/customizing.html

คนที่เขียน css เป็นอยู่แล้วก็คงเข้าใจได้ง่าย ๆ ครับ ที่ผมจะเอามาฝากสำหรับ userChrome.css ก็คือ การปรับแต่งฟอนต์ใน tab title กับฟอนต์ใน Single line text fields ครับ single line text fields ก็คือบรรดาช่องสำหรับป้อนข้อมูล เช่น adress bar, ช่อง search ใน history เป็นต้น

/* Set font of tab title */
.tabbrowser-tabs .tab-text {
font-family: Serif !important;
color: black !important;
-moz-opacity: 0.9 !important;
font-weight: normal !important;
font-size: 8pt !important;
}

.tabbrowser-tabs *|tab[selected="true"] .tab-text {
color: black !important;
-moz-opacity: 0.9 !important;
font-weight: bold !important;
font-size: 8pt !important;

}

ก้อนแรกสำหรับ tab ที่ไม่ active ครับ font-family คือ opacity คือความโปร่งใส 1.0 คือทึบ อย่างอื่นคงพอเดาได้ อีกก้อนสำหรับtab ที่ activate

ส่วนอันนี้ก็เป็น Single line text fields

/* Single line text fields */
input {
/* Set font size and family of text fields */
font-family: serif !important;
font-size: 13px !important;

สำหรับ userContent.css ก็จะปรับฟอนต์ใน Sintle line fext fields กับ Multi-line text areas ครับ

/* Single line text fields */
input {
/* Set font size and family of text fields */
font-family: serif !important;
font-size: 13px !important;

/* Set background color to something a little prettier */
/*background-color: rgb(200, 255, 220) !important; */
}

/* Multi-line textareas */
textarea {
font-family: serif !important;
font-size: 13px !important;
/* background-color: rgb(200, 255, 220) !important; */
}

background-color สีพื้นหลังก็ปรับได้ครับ

ยังมีอะไรเล่นได้อีกเยอะ ลองเล่นดูนะครับ ข้อมูลเพิ่มเติม

• http://www.gfxoasis.com/board/lofiversion/index.php?t11702.html แล้วก็
• http://www.supernova00.biz/userchrome.html