인터넷/티스토리 꾸미기

파일첨부 박스 꾸미기

티스토리 파일첨부 박스를 꾸며보자!

티스토리에서 파일을 첨부할 경우 보통 블로그 하단에 첨부파일 표시로 다운로드 할 수 있도록 되어 있죠! 그런데 이 부분이 조금 아쉬워 하시는 분들이 있을 수 있습니다! 나의 블로그의 컨셉과 어울리지 않는 경우 말이죠.

적어도 마우스를 가져다 대면 불이라도 들어오면 좋을텐데 하실 분들도 계실거라 생각합니다 :) 그래서 간단하게 모양 부터 변경하는 법을 알아보죠!

제가 하는게 정답은 아닙니다!
이것저것 건드려보다보니 알게 된거라서 저의 개인 경험을 토대로 알려드리는 부분입니다!

CSS CODE

figure.fileblock {
border:1px solid #6a6161 !important; 
background-color:#b3aaaa !important; 
border-radius:0px !important; 
transition: 0.5s ease;} 
/*첨부파일박스*/

figure.fileblock:hover {
border:1px solid #6a6161 !important; 
background-color:#5b5555 !important; 
color:#fff !important; 
transition: 0.5s ease;}
/*첨부파일박스 마우스 오버*/

.filename{color:#fff !important; }
.size{color:#978a8a !important; }

 

여기 일단 포인트는 figure.fileblock 입니다. 바로 이녀석이 첨부파일의 모습을 가지고 있는 녀석이죠. 이걸 건드려 주면 됩니다. 기본적으로 CSS를 아시는 분들은 기본적인 틀은 수정보실수 있을거라 생각이듭니다.

filename은 첨부된 파일명이 나오는 부분 이고 size는 파일의 크기를 나타내는 부분입니다. 컬러 코드를 입력해주면 되겠구요 참고로 !important; 가 다 들어가있는데 이걸 해주지 않으면 적용이 되지 않는군요 :(

hover 부분은 마우스를 가져다 됬을때 역활입니다. 이제 이정도는 다 아시겠죠? :) 가져다 댔을때의 컬러값을 입력해주면 끝입니다!

그런데 아이콘들이 맘에 안들어요

왼쪽과 오른쪽에 이미지가 있네요

왼쪽과 오른쪽의 이미지를 변경보도록 하죠!

COSS CODE를 추가해주세요!

.figure.fileblock .image, #tt-body-page figure.fileblock .image{
width:33px !important; 
height:33px !important; 
background-image:url(왼쪽 아이콘 주소 33x33)!important; 
background-position:0 -1px; background-repeat:no-repeat;}

figure.fileblock a::after, #tt-body-page figure.fileblock a::after {
background-image: url(오른쪽 아이콘 주소 32x34); 
width:32px; 
height:34px; 
right:35px; 
background-position:0 0;}

아이콘을 업로드 하고 주소를 얻어봅시다!

확실치는 않지만 :( 왼쪽 아이콘과 오른쪽 아이콘 작업을 하시거나 원하는 사용가능한 아이콘을 다운로드 받아서 적용시키는 것도 좋을 것 같아요! 아이콘을 티스토리 스킨편집에서 파일업로드를 통해 올리고 파일업로드에서 올려진 파일명 이름에 마우스 우클릭을 통해 링크 주소 복사를하고 CTRL + V 를 누르면 주소가 나옵니다! 이런식으로 위에 아이콘 주소를 넣어주시면 됩니다!

해보시고 잘 안되거나 궁금하신 점이 있으시면 댓글 남겨주세요! 아는 부분이라면 알려드리겠습니다 :) 물론 그전에 이것저것 수치 건드려 보시는것 추천드립니다! 그럼 화이팅!