친효스킨 v2.3 본문 리스트 기능 오류 해결 방법
안녕하세요. 친절한효자손입니다. 댓글로 제보를 주셔서 확인해보니 현재 친효스킨 2.3 버전에서 본문에 리스트 작업 시 들여쓰기가 제대로 되지 않고 리스트 스타일이 제대로 출력되지 않는 문제를 발견했습니다. 따라서 해당 문제를 해결할 수 있는 방법을 안내해 드리겠습니다.
스킨 편집 전 반드시 백업은 필수입니다.
CSS 수정하기
친효스킨의 스킨 편집 페이지로 들어갑니다. CSS 탭에서 다음의 코드를 찾습니다. 한글로 「본문 리스트」라고 검색하시면 빠르게 찾을 수 있을겁니다.
/* 본문 리스트 */
#contents .article > ul,
#contents .article > ol,
#contents .article div.tt_article_useless_p_margin > ul,
#contents .article div.tt_article_useless_p_margin > ol,
#contents .article div#toc-contents > ul,
#contents .article div#toc-contents > ol {
margin-left: 40px;
}
#contents .article > ul > li,
#contents .article > ol > li,
#contents .article div.tt_article_useless_p_margin > ul > li,
#contents .article div.tt_article_useless_p_margin > ol > li,
#contents .article div#toc-contents > ul > li,
#contents .article div#toc-contents > ol > li {
list-style: inherit !important;
color: #4271C9;
}
#contents .article > ul > li > p > a,
#contents .article > ol > li > p > a,
#contents .article div.tt_article_useless_p_margin > ul > li > p > a,
#contents .article div.tt_article_useless_p_margin > ol > li > p > a,
#contents .article div#toc-contents > ul > li > p > a,
#contents .article div#toc-contents > ol > li > p > a {
color: #4271C9;
}
#contents .article > ul > li:hover,
#contents .article > ol > li:hover,
#contents .article > ul > li:hover a,
#contents .article > ol > li:hover a,
#contents .article div.tt_article_useless_p_margin > ul > li:hover,
#contents .article div.tt_article_useless_p_margin > ol > li:hover,
#contents .article div.tt_article_useless_p_margin > ul > li:hover a,
#contents .article div.tt_article_useless_p_margin > ol > li:hover a,
#contents .article div#toc-contents > ul > li:hover,
#contents .article div#toc-contents > ol > li:hover,
#contents .article div#toc-contents > ul > li:hover a,
#contents .article div#toc-contents > ol > li:hover a {
color: #FF5544;
}이 부분을 모두 아래의 첨부파일에 있는 CSS 코드로 변경해주시기 바랍니다.
모두 교체해주시기 바랍니다. 코드 수정 시 빠진 부분 없이 진행하셔야 합니다.
HTML 수정하기
이제 HTML로 들어갑니다. 여기에서는 조금 더 복잡할 수 있지만 잘 따라하시면 문제 없이 수정할 수 있을 것입니다.
첫번째 수정 위치
#contents .article>ul>li:hover,
#contents .article>ol>li:hover,
#contents .article div.tt_article_useless_p_margin>ul>li:hover,
#contents .article div.tt_article_useless_p_margin>ol>li:hover,
#contents .article div#toc-contents>ul>li:hover,
#contents .article div#toc-contents>ol>li:hover,
#contents .article>ul>li:hover a,
#contents .article>ol>li:hover a,
#contents .article div.tt_article_useless_p_margin>ul>li:hover a,
#contents .article div.tt_article_useless_p_margin>ol>li:hover a,
#contents .article div#toc-contents>ul>li:hover a,
#contents .article div#toc-contents>ol>li:hover a,먼저 위의 코드입니다. <head> 안쪽에 있는 <style> 안쪽에 정의되어 있습니다. 이 부분을 몽땅 삭제해주시기 바랍니다.
즉 이 부분입니다. 이곳을 모두 블록 지정하여 지워줍니다.
제대로 삭제된 모습입니다. 빈 줄은 그냥 둬도 무방하며 빈줄까지 삭제해도 상관 없습니다.
두번째 수정 위치
</s_if_var_articleLinkColor><s_if_var_articleListColor>#contents .article>ul>li,
#contents .article>ol>li,
#contents .article div.tt_article_useless_p_margin>ul>li,
#contents .article div.tt_article_useless_p_margin>ol>li,
#contents .article div#toc-contents>ul>li,
#contents .article div#toc-contents>ol>li,
#contents .article>ul>li>p>a,
#contents .article>ol>li>p>a,
#contents .article div.tt_article_useless_p_margin>ul>li>p>a,
#contents .article div.tt_article_useless_p_margin>ol>li>p>a,
#contents .article div#toc-contents>ul>li>p>a,
#contents .article div#toc-contents>ol>li>p>a {
color: !important;
}마찬가지로 <head>안에 있는 <style>을 정의하는 부분에서 위의 코드를 찾습니다. 첫번째 수정 위치에서 불과 조금만 아래로 내려가보면 있을 것입니다. 이 부분을 몽땅 아래의 첨부파일에 있는 코드로 변경합니다.
그대로 바꿔치기를 해주시면 됩니다.
이렇게 그대로 코드 교체만 하시면 됩니다. 이제 모두 완료되었으니 스킨을 저장하고 본문에서 리스트 테스트를 진행해 보겠습니다.
본문 리스트 결과
다음은 본문 리스트를 직접 테스트해본 결과입니다.
- 리스트1
- 리스트2
- 리스트2
- 리스트2
- 리스트3
- 리스트3
- 리스트4
- 리스트4
- 리스트5
- 리스트5
- 리스트1
- 리스트2
- 리스트2
- 리스트1
보시는 것처럼 리스트 스타일도 제대로 적용되고 들여쓰기도 정상적으로 적용되는것을 확인할 수 있습니다. 리스트의 하부 리스트를 만드는 방법은 키보드의 탭(Tab)키를 사용하시면 들여쓰기가 적용됩니다. 참고하시기 바랍니다. 친효스킨은 여러분들의 제보로 완성이 되어가고 있습니다. 많은 사용 부탁드립니다. 끝.
