kboard 버튼 색상 변경 문의

안녕하세요~ 항상 감사드립니다~

실제페이지: https://xion.kr/?page_id=292

https://imgur.com/a/0QqlljI 보시면 kboard default 스킨 버튼들을 마우스 오버전에는 흰색 라인에 회색 글씨로 처리하고

마우스 오버시에는 버튼 배경색을 민트색으로 변경하려고 합니다. 주말동안 hover 나 active 로 구문만들어봤는데 잘 안되서요.

그리고, 플레이비디오스킨도

실제페이지: https://xion.kr/?page_id=4097&mod=document&uid=89#kboard-document

https://imgur.com/a/axTh3Qn 처럼 빨간 동그라미 친 부분들은 다 흰색 라인에 회색 글씨로 처리하고 마우스 오버시에 버튼 배경색을 민트색으로 default 스킨처럼 처리하려고 하는데, default -> play-video 로만 수정해주면 되나요?

도움부탁드립니다...

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    마우스를 올렸을 때 색상을 다른 색으로 적용하시려면

    hover 선택자를 활용해보시겠어요?

     

    직접 추가하신 아래의 CSS 코드를

    #kboard-default-list .kboard-pagination .kboard-pagination-pages li:hover a,
    #kboard-default-list .kboard-pagination .kboard-pagination-pages li.active a  { border: 1px solid #f1f1f1; color: #666666 !important; background: transparent !important; }

    아래의 코드로 교체해보세요.

    #kboard-default-list .kboard-pagination .kboard-pagination-pages li.active a { border: 1px solid #f1f1f1; color: #666666 !important; background: transparent !important; }

     

    워드프레스 관리자 -> 외모(테마 디자인) -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    #kboard-default-list .kboard-pagination .kboard-pagination-pages li:hover a { background-color: #00B09C !important; }
    .kboard-default-button-small:hover { background: #00B09C !important; }

    위의 코드에서 색상은 적절히 수정해보세요.

     

    플레이 비디오 스킨 쪽 페이지 주소는 다시 확인해주시겠어요?

    현재는 페이지가 없다고 표시되고 있습니다.

    고맙습니다.

  • 지금 https://xion.kr/?page_id=226 접속하시면 소스 확인 가능하실거에요. 에러 수정했습니다. 부탁드립니다..

  • 기존 플레이 비디오 스킨 쪽에 적용하신 버튼 관련 코드 대신

    아래의 코드로 교체해보시겠어요?

    .kboard-play-video-button-small, .kboard-play-video-button-small:link, .kboard-play-video-button-small:visited { border: 1px solid white !important; color: gray !important; }
    .kboard-play-video-button-small:hover, .kboard-play-video-button-small:focus, .kboard-play-video-button-small:active { background-color: #00B09C !important; }
    #kboard-play-video-list .kboard-pagination .kboard-pagination-pages li a:hover { background-color: #00B09C !important; }

    위의 코드에서 색상은 적절히 수정해주세요.

    KBoard(케이보드) 게시판 버튼 색상 변경 방법도 참고 부탁드립니다.

    고맙습니다.

  • 고맙습니다. 도와주셔서 또 많이 기능이 좋아졌습니다...

    https://imgur.com/a/hORAAeB

    첨부이미지 보시면

    1. 보더라인 색 변경 하고

    2. 하얀 배경색-> 검정 , 글자색-> 흰색

    으로 수정해야 되서 또 도움부탁드립니다...  크롬 '검사'로 열심히 살펴보면서 수정하려고 하는데 아직 실력이 많이 부족하네요...

  • 1. 테두리 색상인 것처럼 보이지만 실제로는 배경 색상을 수정해주셔야 합니다.

    아래의 CSS 코드를 추가해보시겠어요?

    .su-tabs { background: black; }

    2. 아래의 CSS 코드도 추가해보세요.

    /* 배경색 */
    #kboard-play-video-latest .kboard-list-item { background-color: black; }
    /* 제목 글자 색상 */
    #kboard-play-video-latest .kboard-list-item .kboard-list-title { color: white; }
    /* 게시글 정보 색상 */
    #kboard-play-video-latest .kboard-list-item .kboard-video-info { color: white; }

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기