Material T 커스텀 강좌 - 색상 변경
iTIPs/Material T Skin
2015. 2. 14. 01:00
반응형
적용버전: mark1,2
Material T의 스타일시트는 SASS로 작성되었습니다.
때문에 .scss파일 수정을 통해 손쉽게 색상을 변경할 수 있습니다.
아래는 Material T Mark1의 style.scss 원본입니다.
style.scss메모장으로 열어도되고, 따로 쓰는 텍스트에디터가 있다면 텍스트에디터로 엽니다.
가장 윗줄에 Material T에서 사용한 4가지 색상이 있습니다.
원하는 색상코드로 변경한 후 이번에는 Ctrl+A 를 눌러 전체선택 후 복사합니다.
.
http://codepen.io/에 접속합니다. (코드펜의 scss 컴파일 기능을 이용할것입니다. 컴파일가능하신분들은 직접하셔도 좋습니다.)
New Pen을 누릅니다.
CSS왼쪽의 톱니바퀴를 누른 후 Sass(.scss)를 선택, 아래쪽에 Autoprefixer를 선택한 후
다시 톱니바퀴를 눌러 빠져나옵니다.
(레이아웃이 다르게 생겼어도 상관없습니다)
복사해둔 scss를 붙여넣고 오른쪽 위의 눈모양을 누릅니다.
컴파일된 결과가 나타나면 역시 Ctrl+A로 전체선택한 후 복사합니다.
마지막으로 티스토리 HTML/CSS편집으로들어가
style.css에 복사해둔것으로 붙여넣으면 됩니다. (기존 내용은 삭제하고)
반응형
'iTIPs/Material T Skin' 관련 글
more
2015.02.27 00:37 신고
lightblue와 yellow는 어디에 적용된 색상인가요?
2015.02.27 00:37 신고
상단바와 탭을 제외한 파란색은 거의다 lightblue이고 옐로우는 탭의 강조색상입니다
2015.03.27 13:04 신고
저... 발행글들 이렇게 두줄로 메인화면에 뜨잖아요 ? 그런데 글 내용에 &nbs 막 이런게 나오는데 ㅠㅠ 거슬려요 없앨수 있는 방법 없나요 ?ㅠㅠ
2015.03.28 11:25 신고
skin.html에서
desc = desc.replace(/(<([^>]+)>)/ig, "");를 찾아서
desc = desc.replace(/(<([^>]+)>)/ig, "");
desc = desc.replace(" ", " ");
이렇게 수정해보세요
2015.06.24 12:58 신고
뭐하라님, 컴파일 하면
Invalid CSS after "...image: url(data": expected comma, was ":image/svg"
482
background-image: url(data:image/svg
483
484
+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBzd
485
486
HlsZT0iZmlsbDogcmdiKDYzLDgxLDE4MSk7IiByPSI1MCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNDAiIHN0eWxlPSJmaWxsOiB3aGl0ZTsiIHI9IjIyIiAvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjEyMCIgc3R5bGU9Im
487
488
ZpbGw6d2hpdGU7IiByeD0iNTAiIHJ5PSI1NSIvPjwvc3ZnPg==);
이렇게 오류가 나는데, 어떻게 해결할 수 없을까요?
2015.06.24 16:15 신고
파일 내용에 임의로 줄바꿈이 들어가서 그런데요, 메모장에서 자동줄바꿈 옵션을 끄고 다시 편집해보세요~
2015.06.25 15:34 신고
감사합니다^^
2015.06.29 18:08 신고
view compiled 하려니까 Inconsistent indentation: 1 space was used for indentation, but the rest of the document was indented using 2 spaces.라고 떠서 띄워줬는데도 계속해서 빨간색 느낌표가 뜨면서 수정이 안되네요.. 색상 수정 없이 그대로 넣고 하려고 해도 안되고 제대로 수정이 가능한지 확인 부탁드립니다 ㅠㅠ
2015.06.29 21:02 신고
아무문제없는걸 확인했습니다~
메모장으로 자동줄바꿈 헤재하시고 다시해보시겠어요~?
2015.06.29 21:03 신고
메모장에 자동줄바꿈은 적용되어있지 않은데.. 다시한번 따라해보겠습니다 ㅠ
2015.09.11 19:31 신고
저기... 드루워 목록의 바탕 색, 글자 색을 바꿀 수는 없나요??
2015.09.12 00:29 신고
#drawer .drawer_container {
background-color: #444444;
color: #ffffff;
}
#drawer .drawer_container a{
color:#ffffff!important;
}
이런식으로 추가하시면됩니다
2015.09.12 19:22 신고
드루워 목록 색은 바꿨는데...
목록을 선택할 때 흰 색으로 변경 되던데..
다른 색으로 변경할 수 있는 코드도 알려주시면 감사하겠습니다..
부탁드릴게요 ㅠㅠ
2015.09.12 20:05 신고
그 스킨에서 홈 들어가면 여러 목록들이 뜨는데 (공지사항, 카운터 등...)
그 목록의 글 색 변경, 배경색 변경, 위치 변경은 불가능 한가요?
위치가 왼쪽 상단에 있었으면 합니다...
2015.09.13 07:16 신고
저기.. 글을 쓸 때 글 쓰는 본문 바탕을 검게 못 할까요?
제목이 들어간 부분도 글자색이랑 바탕색은 바꿀 수 없나요?