레이블이 트윗덱인 게시물을 표시합니다. 모든 게시물 표시
레이블이 트윗덱인 게시물을 표시합니다. 모든 게시물 표시

TweetDeck 보기 편한 커스텀 스타일시트 – Stylebot 확장기능용

by hfkais | 2015. 9. 3. | 0 comments

이전 글 : TweetDeck 보기 편한 커스텀 스타일시트 – 버전 3.0 용

9월 1일, 구글 크롬 브라우저가 버전45로 업데이트 되었다. 직접 관련이 있는지는 모르겠으나 그동안 트윗덱에서 잘 쓰고 있던 Stylish 확장기능이 좀 이상했다. 분명 처음 트윗덱을 열었을 땐 잘 적용되었던 커스텀CSS가 어느 순간 풀려버리는 것. 혹시나 싶어 검색도 해보고 Stylish 홈페이지와 포럼도 뒤져봤으나 뾰족한 방법을 찾지 못했다.

크롬 웹 스토어에서 스타일리시를 다시 설치할까 하다가, 같은 기능을 제공하는 Stylebot을 깔아봤다. 실시간 편집 기능도 제공하고 요소 선택 기능도 제공하고. 어라, 써보니 괜찮네? 싶어 갈아탔다.

어차피 같은 사이트에 대한 커스텀CSS이기 때문에 코드는 크게 차이나지 않았다. 다만 적용 시점에 약간 차이가 있는지, 일부 CSS는 너무 넓게 적용되어 나왔다. 약간의 수정을 거쳐 최종적으로 적용한 CSS는 다음과 같다.(2015-09-04 업데이트)

 


html {
    color: #aaa ;
}
.account-inline .fullname {
    display: none ;
}
.account-link {
    color: #999;
}
.app-content {
    background: #333;
}
.btn-positive, .s-following .follow-btn {
    background-color: #00A6E2;
}
.column {
    background: #111;
}
.needs-scroll-bottom-offset.scroll-styled-h {
    bottom: 0px;
}
.scroll-styled-h::-webkit-scrollbar {
    background-color: #000;
    height: 15px;
}
.scroll-styled-h::-webkit-scrollbar-thumb {
    border-radius: 15px;
}
.scroll-styled-v::-webkit-scrollbar-thumb, .scroll-styled-h::-webkit-scrollbar-thumb {
    background-color: #222;
}
.scroll-styled-v::-webkit-scrollbar-thumb:hover, .scroll-styled-h::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
.scroll-styled-v::-webkit-scrollbar-track, .scroll-styled-h::-webkit-scrollbar-track {
    border-left: 0;
}
.stream-item {
    border-bottom: solid 1px #222;
}
.tweet-body p a {
    color: #5983A0;
}
.txt-mute a:not(:hover):not(:focus) {
    color: #666;
}

 


전체 내용 보기

굿바이, 모바일 트윗덱(TweetDeck)

by hfkais | 2013. 7. 26. | 7 comments

1. 트위터 API 1.0 중단 이후, 모바일 트윗덱의 대안으로 Plume을 종종 쓰고 있었다. 그래도 트윗덱에서 타임라인 업데이트나 글쓰기 정도는 가능했는데, 어제오늘 즈음해서 아예 다 막힌 듯 하다. (트위터 API 1.0이 아예 다 중단된 것인지, 트윗덱만 그런 것인지는 확실치 않다)

2. 트위터에서 '트윗덱'으로 검색해보니 나 같은 사람이 한 둘이 아닌 듯. 급한 대로 트위터 공식앱을 쓰는 사람도 있고, 다른 클라이언트로 갈아타는 사람도 있고. 그 와중에 '트윗덱을 다시 깔았다'는 사람도 보인다. 그런데 트윗덱은 플레이스토어에서 내렸는데? 설마 수정버전인 TweetDark를 설치한 건 아니겠지... 싶었는데 보이는 한 트윗. '트윗덱 다시 깔았는데 이거 왜이리 시커매?' ㅋㅋㅋ

3. 혹시라도 트윗덱 같은 칼럼UI 방식의 클라이언트가 있을까 싶어 검색해 봤지만 찾기 실패. 죄다 홈/멘션/DM/별표 식으로 표시되는 다 똑같은 UI. 디자인도 죄다 영 아니올시다(그 놈의 그라데이션 좀 버려!). 그나마 겨우겨우 비슷하게 꾸며놓은 게 Plum인데, 이것도 트윗덱만큼 깔끔하면서 완벽한 칼럼UI를 보여주진 못한다. 이제 와서 돌이켜보니 모바일 트윗덱의 칼럼UI는 정말 심플하면서도 완벽했구나... 하는 생각.

여하튼, 굿바이 모바일 트윗덱, 그리고 트윗덱을 기초로 한 여러 수정버전들 - 내가 썼던 TweakDeck도.

 

Screenshot_2013-07-25-23-49-47Screenshot_2013-07-25-23-49-59Screenshot_2013-07-25-23-50-30Screenshot_2013-07-25-23-50-54Screenshot_2013-07-25-23-51-01


전체 내용 보기

TweetDeck 보기 편한 커스텀 스타일시트 – 버전 3.0 용

by hfkais | 2013. 6. 16. | 3 comments

이전 글 : TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 – 버전 2.0용

트윗덱 웹 버전(web.tweetdeck.com)이 어느새 버전 3.0까지 올라오면서 그간 여러 가지 변화가 있었습니다.

우선 기능적으로는 페이스북 지원이 중단되었습니다. 아쉽게도 이젠 트위터만 지원됩니다. 트위터 사(社)에서 트윗덱을 인수했기 때문에 충분히 예상되었던 일이지요. 트윗덱을 통해 트위터와 페이스북을 동시에 즐겼던 저로서는 무척 아쉬운 일입니다. 덕분에(?) 둘 중 어느 쪽도 아닌 구글플러스 접속이 늘었습니다(ㅋㅋㅋ).

인터페이스적으로는 기존의 툴바라고 해야 할까요? 각종 기능 버튼들이 화면 왼쪽 끝으로 달라붙었습니다. 글쓰기 버튼은 가장 위에, 그 다음이 검색, 그리고 각 칼럼으로 바로 이동할 수 있는 버튼들이 위치합니다. 상대적으로 가로가 긴 16:9 모니터를 쓰는 제 노트북에서는 꽤 괜찮은 변화네요. 각 칼럼의 타임라인을 아주 조금이나마 길게 볼 수 있습니다.


전체 내용 보기

블로그에 트윗 삽입하기 테스트

by hfkais | 2013. 1. 7. | 6 comments

다른 분들의 블로그에 구경차 갔다가 트윗이 하나하나 고스란히 블로그에 삽입된 걸 보았습니다. 프로필 이미지도 잘 나오고, 리트윗 버튼 등도 보였죠. 무엇보다 '트윗 그대로' 보여진다는게 신기했습니다.

처음엔 각 블로그 툴에서 지원하는 위젯인가 싶어 열심히 찾아보았지만... 아니더군요. 트위터 자체에서 제공하는 '삽입(embed)' 기능이었습니다. 트위터 공식홈을 거의 안쓰다 보니 이런 게 생긴 줄도 몰랐네요.

보니까 제가 주로 사용하는 트윗덱에서도 지원하는 기능입니다. 각 트윗의 오른쪽 하단에 위치한 '...' 버튼을 누르고, 'Embed this Tweet'을 선택하면 삽입에 쓸 코드 및 미리보기가 표시됩니다.

시험삼아 최근에 올린 트윗 하나를 삽입해 봅니다.

잘 나오는군요!


전체 내용 보기

TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 – 버전 2.0용

by hfkais | 2012. 10. 13. | 0 comments

이 글의 최신버전이 http://hfkais.blogspot.kr/2013/06/tweetdeck-custom-style-3.0.html 에 있습니다.

이전 글 : TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 - 개정판 

 

며칠 전, 트윗덱 웹 버전(web.tweetdeck.com)이 업데이트 되었습니다. 10월 13일 현재 최신 버전은 2.0.2입니다.

이번 버전에서는 전체적인 UI가 약간 변경되었고, 기존의 어두운 테마 외에 밝은 테마가 추가되었습니다. 트윗덱 내에서 자체적으로 글꼴 크기를 3가지로 조절할 수 있게 되었습니다. 또한 화면 최상단에 ‘리스트’ 버튼을 따로 두어, 리스트 보기 및 관리가 편하게 이루어질 수 있도록 바꿨습니다.

겉모습의 변화와 더불어 속으로도 많은 변화가 있었는데요, 내부적인 HTML 마크업 및 CSS 클래스네임이 모두 변경되었습니다. 따라서, 이전 글에서 썼던 CSS 스타일 커스터마이징은 더 이상 먹히지 않게 되었습니다. 때문에 트윗덱 2.0에도 대응하는 새 CSS 스타일을 급히 만들어 올립니다.

 

Screenshot_13
▲ 적용하면 이런 모습

 

.column-panel { font-size:12px;}
.column-title { font-size:14px; font-weight:bold;}
.app-nav-item { font-size:13px;}
.column-title .attribution { display: none;}
b.link-complex-target { display:none;} 
.s-large-scrollbars .scroll-v::-webkit-scrollbar { width:9px; }
.stream-item { background: #3a4052; border-bottom: 1px solid #383838; }
.js-show-detail { background: #26282A;}
#open-modal .stream-item { background:none; }

 

우선 전체적으로 글꼴 크기를 줄였습니다. 이번에 새로 글꼴 크기를 조절하는 기능이 추가되었지만 최소 크기가 여전히 큰 편이라 따로 사이즈를 줄였습니다.

그리고 트위터 타임라인에서 각 사용자의 풀네임이 나타나지 않도록 했습니다. 원래 풀네임+@아이디 식으로 표현되는데, @아이디만 표시되는게 깔끔해서 바꿨습니다. 만약 풀네임을 표시하고 싶다면, ‘b.link-complex-target { display:none;}’ 부분을 삭제하면 됩니다.

각 칼럼별 스크롤바 크기가 매우 커졌기에, 기존과 같은 수준인 9px로 조절했습니다. 이 부분도 숫자를 바꿔 마음대로 커스터마이징 가능합니다. 8px이나 9px이 적절해 보이네요.

또한 페이스북 관련 내용에는 배경색이 적용되도록 했습니다. 기존 버전도 그렇고 이번 버전도 마찬가지인데, 트위터와 페이스북 내용을 구분해주지 않아 무척 불편합니다. 옛날엔 배경색을 따로 적용해 구분이 쉬웠으나 요새는 그냥 코딱지만한 아이콘 하나 딸랑 넣어주고 말죠. 사실 트윗덱 스타일 커스터마이징을 하게 된 계기도 이 기능 때문이었습니다. 이번 트윗덱 2.0에서 페이스북 내용에 별도의 CSS 클래스명을 지정하지 않아 애먹었지만, 아무튼 배경색을 따로 적용하는데 성공했습니다. 마음에 드는 색이 있다면 직접 HEX코드를 수정해 적용해주시면 됩니다. 포토샵 등을 이용하면 자신이 원하는 컬러의 HEX코드 값을 구할 수 있습니다.

적용 방법은 이전 글인 ‘TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 – 개정판‘ 을 참고해주시기 바랍니다. 간단하게 Stylish 확장기능을 설치하고, 트윗덱 사이트에 위 CSS를 적용하면 됩니다. 참고로 위 CSS스타일은 ‘어두운 테마’ 전용입니다. 테마별로 클래스네임을 다르게 가져가면 좋을 텐데 그렇지 않더군요. 밝은 테마용도 시간 나면 한번 만들어볼까 합니다.



트윗덱이 업데이트 되면서 검색창이 오른쪽 상단에 붙고 그 위치에서 결과까지 보여주게 되었는데요, 기존 CSS코드로는 검색결과 창이 투명해져 버려서 글자가 잘 안보이게 됩니다. 때문에 아래의 코드로 바꿔주면 제대로 보입니다.(2012.12.28 수정)

.column-panel { font-size:12px;}
.column-title { font-size:14px; font-weight:bold;}
.app-nav-item { font-size:13px;}
b.link-complex-target { display:none;}
.s-large-scrollbars .scroll-v::-webkit-scrollbar { width:9px; }
.stream-item { background: #3a4052; border-bottom: 1px solid #383838; }
.js-show-detail { background: #26282A;}
#open-modal .stream-item { background:none; }
.popover .stream-item { background:#fff;}

덧) 트윗덱에서 더 이상 페이스북을 지원하지 않게 되면서 이 팁도 별로 쓸모가 없어졌습니다. 설정 메뉴에서 글꼴 크기가 더 세분화되어 굳이 이 글의 방법을 쓰지 않아도 됩니다. 그나저나 페이스북이 빠진 건 아쉽게 되었네요.(2013-06-01)


전체 내용 보기

TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 - 개정판

by hfkais | 2011. 12. 30. | 0 comments

이 글의 최신버전이 http://hfkais.blogspot.kr/2013/06/tweetdeck-custom-style-3.0.html 에 있습니다.

이전 글 : TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기

일전에 트윗덱 CSS 스타일을 수정하는 법에 대해 포스팅한 적이 있습니다. 크롬 익스텐션으로 설치된 트윗덱의 파일 경로를 찾아 직접 수정해주는 방식이었는데요, 어느 정도 예상하긴 했지만 문제가 많았습니다. 그래서 다시 방안을 모색하여 적용시켰습니다. 이번 글에선 그 방안에 대해 쓰고자 합니다.

 

트윗덱 익스텐션 직접수정의 문제

이전 방법에서는 크롬에 설치된 트윗덱 익스텐션의 CSS파일을 직접 수정해주는 식으로 문제를 해결했습니다. 그러나 이 방법은 문제가 있었는데, 트윗덱 익스텐션이 업데이트 되어버리면 CSS파일도 원래 버전으로 되돌아간다는 점이었습니다. 예상하긴 했지만 수정점이 이렇게 많을 줄은 몰랐습니다. 결과적으로 이 방법은 그다지 추천할만한 것이 못됩니다.

  • 익스텐션이 설치된 폴더를 일일이 찾고, 또 그 안에서 CSS파일을 찾아야 한다.
  • CSS파일을 직접 수정해주어야 한다. 각종 클래스 명을 찾기가 어려울 수 있다.
  • CSS에 대한 지식이 어느 정도 있어야 한다.
  • 트윗덱 익스텐션이 업데이트 되면, 수정된 CSS가 새로운 파일로 덮어쓰기 된다.
  • 업데이트와 함께 CSS에서 추가되는 부분이 있을 수 있어, 기존에 쓰던 파일을 덮어쓰기 할 수도 없다.
  • 결국 그때그때 일일이 수정해주어야 하는 불편이 따른다.
  • 결정적으로, 트윗덱 크롬 익스텐션 버전과 웹 버전에 별다른 차이가 없다(!).

위와 같은 문제점들을 인식했고, 방법을 바꾸기로 했습니다. 결국 현 시점에서 익스텐션 버전과 웹 버전의 차이가 사실상 없기 때문에, 웹 버전을 쓰기로 했습니다.

 

Stylish를 이용한 커스텀 CSS 적용

웹에서 구동되는 트윗덱을 쓰기로 했기 때문에, Stylish나 Stylebot과 같은 익스텐션을 사용할 수 있게 되었습니다. 이 익스텐션들은 웹페이지의 CSS 스타일시트를 사용자가 미리 설정한 스타일시트로 바꿔서 보여줍니다. 저는 파이어폭스 때도 Stylish를 썼기 때문에 여기서도 Stylish를 쓰기로 했습니다. 물론 Stylebot을 써도 무방합니다. Stylebot은 웹페이지의 구성요소(엘리먼트) 선택하는 걸 도와주는 기능이 있기 때문에 오히려 더 나을 수도 있습니다.

Stylebot 사용
△ Stylebot(오른쪽)과 크롬 개발자도구(아래쪽)를 둘 다 켠 모습 

 

CSS 스타일시트를 커스터마이징하기 위해서는 해당 웹페이지에 적용된 스타일시트 구조와 클래스 명 등을 알아야 합니다. 제 경우엔 익숙한 크롬 개발자도구를 이용했습니다. 우선적으로 눈에 띄는 부분부터 클래스 명을 찾아, 스타일을 다시 정의했습니다. 이전 버전의 트윗덱이 익숙했으므로 그쪽을 참고하였습니다. 글꼴 크기를 줄이고, 페이스북 뉴스피드엔 배경색을 따로 적용시켰습니다. 타임라인에서 트윗아이디 옆에 사용자 풀네임이 다 뜨는 게 정신 사나워 그것도 없앴습니다. 다행스럽게도 각 요소들마다 클래스가 지정되어 있어 쉽게 적용할 수 있었습니다. 그렇게 해서, 다음과 같은 코드를 만들었습니다.

.chp-content { font-size: 12px;}
.chp-detail .chp-content p { line-height: 140%; font-size: 14px; font-family: arial, gulim, '굴림'; }
.chp-facebook { background-color: #3a4052; }
strong.fullname { display: none; }

1~2줄은 글꼴 크기를 12px로 줄이고 트윗 자세히 보기 화면에서 글꼴이 바탕체로 나오던 것을 바꾼 것입니다. 3줄은 페이스북에서 온 뉴스피드, 알림 등의 배경색을 다시 정한 것입니다. 4줄은 타임라인에서 트윗ID 외에 풀네임이 나오던 부분을 안 보이게 처리한 것입니다.

 

변경 후

이 코드를 Stylish에서 적용시키면 위와 같은 결과를 얻을 수 있습니다. 타임라인의 글꼴 크기가 작아졌고, 트윗 상세보기 화면의 글꼴이 바뀌었습니다(크기는 그냥 크게 적용). 페이스북 뉴스피드나 알림에는 오른쪽과 같이 푸른 빛이 도는 배경색이 사용됩니다. 익스텐션의 CSS파일을 수정한 것이 아니라 웹페이지를 로딩한 후 마지막에 Stylish가 스타일을 덮어씌우기 때문에, 트윗덱이 업데이트 되더라도 별다른 문제가 없습니다. 물론 클래스 명을 바꿔버리거나 한다면 Stylish에서 적용한 스타일이 제대로 먹히지 않겠죠.

아무튼, 이렇게 해서 간단하게 트윗덱 웹 버전의 몇몇 부분을 커스터마이징 해봤습니다. 잘 응용하면 다양한 방법으로 활용이 가능할 것입니다. 쓰면서 또 마음에 들지 않는 부분이 발견되면, 그때그때 또 고쳐서 쓸 것입니다.

덧) 트위터에서 트윗덱의 새 버전을 런칭했습니다. 2.0.1버전인데요, 구조나 클래스명 등이 많이 바뀌어 위 방법이 통하지 않습니다. 새 버전용 스타일시트는 현재 작업중입니다. - 2012.10.11

덧2) 어두운 테마용 코드(버그 있을 수 있음) -
.column-panel { font-size:12px;}
.column-title { font-size:14px; font-weight:bold;}
.app-nav-item { font-size:13px;}
.column-title .attribution { display: none;}
.s-large-scrollbars .scroll-v::-webkit-scrollbar { width:9px; }
.stream-item { background: #3a4052; border-bottom: 1px solid #383838; }
.js-show-detail { background: #26282A;}
#open-modal .stream-item { background:none; }


전체 내용 보기

TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기

by hfkais | 2011. 12. 16. | 0 comments

이 글의 최신버전이 http://hfkais.blogspot.kr/2013/06/tweetdeck-custom-style-3.0.html 에 있습니다.

Twitter에 인수되었던 TweetDeck이 얼마 전 리뉴얼을 단행했습니다. 오랜기간 기본적인 관리조차 제대로 되지 않아 500 server error를 뱉어내던 트윗덱 홈페이지도 바뀌었고, 크롬용 트윗덱 익스텐션도 새롭게 바뀌었습니다. 전체적인 모습은 좀 더 예쁘고 깔끔하게 바뀌었지만, 오랫동안 트윗덱을 써온 사용자로서 UI적으로 다소 불편한 점도 눈에 띕니다.

특히 가장 불편한 점은 타임라인의 글꼴 크기와 줄간격인데요, 옛날 노란색 트윗덱에 너무 적응되어 버려서 파란색 트윗덱은 적응이 안됩니다. 그래서, 이걸 바꿔보기로 하고 방법을 찾기 시작했습니다.

우선 가장 쉽게 생각해 볼 수 있는게 사용자 CSS를 적용시켜주는 익스텐션입니다. 파이어폭스에서 썼던 Stylish가 크롬용으로도 있더군요. Stylebot이라는 익스텐션도 꽤 편리해 보였습니다. 여러 시도를 해보았지만 결과적으론 실패였습니다. 웹사이트라면 쉽게 적용이 되지만, 익스텐션으로 구동되는 트윗덱에는 적용이 잘 안되더군요. 아, 물론 TweetDeck.com 에서 트윗덱을 쓰는 경우라면 당연히 적용이 됩니다. 주소 써주고 수정된 CSS 넣어주면 바로 됩니다.

그래서 생각한게, 아예 익스텐션 구성요소 파일을 건드려보자는 것이었습니다. 크롬의 개발자도구(Ctrl+Shift+i)를 이용하니 금방 되더군요. 트윗덱 익스텐션이 저장된 위치는 폴더명이 복잡하긴 했지만 북마크를 통해 쉽게 알 수 있었고요. 제 경우, 북마크를 통해 찾은 트윗덱 저장위치와 CSS파일 저장위치는 다음과 같았습니다.

C:\Documents and Settings\사용자계정명\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\hbdpomandigafcibbmofojjchbcdagbl\1.0.1_0\web\css

파란색으로 된 부분은 어쩌면 컴퓨터마다 다를 수도 있을 것 같다는 생각이 드네요. 적용하실 때 참고하시고… 이 폴더를 열어보면 notification.css, unsupported.css, webkit.css 요렇게 세 개의 CSS파일이 들어있습니다. 딱 보면 감이 오시겠지만, notification.css는 알림창용 CSS입니다. 우리가 건드릴 것은 webkit.css입니다. 메모장으로 이 파일을 열어, .chp .chp-content 부분을

.chp .chp-content { font-size:12px; line-height:1.3em; margin-left:61px; padding:9px 11px 10px 8px;-webkit-user-select:text;user-select:text;}

와 같이 수정해 주었습니다. 굵은 글씨가 추가/수정된 부분입니다. 그런데 찾아보니 맨 윗부분에도 글꼴 사이즈를 지정한 부분이 있더군요. 아예 전체에 적용시켜도 되겠다 싶어 'font-size'로 검색해서 나오는 첫 번째 부분을 font-size:12px;로 바꾸어 주었습니다. 그리고 저장 뒤 트윗덱을 다시 띄웠습니다.

snap_600

결과는 성공! 위 스크린샷에는 12px크기/150%줄간격의 설정이 적용되었습니다. 적용하고 보니 줄간격이 너무 넓어서 다시 130%로 줄였지요. 이제 트윗덱의 CSS를 마음대로 건드릴 수 있게 되었습니다.

그러고보니 트윗ID마다 앞에 붙은 @가 거슬리는데, 이것도 없애볼까 합니다. 생각보다 쉬울 것 같네요. 그럼, 이만 글을 줄이겠습니다. 간단한 팁이지만 도움이 되길 바랍니다.

행여 수정이 어려운 분들을 위해 수정된 CSS파일을 공유합니다. 타임라인 텍스트 크기 및 줄간격 수정, 페이스북 연동시 페북 메시지에 대해서는 배경색을 다르게 적용(트윗덱 옛 버전과 같은 방식) http://www.box.com/s/ij56s5ulyx468u5qjfch/preview

덧) 이 글에서 나타난 몇몇 문제점들을 보완한 내용이 TweetDeck 타임라인의 글꼴을 내 마음대로 바꾸기 - 개정판 글에 있습니다. 이쪽 내용이 더 도움될 것입니다.

전체 내용 보기