• 목록
  • 아래로
  • 위로
  • 6
  • title: 대한민국 국기Adam
  • 조회 수 659

티스토리 스킨 튜닝중인데요

티스토리에서 제공 하는 첨부파일 디자인이 너무 구려서

요즘 스타일로 디자인 하려 하는데

좋은 코딩을 찾아 적용하고 싶어서 찾은 코딩을 실력부족으로 2% 부족하게 적용 되었네요

고수님들 좀 도와 주세요... 

제가 모르는 부분은 http://ccz-cross.tistory.com/28 cczicon 아이콘 적용 방법을 모릅니다.

제 블로그 주소는 http://adaminfiji.tistory.com/640 데요 

css 코드를 적용 하니 첨부 파일 모양은 의도 대로 적용 되었습니다.

그런데 보시면 알겠지만 첨부 파일모양이

이렇게 표현 되어야 하는데

제 블로그에는 이렇게 표현되요

코드는 

.imageblock > a[href*="attachment"] > img {
vertical-align: text-bottom !important; }

.imageblock > a[href*="attachment"] {
position: relative;
display: block;
margin: 1px 0;
padding-right: 15px;
color: #607285;
font-weight: bold;
font-family: Helvetica,"Malgun Gothic","맑은 고딕","굴림",gulim, sans-serif;
text-transform: uppercase;
letter-spacing: 0;
background: #fff;
border: 1px solid #DDDDE4;
border-radius: 3px; }

.imageblock > a[href*="attachment"]:before {
display: inline-block;
width: 60px;
margin-right: 10px;
line-height: 60px;
text-align: center;
content: "\e656";
color: #A6B1BF;
font-size: 26px;
font-family: 'cczicon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 3px 0 0 3px;
border-right: 1px solid #DDDDE4;
background: linear-gradient(#ffffff, #f4f4f4);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#f4f4f4',GradientType=0 ); }

.imageblock > a[href*="attachment"]:after {
position: absolute;
top: 15px;
left: 74px;
line-height: 1;
display: block;
content: "Download";
color: #CDD3DA;
font-size: .85em;
font-weight: normal;
text-transform: none; }

.imageblock > a[href*="attachment"] img {
display: none; }

.imageblock > a[href*="attachment"]:hover,
.imageblock > a[href*="attachment"]:hover:before,
.imageblock > a[href*="attachment"]:focus,
.imageblock > a[href*="attachment"]:focus:before {
color: #fff; background: #81a9db; }

.imageblock > a[href*="attachment"]:hover:before,
.imageblock > a[href*="attachment"]:focus:before {
border-right-color: #f5f5f5; }



출처: http://webdir.tistory.com/488?category=632608 [WEBDIR]

제 생각에는 

저 코드 작성자는 의도적으로  http://ccz-cross.tistory.com/28 cczicon 아이콘 적용을 빼 놓은 것 같아요.

이양 공개 할거면 깨끗이 공개하면 좋은 소리를 들을텐데 좋다 말아 버리잖아요.

텍스트에디터는 studyforus가 최고 인듯해요.

티스토리는 보고 좀 배누면 좋겠다는요.

그래봐야 부족한 제 탓이죠!!

고수님들 코드 수정좀 도와 주셔요.

저 웹아이콘 적용 방법요...

랩퍼투혼님 랩퍼투혼 포함 1명이 추천

추천인 1

댓글 6

Hanam09
profile image

font-family: 'cczicon';

comment menu
2018.01.12. 11:13

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09
profile image

저 저장 icon 이 이미지가 아닌 폰트로 표현되는거 같은데 그 폰트가 없습니다.

comment menu
2018.01.12. 11:15

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09
profile image

Style.css 에서

@font-face {

font-family: 'cczicon';

src:url('fonts/cczicon.eot?emuxs4');

src:url('fonts/cczicon.eot?emuxs4#iefix') format('embedded-opentype'),

url('fonts/cczicon.ttf?emuxs4') format('truetype'),

url('fonts/cczicon.woff?emuxs4') format('woff'),

url('fonts/cczicon.svg?emuxs4#cczicon') format('svg');

font-weight: normal;

font-style: normal;

} 이부분이 있어야 합니다.

comment menu
2018.01.12. 11:40

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 대한민국 국기Adam 작성자
profile image

모두 적용해 봤는데 안되네여...

부족한 내탓입니다

comment menu
2018.01.12. 17:24

신고

"Adam님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 은메달도다

티스토리군요!

CCZ ICON 링크에서 (http://ccz-cross.tistory.com/28)

cczicon.zip 파일 다운로드하시고 압축 푸신 후에 style.css 이름 변경후 (예를 들자면 cczicon.css 정도?)

demo.html / Read Me.txt 파일하고 demo-files / ie7 폴더 제거 후 모두 업로드 하시면 될 듯 합니다.

 

티스토리 CSS 수정에서 @import ("./images/cczicon.css"); 로 임포트하세요. (사실 비권장하긴 하지만 제일 간단합니다)

comment menu
2018.01.12. 19:47

신고

"도다님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 은메달도다 → 도다

그러고보니 티스토리 특성상 폴더 업로드는 안되군요...

fonts 폴더에 있는 것들 업로드 하시고 폰트 (cczicon.css) 파일 수정이 필요해보입니다.

comment menu
2018.01.12. 19:49

신고

"도다님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 1012
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4691
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4482
926 계속 사용중이던 네트워크 공유 폴더가 갑자기 액세스 불가라고 뜹니다. 6 image 장윤서 18.06.07.16:55 34352
925 팀뷰어 대체할 원격 제어 프로그램 추천 부탁드립니다 16 이니스프리 17.11.30.15:38 32327
924 엑셀 그래프의 축 간격 조절 문제입니다. 2 image 국내산라이츄 17.08.10.11:06 12506
923 아이폰/아이패드 충전기 발열 관련 질문 드립니다 9 image 이니스프리 19.05.02.22:52 11125
922 PyQt 실행시 프리징 현상 관련하여 질문 드립니다! ㅠㅠ 3 이니스프리 19.07.06.03:37 6728
921 에러 523 해결법 4 입체그림 20.02.21.16:48 6727
920 프린터가 지 맘대로 프린트를 하네요. 3 곰도리푸 18.04.04.18:20 6106
919 윈도우용 메일 클라이언트가 필요합니다. 9 네모 18.01.11.20:15 5867
918 크롬에서 특정 사이트 접속 문제 관련하여 질문 드립니다 9 이니스프리 17.03.27.18:03 5327
917 오라클 클라우드 프리티어 가입이 안 되네요 ㅠㅠ 20 이니스프리 20.06.26.21:31 4850
916 파이썬 에디터로 어떤 것이 좋나요? 14 NoYeah 20.01.08.21:08 4534
915 나무 위키의 수익구조는 무엇일까요? 2 NoYeah 18.03.18.15:56 3841
914 라떼판다와 라즈베리 파이 중 어느 쪽을 사는 게 나을까요? 9 제르엘 18.10.14.19:25 3839
913 파티션 복구 프로그램 TestDisk 잘 아시는 분 계시나요? 29 이니스프리 17.11.10.14:53 3750
912 IE11에서 이미지가 깨지는 현상을 해결할 수 있을까요? 2 이니스프리 19.08.02.00:01 3705
911 파일질라로 연결하니까 보안되지 않은 서버입니다. TLS를 통한 FTP를 지원하지 않습니다. 이렇게떠요 해결방안좀 1 마카오 16.09.11.00:57 3658
910 자바스크립트 FormData와 관련된 메서드의 IE 호환성과 관련하여 질문 드립니다 ^^ 6 image 이니스프리 19.08.05.14:22 3433
909 선택약정 안 되는 중고폰의 경우에는 어떤 단점이 있는 것인가요?? 6 이니스프리 20.01.21.14:30 3104
908 [Requests] multipart/form-data의 전송에 대해 질문 드립니다 ^^ 4 이니스프리 19.12.18.22:00 3039
907 집에서 시놀로지 NAS로 워드프레스나 미디어위키 돌리면 느릴까요? 10 이니스프리 17.01.16.20:56 2988