하단 스크립트 카테고리명 수정하면 됨 

더 추가하고 싶으면 || ptn == '/category/카테고리명' 추가 

카테고리명에 한글 & 특문 들어가면 

해당 카테고리 우클릭 - 링크 복사 

http://shore24-test2.tistory.com/category/%EA%B8%80%EB%AA%A9%EB%A1%9D 

주소가 이렇게 나오는데 category/ 이 뒤에 코드만 복사하면 됨 

%EA%B8%80%EB%AA%A9%EB%A1%9D 이 부분만

html에서 컨트롤+f로 카테수정 찾은 후 href, title 수정하면 되는데

카테고리명에 한글, 띄어쓰기, 특수 문자가 포함돼있으면

https://meyerweb.com/eric/tools/dencoder/

여기서 변환한 후 입력해야 스킨이 정상 작동됨 (굳이 안 해도 연결은 되지만 웬만하면 변환한 거 입력해주세요..)

ex) 

href="/category/해안" x

href="/category/%ED%95%B4%EC%95%88" o

Encode 누르면 변환 됨

(title 말고 href만 이런 방식으로 입력하시면 됩니다)

1. XEIcon (현재 사용 중인 아이콘 대부분 이 아이콘임)

http://xpressengine.github.io/XEIcon/library-2.3.3.html

2. Font Awesome

https://fontawesome.com/icons?d=gallery&m=free

저는 그냥 팩맨 쓰려고 오른쪽에 넣은 것일 뿐.. 왼쪽에 넣고 싶으면 옮기셔도 됩니다

엄청 간단해요

스킨 편집 - html 들어가서

<a class="cate_b">~~~</a> 이걸 잘라내기한 후 <div class="category"> 이거 바로 위에 있는 <div class="c-menu"> ~~~ </div> 이 안에 넣으면 끝 

혹시 팩맨 방향을 바꾸고 싶다면 xi-flip-horizontal 이거 지우면 끝

html </s_t3> 바로 위에 넣으면 됨

html에서 카테수정을 찾은 후 그 밑에 카테고리명을 다 변경하면 됨.

href랑 title을 똑같이 맞춰야 됨.

어렵진 않지만.... 귀찮으니까 웬만하면 그냥 쓰시는 걸 추천합니다... 

우선 html에서 컨트롤+f로 cate-icon을 찾은 후 그 안에 원하는 아이콘을 넣는다.

ex) <span class="cate-icon"><i class="아이콘"></i></span>

이렇게 넣으면 됨 아이콘은 폰트어썸 혹은 xeicon 넣어야 됨 (팁 기준은 xeicon)

그 후에 html 상단에 있는 style 부분을 수정해야 됨

, #header .h-menu .category a .a-info

#header .h-menu a .cate-icon:hover, #header .h-menu .category a .sl-cate, .a-info {

background: ;

}

이거 다 지워주세요(콤마(,) 잘 확인해서 똑같은 거 지우셔야 돼요

그러고 나서

#header .h-menu .category a .a-info i, #header .h-menu a .cate-icon:hover i, #header .h-menu .category a .sl-cate i, .a-info i

이걸 

.paging a:hover i {

color: ;

}

여기에 넣어야 되는데 헷갈리면 그냥 밑에 거 복사해서 붙여넣기하세요

.paging a:hover i, #header .h-menu .category a .a-info i, #header .h-menu a .cate-icon:hover i, #header .h-menu .category a .sl-cate i, .a-info i {

color: ;

}

그러고 나서 css로 넘어가주세요.. 컨트롤+f로 header를 찾습니다 /* header */ 이 부분 찾으시면 돼요

#header .h-menu .cate-icon 이 안에 있는

width: 8px;

height: 8px;

border-radius: 50%;

background: #ececec;

이걸 다 지워주세요

그러고 나서 바로 밑에

#header .h-menu .cate-icon i {

color: #ececec;

}

이거 추가해주세요

그러고나서

#tt-body-location .n-icon, ~~~~~~~~~ {

background: #ececec !important;

}

이 부분의 background를 color로 수정하고 

또 i를 추가하셔야 돼요

n-icon 옆에 i를 추가해주세요 (전부 다)

#tt-body-location .n-icon i 

이렇게..

그럼 끝입니다... 부드럽게 변하는 걸 원하신다면

#header .h-menu .cate-icon i 괄호 안에

transition: .4s; 이거 추가해주시면 돼요

#header .h-menu .cate-icon 여기 안에 있는 거 잘라내기해도 됨

html에서 컨트롤+f로 갤러리형 찾은 후 카테고리명 수정하면 됨

더 추가하고 싶으면 || ptn == '/category/카테고리명' 추가

카테고리명에 한글 & 특문 들어가면

해당 카테고리 우클릭 - 링크 복사

http://shore24-test2.tistory.com/category/%EA%B8%80%EB%AA%A9%EB%A1%9D

주소가 이렇게 나오는데 category/ 이 뒤에 코드만 복사하면 됨

%EA%B8%80%EB%AA%A9%EB%A1%9D

이 부분만

html 하단 스크립트 수정

더 추가하고 싶으면 || ptn == '/category/카테고리명' 추가

카테고리명에 한글 & 특문 들어가면

해당 카테고리 우클릭 - 링크 복사

http://shore24-test2.tistory.com/category/%EA%B8%80%EB%AA%A9%EB%A1%9D

주소가 이렇게 나오는데 category/ 이 뒤에 코드만 복사하면 됨

%EA%B8%80%EB%AA%A9%EB%A1%9D

이 부분만

☆동영상만 가능★

새 글 추가하면 동영상 더 추가 가능

url에 유튜브 주소 넣으면 됨

html에서 <div class="menu"> 찾아서 카테고리 경로 수정해야 됨 아이콘도 여기서 수정하면 됨

CSS에서

.entry_w:hover, .entryNotice:hover, .entryProtected:hover, .commentList .rep:hover { background: #f4f8fb; } 이 부분을 지운다

html에서 rpp 찾은 후 스크립트 속 경로 수정 

두 군데 다 수정해야 됨

사진은 정사각형

html 속 style

color: !important; 이 부분에

 , .ar-more-t .txt_related 이거 추가

그리고 html </s_article_rep> 이거 바로 위에

첨부파일 more.html 이거 내용 복붙

more.html

more-c.css

css에 첨부파일 more-c.css 내용 복붙

html 하단 스크립트 수정

더 추가하고 싶으면 || ptn == '/category/카테고리명' 추가

카테고리명에 한글 & 특문 들어가면

(스킨 적용 후) 해당 카테고리 우클릭 - 링크 복사

http://shore24-test2.tistory.com/category/%EA%B8%80%EB%AA%A9%EB%A1%9D

주소가 이렇게 나오는데 category/ 이 뒤에 코드만 복사하면 됨

%EA%B8%80%EB%AA%A9%EB%A1%9D

이 부분만

프로필 사진은 무조건 정사각형으로 적용해주세요

스토리

350x500

모바일은

가로 세로 100%

(비율에 따라 사진이 잘림)

슬라이더

518x270 (1단 스킨)

368x200 (2단 스킨)

모바일은

가로100%, 세로 170px

(비율에 따라 사진이 잘림)

옵션에 아이디를 입력하면 되는데 @는 제외하고 아이디만 입력해야 됨

제가 실험을 해보긴 했는데 동영상이랑 사진을 동시에 넣는 건 불가능한 것 같더라구요.... 그래서 스크립트 내용을 수정해야 됩니다

html 하단에 보면 owl 어쩌구~ 스크립트가 있음

auto 들어가는 거 다 지우고

merge:true,

center:true,

video:true

이거 넣어주세요 그리고

<cover>이 부분을 찾아서 그 안에 있는 owl을 찾아주세요

<div class="item" style="background:url(<s_cover_item_thumbnail></s_cover_item_thumbnail>)"></div>

이 부분을

<div class="item"><a class="owl-video" href=""></a></div>

이렇게 수정하면 됩니다

홈 화면 꾸미기 - 슬라이더 - 수정 누르고 새 글 추가할 때 주소에 유튜브 주소 넣으면 됩니다

재생 버튼 넣고 싶으면

https://t1.daumcdn.net/cfile/tistory/995979385BDC063C09

이거 파일 첨부하고 (스킨 편집 - html 편집 - 파일 업로드)

css에 .owl-carousel .owl-video-play-icon {

background: url(./images/owl.video.play.png) no-repeat !important;

}

이거 넣으면 됩니당

html에서

html과 css에서 ad_a를 찾은 후 ad_a2로 수정

css에서 .titleWrap .admin 여기에 z-index: 100; 추가

20 스킨 폴더 만든 날짜 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 저 때부터 만들어야지 마음먹고.. 몇 번 갈아엎다가 지금 스킨의 틀을 잡은 건 작년 12월... 방치하고 방치하고 방치하다가 결국 완성하긴 했네여.. 아이디어도 없어서 거의 쥐어짠..... 요 며칠 완전 열심히 만들었는데 너무 오래 방치해뒀다가 만들어서 내가 짜놓은 건데 어떻게 돼있는지 몰라서 css 정리도 제대로 못하고...... 근데 결과물이 항상 비슷해서,,,, 고민,,,,,유유