컴퓨터/HTML & JS & TS
티스토리 스킨 : 다운로드 버튼 이미지 변경
두뇌미포함
2016. 11. 15. 18:55
728x90
반응형
※ http://todiva.com/ 에서 제공하는 toPiece 테마를 기준
※ http://nubiz.tistory.com/ 에서 제공하는 Material T Mark 5 스킨에서 추출
todo: find a way to remove icon fixed
<!-- 결과 사진 -->
(normal)
(hover)
shBrushKotlin.js<!-- 사용 방법 -->
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