본문 바로가기

티스토리스킨/포토블로그 스킨

티스토리 스킨 - 반응형 포토폴리오B 티스토리 스킨 배포합니다.

스킨명 : 반응형 포토폴리오B 티스토리 스킨



------------------------------------------

2019-04-16 1.0.1 Patch - IE에서 상단 검색창이 밀려서 두줄로 나오는 현상 패치

------------------------------------------



사이드바 항목 전체 지원, 메인 커버슬라이드 지원, 내용보기가 지원되는 반응형 포토폴리오 스킨입니다.


이미지 슬라이드 중심 스킨으로 화면 상, 하, 왼쪽이 사용자 액션에 따라 펼쳐지는 구조로 되어 있습니다.


이미지 슬라이드만 심플하게 운영하려면

->포토폴리오A 반응형 스킨을 추천합니다.


포트폴리오 중심 블로그, 작품 전시, 홍보용 블로그에 적합한 스킨입니다.



스킨 옵션 설정에서 이미지 자동 슬라이드 기능을 켜거나 끌 수 있으며, 자동 슬라이드 간격을 조정할 수도 있습니다.

슬라이드 간격을 0으로 입력하면 자동 슬라이딩이 꺼지며, 1 ~ 60초까지 슬라이딩 간격을 조정할 수 있습니다.




커버 슬라이드를 지원합니다. 스킨 설정에서 커버 기능을 켜거나 끌 수 있으며, 커버에 표시할 글을 직접 선택할 수 있습니다.
















_주의사항


- 풀페이지 화면으로 이미지가 표시되며 브라우저 크기에 따라 이미지 크기가 자동 조정됩니다.
  슬라이드에 표시될 이미지는 글 작성시 "대표" 체크를 해야 합니다.


- 카테고리에 글이 없을 경우 빈 화면이 출력되며, 대체 이미지가 출력됩니다. 대체 이미지는 스킨 압축을 풀면 images 폴더 안에 샘플 이미지가 있으며, "error.jpg" 파일을 표시합니다.

원하는 다른 이미지로 대체가 가능하며, 이미지 파일명 변경을 원할 경우 script.js 파일의 237행의 "error.jpg" 를 다른 파일 이름으로 변경하면 됩니다.


- 공지사항, 최근글, 최근 코멘트, 링크 미리보기는 3개로 설정되어 있습니다. 레이아웃 한계로 갯수를 변경할 경우 전체 레이아웃이 깨질 수 있으므로 갯수 변경을 하지 않는 것을 추천합니다.






스킨에 포함되어 있는 샘플 빈 카테고리 대체용 이미지는 다음과 같습니다.

images 폴더의 "error.jpg" 를 대체해서 다른 것으로 변경할 수 있습니다.






_설치안내


1. index.xml 파일을 반드시 업로드해야 합니다. 티스토리 신스킨은 스킨 옵션 설정을 위해 반드시 이 파일이 필요합니다.


2. images 폴더 안에 있는 모든 파일을 업로드 해야 합니다.(이미지 파일 포함).


3. script.js 파일 업로드 후에는 웹브라우저 캐시 소거를 한번 해주시기 바랍니다. 브라우저 환경에 따라 구 사용 스킨의 자바스크립트 파일이 캐시에 남아 자바스크립트가 정상 동작하지 않는 경우가 있습니다.

사이드바 메뉴가 펼쳐지지 않는다거나 할 경우 캐시 소거를 하면 됩니다.


4. 스킨 시작 단계에서 메뉴 위아래 감춤 영역이 펼침 상태에서 시작하도록 하려면, script.js 271행의 주석표시(// - 슬래시슬래시)를 삭제하고 재 업로드 하면 됩니다.



037_photopolioB.zip


스킨 설치 방법



  • 비밀댓글입니다

  • 비밀댓글입니다

    • 1. 상단 전체보기 및 카테고리(?) 메뉴 글꼴 변경을 어디서 하는지

      스킨은 기본적으로 전역 글꼴을 정해서 1-2개만 사용합니다.
      해당 스킨은 구글 노토산스KR 1개만 쓰고 있습니다.
      전역으로 바꾸시려면 이걸 바꾸시면 스킨 전체에 적용되는 글꼴이 바뀝니다.
      style.css
      24행에 글꼴 인클루드를 하고, 29행, 62행에 글꼴 정의를 해주면 됩니다.

      탑메뉴 영역만 바꾸시려면
      24행 밑에 추가 글꼴을 인클루드 하시고
      338행
      #header .category 클래스에
      폰트패밀리속성을 정의해두면 탑메뉴 전체에 글꼴이 적용됩니다.




      2. 상단 전체보기 및 카테고리 메뉴와 메인 커버 슬라이드의 간격차이를 어떻게 늘리는지

      질문이 이해가 안됩니다. 상단 카테고리 영역을 넒히는 건지, 위에서 부터 간격을 띄려는 건지...




      2-1. 상단 검색창이 위 창에 과하게 올라가 끊겨서 보이는데 이 또한 간격 조절을 어떻게 하는지

      검색바는 왼족 블로그 타이틀과 라인을 맞춘것입니다.
      강제로 맞추시려면 css를 조정해서 맞출수는 있습니다.
      다만 아래로 너무 내리게 되면 위쪽으로 감춤 처리되었을 때 검색바가 걸쳐져 보이게 되기 때문에 추가로 감춤 처리를 해야하는 번거로움이 생기게 됩니다.

      테스크탑 css중
      #header .search 를 찾아서

      아래 내용으롤 대체합니다.

      #header .search {
      position: absolute;
      right: 15px;
      margin: 0 auto;
      margin-top: -32px;
      display: none;
      }
      #header.activ .search{
      display: block;
      }
      이렇게 고치면 상단 바의 중간쯤에 걸치게 됩니다.
      margin-top: 값을 조정하면 적당히 위치를 맞출 수 있습니다.

      #header.activ .search
      는 걸치는걸 막아주기 위한 것입니다.





      3. 알려주신대로 설정했는데 하단 <공지사항, 최근글, 최근 코멘트, 링크 미리보기> 칸이 없고 그냥 슬라이드만 보여지는데
      하단 공지사항, 최근글 최근 코멘트를 보여지게 하려면 어떻게 해야하는지

      우측 아래 위쪽 펼침 화살표를 눌렀을 때 사이드바 항목이 보이지 않는 것은 티스토리 설정에서 해당 사이드바를 꺼놨기 때문입니다.

      관리자 화면 왼쪽 메뉴 꾸미기 > 사이드바에서 표시할 사이드바 항목들을 배치해야 블로그 화면에 표시가 가능해지게 됩니다.
      스킨은 표시가능하게 설정된 것만 화면에 노출할 수 있습니다.

  • 비밀댓글입니다

    • 1.
      ie에서만 보이는 현상입니다.
      버그입니다.

      검색바 크기를 조정을 한번 했는데 이때 ie에서 깨지는걸 확인을 못한거 같습니다.
      지난번에는 블로그를 들어가볼 수 없어서 문가제 뭔지 이해를 못했습니다.

      style.css
      309행
      width: 278px;

      276이하로 줄이면 됩니다.
      276이나 274 추천

      커스터마이징을 하셨으면
      #header .search input
      으로 검색하면 그 안에 있습니다.



      2.

      script.js 파일
      270행에

      $('.btn-unfold').trigger('click');

      을 붙여넣고 업로드하면 시작할 때 펼쳐지면서 시작합니다.


      아얘 닫을 수 없게 닫는 화살표까지 안보이게 하려면

      $('.btn-unfold').hide();

      을 위에 추가한 행 밑행에 붙여넣고

      258행 , 264행을 지우면 됩니다.
      ($('.article-info.currenthide') 로 시작...)

      script.js 수정 후 업로드 했는데 반영이 안되면 티스토리 특성인 script.js 파일 잉 캐시에 남아서 그런겁니다.
      웹브라우저 캐시 소거를 한번 하시고 갱신하면 반영되어 보일겁니다.



      3.
      스킨 원본기준
      style.css
      356행 357행 사이에

      #header .category > ul > li a{
      margin-right: 10px;
      }
      붙여넣고
      숫자를 10보다 크게 하면 간격이 조금씩 넓어집니다.
      50px 정도 주면 조금 많이 떨어져 보입니다.
      붙여넣는 위치는 관리상 편의니까 잘 모르겠으면 style.css 맽끝에 붙여넣어도 무방합니다.

      꼭 끝까지 완성하시기 바랍니다. 화이팅임다.