티스토리 Fastboot 사이드바 추천모듈 배너 색상 변경 방법

지난번에 Fastboot 반응형 스킨 우측 사이드바에 추천 모듈을 달아 놓았다.

처음에는 한개의 포스팅 글을 링크하였는데, 지금은 2개를 더 추가하여 현재는 3개의 추천글이 링크되어 있다.

하지만 글 제목 뒤쪽에 나오는 배너의 색깔은 모두 동일한 붉은색으로 되어 있다.

조금이라도 눈에 띄게 하기 위해 배너의 설명에 맞추어서 색깔도 변경해보기로 했다.

 

그리고 수정방법을 잊지 않기 위해서 포스팅하여 남겨둔다.

 

 

 

 

 

티스토리 Fastboot 사이드바 추천모듈 배너 색상 변경 방법

 

 

 

 

 

 

Fastboot 반응형 스킨 관련 글

 

1. FastBoot 스킨 변경하는 방법 : http://barista7.tistory.com/31

 

2. 스킨 로그아웃 오류 해결 방법 : http://barista7.tistory.com/39

 

3. 최근포스트 모듈 썸네일 오류 해결 방법(RSS공개) : http://barista7.tistory.com/40

 

4. 최근 포스트 모듈 썸네일 오류 해결 방법 : http://barista7.tistory.com/567

 

5. 우측 사이드바에 추천(Recommended) 모듈 다는 방법 : http://barista7.tistory.com/568

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. CSS수정하기

 

 

아래의 설명대로 따라하면 한가지 색상으로 나오는 추천모듈의 배너 색상을 쉽게 변경할 수 있다.

 

 

 

 

추천모듈 배너의 색상을 변경하기 위해서는 CSS에 추가할 색상과 관련된 새로운 CSS코드를 각각 넣어야 한다.

추천모듈을 추가하면서 붙여 넣었던 모듈을 활용해서 이름과 색상코드를 변경하여 추가해주면 된다.

 

기본적으로 사용할것으로 생각되는 3가지 색상(Blue, Green, Yellow)으로 미리 코드를 수정해 보았다. CSS수정 작업을 마치면 Red, Blue, Green, Yellow 총 4가지의 색상이 추가 되는 것이다.

 

기존 CSS코드에서 4군데(이름 부분 2군데, 색상부분 2군데)만 수정하면된다.

 

 

 

 

4가지 색상으로 미리 수정해서 업로드 해두었으니 다운받아서 사용하면 된다. 다른 색깔을 원한다면 동일한 방법으로 수정해서 CSS에 추가하면된다.

 

 

 

사이드바 추천 모듈 CSS.txt

사이드바 추천 모듈 CSS-blue.txt

사이드바 추천 모듈 CSS-green.txt

사이드바 추천 모듈 CSS-yellow.txt

 

 

 

 

 

 

 

 

 

 

 

색상과 관련된 코드는 네이버에서 '색상코드표'로 검색하면 바로나오는데 선호하는 색상으로 변경해가면서 고를수 있다.

 

 

 

CSS에 추가할 배너 색상코드

Red #da4453

 

 

 

Blue #0100FF

 

 

 

 

Green #00A500

 

 

 

Yellow #FFF612

 

 

 

 

3가지 색상별로 CSS에 삽입할 코드를 수정했으니 이제 붙여넣기를 한다.

블로그관리> 스킨편집> Html편집> CSS 클릭, 코드 삽입후 저장하면 된다.

 

 

 

 

동일하게 나머지 CSS코드들도 붙여넣고 저장한다.

 

 

 

 

 

 

 

 

 

 

2. 추천모듈 배너 색상 수정하기

 

 

CSS에 새로운 코드를 넣었으니 이제 추천모듈에 적용시켜 보자.

 

블로그관리> 스킨편집> Html편집> html에서 수정하고 저장하면된다.

 

 

 

 

 

Html 추천모듈 소스코드는 2군데만 수정해주면 된다.

 

 

 

 

 

사이드바 추천 모듈-4개.txt

 

 

 

 

 

 

 

 

 

 

 

CSS에서 코드를 넣으면서 넣었던 이름 부분과 배너 안에 들어갈 내용을 아래처럼 수정하면 된다.

 

 

 

 

 

 

이제 잘 적용되었는지 확인해 보자. 어딘가에 문제가 생겼는지 배너하나가 색상이 없어졌다.

 

 

 

 

 

이럴때는 당황하지 말고 삽입했던 코드에서 수정을 안한것이 있는지 확인해보자.

원인을 찾아보니 CSS에서 이름을 수정할때 한군데가 수정이 안되어 있었다. 색상에 맞게 이름을 수정해 주었더니 내가 원하던 색깔로 잘 적용이 되었다.

 

 

 

 

 

추천모듈에 들어가는 배너의 색상과 내용을 변경하면서 추천 모듈을 좀더 눈에 띄게 수정할 수 있었다.

 

 

 

 

 

 

 

지금까지 추천 모듈에 들어가는 배너의 색상 변경방법에 대해 알아보았다.

 

 

 

 

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!