[gabriel] 티에디션 슬라이더 설명 및 질문/답변
티에디션 기초 설정법은 http://wallel.com/223 이 글을 읽어주세요. 현재 티에디션에 사용되는 슬라이더는 Owl Carousel이라는 jQuery 플러그인을 사용하고있습니다. (MIT License) 모바일도 완벽 지원하고, 구버전 IE도 지원하기에 선택했는데요. 이 플러그인은 가벼운데다 기능도 매우 뛰어나고 거기다 수정마저 쉽습니다! (세상에!) 기본 기능은 공식 홈페이지를 가보시면 아주 이해하기 쉽게 데모 페이지들과 그 소스 예제가 존재합니다. (단 직접 수정할 경우 제가 짜놓은 소스 때문에 꼬일 수 있습니다) 이번에 작성할 가이드는 Gabriel 3.0 에서 사용중인 슬라이더의 소스 설명과 질문/답변입니다. style.css #owl-slider { margin-bottom: 30px..
티스토리/gabriel 2015. 10. 13. 16:15[gabriel] 사진 두 개, 세 개 동시에 배치하기
※ 이 가이드는 gabriel 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다. 티스토리 에디터에는 사진을 첨부할 때 사진을 가로로 두 개, 세 개 동시에 넣을 수 있습니다. 하지만 이게 테이블 소스를 사용하는데 특정 class 를 추가하지 않으면 틀이 깨집니다. 우선 이렇게 사진을 첨부하고, HTML 편집 모드로 들어갑니다. 추가된 테이블 소스에 class="dual" 을 추가하면 됩니다. 만약 세 개를 넣는다면 class="dual" 이 아닌 class="triple" 을 넣으면 됩니다.
티스토리/gabriel 2015. 10. 12. 20:15[gabriel] Gabriel 스킨에서 사용하면 유용한 태그
※ 이 가이드는 gabriel 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다. h3 태그를 사용하여 본문에 제목 효과를 줄 수 있습니다. 제목 제목 제목 제목 이렇게 사용하면 됩니다. 단 제목가 아닌 그낭 제목 만 사용해야 합니다. Fieldset fieldset 태그를 사용할 수 있습니다. 제목 내용 이렇게 사용하면 됩니다. 이것 또한 로 감싸지지 않게 주의하세요. PRE, CODE 코드를 강조하거나 소스 코드를 넣을 때 사용하시면 좋습니다. img { max-width: 100%; border: 0; } fieldset { padding: 2%; border: 1px solid #ddd; } sup, sub { height: 0; font-size: 12px; line-height: 0; } if..
티스토리/gabriel 2015. 10. 12. 19:59[gabriel] 티에디션 설정하기
3.0 으로 패치되면서 티에디션 아이템의 소스도 전부 바뀌었습니다. 슬라이더 아이템 또한 unSlider 에서 Owl Carousel 로 교체됐구요. 아이템 소스는 보내드린 스킨 압축 파일 tedition 이라는 폴더 안에 따로 들어있습니다. 초기 설정 티에디션을 활성화 하고 관리 페이지로 넘어갑니다. 기존에 추가되 있는 아이템을 모두 제거하시고 아무것도 없는 상태로 만들어주세요. 이런 상태로 시작을 해야합니다. 우측 상단을 보시면 너비보정 버튼이 있습니다. 너비를 최대로 늘려주세요. 실제 화면에선 강제로 크기를 최대로 지정해놔서 늘이기를 눌러도 변화가 없을겁니다. 하지만 꼭 최대로 늘려주셔야합니다. Q) 얼마나 눌러야 최대인가요? A) 여...열번정도만... :) 아이템 추가 파란 + 버튼을 눌러 아이..
티스토리/gabriel 2015. 10. 12. 17:47[gabriel] 카테고리별 목록 다르게 만들기와 기능 소개
Gabriel 3.0 버전부터 추가된 기능입니다. 카테고리별로 목록 디자인을 다르게 설정할 수 있습니다. 물론 블로그 전체적에 적용할 수 있구요. 소스는 의외로 간단하게 구성되어 있는데요, skin.html 파일 제일 하단을 보시면 if(title=="웹진") { root.className += ' list-webzine'; }; if(title=="웹진/사이드바 제거") { root.className += ' list-webzine sidebar-off'; }; if(title=="웹진/사이드바 좌측") { root.className += ' list-webzine sidebar-left'; }; if(title=="앨범") { root.className += ' list-album'; }; if(ti..
티스토리/gabriel 2015. 10. 12. 13:57[square] 사이드바 크기 조절 및 그에 따른 수정법
몇몇 분들이 사이드바 크기 조절에 관해 문의를 하셨습니다. 자주 묻는 질문 게시물에 추가할까 하다가 내용이 좀 복잡할거같아 따로 작성합니다. 일단 가이드를 시작하기 전에 사이드바와 본문이 어떻게 만들어져 있는건지 대충 설명해 드리자면, 사이드바 컨텐츠 사이드바는 공중에 떠서 position: fixed 라는 속성으로 고정되어 있고,컨텐츠는 margin-left 값으로 사이드바 크기 + 30px 정도로 여백을 설정해뒀습니다.※ 둘이 같이 바닥에 붙어있는 게 아닙니다. 따라서 사이드바 크기를 수정하면 컨텐츠의 margin-left 값도 수정해줘야 합니다. 이제 수정법을 알아볼까요? ※ 수정하기에 앞서 백업은 필수이자 의무입니다.※ 이 가이드는 스킨 버전 1.4.4를 기준으로 합니다.※ 2.1 에 맞게 수정되..
티스토리/square 2015. 9. 10. 19:11