IT KOREAN BOARD

KBoard 게시판 버튼 색상 변경 방법

Kboard
Author
inrokhah
Date
2019-05-26 11:32
Views
2288

KBoard 게시판 버튼 색상 변경 방법




크롬 브라우저를 기준으로 버튼의 색상을 바꾸는 방법을 설명하겠습니다.


게시판과 워드프레스 테마의 색상에 차이가 큽니다.

게시판과 워드프레스 테마의 색상에 차이가 큽니다.



버튼 색상을 바꾸시려면 버튼 위해서 마우스 오른쪽 버튼을 클릭해주세요.

그 다음 브라우저 메뉴에서 “검사(N)” 메뉴를 클릭해주세요.


버튼 위에서 마우스 오른쪽 버튼을 클릭하면 메뉴가 표시됩니다.

버튼 위에서 마우스 오른쪽 버튼을 클릭하면 메뉴가 표시됩니다.



“검사(N)” 메뉴를 클릭하면 크롬 브라우저의 개발자 도구가 실행되는데요.

그중 우리가 유심히 살펴봐야 할 부분은 태그와 스타일시트(CSS) 속성에 대한 것입니다.

아래 스크린샷에서 ①번은 클래스(Class) 이름이며 ②번은 스타일시트(CSS) 속성입니다.


크롬 개발자 도구에서 태그에 적용된 스타일시트(CSS) 코드와 경로를 확인할 수 있습니다.

크롬 개발자 도구에서 태그에 적용된 스타일시트(CSS) 코드와 경로를 확인할 수 있습니다.



개발자 도구에서 먼저 클래스(Class) 이름을 복사해서 텍스트 문서 등에 붙여 넣기 해주세요.


클래스(Class) 이름을 복사해줍니다.

클래스(Class) 이름을 복사해줍니다.



그다음 수정할 스타일시트(CSS) 속성을 복사해서 텍스트 문서 등에 붙여 넣기 해주세요.


스타일시트(CSS) 속성을 복사해줍니다.

스타일시트(CSS) 속성을 복사해줍니다.



마지막으로 스타일시트(CSS) 속성을 수정한 다음 사용자 정의하기의 추가 CSS 입력란에 수정된 스타일시트(CSS) 코드를 추가해줍니다.

전체 경로는 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> 추가 CSS 입니다.


사용자 정의하기의 추가 CSS 입력란에 수정된 스타일시트(CSS) 코드를 추가해줍니다.

사용자 정의하기의 추가 CSS 입력란에 수정된 스타일시트(CSS) 코드를 추가해줍니다.



아래는 default 스킨의 버튼 색상을 변경할 수 있는 샘플 코드입니다.

color 속성과 background 속성을 변경한 코드이며,

각각의 스킨마다 클래스(Class) 이름이 다르기 때문에 스킨이 다르다면 코드를 새로 작성해서 추가를 해줘야 합니다.

  1. /* 버튼의 색상을 변경합니다. */
  2. a.kboard-default-button-small,
  3. input.kboard-default-button-small,
  4. button.kboard-default-button-small { color: white !important; background: #f16c20 !important; }
  5. /* 리스트 하단의 페이징 버튼의 색상을 변경합니다.*/
  6. #kboard-default-list .kboard-pagination .kboard-pagination-pages li:hover a,
  7. #kboard-default-list .kboard-pagination .kboard-pagination-pages li.active a { color: white !important; background: #f16c20 !important; }

만약 게시판의 고급설정에서 아이프레임으로 보기 설정이 활성화되어 있다면 KBoard(케이보드)의 대시보드 페이지의 추가 CSS 입력 필드에 코드를 추가해주세요.


KBoard(케이보드)의 대시보드 페이지에 커스텀 CSS 필드에 코드를 추가해주세요.

KBoard(케이보드)의 대시보드 페이지에 커스텀 CSS 필드에 코드를 추가해주세요.



수정된 스타일시트(CSS) 코드를 저장하고 나면 아래 스크린샷 처럼 워드프레스 테마와 게시판 스타일이 일치감을 갖게 된 것을 확인할 수 있습니다.


워드프레스 테마와 게시판 스타일이 일치감을 갖게 되었습니다.

워드프레스 테마와 게시판 스타일이 일치감을 갖게 되었습니다..



Total Reply 0

Total 19
Number Title Author Date Votes Views
19
한우선물세트
author | 2021.03.07 | Votes 0 | Views 218
author 2021.03.07 0 218
18
KBoard 댓글 4.6 업데이트 후 댓글 작성시 "권한이 없습니다" 오류 발생 (6)
author | 2020.07.10 | Votes 0 | Views 480
author 2020.07.10 0 480
17
작성자를 무조건 아이디로 나오게 하려면... (2)
author | 2019.05.31 | Votes 0 | Views 2120
author 2019.05.31 0 2120
16
게시판에 글 작성 질문이요 (1)
author | 2019.05.31 | Votes 0 | Views 797
author 2019.05.31 0 797
15
글작성시 본문 색, 댓글 색, 첨부파일 이름 색을 변경하고 싶습니다. (1)
author | 2019.05.31 | Votes 0 | Views 826
author 2019.05.31 0 826
14
KBoard 기존에 생성된 게시글 작성자 변경문의 (1)
Editorial Team | 2019.05.31 | Votes 0 | Views 1122
Editorial Team 2019.05.31 0 1122
13
KBoard 게시판 버튼 색상 변경 방법
inrokhah | 2019.05.26 | Votes 0 | Views 2288
inrokhah 2019.05.26 0 2288
12
KBoard 게시판에 새로운 필드 추가
inrokhah | 2019.05.26 | Votes 0 | Views 1896
inrokhah 2019.05.26 0 1896
11
게시판 검색을 카테고리 별로 분류
inrokhah | 2019.05.25 | Votes 0 | Views 869
inrokhah 2019.05.25 0 869
10
게시판 하단에 Powered by KBoard 삭제 방법
inrokhah | 2019.05.25 | Votes 0 | Views 1140
inrokhah 2019.05.25 0 1140
New