제 웹페이지 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을 살펴 보았습니다.
왼쪽이 모바일 버젼// 오른쪽이 PC 버젼입니다. 왼쪽 모바일 버젼의 Sign up, Find account info 를 오른쪽처럼 바꾸고 싶습니다.
찾아보니 위 그림의 빨간색 밑줄친 부분이 PC 버전의 Sign up, Find account info 버튼하고 관련이 있더라구요. 그런데 문제는 모바일 버젼에서 어느 css 파일을 건드려야 할지를 모르겠습니다 ㅠㅠ
크롬 개발자도구에서 아무리 elements를 살펴보고 건드려보아도 Sign up, find account info의 박스가 생겨나질 않더라구요...어디서부터 잘못된 것인지 모르겠는데 xetown 여러분들의 고견을 기다려봅니다 ㅠㅠ
댓글 18
이런 식으로 구성하고싶으신거죠?
HTML 소스
<div class="login-footer">
<div class="help" style="
">
<li><a href="/index.php?mid=page_cPJR26&act=dispMemberSignUpForm">Sign Up</a></li>
<li><a href="/index.php?mid=page_cPJR26&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;
}
/modules/member/skins/default/css/member.css
에 병합하시는 게 좋을 거 같네요
지금 Sign up 부분위에 이상한 줄 2개가 쳐져 있어서 [크롬 개발자도구]의 Elements 부분에서 확인해보니 그림에서 보이는 코딩 2줄때문에 그런거더라구요. 그런데 이 부분을 지우고 싶은데, fileseek 으로 제 ftp에 올라와있는 모든 파일에서 쿼리 memberloginform 를 검색해보아도 어떤 파일도 안 나오더라구요. 그래서 저 코딩 2줄을 어떻게 없애면 될지, 아니면 다른 방법을 써서라도 저 sign up 위에 나타나는 줄을 지우고 싶으면 어떻게 해야할지 가르침을 부탁드립니다 ㅠㅠ
수정했던 xml 파일을 다시 열고 기존 로그인 링크를 남겨놨는지 확인해보셔야겠네요
개발자도구만으로는 전체 소스를 볼 수가 없어서...
아니면 소셜XE쪽 모듈의 스킨에서
<a href="{getUrl('act','dispMemberLoginForm','mode','default')}"></a>
있는지 확인해보세요
35번째 줄에 보시면 DIGIWB님께서 말씀하신 부분이 보이더라구요.
/www/modules/socialxe/m.skins/default 에 들어있던 sns_login.html 이라는 파일이었어요.
그런데 이 코딩은 전 댓글의 스크린샷에 있는 <a href="/index.php.....> 랑 다르게 생겼잖아요. 그래도 관련이 있는 코딩인가요?
저 구문이 소셜 XE를 사용할 때 '기존 로그인'링크가 나타나는 곳이거든요...
개발자 도구에 나온 정보와 완전 딴판인 걸 봐선 다른곳에서 표시해주는 거 같습니다.
한번 지워보셔도 안 되면 로그인 페이지 관련된 걸 먼저 확인해봐야겠네요.
이와는 별개로 SSL이 적용되지 않은 상태에선 저 구문에서 /index.php???
이런식으로 나옵니다.
sns_login.html 파일을 지우니까 아예 이렇게 나오네요 ㅠㅠ 다른 로그인 페이지를 확인해보아야 할 것 같아요! 혹시 제가 찾아보아야 할 코딩이 있다면 알려주실 수 있을까요? 그럼 제가 찾아보겠습니다!! 이렇게 친절히 도와주셔서 감사합니다. 좋은 한 주의 시작 되시길 바라면서 염치없지만 다시 한 번 부탁드려봅니다.
로그인 관련이라면 로그인 위젯하고 멤버 모듈쪽을 로드하니 그쪽도 확인해보시는 게 좋겠네요
+다른 로그인 페이지를 찾아보셔도 없다면 아까 말씀드린 코드가 문제일겁니다.
참고로 저기 35번째 줄에 {$lang->sns_default_login} 부분은 lang.xml 파일을 참조하는 것 같은데요. 이 파일의 sns_login 부분을 보여드리면 위 그림의 103-111번째 줄과 같습니다.
이 부분이 관련이 있는지 모르겠지만 그래도 도움이 되실 것 같아서 보여드립니다. 정말로 이렇게 많은 도움을 주셔서 감사드립니다 ㅠㅠ
그럼 바로 나올겁니다~
sns_login.html 을 이렇게 고치니까 제데로 나옵니다 ㅠㅠ 감사합니다!