새 에디터 미지원 스킨 수정 안내

업데이트는 판매량이 높은 스킨 위주로 하고 있어 전부 다 업데이트하지 못하는 점 양해 바랍니다.

직접 수정하실 수 있도록 표, 더보기, 인용구1, 인용구2에 대한 기본 소스를 안내드리오니 추가해서 색상만 변경하거나, 참고하여 기존 구에디터 소스에 클래스명만 추가해 사용하시면 됩니다.

스킨 옵션을 통해 색상 변경이 지원되는 스킨인 경우 색상 코드 대신 var(--text) 이런식으로 된 소스를 넣으면 스킨 옵션과 연동됩니다. 단, 스킨마다 var(--text), var(--bg), var(--point) 외 더 있는 경우가 있으니 스킨 전용페이지의 안내를 따라 원하는 방향으로 적으면 됩니다.

 

주의사항

• 색상이나, 테두리 두께 같은 것은 직접 수정을 해야 합니다. 우측에 주석을 달아두었으니 참고하여 수정하세요.
• 기존에 사용하던 스킨의 구에디터와 동일하게 적용되지 않으며, 아래 소스를 참고하여 직접 구에디터 소스에 클래스명을 추가해 수정해야 합니다.
• 아래 소스 중 수정하지 말라고 한 부분은 티스토리에서 제공하는 소스보다 제 스킨의 기본 소스가 우선 적용되도록 하기 위함이니 수정하지 마세요.

/* 이 부분의 소스는 수정하지 마세요 */
blockquote[data-ke-style='normal'],
#tt-body-page blockquote[data-ke-style='normal'],
blockquote[data-ke-style='style2'],
#tt-body-page blockquote[data-ke-style='style2'],
blockquote[data-ke-style='box'],
#tt-body-page blockquote[data-ke-style='box'],
blockquote[data-ke-style='style3'],
#tt-body-page blockquote[data-ke-style='style3'],
div[data-ke-type='moreLess'] .btn-toggle-moreless,
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
figure[data-ke-type='video'],
figure[data-ke-type='video'] figcaption,
figure figcaption,
figure.imageslideblock, #tt-body-page figure.imageslideblock,
figure.imageslideblock figcaption,
.btn_more, .btn_less,
blockquote, blockquote p   {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* 이 아래부터는 원하는대로 수정해도 됩니다 */

/* 테이블 --- */
table,
th,
td {
    border: 1px solid;
    border-color: #000 /* 라인 색상 코드 */
}

/* 더보기 --- */
/* 더보기 열렸을 때 버튼 앞 표시 */
div[data-ke-type='moreLess'].open .btn-toggle-moreless:before,
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless:before {
    content: '-'; /* 표기할 내용 */
    margin-right: 3px; /* 여백 */
}

/* 더보기 닫혔을 때 버튼 앞 표시 */
div[data-ke-type='moreLess']:not(.open) .btn-toggle-moreless:before,
#tt-body-page div[data-ke-type='moreLess']:not(.open) .btn-toggle-moreless:before {
    content: '+'; /* 표기할 내용 */
    margin-right: 3px; /* 여백 */
}

/* 더보기 버튼 */
div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless {
	color: #000 /* 폰트 색 */
}

/* 더보기 열렸을 때 내용 */
div[data-ke-type='moreLess'].open .moreless-content,
#tt-body-page div[data-ke-type='moreLess'].open .moreless-content {
    border: 1px solid; /* 테두리 */
    border-color: #000; /* 테두리 색상 코드 */
    padding: 10px; /* 내부 여백 */
    background-color: transparent; /* 배경색 */
}

/* 인용구 1 --- */
blockquote[data-ke-style='normal'],
#tt-body-page blockquote[data-ke-style='normal'],
blockquote[data-ke-style='style2'],
#tt-body-page blockquote[data-ke-style='style2'] {
    border-left: 3px solid; /* 좌측 라인 */
    border-color: #000; /* 라인 색상 */
    padding-left: 10px; /* 간격 */
}

/* 인용구 2 */
blockquote[data-ke-style='box'],
#tt-body-page blockquote[data-ke-style='box'],
blockquote[data-ke-style='style3'],
#tt-body-page blockquote[data-ke-style='style3'] {
    background-color: transparent; /* 배경색 */
    border-color: #000; /* 테두리 색상 */
    padding: 10px; /* 내부 여백 */
}

 

---

색상 코드 만들기 ↓

색상 코드 만들기