본문 바로가기

Blog/티스토리스킨

사이드바 전체 배경색, 제목 부분 등등 색상 바꾸기?

마크쿼리 웹 반응형 스킨 사이드바 꾸미기

Spider’s Web 3.0.5 기준으로 작성했습니다.

사이드바 쪽에 다른 부분은 별다른 건 없고 색상이랑 이런 거 좀 바꾼 부분입니다.
지금 제가 적용한 스타일을 대충대충 제 맘대로 설명하겠습니다. ㅎㅎ


  1. 사이드바 전체 배경색
  2. 사이드바 제목 부분 배경색

사이드바 카테고리



위에 요약한 부분을 하나씩 설명할게요.
제가 설정한 거니 그 점은 생각하고 보세요.



style.css

.skeleton-aside { }

CSS에 위에 부분을 찾습니다.
배경색 지정돼있는 게 없으니 전체 배경 색인 흰색으로 보이는 거예요.
여기에 background-color를 추가해 넣으면 됩니다.


예를 들어서...

.skeleton-aside { background-color: #f8f8f8;}

색상 코드를 원하는 색으로 바꾸시면 됩니다.



style.css

.widget-feed-inner h3 {
  margin:10px 0;
  font-size:1.5em;
  font-weight: bold;
  color:#999;
}

이 부분을 찾아서 위에처럼 배경색을 추가했습니다.


예를 들어서...

.widget-feed-inner h3 {
  margin:10px 0;
  font-size:1.5em;
  font-weight: bold;
  color:#fff;
  background: #000;
  padding:20px
}

여기에 위에처럼 background-color를 추가해 넣으면 됩니다.
제가 검은색 쪽으로 바꿔서 이 부분의 color을 흰색으로 바꾼 겁니다.
그러니 color을 바꿔주면 제목에 글자 색도 바뀐다는 아기도 되겠네요.
그리고 하나 더 여기에 padding을 추가해서 지금처럼 모양을 만등 겁니다.


Plus

정리해보면

더 길게 적으려고 해도 이거 빼고는 사이드바에 바꾼 건 없는 거 같네요. -0-
설명이라도 잘하면 좋으려만 데 한계가 여기까지 인기도 ㅎㅎ
근데 포스팅하다가 생각난 게 갑자기 생각것이있는데...
bootstrap.css에 몇 부분 사이드바 쪽에 수정했던거 같습니다.
썸네일 최신 글 쪽에 조금, 사이드바에 검색창에 조금 바뀌었지만... 별거 없으니 패스합니다'';

대충대충 쉽게 쉽게 ㅎㅎ 하지만 궁금하시면 댓글이나 방명록으로 문의주세요.