วิธีกำหนดลักษณะที่ปรากฏของปุ่มเมนูออเรนจ์ Firefox

คุณเบื่อที่จะดูที่ปุ่มเมนู Firefox สีส้มหรือไม่? อินเทอร์เฟซของ Firefox สามารถปรับแต่งได้อย่างสมบูรณ์ดังนั้นคุณสามารถเปลี่ยนสีข้อความและคุณสมบัติอื่น ๆ ของปุ่มเมนู Firefox เพื่อสร้างรูปลักษณ์ที่กำหนดเองของคุณ.

ในการเปลี่ยนรูปลักษณ์ของปุ่มเมนู Firefox เราจะทำการแก้ไขไฟล์ userChrome.css ไฟล์นี้ช่วยให้คุณเปลี่ยนลักษณะที่ปรากฏของส่วนใด ๆ ของ Firefox เช่นเดียวกับการทำงานของมัน.

ก่อนดำน้ำในการแก้ไขไฟล์ userChrome.css เราจะติดตั้งส่วนเสริมที่เรียกว่า ChromEdit Plus ที่จะช่วยให้เราสามารถแก้ไขไฟล์และบันทึกในรูปแบบที่ถูกต้องได้อย่างง่ายดาย คลิกที่ลิงค์ต่อไปนี้เพื่อไปที่หน้าเว็บ ChromEdit Plus.

http://webdesigns.ms11.net/chromeditp.html

คลิกปุ่มเพิ่มลงใน Firefox บนหน้า.

ข้อความต่อไปนี้อาจปรากฏขึ้น คลิกอนุญาตเพื่อติดตั้งโปรแกรมเสริม ChromEdit Plus ต่อไป.

หมายเหตุ: ระวังสิ่งที่คุณอนุญาตเมื่อติดตั้งส่วนขยายและซอฟต์แวร์อื่น ๆ หากคุณไม่แน่ใจเกี่ยวกับผลิตภัณฑ์หรือไม่เชื่อใจ บริษัท อย่าติดตั้ง เราทดสอบ ChromEdit Plus และพบว่าปลอดภัยและเชื่อถือได้.

กล่องโต้ตอบการติดตั้งซอฟต์แวร์จะปรากฏขึ้น คลิกติดตั้งทันทีซึ่งอาจไม่พร้อมใช้งานจนกว่าการนับถอยหลังจะเสร็จสิ้น.

หมายเหตุ: คุณสามารถเปลี่ยนความยาวของการนับถอยหลังบนปุ่มติดตั้ง แต่เราไม่แนะนำให้ปิดการใช้งาน.

คุณต้องรีสตาร์ท Firefox เพื่อให้การติดตั้งเสร็จสิ้น คลิกเริ่มต้นใหม่ทันทีในกล่องโต้ตอบป๊อปอัพ.

เมื่อ Firefox รีสตาร์ทแล้วปุ่ม ChromEdit Plus จะถูกเพิ่มทางด้านขวาของกล่องที่อยู่ คลิกเพื่อเปิดหน้าต่าง ChromEdit Plus.

โดยค่าเริ่มต้นมีสามแท็บในหน้าต่าง ChromEdit Plus เราจะแก้ไขไฟล์ userChrome.css ซึ่งอยู่บนแท็บแรก หากแท็บนั้นว่างให้คัดลอกและวางข้อความต่อไปนี้ลงในแท็บ userChrome.css แล้วคลิกบันทึก สิ่งนี้จะให้ไฟล์ userChrome.css เริ่มต้นของคุณ.

@namespace url (“ http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
# appmenu-button
พื้นหลัง: #orange! สำคัญ;

# appmenu-button dropmarker: ก่อนหน้า
เนื้อหา:“ Firefox”! สำคัญ;
สี: #FFFFFF! สำคัญ;

# appmenu-button .button-text
แสดง: ไม่มี! สำคัญ;

คุณอาจมีไฟล์ userChrome.css อยู่แล้วซึ่งในกรณีนี้จะมีข้อความอยู่ในแท็บ userChrome.css คัดลอกข้อความทั้งหมดข้างต้นยกเว้นบรรทัดแรก, บรรทัด @namespace และวางลงในแท็บที่ใดที่หนึ่งหลังจากบรรทัด @namespace หากคุณต้องการเก็บสิ่งที่คุณมีอยู่แล้วคุณสามารถวางข้อความด้านบนที่ท้ายไฟล์.

สำคัญ: ตรวจสอบให้แน่ใจว่าเครื่องหมายคำพูดทั้งหมดใน userChrome.css ไม่ใช่เครื่องหมายอัญประกาศอัจฉริยะรวมถึงเครื่องหมายอัญประกาศในบรรทัด @namespace พวกเขาควรเป็นคำพูดธรรมดาสามัญ หากหนึ่งในนั้นคือคำพูดที่ฉลาดไฟล์จะไม่ส่งผลต่อลักษณะที่ปรากฏของ Firefox เลย.

คลิกรีสตาร์ทเพื่อเริ่ม Firefox ใหม่โดยใช้ไฟล์ userChrome.css ใหม่หรือที่แก้ไข.

ในตัวอย่างนี้เราจะเปลี่ยนสีพื้นหลังเป็นสีน้ำเงินเข้มและเปลี่ยนข้อความ“ Firefox” เป็น“ How-To Geek”.

หากต้องการเปลี่ยนสีพื้นหลังให้เปลี่ยนข้อความ“ #orange” ในบรรทัด“ พื้นหลัง” ในส่วน“ # appmenu-button” เป็นสีอื่นโดยใช้รหัสสีฐานสิบหกหรือรหัสสี HTML ตัวอย่างเช่นเราเลือกสีน้ำเงินเข้มพร้อมรหัสสีฐานสิบหกของ # 2C4362.

หมายเหตุ: ในการหารหัสสีฐานสิบหกสำหรับสีที่คุณต้องการดูบทความของเราเกี่ยวกับการรับรหัสสีฐานสิบหกจากสี RGB ทศนิยมเลือกสีจากที่ใดก็ได้บนหน้าจอและรับรหัสสีในหลายรูปแบบ.

หากต้องการเปลี่ยนข้อความบนปุ่มให้เปลี่ยนข้อความ“ Firefox” ในบรรทัด“ เนื้อหา” ในส่วน“ # appmenu-button dropmarker: before” เป็นข้อความที่คุณต้องการเช่น“ How-To Geek” เราเพิ่มช่องว่างหลังข้อความเพื่อให้มีช่องว่างมากขึ้นระหว่างข้อความและลูกศรแบบหล่นลงบนปุ่ม.

คุณสามารถเลือกที่จะเปลี่ยนสีของข้อความได้เช่นกันโดยเปลี่ยนบรรทัด "color" ในส่วน "# appmenu-button dropmarker: before" เราปล่อยให้สีข้อความเป็นสีขาว (#FFFFFF) แต่คุณสามารถเปลี่ยนเป็นสีเทาอ่อน (# F2F2F2) หรืออะไรแบบนั้น.

คลิกบันทึกจากนั้นรีสตาร์ทเพื่อให้การเปลี่ยนแปลงมีผล.

ปุ่มตอนนี้เป็นสีน้ำเงินเข้มและพูดว่า "วิธีการ Geek".

คุณยังสามารถเพิ่มภาพพื้นหลังให้กับปุ่มได้นอกเหนือจากการเปลี่ยนสีพื้นหลัง เราสร้างภาพที่มี favicon วิธีการ Geek ทางด้านซ้ายและพื้นหลังโปร่งใสเพื่อให้สีพื้นหลังสีน้ำเงินเข้มแสดงผ่าน ในการเพิ่มภาพพื้นหลังให้กับปุ่มของคุณให้เพิ่มบรรทัดต่อไปนี้ลงในส่วน“ # appmenu-button” โดยเปลี่ยนเส้นทางในเครื่องหมายคำพูดไปยังตำแหน่งของภาพในคอมพิวเตอร์ของคุณ ปล่อย“ ไฟล์: ///” ไว้ในพา ธ.

background-image: url (“ file: /// C: /Users/Lori/Pictures/htg_background.png”) สำคัญ!

คลิกบันทึกและรีสตาร์ทอีกครั้ง.

ตอนนี้ปุ่มของเราเสร็จสมบูรณ์แล้ว.

คุณสามารถปรับแต่งปุ่มเมนู Firefox ได้ด้วยการแปลงเป็นไอคอน เรายังได้เผยแพร่เคล็ดลับอื่น ๆ อีกมากมายและปรับแต่งเพื่อให้ได้ประโยชน์สูงสุดจาก Firefox.