부트스트랩 티스토리 스킨에서 태터데스크(첫화면 꾸미기)을 사용할때의 팁한가지를 알려드리겠습니다.

하나의 예제로 http://superzun.tistory.com/ 를 들겠습니다.


오해는 마세요. 방문자수가 늘면 늘었지 줄진 않을겁니다. ㅎㅎㅎㅎ

만약 그냥 사용하시면 아래 이미지처럼 배경이 없이 들어갑니다.




부트스트랩 스킨은 동일한 인터페이스를 가지고 있습니다.

바로 위젯(.widget)을 사용하는데요.

스킨에 기본적으로 스타일이 입혀져 있으니 아래의 코드를 활용해서 사용해보세요.



위젯 - html

<div class="widget">
	<div class="widget_header">
		제목이 들어가는 곳
	</div>
	<div class="widget_content">
		내용이 들어가는 곳
	</div>
</div>

첫페이지 꾸미기를 잠시 보자면 아래처럼 제목부분과 내용부분을 분리해서 작성하면 편합니다.




몇번 해보시면 잘 될겁니다. 만약 해도 안된다면 댓글 주세요.

그럼 대략 아래처럼 됩니다.






[티스토리/스킨배포] - 부트스트랩 티스토리 스킨 Bootstrap_TS_ver.3.2 배포



추가합니다.

아래 댓글에 잘 안된다고 해서 제가 사용하는 치환자 및 html 코드를 그대로 올려드립니다.

위와 같은 형식인데요. 코드를 올려드립니다.


티스토리 첫화면 꾸미기 html

<div class="widget">
	<div class="widget_header">
		<h3>
			<s_more>
				<i class="icon-bookmark"></i><a href="[##_list_link_##]">[##_list_title_##]</a>
			</s_more>
		</h3>
	</div>
	<div class="widget_content">
		<s_list>
			<div class="TD_list">
				<span class="TD_headline"><a href="[##_item_link_##]">[##_item_title_##]</a></span>	
				<span class="TD_date"> [##_item_date_##]</span>
			</div>
		</s_list>
	</div><!-- //widget_content -->
</div><!-- //widget -->


관련된 스타일은 아래와 같으니 추가해주세요.


티스토리 첫화면 꾸미기 css

#ttDesk_Container .td_list3rd .widget_content {
	height: 280px;
	-ms-overflow-y: auto;
	overflow-y: auto;
}
#ttDesk_Container .widget_content {
	padding-top: 10px;
}


위에서 해당되는것은 .widget_content 밖에 없습니다.


신고

댓글

  1. 2012.10.24 19:49 신고 BlogIcon 스마트 메신저  댓글주소  수정/삭제  댓글쓰기

    안녕하십니까.
    말씀하신데로 해 봤는데요, 바탕은 채워지는데 다음 사항이 않됩니다.

    1. 대문님 처럼 목록표시 레이아웃을 3단으로 했는데, 수정 후 폭이 넓어지면서 1단이 아래로 밀려서 나옵니다.
    2. 컨텐츠 높이가 표시되는 글 양에 따라 다릅니다.
    3. 컨텐츠 리스트 앞머리에 > 표시 그림이 안 나옵니다.

    어떻게 해야 하는지요?
    부탁 드립니다.

    • BlogIcon 대문 demun 2012.10.24 21:33 신고  댓글주소  수정/삭제

      일단 제가 사용하는 css 를 넣어보세요.
      css 맨아래에 추가하세요.

      /* ttDesk 티스토리 첫화면 */
      .td_list2nd:nth-child(2n) {
      float: right;
      }
      .TD_more {
      background: none;
      padding: 0 5px;
      }
      .widget_header .TD_more {
      padding: 0 5px !important;
      line-height: 18px;
      }
      .TD_list .TD_headline {
      font-size: 13px !important;
      }
      #ttDesk_Container .td_list3rd .widget_content {
      height: 280px;
      -ms-overflow-y: auto;
      overflow-y: auto;
      }
      #ttDesk_Container .widget_content {
      padding-top: 10px;
      }


      그리고 다시한번 해보세요.

    • BlogIcon 스마트 메신저 2012.10.24 23:13 신고  댓글주소  수정/삭제

      네, 보내주신 내용 추가했더니 컨텐츠 리스트 글자만 더 커지고 다른 변화는 없습니다.

    • BlogIcon 대문 demun 2012.10.25 09:19 신고  댓글주소  수정/삭제

      내용을 추가했습니다.
      위에 본문에 나와잇는대로 사용해보세요.

      저걸 3개를 사용한겁니다.
      너비는 자동으로 조절이 되서 하나라 밑으로 처지는 현상은 발생하지 않습니다.

      높이의 경우 height: 280px 를 주고 overflow-y: auto; 를 줘서 만약 길경우는 스크롤이 생깁니다.
      아닐경우 전부 280으로 맞추지요.