IT KOREAN BOARD

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

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

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 20
Number Title Author Date Votes Views
20
렌트카 가격비교
author | 2021.07.05 | Votes 0 | Views 1166
author 2021.07.05 0 1166
19
한우선물세트
author | 2021.03.07 | Votes 0 | Views 2107
author 2021.03.07 0 2107
18
KBoard 댓글 4.6 업데이트 후 댓글 작성시 "권한이 없습니다" 오류 발생 (6)
author | 2020.07.10 | Votes 0 | Views 1418
author 2020.07.10 0 1418
17
작성자를 무조건 아이디로 나오게 하려면... (2)
author | 2019.05.31 | Votes 0 | Views 3697
author 2019.05.31 0 3697
16
게시판에 글 작성 질문이요 (1)
author | 2019.05.31 | Votes 0 | Views 1645
author 2019.05.31 0 1645
15
글작성시 본문 색, 댓글 색, 첨부파일 이름 색을 변경하고 싶습니다. (2)
author | 2019.05.31 | Votes 0 | Views 2488
author 2019.05.31 0 2488
14
KBoard 기존에 생성된 게시글 작성자 변경문의 (1)
Editorial Team | 2019.05.31 | Votes 0 | Views 1988
Editorial Team 2019.05.31 0 1988
13
KBoard 게시판 버튼 색상 변경 방법
inrokhah | 2019.05.26 | Votes 0 | Views 4462
inrokhah 2019.05.26 0 4462
12
KBoard 게시판에 새로운 필드 추가
inrokhah | 2019.05.26 | Votes 0 | Views 2987
inrokhah 2019.05.26 0 2987
11
게시판 검색을 카테고리 별로 분류
inrokhah | 2019.05.25 | Votes 0 | Views 1687
inrokhah 2019.05.25 0 1687
New