Q&A

제 웹페이지 URL : http://kimbapp.com   

사용 XE버젼 : 버젼 1.8.17

PC 레이아웃 : Default

모바일 레이아웃 : Xenon HS

사용 호스팅 : cafe24

 

Q1. "모바일 버젼의 "Sign up, Find account info 버튼"을 "PC버젼의 버튼 모양"처럼 바꾸고 싶어요!

왼쪽 그림이 모바일 버젼의 로그인 창입니다. 여기서 저 볼품 없어보이는 Sign up, find account info 2개의 버튼 모양을 오른쪽 그림의 PC 버전처럼 바꾸고 싶은데요. 제가 모바일 버젼 sign up, find account info 버튼을 PC버젼의 html 을 그대로 복사-붙여넣기 해서 만들었거든요. 그래서 아마 css의 영향일꺼라고 생각해서 [크롬 개발자 도구]로 style을 살펴 보았습니다.

 

캡처2.JPG캡처.JPG

왼쪽이 모바일 버젼// 오른쪽이 PC 버젼입니다. 왼쪽 모바일 버젼의 Sign up, Find account info 를 오른쪽처럼 바꾸고 싶습니다.

 

캡처3.JPG

 

찾아보니 위 그림의 빨간색 밑줄친 부분이 PC 버전의 Sign up, Find account info 버튼하고 관련이 있더라구요. 그런데 문제는 모바일 버젼에서 어느 css 파일을 건드려야 할지를 모르겠습니다 ㅠㅠ

 

캡처4.JPG

 

크롬 개발자도구에서 아무리 elements를 살펴보고 건드려보아도 Sign up, find account info의 박스가 생겨나질 않더라구요...어디서부터 잘못된 것인지 모르겠는데 xetown 여러분들의 고견을 기다려봅니다 ㅠㅠ

 

 

댓글 18

  • 제가 PC버젼에서 모바일 버젼으로 배껴온 sign up의 html은 참고로 <li> <a href="/index.php?mid=page_cPJR26&amp;act=dispMemberSignUpForm">Sign Up</a></li> 입니다.
  • CSS 값을 직접 생성하셔야하는데... 잠깐만 기다려보세요~
  • 이런 식으로 구성하고싶으신거죠?

    Clipboarder.2016.03.27-002.png

     

  • @digiwb

    HTML 소스
    <div class="login-footer">
    <div class="help" style="
    ">
    <li><a href="/index.php?mid=page_cPJR26&amp;act=dispMemberSignUpForm">Sign Up</a></li>
    <li><a href="/index.php?mid=page_cPJR26&amp;act=dispMemberFindAccount">Find Account Info</a></li>
    </div>
    </div>

    기존에 있던 기존로그인 링크를 지우고, 푸터 안에 div를 따로 묶어서 class를 help로 지정,

    링크는 <li>로 묶어주세요.

    CSS 소스
    .login-footer .help {
    list-style: none;
    margin: 15px 0 0 0;
    padding: 15px 0 0 0;
    }
    .login-footer .help li {
    margin: 0 0 3px 0;
    }
    .login-footer .help a {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-bottom-color: #b7b7b7;
    border-radius: 2px;
    text-decoration: none;
    color: #666;
    display: block;
    line-height: 24px;
    padding: 0 11px;
    font-size: 12px;
    text-align: center;
    }

  • @digiwb
    DIGIWB님 답변해주셔서 감사합니다. 지금 html 소스는 변경하였는데 (참고로 이 코딩을 .xml 확장자로 끝나는 파일에서 변경해야 되더라구요), 어느 파일의 css를 변경해야 할지 몰라서 찾는 중입니다 ㅠㅠ 혹시 어느 경로에 있는 CSS 파일을 건드리면 될지 한 말씀 더 부탁드려도 될까요?
  • @홈페이지만들꺼야
    개발자 도구에서 로그인 관련 CSS 소스 뜨는 주소로 봤을 땐
    /modules/member/skins/default/css/member.css
    에 병합하시는 게 좋을 거 같네요
  • @digiwb

    캡처.JPGDIGIWB님 정말로 감사드립니다. 가르쳐주신 덕분에 여기까지 올 수 있었습니다. 송구스럽지만 하나만 더 여쭈어 봐도 될까요?

     

    지금 Sign up 부분위에 이상한 줄 2개가 쳐져 있어서 [크롬 개발자도구]의 Elements 부분에서 확인해보니 그림에서 보이는 코딩 2줄때문에 그런거더라구요. 그런데 이 부분을 지우고 싶은데, fileseek 으로 제 ftp에 올라와있는 모든 파일에서 쿼리 memberloginform 를 검색해보아도 어떤 파일도 안 나오더라구요. 그래서 저 코딩 2줄을 어떻게 없애면 될지, 아니면 다른 방법을 써서라도 저 sign up 위에 나타나는 줄을 지우고 싶으면 어떻게 해야할지 가르침을 부탁드립니다 ㅠㅠ

  • @홈페이지만들꺼야

    수정했던 xml 파일을 다시 열고 기존 로그인 링크를 남겨놨는지 확인해보셔야겠네요
    개발자도구만으로는 전체 소스를 볼 수가 없어서...

     

    아니면 소셜XE쪽 모듈의 스킨에서

    <a href="{getUrl('act','dispMemberLoginForm','mode','default')}"></a>

    있는지 확인해보세요

  • @digiwb

    코딩사진.JPG

     

    35번째 줄에 보시면 DIGIWB님께서 말씀하신 부분이 보이더라구요.

    /www/modules/socialxe/m.skins/default 에 들어있던 sns_login.html 이라는 파일이었어요.

    그런데 이 코딩은 전 댓글의 스크린샷에 있는 <a href="/index.php.....> 랑 다르게 생겼잖아요. 그래도 관련이 있는 코딩인가요? 

     

  • @홈페이지만들꺼야

    저 구문이 소셜 XE를 사용할 때 '기존 로그인'링크가 나타나는 곳이거든요...
    개발자 도구에 나온 정보와 완전 딴판인 걸 봐선 다른곳에서 표시해주는 거 같습니다.
    한번 지워보셔도 안 되면 로그인 페이지 관련된 걸 먼저 확인해봐야겠네요.

    이와는 별개로 SSL이 적용되지 않은 상태에선 저 구문에서 /index.php???

    이런식으로 나옵니다.

  • @digiwb

    0920.JPG

    sns_login.html 파일을 지우니까 아예 이렇게 나오네요 ㅠㅠ 다른 로그인 페이지를 확인해보아야 할 것 같아요! 혹시 제가 찾아보아야 할 코딩이 있다면 알려주실 수 있을까요? 그럼 제가 찾아보겠습니다!! 이렇게 친절히 도와주셔서 감사합니다. 좋은 한 주의 시작 되시길 바라면서 염치없지만 다시 한 번 부탁드려봅니다.

     

  • @홈페이지만들꺼야
    코드를 지우셔야하는데 파일을 지우셨네요...ㅠㅠㅠㅠ
    로그인 관련이라면 로그인 위젯하고 멤버 모듈쪽을 로드하니 그쪽도 확인해보시는 게 좋겠네요
    +다른 로그인 페이지를 찾아보셔도 없다면 아까 말씀드린 코드가 문제일겁니다.
  • @digiwb

    sns_login.JPG말씀해주신대로 이 35번째 줄을 지워보니 아래 그림처럼 아예 아래 login_footer 부분이 사라졌습니다 ㅠㅠ

    sns_login homepage.JPG

     

  • @digiwb

    lang.JPG

     

    참고로 저기 35번째 줄에 {$lang->sns_default_login} 부분은 lang.xml 파일을 참조하는 것 같은데요. 이 파일의 sns_login 부분을 보여드리면 위 그림의 103-111번째 줄과 같습니다.

    이 부분이 관련이 있는지 모르겠지만 그래도 도움이 되실 것 같아서 보여드립니다. 정말로 이렇게 많은 도움을 주셔서 감사드립니다 ㅠㅠ

  • @홈페이지만들꺼야
    지운 부분에 아까 말한 html 코드 다시 넣어보세요~
    그럼 바로 나올겁니다~
  • @digiwb
    <a href="/index.php?mid_page.....>이거 말씀하시는거죠? 지금 학교에 가는 지하철안인데 운동하고 학교에 도착해서 해보겠습니다!
  • @digiwb

    완료.JPG

    sns_login.html 을 이렇게 고치니까 제데로 나옵니다 ㅠㅠ 감사합니다!

  • @홈페이지만들꺼야
    원하는 결과가 나와서 다행입니다 ㅎㅎ