Safari 테마들의 탭관련 문제해결
Posted: 2005 03 26 02:51 57
몇 일 전부터 이 문제에 관한 질문들이 올라오고 또 답글들이 있었는데..
제가 작년에 이미 이 문제로 질문을 올리고 답을 얻었던 문제여서..
여기 검색을 이용하면 쉽게 답을 구할 수 있을거라는 생각과 귀찮니즘에 빠져서 눈팅만 열심히 하고 있었는데.. 그러다가 다시 정리해서 올려 놓으면 헤메는 시간을 줄일 수 있을 것 같아서.. 정리해서 올립니다..
우선 이 문제에 관한 글타래는..
viewtopic.php?t=2205&highlight=Aqua
에서 확인하실 수 있습니다..
그리고 아래 설명처럼 해서 해결되는 문제는
1. Safari 테마의 탭 글자색을 검정으로 바꾸어서 탭의 제목을 읽기쉬게 해 줍니다.
2. Safari 테마의 탭 아이콘의 위치를 수정해서 탭 아이콘이 아래쪽에서 잘려나가는 문제를 해결합니다.
3. Safari 테마의 탭과 탭 사이에 구분선을 넣어서 탭이 열린 갯수 등을 쉽게 알아볼 수 있게 해줍니다.
마지막으로 이 문제를 해결하는 데에 결정적인 도움을 주신 삽님과 atclock 두분께 다시 한번 감사드립니다.
이제 본격적으로 Safari 테마들을 수정해 보겠습니다.
우선 다운하신 테마의 확장자 .jar를 .zip 으로 바꾸어서 압축을 풉니다.
압축을 풀어서 보면 여러 파일과 폴더들이 있는데 그 중 Global 이라는 폴더를 클릭해서 browser.css 파일을 Notepad(메모장)으로 열면 이런저런 내용들이 보이고.. 아래쪽에 탭 관련 항목을 표시하는
/* ::::: tabs ::::: */ 부분이 있습니다. 바로 그 아래에서부터 문서의 끝까지... 블럭지정해서 삭제한 후 아래의 내용을 Copy해서 붙여넣기.. 최종적으로 이렇게 보이게 하면 됩니다..
/* ::::: tabs ::::: */
tabbrowser-strip {
background:#F7F7F7;
}
/*Make Browser Tabs not center aligned*/
.tabbrowser-strip .tab-text{
text-align:left;
}
/*removes extra space between text and proxy icon in browser tabs */
.tabbrowser-strip .tab-text {
margin-left: 0px !important;
}
tabpanels {
-moz-appearance: none;
}
.tabbrowser-tabs {
padding-top: 0px;
}
.tabs-left,
.tabs-right {
width: 3px;
}
/* ::::: tab icon ::::: */
.tabbrowser-tabs .tab-icon {
margin: -1px -1px -1px -1px !important;
width: 16px;
height: 16px;
background: url('chrome://global/skin/icons/none.gif');
}
.tabbrowser-tabs *|tab[selected="true"] .tab-icon {
margin: -1px -1px -1px -1px !important;
}
.tabbrowser-tabs *|tab[busy] .tab-icon {
background: url('chrome://global/skin/icons/loading-back.gif') no-repeat;
}
.tabbrowser-tabs *|tab:hover[busy] .tab-icon {
background: url('chrome://global/skin/icons/loading-back-hov.gif') no-repeat;
}
.tabbrowser-tabs *|tab[busy][selected="true"] .tab-icon,
.tabbrowser-tabs *|tab:hover[busy][selected="true"] .tab-icon {
background: url('chrome://global/skin/icons/loading-front.gif') no-repeat;
}
.tabbrowser-tabs *|tab[image] .tab-icon {
background: none;
}
.tabs-newbutton {
display: none;
}
.tabs-closebutton {
margin: -1px;
padding: -1px -1px -1px -1px;
background-color: transparent;
}
이렇게 수정된 항목을 저장하고 다시 압축을 해서 확장자 .zip을 .jar 변경하면 작업이 끝났습니다.
테마 인스톨하면 변경된 내용을 확인할 수 있습니다. 이전의 테마는 덮어쓰니까 그냥 인스톨하면 됩니다.
제가 작년에 이미 이 문제로 질문을 올리고 답을 얻었던 문제여서..
여기 검색을 이용하면 쉽게 답을 구할 수 있을거라는 생각과 귀찮니즘에 빠져서 눈팅만 열심히 하고 있었는데.. 그러다가 다시 정리해서 올려 놓으면 헤메는 시간을 줄일 수 있을 것 같아서.. 정리해서 올립니다..
우선 이 문제에 관한 글타래는..
viewtopic.php?t=2205&highlight=Aqua
에서 확인하실 수 있습니다..
그리고 아래 설명처럼 해서 해결되는 문제는
1. Safari 테마의 탭 글자색을 검정으로 바꾸어서 탭의 제목을 읽기쉬게 해 줍니다.
2. Safari 테마의 탭 아이콘의 위치를 수정해서 탭 아이콘이 아래쪽에서 잘려나가는 문제를 해결합니다.
3. Safari 테마의 탭과 탭 사이에 구분선을 넣어서 탭이 열린 갯수 등을 쉽게 알아볼 수 있게 해줍니다.
마지막으로 이 문제를 해결하는 데에 결정적인 도움을 주신 삽님과 atclock 두분께 다시 한번 감사드립니다.
이제 본격적으로 Safari 테마들을 수정해 보겠습니다.
우선 다운하신 테마의 확장자 .jar를 .zip 으로 바꾸어서 압축을 풉니다.
압축을 풀어서 보면 여러 파일과 폴더들이 있는데 그 중 Global 이라는 폴더를 클릭해서 browser.css 파일을 Notepad(메모장)으로 열면 이런저런 내용들이 보이고.. 아래쪽에 탭 관련 항목을 표시하는
/* ::::: tabs ::::: */ 부분이 있습니다. 바로 그 아래에서부터 문서의 끝까지... 블럭지정해서 삭제한 후 아래의 내용을 Copy해서 붙여넣기.. 최종적으로 이렇게 보이게 하면 됩니다..
/* ::::: tabs ::::: */
tabbrowser-strip {
background:#F7F7F7;
}
/*Make Browser Tabs not center aligned*/
.tabbrowser-strip .tab-text{
text-align:left;
}
/*removes extra space between text and proxy icon in browser tabs */
.tabbrowser-strip .tab-text {
margin-left: 0px !important;
}
tabpanels {
-moz-appearance: none;
}
.tabbrowser-tabs {
padding-top: 0px;
}
.tabs-left,
.tabs-right {
width: 3px;
}
/* ::::: tab icon ::::: */
.tabbrowser-tabs .tab-icon {
margin: -1px -1px -1px -1px !important;
width: 16px;
height: 16px;
background: url('chrome://global/skin/icons/none.gif');
}
.tabbrowser-tabs *|tab[selected="true"] .tab-icon {
margin: -1px -1px -1px -1px !important;
}
.tabbrowser-tabs *|tab[busy] .tab-icon {
background: url('chrome://global/skin/icons/loading-back.gif') no-repeat;
}
.tabbrowser-tabs *|tab:hover[busy] .tab-icon {
background: url('chrome://global/skin/icons/loading-back-hov.gif') no-repeat;
}
.tabbrowser-tabs *|tab[busy][selected="true"] .tab-icon,
.tabbrowser-tabs *|tab:hover[busy][selected="true"] .tab-icon {
background: url('chrome://global/skin/icons/loading-front.gif') no-repeat;
}
.tabbrowser-tabs *|tab[image] .tab-icon {
background: none;
}
.tabs-newbutton {
display: none;
}
.tabs-closebutton {
margin: -1px;
padding: -1px -1px -1px -1px;
background-color: transparent;
}
이렇게 수정된 항목을 저장하고 다시 압축을 해서 확장자 .zip을 .jar 변경하면 작업이 끝났습니다.
테마 인스톨하면 변경된 내용을 확인할 수 있습니다. 이전의 테마는 덮어쓰니까 그냥 인스톨하면 됩니다.
