본문 바로가기

티스토리스킨/반응형2단 스킨

티스토리 스킨 - 반응형 2단 다크라인2 스킨 배포합니다.

스킨명 : 반응형 2단 다크라인2

 

 

어두운 배경색에 특화된 스킨입니다.

글자색이 흰색계열로 고정되어 있기 때문에 스킨 옵션 설정할 때 밝은 스킨 배경, 섹션 배경을 설정하면 글자가 잘 보이지 않게 되므로 주의해야 합니다.





스킨 주요 특징

 

40가지 이상의 스킨 옵션 설정 항목을 사용해 원하는 모든 블로그 레이아웃을 만들 수 있습니다.

스킨 옵션 설정에 대한 상세 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.


  • 스킨 배경색, 각 컨텐츠 섹션별 배경색, 테두리 라인 색/스타일 설정 가능
  • 1단, 2단 레이아웃 설정 가능
  • 사이드바를 왼쪽, 오른쪽 배치 가능
  • 카테고리를 탑메뉴에 배치 가능
  • 다양한 커버 슬라이드 애니메이션 효과
  • 커버 슬라이드 교체 시간 설정 가능
  • 블로그 전체 배경 및 헤더 배경 이미지 설정 가능 
  • 리스트와 썸네일 방식 글 목록 보기 선택
  • 모바일용 컴팩트 레이아웃 설정 지원




다크라인2에서 새롭게 추가/변경된 스킨 옵션 항목



  • 레이아웃 - 카테고리 위치 : 헤더 영역이 2개로 구분되어 헤더 상단과 헤더 하단에 위치시킬 수 있는 옵션 추가
  • 공통/페이지 - 모서리 둥글게 : 전체 스킨에 거쳐서 각 섹션 및 개별 항목들 전체 요소에 둥근 모서리가 적용됩니다.
  • 공통/페이지 - 테두리 라인 표시 : 각 섹션별로 테두리 라인을 표시합니다.
  • 공통/페이지 - 테두리 라인 컬러 : 테두리 라인 색상을 지정합니다. 테두리 라인 표시가 켜져있어야 적용됩니다.
  • 공통/페이지 - 테두리 라인 스타일 : 테두리 라인의 모양을 지정합니다. 테두리 라인 스타일은 실선, 점선, 긴점선 중 한가지를 선택할 수 있습니다. 테두리 라인 표시가 켜져있어야 적용됩니다.
  • 공통/페이지 - 섹션 배경 컬러 : 각 컨텐츠 섹션 영역의 배경색을 지정할 수 있습니다. 스킨 배경색이 보이도록 하려면 투명색을 지정하면 됩니다.





* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.(스킨 기본 설정값으로 설정된 상태입니다.)


 

패치 내역

 

  • 2019-07-29 1.0.1 - 검색폼 버그 패치




설치 주의사항

 

  • 스킨 적용시 index.xml, script.js 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.







  • 안녕하세요!
    올려주신 스킨 너무너무 예뻐요
    어제 거의 하루 종일 붙잡고 이것저것 수정했거든요

    그런데 모바일에서 게시글로 들어가면 배경 이미지가 자동으로 확대되면서 화질이 엄청 많이 깨지는데
    이건 도저히 혼자 해결을 못하겠어요 ㅜㅠ
    모바일에서 접속했을때 배경 이미지 사이즈를 자동으로 변경하지 않으려면 어디를 손봐야할까요?

    문제를 다 해결해주십사 요청하는건 아니고 간략한 팁이라도 주시면 감사하겠습니다 ㅜㅠ

    • 배경 이미지가 모바일 글보기에서 어떻게 깨지는지 확인이 안됩니다.
      폰으로 들어가봤는데 정상적으로 배경이미지가 잘 보이고, 특별히 이상은 없어보입니다.

  • 안녕하세요. 스킨 아주 잘 사용하고 있습니다! 문의 사항이 있어 댓글 남겨봅니다..
    https://dogbird-foot.tistory.com/9
    https://dogbird-foot.tistory.com/21

    9번 링크 게시글의 가장 아래에 보시면 제가 외부 링크를 달아둔게 있는데요.
    원래 다크라인2 스킨은 기본 글씨체가 하얀색이더라구요. 근데 링크 부분의 글씨색은 타이틀이 검정, 링크가 회색으로 보여서 배경이 검정색 계열이다보니 잘 글씨가 안보이더라구요,,

    21번 링크 게시글은 게시글 처음 부분에서 조금 내려보면 첨부파일을 올려두었는데 이것도 마찬가지로 글씨가 검정색이라 잘 보이지 않습니다. 첨부파일은 폴더이미지 같은게 들어가던데 그것도 짙은 회색이라,,, 보이질 않네요

    포스팅할때 HTML모드로 바꾸어봐도 링크만 달려있지 폰트색상이나 박스 색상 등은 없더라구요,,,
    html이나 css의 어느부분을 수정하면 되는지 작은 팁이라도 주십사하고 댓글 남겨봅니다 ㅜㅜ

    • 두가지 모두 신스킨에서 새로 추가되어 티스토리 시스템에서 뿌리는 css가 입혀진 것입니다.

      가능한 경우 스킨단에서 이걸 강제로 재적용해서 풀어줘도 되는데 배포하는 스킨 기준에서는 이렇게 시스템 css를 과도하게 재적용을 하면 나중에 티스토리 시스템 업데이트시 예상하지 못한 문제가 생길 수 있습니다.

      스킨패치를 할지는 좀더 봐야할 거 같고..

      수정할 부분만 알려드리겠습니다.

      스킨원본 기준
      style.css 59행

      전역 html태그 css 지정에

      color: #fff !important;

      를 추가해서 전역 글자색이 흰색이 되게 강제 지정


      아니면 개별로 글내용의 해당 되는 부분만 적용하려면

      .entry-content a -> 2557행
      .entry-content p ->2494행

      두개의 css 클래스 속성으로
      color: #fff !important;
      를 추가, 또는 변경해주면 됩니다.


      아얘 범위를 더 좁히면
      style.css
      .entry-content 클래스 근처에(2475행 이하 적당하 위치에 붙이면 됩니다.)

      figure.fileblock .filename, #tt-body-page figure.fileblock .filename{
      color: #fff;
      }

      figure[data-ke-type='opengraph'] div.og-text p.og-title, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title{
      color: #fff;
      }

      figure[data-ke-type='opengraph'] div.og-text p.og-desc, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc{
      color: #fff;
      }

      figure[data-ke-type='opengraph'] div.og-text p.og-host, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host{
      color: #fff;
      }

      이런 코드를 넣어주면 css 사용 원리에 맞춰 해당되는 신스킨 추가 블록부분만 오버라이드를 해주는게 되는데, 너무 번잡스럽고 복잡해집니다.

      편한걸로 블로그에 맞춰서 적용해 쓰면 될것 같습니다.

    • 감사합니다.
      첫번째 방법은 아마 전역변수니까 연관된 대부분의 글씨가 흰색이 되버릴거 같아서 두번째 방법으로 스타일 값을 지정해주니 잘 수정되었네요! 감사합니다 ㅠㅜㅠ 정말 너무 감사해요.
      대충 어떻게 해야한다~ 하는건 감이 오는데 정확한 변수명을 알 방법이 없어서 자꾸 질문드리게 되네요. 즐거운 하루 되세요~!

  • 와 너무 깔끔하고 좋네요. 잘 쓰겠습니다~!!^^

  • 이것저것 만져보고 있는데 혹시 본문 글 나오는 부분 너비를 조금 줄이는 방법을 알 수 있을까요?
    px을 이리저리 만져봤는데 자동 크기 조절이라 그런지 변하질 않네요 ㅠㅠ

    • 글나오는 부분 너비라는게 아마도 글보기 컨텐츠 영역만을 의미하는 것 같은데...

      style.css 에서
      .entry-content
      검색해서
      속성으로

      margin: 0 30px;

      정도 주면 글 내용 좌우에 여백이 좀 들어갑니다.

      원하는게 이게 아니면 글 나오는 부분 너비가 어느 부분을 말하는지 설명을 좀더 자세히 해주시면 좋겠습니다.

    • 제가 설명을 이상하게 했네요 죄송합니다. 본문 너비(실제 글쓰면 글이 나오는 부분)를 좀 줄이고 싶습니다!


      /* 글보기 */
      .entry-content{
      color: #efefef;
      }
      .entry-content h1 {
      margin: 50px 0 20px;
      font-size: 1.6875em;
      }
      .entry-content h2 {
      margin: 50px 0 20px;
      font-size: 1.5em;
      }
      .entry-content h3 {
      margin: 50px 0 20px;
      font-size: 1.3125em;
      }
      .entry-content h4 {
      margin: 50px 0 20px;
      font-size: 1.125em;
      }
      .entry-content p {
      margin-bottom: 24px;
      font-size: 0.9375em;
      line-height: 1.6;

      말씀하신 부분에 앞에 숫자랑 뒤의 숫자를 다 조정해봤는데 본문에 위아래 너비가 바뀌고 좌우 너비가 바뀌지 않아서요..!

      헛 지금 깨달은건데 혹시 파일 자체를 수정하고 재업로드하는 방식일까요? 한번 해보겠습니다!

    • 티스토리 스킨 편집기 화면에서 직접 위치를 찾아서 편집해보세요.

    • 찾았습니다! ㅠㅠㅋ
      제가 설명을 잘 못드려서 서로 다른 곳을 보고 있었던 것 같네요.ㅠㅠ

      /* 내용 */
      #content{
      position: relative;
      float: left;
      width: 800px;
      margin: 0;
      box-sizing:border-box;
      }
      이부분에 width부분을 고치니까 컨텐츠 너비가 줄어드네요. 좋은 스킨 만들어주셔서 감사합니다. 잘 쓸게요!^^

    • 해결되었네요 ^^;

  • 안녕하세요. 오랜만에 다시 찾아왔습니다. ㅎㅎ 스킨 감사히 잘 쓰고 있습니다.
    혹시 여기 블로그처럼 블로그 내부 글들을 검색하는 기능을 어떻게 켤 수 있을까요?
    아무리 검색해봐도 나오질 않네요 ㅠㅠ
    검색해보면 다 구글 검색 노출 이런것만 뜹니다.. ㅠㅋ

    • 스킨 소스를 커스터마이징 하면서 사이드바 검색어 입력폼 영역을 삭제한 것으로 추측됩니다.

      <div id="sidebar-search" class="box_aside">
      <div class="search ">
      <div class="inner">
      <input type="text" name="search" value="" placeholder="검색어를 입력하세요." onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/'+looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value='';return false;}catch(e){} }">
      <button type="submit" class="" onclick="try{window.location.href='/search/'+looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value='';return false;}catch(e){}">검색</button>
      <div class="close-search"></div>
      </div>
      </div>
      </div>

      이 코드를 복사해서

      skin.html
      에서 id="wrap_etc" 이걸 검색한 후 이 줄 위에 붙여넣으면 사이드바 최상단에검색바가 표시될겁니다.


    • 소스 붙이니까 되네요 감사합니다..!

      붙이니까 검색창이 두 개 떠서 찾아보니까

      <div id="wrap">

      <div class="nav">
      <button type="button" class="mobile-menu"><span>메뉴</span></button>

      <div class="search <s_if_var_open-search> on</s_if_var_open-search>">
      <div class="inner">
      <s_search>
      <input type="text" name="" value="" placeholder="검색어를 입력하세요." onkeypress="if (event.keyCode == 13) { }">
      <button type="submit" class="<s_if_var_open-search> attach</s_if_var_open-search>" onclick="">검색</button>
      <div class="close-search<s_if_var_open-search> attach</s_if_var_open-search>"></div>
      </s_search>
      </div>
      </div>
      </div>


      이런 코드가 있어서 검색창이 두 개가 돼서 이코드를 지우고 주신 코드를 해당 위치에 붙이니까 정상적으로 뜨네요 ㅎㅎ 제가 사이즈 고치면서 이것저것 만지다가 뭔가 부분적으로 삭제를 했나봅니다 ㅠㅋ

      해결해주셔서 감사합니다. 번창하세요!! ^^ㅎ


닫기