주황색 Firefox 메뉴 버튼을 보는 것이 지겹습니까? Firefox의 인터페이스는 완전히 사용자 정의 할 수 있으므로 Firefox 메뉴 버튼의 색상, 텍스트 및 기타 속성을 변경하여 자신 만의 모양을 만들 수 있습니다.
Firefox 메뉴 버튼의 모양을 변경하기 위해 userChrome.css 파일을 편집합니다. 이 파일을 사용하면 Firefox의 모든 부분의 모양과 기능을 변경할 수 있습니다.
userChrome.css 파일을 편집하기 전에 파일을 쉽게 편집하고 올바른 형식으로 저장할 수있는 ChromEdit Plus라는 추가 기능을 설치합니다. ChromEdit Plus 웹 페이지로 이동하려면 다음 링크를 클릭하십시오.
페이지에서 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! important;
}
# appmenu-button dropmarker : before {
내용 : "Firefox"! important;
색상 : #FFFFFF! important;
}
# appmenu-button .button-text {
디스플레이 : 없음! 중요한;
}
이미 userChrome.css 파일이있을 수 있으며이 경우 userChrome.css 탭에 이미 텍스트가 있습니다. 첫 번째 줄인 @namespace 줄을 제외한 위의 모든 텍스트를 복사하여 @namespace 줄 뒤의 탭에 붙여 넣습니다. 이미 가지고있는 것을 유지하려면 위의 텍스트를 파일 끝에 붙여 넣을 수 있습니다.
중요 : @namespace 줄의 인용 부호를 포함하여 userChrome.css의 모든 인용 부호가 스마트 인용 부호가 아닌지 확인하십시오. 평범하고 곧은 따옴표 여야합니다. 스마트 따옴표가있는 경우 파일은 Firefox의 모양에 전혀 영향을주지 않습니다.
다시 시작을 클릭하여 새로운 또는 수정 된 userChrome.css 파일을 사용하여 Firefox를 다시 시작합니다.
이 예에서는 배경색을 진한 파란색으로 변경하고 "Firefox"텍스트를 "How-To Geek"로 변경합니다.
배경색을 변경하려면 16 진수 색상 코드 또는 HTML 색상 코드를 사용하여 "# appmenu-button"섹션의 "배경"줄에있는 "#orange"텍스트를 다른 색상으로 변경합니다. 예를 들어, 16 진수 색상 코드가 # 2C4362 인 진한 파란색을 선택했습니다.
참고 : 원하는 색상의 16 진수 색상 코드를 알아 내려면 다음에 대한 기사를 참조하십시오. 십진 RGB 색상에서 16 진수 색상 코드 가져 오기 , 화면 어디에서나 색상 선택 , 및 여러 형식으로 색상 코드 가져 오기 .
버튼의 텍스트를 변경하려면 "# appmenu-button dropmarker : before"섹션의 "content"줄에있는 "Firefox"텍스트를 "How-To Geek"와 같은 원하는 텍스트로 변경하십시오. 텍스트와 버튼의 드롭 다운 화살표 사이에 더 많은 공간을 확보하기 위해 텍스트 뒤에 공백을 추가했습니다.
동일한 "# appmenu-button dropmarker : before"섹션에서 "color"행을 변경하여 텍스트의 색상도 변경하도록 선택할 수 있습니다. 텍스트 색상은 흰색 (#FFFFFF)으로 남겨 두었지만 밝은 회색 (# F2F2F2) 또는 이와 유사한 것으로 변경할 수 있습니다.
저장을 클릭 한 다음 다시 시작을 클릭하여 변경 사항을 적용합니다.
버튼은 이제 진한 파란색이며 "How-To Geek"라고 표시됩니다.
배경색을 변경하는 것 외에도 버튼에 배경 이미지를 추가 할 수도 있습니다. 왼쪽에 How-To Geek 파비콘이 있고 투명한 배경이있는 이미지를 만들어 진한 파란색 배경색이 비쳐 보이도록했습니다. 버튼에 배경 이미지를 추가하려면 "# appmenu-button"섹션에 다음 줄을 추가하고 따옴표 안의 경로를 컴퓨터의 이미지 위치로 변경합니다. 경로에 "file : ///"을 그대로 둡니다.
background-image : url (“file : /// C : /Users/Lori/Pictures/htg_background.png”)! important;
저장 및 다시 시작을 다시 클릭하십시오.
이제 버튼이 완성되었습니다.
Firefox 메뉴 버튼을 아이콘으로 변환하여 사용자 정의 할 수도 있습니다. 우리는 또한 다른 많은 Firefox를 최대한 활용하기위한 팁과 조정 .
