회원관리 플러그인 default 로그인창 커스터마이징

안녕하세요 회원관리 플러그인을 사용하고있는 사람입니다

좋은 프로그램 덕분에 잘사용하고있습니다

 

저번에 제가 문의드렸던 사이드바 로그인창 및 회원정보가 제 임의로 변경하여 완성했습니다

제가 사용하고있는 로그인창 스킨은 default값의 로그인창 스킨인데 이 스킨의 비밀번호 찾기와 회원가입을 로그인버튼처럼 버튼화 시켜서 더욱 눈에 띄게 변경하고싶습니다

 

변경전

 

변경후

 

회원관리 플러그인의 css파일과 php파일에서 해당되는 코드를 검색해봤는데 제가 잘못찾는건지 없는거같습니다

혹시 찾는법이 따로있나요?

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

    코스모스팜 회원관리 플러그인에서 로그인폼의 스킨 파일의 경로는

    FTP로 접속해서 /wp-content/plugins/cosmosfarm-members/skin/사용중인스킨/login-form.php 입니다.

    전문 에디터로 파일 내용을 적절히 변경해보세요.

     

    아래는 비밀번호 찾기 링크 코드입니다.

    <?php if(get_cosmosfarm_members_profile_url()):?>
    <div align="right" class="link-text pwdreset">
    	<a href="<?php echo add_query_arg(array('a'=>'pwdreset'), get_cosmosfarm_members_profile_url())?>"><?php echo __('Forgot Password', 'cosmosfarm-members')?></a>
    </div>
    <?php endif?>

     

    아래는 회원가입 링크 코드입니다.

    <?php if(wp_registration_url()):?>
    <div align="right" class="link-text register">
    	<a href="<?php echo wp_registration_url()?>"><?php echo __('Register', 'cosmosfarm-members')?></a>
    </div>
    <?php endif?>

     

    그리고 같은 폴더 안에 style.css 파일이 있습니다.

    이 파일에 모든 CSS 속성이 작성되어 있습니다.

     

    스킨을 수정하실 땐 폴더를 복사해서 수정하시는 게 좋습니다~^^

    고맙습니다.

  • 버튼을 일단 삽입해봤는데요

    둘다 왼쪽으로 붙어서 한줄씩 표시되고 버튼클릭시 모두 로그인으로 이동되는 현상이 발생합니다

    혹시 적절한 예시가있나요?

  • 위에 코드는 추가로 삽입하시라고 말씀드린것은 아닙니다~^^;;

    찾기 쉬우시라고 알려드렸으니 참고 해주세요.

     

    <div></div> 같은 레이어 태그 없이

    링크 태그만 삽입해주시면 한 줄에 모두 표현이 가능할 듯합니다.

    <a class="pwdreset" href="<?php echo add_query_arg(array('a'=>'pwdreset'), get_cosmosfarm_members_profile_url())?>"><?php echo __('Forgot Password', 'cosmosfarm-members')?></a>
    <a class="register" href="<?php echo wp_registration_url()?>"><?php echo __('Register', 'cosmosfarm-members')?></a>

    그리고 서로 다른 링크인데 모두 같은 링크로 동작한다면 태그가 뭔가 잘못됐을 수 있습니다.

  • 아래와 같이 코드를 삽입해봤는데요

    <a class="pwdreset" href="<?php echo add_query_arg(array('a'=>'pwdreset'), get_cosmosfarm_members_profile_url())?>"><input type="submit" class="buttons" value="<?php echo __('Forgot Password', 'cosmosfarm-members')?>"></a>

    코드가 잘못된건지 자꾸 로그인으로 인식하는거같습니다

  • 잘 보시면 저희가 알려드린 코드는 a 태그를 사용하고 있는데요.

    어째서 input 태그를 사용하고 있는지요?

    input 태그는 사용하시면 안될 듯합니다 ㅎㅎ

  • a 태그를 사용해서 버튼을 삽입할수있는건가요?

    이미 적용되있는 로그인버튼을 응용하려고했던건데 저렇게 하는게 아닌가보네요...

  • a 태그나 button 태그나 모두 CSS로 모양을 변경하는게 일반적입니다.

    button 태그도 원래는 모양이 아주 투박해서 그냥 사용하긴 좀 그렇거든요 ㅎㅎ

     

    아래 코드에 buttons 이라는 클래스만 추가를 해봤습니다.

    <a class="pwdreset buttons" href="<?php echo add_query_arg(array('a'=>'pwdreset'), get_cosmosfarm_members_profile_url())?>"><?php echo __('Forgot Password', 'cosmosfarm-members')?></a>
    <a class="register buttons" href="<?php echo wp_registration_url()?>"><?php echo __('Register', 'cosmosfarm-members')?></a>

    어떻게 적용이 되는지 확인해보시겠어요?

    그리고 CSS를 적절히 적용해주셔야 모양을 바꿀 수 있어요~

  • .cosmosfarm-members-form .pwdreset buttons { position: static; display: block; margin: 0; padding: 0 20px !important; width: 100%; max-width: 100%; height: 40px; line-height: 40px; font-size: 15px; box-sizing: border-box; outline: none; color: white; border: 0; background: none; background-color: #3399cc !important; box-shadow: none; cursor: pointer; }

    css에 이런식으로 추가해주면 될까요?

  • 같은 레벨이기 때문에

    .cosmosfarm-members-form .pwdreset.buttons { position: static; display: block; margin: 0; padding: 0 20px !important; width: 100%; max-width: 100%; height: 40px; line-height: 40px; font-size: 15px; box-sizing: border-box; outline: none; color: white; border: 0; background: none; background-color: #3399cc !important; box-shadow: none; cursor: pointer; }

    .pwdreset.buttons 이렇게 중간에 공백(스페이스) 없이 붙여주셔야 합니다.

  • 아래처럼 표시가 되어지는데요

     

    이것을 질문 스크린샷처럼 비밀번호 찾기와 회원가입이 같은 줄에 있으면서 중간의 여백이 들어가게 하려면 어떻게 해야 하나요?

    추가적으로 제가 다른 마우스를 올릴 시 변하는 색상도 위의 css코드에 추가했는데요 제대로 작동을 할 수 있을까요?

    border-color: #d43f3a !important;

     

    position의 속성이 현재 static으로 되어있는데 이것을 absolute로 변경해야 할지 의문이네요 또 글자도 중앙정렬이 아닌 왼쪽정렬입니다 ㅜㅜ

  • 확인해볼 수 있는 페이지가 있다면 추가로 도움을 드릴 수 있을 듯합니다~^^

    position 속성은 안 바꾸셔도 될 듯합니다.

    position: static; 이게 브라우저의 기본값이거든요 ㅎㅎ

    기존에 width: 100%; 이 속성을 조절하시면 될 듯합니다.

    width: 40%; 이런 식으로 조절을 해보시겠어요?

    글자 중앙 정렬은 text-align: center; 속성을 주시면 될 듯합니다.

    이제부턴 전부 CSS 속성이 좌지우지할 듯하군요 ㅎㅎ;;

  • 그냥 회원가입하고 비밀번호찾기를 php에서 삭제하고 테마 외모에서 링크로 연결된 박스로 설정해야겠습니다

    해결이안되는거같고 css라 바로바로 확인이 불가능하네요;;

    도움주셔서 감사합니다

  • 제가 임의로 php파일에서 회원가입과 비밀번호찾기를 삭제하고 테마에서 버튼를 추가하려고하는데 이것또한 테마속성상 중복으로 칼럼나누는게 불가능하여 삽입이 어렵네요

    질문과같은 스크린샷으로 넓이는 100%로 늘리고 비밀번호와 회원가입 버튼만 40%를 줘서 서로 같은라인에 있되 간격이 떨어져있는건 구현 불가능하겠죠?

    사이트 주소는 https://www.doogis.com 이고 모든 페이지에 로그인 사이드바가 적용되어있습니다

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

    .cosmosfarm-members-form .link-text { width: 50%; float: left; text-align: center; }

     

    CSS 코드 추가하고 바로 확인 안되는건 캐시 때문입니다.

    캐시 플러그인 사용하시면 비활성화 하시고,

    크롬 브라우저라면 Ctrl + Shift + R 단축키로 강력새로고침 할 수 있습니다.

    그럼 바로바로 확인하실 수 있습니다 ㅎㅎ

  • 감사합니다 해결되었습니다

    저 코드를 아래와같이 변경해서 삽입했더니 간격도 벌어지고 해결되었습니다

    .cosmosfarm-members-form .pwdreset.buttons { width: 49%; float: left; text-align: center; }
    .cosmosfarm-members-form .register.buttons { width: 49%; float: right; text-align: center; }
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기