검색창 어긋나는 문제 (+입력폼 CSS)

안녕하세요~

Enfold 테마에 KBoad 게시판 스킨들을 적용했는데,

테마랑 부딪히는 부분이 있는지...검색창 부분이 다 어긋나네요.

CSS를 수정해 보았는데 방법을 못 찾고 있습니다. ㅠ

테마의 CSS에 important 설정된 것도 아닌것 같구요.

확인 부탁드립니다. 

 

 

1. 게시판 검색창 부분이 어긋남

 

기본스킨

http://idia0.cafe24.com/information/notice/

 

썸네일 스킨

http://idia0.cafe24.com/activities/latest-activities/

 

크로스 링크 스킨

http://idia0.cafe24.com/information/archive/press/

 

플레이 비디오 스킨

http://idia0.cafe24.com/information/archive/video/

 

 

2. 스토어에 썸네일 스킨이 안보이는데 없어진 것인가요?

 

 

 

문의글 올리기 직전에 최근 문의글에 같은 내용을 발견해서,

#kboard-default-list .kboard-search input { display: inline !important; margin: 0 !important; padding: 0 5px !important; }

@media screen and (max-width: 600px) {
	#kboard-default-list .kboard-search input { margin-right: 1% !important; width: 49% !important; }
}

적용하니 해결되었습니다.

같은 방식으로 기본 게시판과 썸네일 게시판까지는 적용되는데, 나머지 스킨들은 안되네요.

크로스 링크 스킨, 플레이 비디오 스킨 수정 방법 부탁드립니다.

 

 

감사합니다~

 

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 빠른 답변 감사드립니다 !

  • 안녕하세요.

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

    #kboard-modern-gallery-list .kboard-search input { width: auto !important; height: 28px; }

    비밀번호 입력폼은 현재 정상적으로 표시되는 듯합니다.

     

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

    #kboard-default-editor .kboard-attr-row input[type=text] { width: 70%; }
    #kboard-default-editor .kboard-attr-row input[type=file] { width: 70%; }
    #kboard-default-editor .kboard-attr-row input[type=password] { width: 70%; }
    #kboard-default-editor .kboard-attr-row select { width: 70%; }

    썸네일 스킨은 위 코드에서 default 부분은 thumbnail로 변경하신 후에 적용해주시면 됩니다.

    숫자는 적절히 수정하신 후에 적용해보세요.

     

    최대한 일관된 CSS 구조를 유지하려고 하지만

    스킨마다 레이아웃이 다르기 때문에 CSS도 다릅니다.

    간단하게 CSS 속성을 수정할 수 있는 방법을 고민해보겠습니다.

    고맙습니다.

  • 답변 감사합니다.

    검색창 어긋나는 부분을 문의드린 것인데, 제목을 잘못 썼었네요;

    답변 주신 내용 등을 조합하여 CSS를 적용해서,

    기본 / 썸네일 / 크로스 링크 / 플레이 비디오 스킨의 검색창은 해결하였습니다.

     

    1. 모던 갤러리 스킨 검색창 두줄로 떨어지는 문제

    http://idia0.cafe24.com/information/archive/reading/

    글 쓰기 비밀번호 입력폼 아래로 떨어지는 문제

    http://idia0.cafe24.com/information/archive/reading/?mod=editor&pageid=1

     

    2. 기본 / 썸네일 게시판 글쓰기의 입력폼 길이 문제

    http://idia0.cafe24.com/information/notice/?mod=editor&pageid=1 

    http://idia0.cafe24.com/activities/latest-activities/?mod=editor&pageid=1

     

    스킨마다 발생 문제가 다르고, 해결 방법도 다르니 너무 혼란스럽습니다. ㅠㅠ 

    일관된 CSS 구조였으면 하는 바램입니다.

    감사합니다!

     

     

  • 아래의 코드도 추가해보세요. (플레이 비디오 스킨 글 작성 페이지)

    #kboard-play-video-editor .kboard-attr-title input { width: 80% !important; }
    #kboard-play-video-editor input[type=text], #kboard-play-video-editor input[type=email], #kboard-play-video-editor input[type=password] { width: 30% !important; }
    #kboard-play-video-editor select { width: 30% !important; }
    
    @media screen and (max-width: 600px) {
    	#kboard-play-video-editor .kboard-attr-title input,
    	#kboard-play-video-editor input[type=text], #kboard-play-video-editor input[type=email], #kboard-play-video-editor input[type=password],
    	#kboard-play-video-editor select { width: 100% !important; }
    }

    고맙습니다.

  • 안녕하세요~^^

    1. 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

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

    #kboard-default-editor input { margin: 0 !important; padding: 0 5px !important; }

    위 코드에서 default 부분을 스킨명으로 교체해보시겠어요?

     

    2. 스토어에는 유료 스킨 및 유료 플러그인이 등록되어 있습니다.

    썸네일 스킨은 기본 스킨이기 때문에 확인하실 수 없습니다.

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

    #kboard-cross-link-list .kboard-search input,
    #kboard-cross-link-list .kboard-search select { display: inline !important; margin: 0 !important; padding: 0 5px !important; width: auto !important; }
    #kboard-cross-link-list .kboard-list-header .kboard-search .magnifier { margin-left: -25px !important; }
    #kboard-play-video-list input[name="keyword"] { width: auto !important; }

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기