[Tistory Odyssey Skin] 스킨 자체 문제점 수정하기

 

#1 자체 문제점이라는 게 무엇?

  스킨을 수정하면서 블로그를 사용하다 보니 '어? 이건 왜 이러지?' 싶은 문제점들이 몇 가지 보이기 시작했습니다.

  처음엔 내가 뭔가 수정하다가 잘못 건드렸나 보구나... 싶었는데 다른 오디세이 스킨을 쓰는 사람들 모두에게 이 증상이 나타나고 있는 것을 확인했습니다.

  공식적으로 배포한 스킨 자체의 문제였기에 해당 문제를 찾아서 제 맘대로(?) 수정해 보았습니다.

 

 

#2  오류 1. 그리고 수정.

  이 부분은 오류...라고 하기엔 별 문제는 아니고, 그렇다고 정상이라고 보기엔 애매한 것 같아 일단 수정은 하였습니다.

  비교를 위해 우선 수정 전, 후 이미지부터 확인해 보시고 원하신다면 따라서 수정하시면 될 거 같습니다.

 

  웹 브라우저의 사이즈를 조절하다보면 PC 모드와 Mobile 모드 사이의 애매한 간격에 배너 부분이 줄어들지 않고,

  블로그 제목이 정렬도 되지 않은체 넓은 공간을 차지하고 있는 구간이 있습니다. 이 구간을 삭제하였습니다.

(좌) 수정 전 / (우) 수정 후

 

수정하기

  [style.css:1038] .header .area-gnb { ... } 항목에서 margin-top:30px; 로 되어있는 부분을 삭제 또는 주석 처리를 하면 해결됩니다.

    .header .area-gnb {
        width: 100%;
        margin-bottom: 0;
        border-top: 1px solid #efefef;
	margin-top:30px;	/* 여기 한줄을 삭제 또는 주석 처리 */
    }

 

 

#3 오류 2. 그리고 수정

  이 부분은 확실히 오류인 거 같은 문제입니다.

  모바일 모드로 게시물을 확인해보면 가장 아래쪽에 페이지 넘김과 더보기 아이콘이 딱 붙어있는 것도 문제인데, 더보기를 눌러보면

아무런 기능도 없이 사라집니다.

 

 

수정하기

  페이지 번호와 더보기의 간격을 적절히 띄울수도 있지만... 

  더보기 자체의 기능이 없는 기묘한 상황인지라 해당 버튼 자체를 보이지 않게 하였습니다. 

  [style.css:532] .paging-more { ... }의 내용 중 display : block; 을 display: none;으로 변경해 주면 완료입니다.

.paging-more {
    display: none;   /* 이곳을 이렇게 바꿔주세요 */
    width: 100%;
    height: 42px;
    border: 1px solid #e8e8e8; 
    font-size: 13px;
    line-height: 42px;
    color: #777;
    text-align: center;
    text-decoration: none;
}

 

여기까지 진행하였다면 오디세이 스킨의 2가지 문제점의 수정이 완료되었습니다.