티스토리 뷰


아톰 에디터를 사용하다가
에디터 내부의 폰트나 폰트사이즈는 설정에서 쉽게 수정이 됩니다.


그러나 툴바나, 메뉴바, 사이드바 같은곳의 폰트는 직접 스타일시트를 수정해 주어야 합니다.

에디터 기본 스타일시트 편집창 열기

(저는 리눅스를 사용합니다. 윈도우나 맥용은 메뉴의 위치가 다를수도 있습니다.)

구글링으로 찾아본
일반적인 인터페이스 폰트 수정항목은 다음과 같습니다.

@ui-font-size: 16px;

.tree-view {
  // background-color: whitesmoke;
  font-size: @ui-font-size;
}

.overlay .select-list ol.list-group li,
.overlay.select-list ol.list-group li {
  font-size: @ui-font-size;
}

.status-bar {
  font-size: @ui-font-size;
  height: @ui-font-size * 2;
  line-height: @ui-font-size * 2 - 4;
}

.tab-bar .tab, .tab-bar .tab.active {
  font-size: @ui-font-size;
  height: @ui-font-size * 2;
}

li.file.entry.list-item, .list-tree li.list-nested-item > .list-item {
  font-size: @ui-font-size * 1.2;
  line-height: 25px;
}

특히 저같은 경우에는 사이드바의 폰트를 수정하고 싶었는데
위의 맨 마지막 항목(li.file.entry.list-item ... )을 수정하여 해결 하였습니다.


좀더 정확한 설명으로는...

아톰에디터는 크롬 및 자바스크립트 기반으로 제작되어진 것으로
에디터 화면에서 ctrl+shift+i 키로 크롬브라우저 처럼 관리자모드 창을 열수 있으며
에디터의 각 요소부위의 클래스명을 확인하여 세밀한 부분까지 수정할 수 있습니다.



댓글
댓글쓰기 폼