[티스토리 스킨팁] more less 꾸미기
- 티스토리스킨수정/스킨수정팁
- 2009. 7. 11. 13:00
이건 스킨마다 조금씩 다를수 있습니다. 이글은 파란토마토님과 할랑할랑님의 글을 바탕으로 한것입니다. 자신의 홈피에 맞게 약간씩 응용하면 금방 따라할수 있습니다.
저의 경우 스킨이 보기에 깔끔하고 좋은데 더보기 기능 즉 more less 에 미흡한 점이 있었습니다.
바꾸기 전의 상태입니다.
딸랑 더보기만 있지요. 클릭해도 마찬가지로 아무것도 없습니다. 이것은 더보기 있는것도 아니고 없는것도 아니여.....ㅎㅎㅎㅎ
아이콘을 달아준 모습입니다.
어때요 좀 낫죠. 그럼 할랑할랑님의 글을 보고 약간 더 응용했습니다. 완료한 이미지입니다.
어때요 조글 더 낮죠.
이제 설명들어갑니다. 간단하게 설명하겠습니다. 위에 파란토마토님과 할랑할랑님의 글을 참고하셔도 됩니다.
먼저 스킨을 백업을 하시고 내 스킨에 more less에 스타일을 지정한 코드가 있는지 확인하세요. 없을경우 아래대로 따라하면 됩니다.
있는지 검사는 스킨편집에 가셔서 찾기를 이용해서 moreless 검색한후 관련사항을 검토해보세요.
파란 토마토님한테서 아이콘을 가지고 온것입니다. 두개만 업로드 합니다.
첫번째 그림이 iconLess.gif 두번째 그림이 iconmore.gif 입니다.
스킨편집창에서 파일업로드를 통해 업로드를 먼저하세요..
그다음 아래 코드를 그대로 복사해서 style.css 편집창에 붙여넣기 하세요.
.moreless_fold { background:url(images/iconmore.gif) top left no-repeat; padding-left:20px; color:#000;}
.moreless_top { background:url(images/iconLess.gif) top left no-repeat; padding-left:20px; color:#000;}
.moreless_body { }
.moreless_bottom { background:url(images/iconLess.gif) top right no-repeat; padding-right:20px; color:#999; text-align:right;}
자 그럼 끝입니다. 아이콘 이름을 저와 같이 했다면 그대로 사용하면 됩니다. 다른 아이콘을 사용하실경우 iconmore.gif 부분을 수정해서 사용하면 얼마든지 응용가능합니다.
혹시 몰라 코드를 첨부합니다.
더보기 아이콘추가.txt
아래 코드를 그대로 style.css 편집창에 붙여넣기하세요.
.moreless_fold { /* 보이기(More..)에 대한 스타일 */
color:#000; /* 글자 색상 */
text-decoration:underline; /* 밑줄 */
border:0px dashed #28697b; /* 박스 상자 테두리 */
text-align:left; /* 가운데 정렬 */
}
.moreless_top { /* 감추기(Less..) 상단에 대한 스타일 */
color:#000; /* 글자 색상 */
text-decoration:underline; /* 밑줄 */
border:1px dashed #28697b; /* 박스 상자 테두리 */
border-bottom:0px; /* 박스 상자 테두리 밑줄 없앰 */
margin-bottom:0px;
padding-bottom:15px;
text-align:left; /* 왼쪽 정렬 */
}
.moreless_bottom { /* 감추기(Less..) 하단에 대한 스타일 */
color:#000; /* 글자 색상 */
text-decoration:underline; /* 밑줄 */
border:1px dashed #28697b; /* 박스 상자 테두리 */
border-top:0px; /* 박스 상자 테두리 윗줄 없앰 */
margin-top:0px;
padding-top:15px;
text-align:right; /* 가운데 정렬 */
}
.moreless_content { /* 감춰둔 본문에 대한 스타일 */
border-left:1px dashed #28697b; /* 박스 상자 왼쪽 테두리 */
border-right:1px dashed #28697b; /* 박스 상자 오른쪽 테두리 */
}
그럼 끝입니다. 완성된 이미지는 맨위에 제꺼를 보시면 아실거고 주석이 있으니 얼마든지 응용이 가능합니다.
단, border 을 수정할때 많은 숫자를 넣으면 레이아웃이 깨질수 있습니다. 참고해서 수정하시기 바랍니다.
이것도 코드 첨부합니다.
자매품
카테고리 펼쳐보이기/원하는곳만 펼쳐보이기
상.하 이동 스크립트