-
티스토리 스킨 : 다운로드 버튼 이미지 변경컴퓨터/HTML & JS & TS 2016. 11. 15. 18:55728x90반응형
※ http://todiva.com/ 에서 제공하는 toPiece 테마를 기준
※ http://nubiz.tistory.com/ 에서 제공하는 Material T Mark 5 스킨에서 추출
todo: find a way to remove icon fixed<!-- 결과 사진 -->
(normal)
(hover)
<!-- 사용 방법 -->
1. 스킨 css 파일을 연다. (toPiece v3.1.1 에선 style_topiece_v01.css)
2. .imageblock 을 검색해서 .imageblock 텍스트만 모두 지운다.
( .section_1 #article .imageblock { --- } 이렇게 있으면 .imageblock만 지운다. )
스킨마다 달라서 판단은, 그냥 맨 아래에 추가해도 된다.3. 스킨 css 파일에 아래 코드를 추가한다.
/* image block from MaterialTskin */ .imageblock>a { height: 60px; line-height: 60px; padding-right: 18px; padding-left: 70px; background-color: #eee; display: block; text-align: center; border-radius: 2px; overflow: hidden; margin: 18px; color: #282828; -webkit-transition: .3s; transition: .3s } .imageblock>a:hover { background-color: #ec008c; color: #fff; text-decoration: none } .imageblock>a:before { font-family: "Material Icons"; content: '\e2c4'; display: inline-block; width: 60px; margin-left: -70px; position: absolute; border-radius: 2px 0 0 2px; color: #fff; background-color: #282828; font-size: 36px } .imageblock { max-width: 100%; height: auto } .imageblock { color: #aaa; font-size: .9em } /* 20180219 파일 아이콘이 보이게 싶으신 분들은 아래를 지우세요. 확장자마다 다른 아이콘을 넣고 싶으신 분들은 gif를 원하는 확장자로 바꾸고 max-height, max-width를 16px로 display:none을 지우고 content: url("파일 위치") ex zip 파일 아이콘 따로) .imageblock>a img[src*="zip"] { max-height: 16px; content: url("http://naver.com/some_zipicon.png") } */ .imageblock>a img[src*="gif"] { display: none }파일 아이콘 :
4. skin.html 에 <head>와 </head> 사이에 아래 코드를 추가한다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">5. Customize
728x90'컴퓨터 > HTML & JS & TS' 카테고리의 다른 글
HTML 우클릭 방지 자바스크립트(JS) (0) 2016.12.14 크롬, 사파리 바로가기 홈 화면에 추가 HTML 메타 태그 (meta) (0) 2016.11.15 console.log() 글(text) 꾸미기 (0) 2016.11.13
shBrushKotlin.js