티스토리 뷰

※ http://todiva.com/ 에서 제공하는 toPiece 테마를 기준

※ http://nubiz.tistory.com/ 에서 제공하는 Material T Mark 5 스킨에서 추출

todo: find a way to remove icon fixed



<!-- 결과 사진 -->


 

(normal)

(hover)

shBrushKotlin.js

(real)



<!-- 사용 방법 -->


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


TAG
댓글
댓글쓰기 폼
«   2018/07   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Total
96,655
Today
2
Yesterday
5