코스모스팜 스레드
회원관리 플러그인 레이아웃 변경
스킨 two를 사용하려 하는데, 로그인 화면에서 깨져보입니다.
Hidden Link
테마의 css와 겹쳐서 나타나는 증상인 듯 합니다.
코스모스팜의 php 파일과 css 파일을 수정하면, 버전 업데이트 시 다시 작업을 해야 해서, 차일드 테마의 style.css에서 수정하려 합니다.
1. 원래의 two 스킨 그대로 보이고자 한다.
2. 지금 상태에서 입력필드의 overflow:hidden 속성을 없애고, '로그인 버튼을 비밀번호 입력 필드 아래, 자동로그인 위 또는 아래'에 위치하게 한다.
위 두가지를 테마의 style.css에 어떻게 넣으면 가장 간단하게 될런지요?
ps. 로그인, 회원가입 시에 현재의 언어 페이지로 넘어가지 않고, 한글 페이지로 넘어갑니다. 이건 확인 중입니다.
-
스레드봇 (30639 Point)ㆍ2017.12.15 13:02
안녕하세요~^^
1. 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에
아래의 코드를 추가해보세요.
#top input[type="text"] { padding: 0; margin-bottom: 0; width: 280px; }고맙습니다.
-
class (29 Point)ㆍ2017.12.15 13:13
오 됐다. 감사합니다.
그런데, 회원가입, 회원정보 페이지의 input type text와 password도 280px로 고정되어 버렸습니다.
이건 어찌 해야 할지요..
-
스레드봇 (30639 Point)ㆍ2017.12.15 13:19
아래의 코드로 교체해보시겠어요?
#top input[type="text"] { padding: 0; margin-bottom: 0; } .cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input { width: 280px !important; }고맙습니다.
-
class (29 Point)ㆍ2017.12.15 13:23
우아 다 됐다. 이렇게 빨리 끝내다니...
정말 감사합니다 ㅎㅎ
-
스레드봇 (30639 Point)ㆍ2017.12.15 13:30
해결되셨다니 다행입니다. ㅎㅎ
반응형에서 아이디 필드와 비밀번호 필드의 너비를
다른 버튼들과 맞추시려면 아래의 코드도 추가해보세요.
@media screen and (max-width: 600px) { .cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input { width: 100% !important; } }고맙습니다.
-
class (29 Point)ㆍ2017.12.15 13:46
엇.. (max-width:600px) width:100%!important는 안먹히네요..
위의 width:280px을 (min-width:601px) 로 잡아줘도 안되네용 ㅎㅎ
이건 좀 있다 다시 확인해 보겠습니다. 감사합니다 ^_^
-
class (29 Point)ㆍ2017.12.15 15:24
ㅎㅎ 잘 되네요.. contact form 7의 id #top 도 같이 적용되길래 이렇게 해놨습니다.
#top .cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input[type="text"] { padding: 0; margin-bottom: 0; }
#top .cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input[type="password"] { padding: 0; margin-bottom: 0; }@media screen and (min-width: 601px) {
.cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input { width: 280px !important; }
}
@media screen and (max-width: 600px) {
.cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input { width: 100% !important; }
}이렇게 하니까 전부다 이쁘게 됐습니다. 고마워요 스레드봇 ^_^
