Safari 테마들의 탭관련 문제해결

[Fox Fan]

몇 일 전부터 이 문제에 관한 질문들이 올라오고 또 답글들이 있었는데..
제가 작년에 이미 이 문제로 질문을 올리고 답을 얻었던 문제여서..
여기 검색을 이용하면 쉽게 답을 구할 수 있을거라는 생각과 귀찮니즘에 빠져서 눈팅만 열심히 하고 있었는데.. 그러다가 다시 정리해서 올려 놓으면 헤메는 시간을 줄일 수 있을 것 같아서.. 정리해서 올립니다..

우선 이 문제에 관한 글타래는..
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 변경하면 작업이 끝났습니다.
테마 인스톨하면 변경된 내용을 확인할 수 있습니다. 이전의 테마는 덮어쓰니까 그냥 인스톨하면 됩니다.

폭스팬님의 방법 대로 해보니 pr 버전의 파폭 테마에서 확잘 탭에 글자가
보이긴 보이더군요(pr버전의 파폭 테마를 수정해서 1.0.1버전에 설치 했을 경우)
그런대 탭 메뉴하고 확장 탭 메뉴사이에 줄이....
그리고 어떤 테마에선 탭 메뉴하고 확장 탭 메뉴의 백 그라운드 색상의 미세한 차이가...
여하튼 대단 하시네요 이런 방 법도 발견하시고;;
그 부분만 해결 된다면 거의 완벽 할탠데 약간의 아쉬움....

[처음 사용자]

몇 일 전부터 이 문제에 관한 질문들이 올라오고 또 답글들이 있었는데..
제가 작년에 이미 이 문제로 질문을 올리고 답을 얻었던 문제여서..
여기 검색을 이용하면 쉽게 답을 구할 수 있을거라는 생각과 귀찮니즘에 빠져서 눈팅만 열심히 하고 있었는데.. 그러다가 다시 정리해서 올려 놓으면 헤메는 시간을 줄일 수 있을 것 같아서.. 정리해서 올립니다..

우선 이 문제에 관한 글타래는..
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 변경하면 작업이 끝났습니다.
테마 인스톨하면 변경된 내용을 확인할 수 있습니다. 이전의 테마는 덮어쓰니까 그냥 인스톨하면 됩니다.

탭과 확장 탭 사이에 구분 선 없엘수 있는 방법은 없나요?

[Fox Fan 인데요...]

[quote="처음 사용자" 탭과 확장 탭 사이에 구분 선 없엘수 있는 방법은 없나요?
[/quote]

제가 걸어놓은 링크
viewtopic.php?t=2205&highlight=Aqua
에서 제시되고 최종 수정본 이전에 제가 올렸던 수정방법이 아마 탭과 탭 사이의 구분선을 두지 않았던 기억이 납니다..

저는 개인적으로 탭이 몇개 열렸는지 한 눈에 알 수 있는 것이 좋은데..
이렇게 저렇게 만지다가 나온 최종 수정본이라서 Safari 계열의 테마를 시험할 때는 언제나 최종수정본 처럼 고쳐 쓰거든요..

아무튼 문제가 해결되는 듯 보이신다니 다행이네요..
위의 링크 제가 올린 최종수정본 바로 이전의 예시대로 한번 해보세요..^^

[처음 사용자]

[quote="처음 사용자" 탭과 확장 탭 사이에 구분 선 없엘수 있는 방법은 없나요?

제가 걸어놓은 링크
viewtopic.php?t=2205&highlight=Aqua
에서 제시되고 최종 수정본 이전에 제가 올렸던 수정방법이 아마 탭과 탭 사이의 구분선을 두지 않았던 기억이 납니다..

저는 개인적으로 탭이 몇개 열렸는지 한 눈에 알 수 있는 것이 좋은데..
이렇게 저렇게 만지다가 나온 최종 수정본이라서 Safari 계열의 테마를 시험할 때는 언제나 최종수정본 처럼 고쳐 쓰거든요..

아무튼 문제가 해결되는 듯 보이신다니 다행이네요..
위의 링크 제가 올린 최종수정본 바로 이전의 예시대로 한번 해보세요..^^[/quote]



처음에 글을 끝까지 잘 안 읽고 적용을 해서
구분선이 나오는게 버그인줄 알았죠;; ㅋ ㅋ
아므튼 좋은 정보 느므 느므 감사합니다.