소개

이하의 환경에서 동작 확인하고 있습니다.

Windows 10(64비트)
Firefox 70.0 (64bit)
Thunderbird 60.9.0 (32bit)

About Firefox 딸이란?

Firefox는 userChrome.css를 편집하여 UI를 다양하게 사용자 정의 할 수 있다는 것은 잘 알려져 있다고 생각합니다.
userChrome.css 를 사용하여 about 화면(메뉴 > 도움말 > Firefox 정보)에 Firefox 의인화 캐릭터를 표시하는 About Firefox 娘 라는 것이 있습니다.

↓전 재료는 이쪽입니다
About Firefox-ko 4.0 베타

하지만 불행히도 Firefox 4.0에서 업데이트가 중지되었습니다.
물론 최근의 Firefox에서는 레이아웃이 무너집니다.

이것을 Firefox 70.0과 일치시킵니다.

절차

userChrome.css 사용

Firefox 69부터 userChrome.css가 기본적으로 사용 중지되었습니다.
이것을 활성화합니다.

Firefox 주소 표시 줄에 about : config를 입력하고 Enter

危険性を承知の上で使用する 클릭

toolkit.legacyUserProfileCustomizations.stylesheets 검색

false ⇒ true 로 변경

Firefox 재부팅

userChrome.css 만들기

Firefox 메뉴 > 도움말 > 문제 해결 정보 열기

프로필 폴더에서 폴더 열기를 클릭합니다

chrome이라는 폴더를 만듭니다.

만든 chrome 폴더에 userChrome.css를 만듭니다.

이미지 파일 준비

Firefox 딸 이미지와 Firefox Browser 로고 이미지를 chrome 폴더에 복사합니다.
로고 이미지를 복사하는 이유는 로고의 문자 색상을 변경하기 때문입니다.
(※ CSS3의 마스크나 필터로 할 수 있을지도 모릅니다만, 몰랐다···)

여기에서 about-fx-ko4-beta.png를 chrome 폴더에 저장

Firefox Browser 로고 이미지 (chrome://branding/content/about-wordmark.svg)를 Firefox에서 열고 다른 이름으로 저장하여 Chrome 폴더에 저장

로고 이미지 (about-wordmark.svg)의 문자 색상 변경

About Firefox-ko의 배경색이 밝은 노란색이라면 Firefox Browser 로고가 흰색으로 인해 눈에 띄지 않습니다.
따라서 저장한 about-wordmark.svg를 svg를 편집할 수 있는 소프트웨어로 열고 문자색을 검은색으로 변경합니다.

편집하는 소프트웨어는 무엇이든 좋습니다.
나는,

Inkscape에서 열기

편집 > 모두 선택

필터 > 색 > 명도 대비

그리고 명도를 -80, 대비를 0으로 저장했습니다.

userChrome.css 편집

chrome://browser/content/aboutDialog.xul을 Firefox에서 열면 기본 about 화면이 표시됩니다.
개발 도구에서 css를 확인하고 About Firefox-ko를 userChrome.css에 적용합니다.
이쪽은, Firefox Browser에 맞추어 조금 플랫 같게 했습니다.

완성한 것이 다음과 같습니다. 사수해주세요.

Firefox-ko 70.0

userChrome.css

@charset "UTF-8";

/* Firefox-ko 70.0 */
#aboutDialogContainer .text-link {
  color: -moz-nativehyperlinktext !important;
}

#aboutDialogContainer #clientBox {
  background-color: #fffff7 !important;
  color: #222222 !important;
  padding: 0px !important;
}

#aboutDialogContainer #clientBox #leftBox {
  background-image: url("about-fx-ko4-beta.png") !important;
  background-position: center 0% !important;
}

#aboutDialogContainer #clientBox #rightBox {
  background-color: #fffff7 !important;
  background-image: url("about-wordmark.svg") !important;
}

#aboutDialogContainer #bottomBox {
  background-color: #f0f0f0 !important;
}

완성도

실제로 표시하면 이런 느낌이 듭니다.

덤 (About Thunderbird 딸)

다른 기사로 해도 좋았지만, 귀찮았으므로 여기에 추가합니다.
마찬가지로 Thunderbird 버전의 About Thunderbird 딸도 있습니다.

↓전 재료는 이쪽입니다
About Thunderbird-ko

이쪽도 전 기사의 CSS에서는 무너집니다.

About Thunderbird-ko

절차는 Firefox와 동일하므로 생략.

userChrome.css

/* Thunderbird-ko 60.0 */

#aboutDialog #clientBox #leftBox {
  background-color: #f5f6f3 !important;
  background-image: url("about-tb-ko.png") !important;
  min-height: 400px !important;
  min-width: 300px !important;
}
#aboutDialog #versionWrapper {
    margin: 0px 13px 0px 10px !important;
}
#aboutDialog #versionField {
    text-align: right !important;
    color: #88888f !important;
    background-color: transparent !important;
}
#aboutDialog #copyright {
    opacity: 0.4 !important;
    color: #333333 !important;
    background-color: #f5f6f3 !important;
    min-height: 65px !important;
    margin: 20px 16px 10px 16px !important;
    padding: 5px 10px !important;
    border: 1px solid #bbbbbb !important;
    -moz-border-radius: 4px !important;
}
#aboutDialog #userAgent {
    color: #ffffff !important;
    background-color: #008ad0 !important;
}

이런 느낌이 듭니다.

마지막으로

그치고도 About Firefox 딸의 정보가 히트하지 않기 때문에, 기사로 했습니다.
모처럼이므로, Firefox의 버전 업에 추종해 기사를 조금 업데이 트하고 싶습니다.