Mellow 티스토리 스킨 배포-워드프레스 테마
- 티스토리/스킨배포
- 2010. 6. 16. 08:20
스킨중에 워드프레스 테마가 가장 좋아보입니다. 이번에 제가 사용해볼려고 만든것인데 워드프레스를 흉내 내봤습니다. 하다보니 상단모양만 비슷하고 결국은 영 딴판......
미리보기 => http://enterkey.tistory.com/
원래는 이걸 배포할려고 했는데 제가 사용할려고 먼저 손을 봤습니다.
http://necom.tistory.com/
미리보기 사진 두장 올립니다.
스킨에 대해서 대략 설명하자면 .... 일단 전문가는 아니니 그점 이해해 주세요.
전체너비는 960입니다. 본문영역은 최대 710이고 padding 을 15px 씩 양쪽으로 줘서 본문을 680px 로 맞춘상태입니다.
padding 만 약간 수정하면 좀더 넓게도 사용할수 있습니다.
사이드바 최대너비 240px 입니다. 220px으로 이용하면 됩니다.
1. 메뉴부분은 워드프레스 스킨을 그대로 모방했습니다.
2. 하위 메뉴부분을 드롭다운 형식으로 만들었습니다.
3. 전체적으로 border 을 줬는데 본문만 나오도록 border 를 줬습니다.
즉 코멘트나 트랙백을 눌르면 볼수있고, 환경설정에서 펼침으로 해도 볼수있습니다. 중요한것은 본문과 댓글 부분을 그냥 분리했다는 점입니다.
이건 혹 본문만 펼쳐지기를 바라는 분을 위해 이렇게 했다는 점입니다.^^(저요)
한가지 더.
border 준것은 크롬,파이어폭스,사파리드의 브라우져에서는 코너가 둥글게 보이지만 익스플로러에서는 직사각형으로 보입니다.
jquery 를 이용해서 하는것도 있긴 하지만....아직..
4. 댓글이 올라오면 제목옆에 보이도록 했습니다.
근데 댓글이 없으면 아래처럼 좀 이상합니다.
index 파일에서 0 으로 처리하면 0으로 나와야하는데.... 왜 그런지 ...
이건 적용해봐야 정확하게 알거 같습니다. 이런식으로 나왔다가도 막상 적용하면 제대로 나오더라구요.
의도는 없을때 0 입니다.
아래도 comment 를 넣어서 클릭할수있게끔 했습니다.
더보기, 인용문도 살짝 손을 봤구요.
6. 사이드바에 전부 hover 효과를줘서 마우스를 갖다대면 배경이 변경됩니다.(이런것도 써야하나^^;)
아 한가지 더 태그도 일자로 정렬되게 했습니다.
어차피 사이드바의 태그도 많이 사용하지 않더라구요. 몇개만 보이게끔하고 다른것과 비슷하게 보이는것이 나을거 같아 그렇게 했습니다.
7. 카렌다를 시험적으로 넣어봤습니다. 뭐 그다지 정성을 들인것은 아니구요. 어차피 많이 사용하지 않으니....
미리보기를 통해서 참고하시길 바랍니다.
미리보기 => http://enterkey.tistory.com/
원래는 이걸 배포할려고 했는데 제가 사용할려고 먼저 손을 봤습니다.
http://necom.tistory.com/
미리보기 사진 두장 올립니다.
스킨에 대해서 대략 설명하자면 .... 일단 전문가는 아니니 그점 이해해 주세요.
전체너비는 960입니다. 본문영역은 최대 710이고 padding 을 15px 씩 양쪽으로 줘서 본문을 680px 로 맞춘상태입니다.
padding 만 약간 수정하면 좀더 넓게도 사용할수 있습니다.
사이드바 최대너비 240px 입니다. 220px으로 이용하면 됩니다.
1. 메뉴부분은 워드프레스 스킨을 그대로 모방했습니다.
2. 하위 메뉴부분을 드롭다운 형식으로 만들었습니다.
3. 전체적으로 border 을 줬는데 본문만 나오도록 border 를 줬습니다.
즉 코멘트나 트랙백을 눌르면 볼수있고, 환경설정에서 펼침으로 해도 볼수있습니다. 중요한것은 본문과 댓글 부분을 그냥 분리했다는 점입니다.
이건 혹 본문만 펼쳐지기를 바라는 분을 위해 이렇게 했다는 점입니다.^^(저요)
한가지 더.
border 준것은 크롬,파이어폭스,사파리드의 브라우져에서는 코너가 둥글게 보이지만 익스플로러에서는 직사각형으로 보입니다.
jquery 를 이용해서 하는것도 있긴 하지만....아직..
4. 댓글이 올라오면 제목옆에 보이도록 했습니다.
근데 댓글이 없으면 아래처럼 좀 이상합니다.
index 파일에서 0 으로 처리하면 0으로 나와야하는데.... 왜 그런지 ...
이건 적용해봐야 정확하게 알거 같습니다. 이런식으로 나왔다가도 막상 적용하면 제대로 나오더라구요.
의도는 없을때 0 입니다.
아래도 comment 를 넣어서 클릭할수있게끔 했습니다.
더보기, 인용문도 살짝 손을 봤구요.
6. 사이드바에 전부 hover 효과를줘서 마우스를 갖다대면 배경이 변경됩니다.(이런것도 써야하나^^;)
아 한가지 더 태그도 일자로 정렬되게 했습니다.
어차피 사이드바의 태그도 많이 사용하지 않더라구요. 몇개만 보이게끔하고 다른것과 비슷하게 보이는것이 나을거 같아 그렇게 했습니다.
7. 카렌다를 시험적으로 넣어봤습니다. 뭐 그다지 정성을 들인것은 아니구요. 어차피 많이 사용하지 않으니....
미리보기를 통해서 참고하시길 바랍니다.