구에디터 더보기 수정 안내 + 추가

현재 공개 되어있는 스킨은 모두 업데이트 되었으니 재 다운로드 > 재설치 하시거나
CSS파일만 업데이트해주세요

1차적인 업데이트는 다 완료하였으나.. 티스토리가 또 수정을해서... ........................................
제가 .. 이틀에 걸쳐 스킨 40여개를 다 수정했는데... 괴롭네요....
어느 정도 티스토리의 수정이 종료된 것 같으면 그 때 천천히 업데이트 하겠습니다..

관련한 내용을 아래 추가해두었으니 참고하셔서 직접 수정 부탁드려요..
커미션 스킨은 직접 수정해주시고 문제 있으시면 방명록에 글 남겨주세요

 

현재 구 에디터로 작성한 글의 더보기가 비정상 작동하고 있습니다.
이는 ... 티스토리에서 ... 또 ... 사전 예고 없이.... 내부 소스를.............. 바...꿨..........습..............니........................다........... 🤬 망...........할...............

 

따라서 이에 따른 수정 방법 안내를 드립니다.

먼저 변경된 소스에 대해 설명드리자면 아래와 같습니다.

기존 접혀진 더보기 이름의 클래스명 : moreless_fold 
기존 펼쳐진 더보기 이름의 클래스명 : 상 moreless_top / 하 moreless_bottom

접혀진 더보기 이름의 클래스명 : btn_more
펼쳐진 더보기 이름의 클래스명 : btn_less ( 상 하로 나뉘어지나 소스가 같아 일괄 적용 됩니다 )

19.09.05 - 추가
티스토리 자체에 추가 된  소스입니다. (스킨 아님)

.btn_more, .btn_less { /* 더보기 버튼 */
    border: 0; /* 테두리 */
    background: transparent; /* 배경 색 */
    display: block; 
    height: 21px; /* 높이 */
    margin: 20px 0; /* 외부 여백 상하 좌우 */
    font-size: 14px; /* 폰트 사이즈 */
    line-height: 14px; /* 줄 간격 */
    color: #888; /* 폰트 색 */
    position: relative;
    width: 100%; /* 넓이 */
    text-align: left; /* 정렬 - 좌 */
}

.btn_less::before, .btn_more::before { /* 더보기 버튼 앞에 꾸며지는 것 */
    content: "..."; /* 더보기 버튼 앞에 ... 표시가 나오도록. 수정을 해도 되고 삭제해도 됨 */
    display: inline-block;
    padding-right: 5px; /* 내부 여백 우 */
    font-size: 14px; /* 폰트 사이즈 */
    line-height: 6px; /* 줄 간격 */
    vertical-align: top; /* 현재 위치에서 위로 치우치도록. 중간으로 하려면 middle로 변경하면 됨 */
}

수정은 css에서 하시면되며, 컨트롤+F를 눌러 더보기를 검색 후 위 설명을 참고하여 수정합니다.
위 티스토리에 추가된 소스를 css 더보기 영역에 붙여넣고 입맛대로 원하는 값을 넣어 수정하거나,
스킨의 디폴트 값을 적용하려면 inherit를 넣으면 됩니다. 
그래도 수정이 안되면 ; 앞에 !important를 적어넣으면 작성하신 값이 우선 적용 됩니다.

아래 안내는 가장 기본적인 수정 안내이며, 경우에 따라 몇 가지 직접 더 손보셔야 할 수 있습니다.

.moreless_fold span:before,
.~~~~~~~~~ { 
~~~~~
}

이게 원래 스킨의 소스라면 이 소스는 접혀진 상태의 더보기 버튼에 대한 소스이므로
바로 위에 .btn_more 를 적어준 후 .btn_more:before, 라고 적어주면 됩니다. (끝에 콤마=쉼표 필수)
(btn_more는 안에 span이 없으므로 위와 같이 span을 떼고 나머지만 적으면 되세요)

.moreless_top span,
.moreless_bottom span
.~~~~~~~~~~~~~~ {
~~~~~~~~~~~~
}

이런 형식이라면 펼쳐진 상태의 더보기 버튼에 대한 소스이므로
상단에 .btn_less 를 추가하고 .btn_less span, 이런 식으로 적어주면 됩니다.

그 아래 :hover:before 라던가 몇가지 소스가 더 있는데 마찬가지로 추가해주면 됩니다.

마지막으로, 더보기가 여러개 연속으로 사용된 경우
줄 바꿈이 되지 않은 채로 나타나기 때문에

.btn_more {display:block;}

이렇게 추가해주시면 줄 바꿈이 됩니다.

추가로 위에서 설정한 아이콘 외에, 더보기를 열었을 때 ... 표시가 계속 나온다면 아래 소스를 추가해주면 됩니다.
구에디터에만 적용되며 새 에디터는 적용되지 않습니다.

.btn_less::before { /* 이 세 줄 추가하면 펼친 상태에서 ... 삭제 됨(구에디터 한정) */
    display: none;
}

 

현재 제 티스토리스킨에 적용되어있는 더보기 소스입니다. 참고하세요

/* 더보기 */
.btn_less::before {
    display: none;
}

.btn_more::before {
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    vertical-align: inherit;
}

.btn_more,
.btn_less,
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless {
    display: block;
    font-size: inherit;
    color: #CD717E;
    height: auto;
}

.btn_more:before,
.btn_less span:before,
a.btn-toggle-moreless:before {
    content: '\f107';
    font-family: 'fontAwesome';
    margin-right: 5px;
}

.btn_less:last-child span:before {
    content: '\f106'
}

.btn_less:first-child {
    border-bottom: 1px solid;
    padding-bottom: 20px;
    border-color: #444;
    margin-top: 10px;
}

.btn_less:last-child {
    border-top: 1px solid;
    padding-top: 20px;
    border-color: #444;
    margin-bottom: 10px !important;
}

.moreless_content,
.moreless-content {
    border: 1px solid;
    padding: 10px;
}

 

추가로 버튼에 회색 네모가 생긴 경우

CSS의 최상단에서 웹폰트 영역 아래쪽에 아래 소스를 추가해주세요.

button {
	background-color: transparent;
	border: 0;
}

감사합니다 :)