Mess Around 1.1

Mess Around 1.1 스킨 모습입니다.



스킨명

Mess Around 1.1


개요

어지럽혀 보고 싶어서 만든 스킨입니다. 포스트잇과 구겨진 종이[각주:1], 여기저기 튄 잉크가 컨셉입니다. 예, 정말 메스 어라운드하죠. 하지만, 내공이 부족하여 윗부분에 조금 어지럽하는 척만 하고 말았습니다. (다음번엔 꼭!)

(참고로 제가 '어쿠스틱 마인드'의 써머즈입니다. 어쿠스틱. ^^)


내용

- 1단형 스킨입니다.

- 사이드바는 하단에 위치하고 있지만 태터툴즈의 사이드바 기능을 지원합니다.
   (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)
   예를 들어 카테고리가 옆으로 주루룩 나오기 때문에 보기 싫으신 분들은 살짝 빼두실 수 있다는 뜻이지요.

- 화면이 세로로 길어지는 바람에 위 아래로 이동하는데 불편하여 자바스크립트를 넣어두었습니다.
   마우스를 더블클릭하면 제일 아래로, 혹은 제일 위로 이동합니다. 한번 해보세요.
- 자바스크립트 에러가 난다고 합니다. 이 기능을 빼야 할 것 같습니다;;;

- 블로그 로고 이미지를 보여줍니다.
  가로 크기 80px 이상인 이미지들도 무조건 80px 로 고정되서 표시가 됩니다.
  처음부터 적당한 크기로 줄여서 사용하시는 게 좋고, 가로 세로 크기가 비슷한 이미지가 보기 좋습니다.

- 가로폭은 기본적으로 650px이지만 원하는 폭으로 수정하기가 그리 어렵지 않습니다.
   style.css 와 index.xml 만 수정하면 됩니다.
  수정 방법은 style.css 안에 주석으로 넣어두었습니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Mess Around 1.1


그리고

- 본문폭 500px 블로그, 800px 블로그를 위한 스타일시트와 xml를 만들어 두었습니다.
  다운 받아서 이름만 style.css 와 index.xml 로 변경해서 사용하시면 됩니다.

invalid-file

CSS & XML for various widths (Mess Around 1.1)



그리고

- 이 스킨을 티스토리에 설치하시면 자바스크립트 에러가 난다고 합니다. 더블클릭하면 위아래로 이동하는 기능 때문인데요, 불편하신 분들은 해당 스크립트를 삭제하시고 쓰시면 되겠습니다. (설치형에서 테스트할 때는 별다른 에러가 나지 않았는데 티스토리에 설치하니 나는 것 같군요.)

skin.html 의 11번째줄 <script language=javascript> 부터 51번째줄 </script> 까지를 삭제하시면 됩니다.
  1. 참고로 종이 구겨진 건 예전에 진짜로 종이를 구겨놓고 카메라로 찍어서 손봤던 샘플입니다. ^^ [본문으로]
,
화면에 표시되는 페이지가 아주 길거나 필요한 버튼이 화면의 최하단에 있거나 하면 매번 스크롤 하는 게 불편할 수 있습니다. 그럴 때는 보통 키보드의 [home], [end] 버튼을 누르면 되지만 마우스 잡았다가 키보드 버튼 누르는 것 역시 불편하지요. 또한 각종 마우스 제스쳐 프로그램[각주:1]을 사용하면 되지만 그마저도 사용하지 않으면 딱히 방도가 없지요.

그럴 때는 페이지에 아래와 같은 자바스크립트를 넣는 겁니다. <head>와 </head> 사이에 아무데나 넣어주면 됩니다. 그러고 난 후 더블클릭하면 화면의 최상단으로, 다시 더블클릭하면 최하단으로 이동합니다. :)

<script language=javascript>
<!--
toggle=0;
function dblclick() {
    if (toggle==0) {
        var sc=99999; toggle=1;
    } else {
        var sc=0; toggle=0;
    }

    window.scrollTo(0,sc);
}

if (document.layers) {
    document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;

var tempX = 0;
var tempY = 0;

function getMouseXY(e) {
    if (IE) { // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    } else { // grab the x-y pos.s if browser is NS
        tempX = e.pageX;
        tempY = e.pageY;
    }

    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}
    return true;
}
// -->
</script>

제가 만든 스킨들에도 넣어주면 아주 좋겠죠? 다음 스킨들부터는 이 스크립트를 넣을 생각입니다. 이제까지 나온 스킨들에는 죄송하지만 각자 넣어주세요. ^^
  1. 파이어폭스 같은 경우는 All-in-One Gestures,
    인터넷 익스플로러 같은 경우는 IEToy,
    오페라의 경우에는 간단한 마우스제스쳐 기능이 내장되어 있습니다. [본문으로]
,
Docs Triple 1.1

Docs Triple 1.1은 이렇게 생겼습니다.


스킨명

Docs Triple 1.1


개요

일종의 닥스 3종세트 (^^) 입니다. 가격은 3만 9900워… 코발트 블루, 브라운, 그린 이렇게 3가지 테마의 스킨 모음입니다. 좌측에 관리자 로그인 버튼 등의 조그만 스몰바가 위치해 있지만 기본형의 느낌을 그대로 갖고 있는 스킨입니다.

(압축파일을 풀면 총 3개의 스킨이 들어있습니다. 각각 Docs Green 1.1, Docs Blue 1.1, Docs Brown 1.1 입니다.)


내용

- 총 3가지 테마의 스킨이 들어있습니다.

- 각각의 스킨은 모두 동일한 모양이며 2단형 스킨입니다.

- 사이드바는 하단에 위치하고 있지만 태터툴즈의 사이드바 기능을 지원합니다.
   (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 좌측에 있는 스몰바에는 RSS, 로그인, 글쓰기 이렇게 3가지 버튼이 들어있고,
  상단의 블로그 메뉴는 위치로그, 태그, 방명록 이렇게 3가지 버튼이 들어 있습니다.

- 하나의 포스트에서 댓글과 트랙백 영역은 색깔을 달리하여
  하나의 문서가 본문/피드백으로 구분되는 효과를 주려 하였습니다.

- 블로그 로고 이미지를 보여줍니다.
  단, 가로 220px 이상이 넘지 않게 해주세요.

- 가로폭은 기본적으로 610px이지만 원하는 폭으로 수정하기가 그리 어렵지 않습니다.
   style.css 와 index.xml 만 수정하면 됩니다.
  수정 방법은 style.css 안에 주석으로 넣어두었습니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 최대한 웹표준을 준수하려고 노력했습니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Docs Triple 1.1


그리고

▶ 본문폭 500px 블로그를 위한 스타일시트 다운받기 (3가지 색상 모두 있습니다.)

주의 : 만약 이 스타일시트를 받으면 index.xml 마지막 부분에 있는 contentWidth 값도 변경시켜주세요.
    <contentWidth>610</contentWidth> 이 부분을
    <contentWidth>500</contentWidth> 이렇게 변경시켜야 블로그를 사용하기 편합니다.


그리고 2

▶ 혹시 사이드바의 크기를 300px 이상으로 하시고 싶은 분들은 아래 파일 받으셔서
    자신이 선택한 색깔을 골라  이미지 디렉토리에 덮어 쓰세요.
    그렇게 크게 하실 분이 있을까 싶었는데 있었군요;;;
     (사이드바를 600px까지 사용할 수 있게 됩니다.)


그리고 3

- 참고로 이 스킨에 사용한 폰트는 윈도우에 기본으로 들어있는 Tahoma 입니다. 각각의 버튼이나 타이틀들이 심플한 편이니 비교적 쉽게 다른 버튼이나 타이틀을 추가하거나 수정하실 수 있을 듯 합니다.
,