소셜로그인 디자인
본문
왼쪽 로그인을 오른쪽 디자인으로 바꿀려면 어디를 수정해야 할까요?
찾기가 어렵네요.
답변 3
/skin/social/style.css
/*로그인 */
#sns_login {border:0;margin-top:15px;border-top:1px solid #edeaea}
#sns_login h3 {padding:10px 0 0;text-align:left;font-weight:bold}
#sns_login .sns-icon {display:block;height:40px;line-height:40px;width:100%;margin:0 0 5px;padding-left:40px;text-align:left;color:#fff;border-radius:2px}
#sns_login .sns-naver {background-color:#1fc800;background-position:5px 5px;border-bottom:1px solid #1ea505}
#sns_login .sns-kakao {background-color:#ffeb00;background-position:5px 5px;border-bottom:1px solid #e2c10a}
#sns_login .sns-kakao {color:#3c1e1e}
#sns_login .sns-facebook {background-color:#3b579d;background-position:5px 5px;border-bottom:1px solid #28458f}
#sns_login .sns-google {background-color:#db4a3a;background-position:5px 5px;border-bottom:1px solid #c03121}
#sns_login .sns-twitter {background-color:#1ea1f2;background-position:5px 5px;border-bottom:1px solid #1e82c0}
#sns_login .sns-payco {background-color:#df0b00;background-position:5px 5px;border-bottom:1px solid #9d0800}
#sns_login .txt {text-align:left;padding-left:10px;border-left:1px solid rgba(0,0,0,0.1);display:block;font-weight:bold}
#sns_login .txt:hover {background:rgba(0,0,0,0.07)}
/skin/social/social_login.skin.php
<?php if( social_service_check('naver') ) { //네이버 로그인을 사용한다면 ?>
<a href="<?php echo $self_url;?>?provider=naver&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-naver" title="네이버">
<span class="ico"></span>
<span class="txt">네이버<i> 로그인</i></span>
</a>
<?php } //end if ?>
<?php if( social_service_check('kakao') ) { //카카오 로그인을 사용한다면 ?>
<a href="<?php echo $self_url;?>?provider=kakao&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-kakao" title="카카오">
<span class="ico"></span>
<span class="txt">카카오<i> 로그인</i></span>
</a>
<?php } //end if ?>
<?php if( social_service_check('facebook') ) { //페이스북 로그인을 사용한다면 ?>
<a href="<?php echo $self_url;?>?provider=facebook&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-facebook" title="페이스북">
<span class="ico"></span>
<span class="txt">페이스북<i> 로그인</i></span>
</a>
<?php } //end if ?>
<?php if( social_service_check('google') ) { //구글 로그인을 사용한다면 ?>
<a href="<?php echo $self_url;?>?provider=google&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-google" title="구글">
<span class="ico"></span>
<span class="txt">구글+<i> 로그인</i></span>
</a>
<?php } //end if ?>
<?php if( social_service_check('twitter') ) { //트위터 로그인을 사용한다면 ?>
<a href="<?php echo $self_url;?>?provider=twitter&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-twitter" title="트위터">
<span class="ico"></span>
<span class="txt">트위터<i> 로그인</i></span>
</a>
<?php } //end if ?>
<?php if( social_service_check('payco') ) { //페이코 로그인을 사용한다면 ?>
<a href="<?php echo $self_url;?>?provider=payco&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-payco" title="페이코">
<span class="ico"></span>
<span class="txt">페이코<i> 로그인</i></span>
</a>
<?php } //end if ?>
위 부분을 수정하시면 됩니다^^
!-->!-->/skin/social/style.css
/skin/social/social_login.skin.php
테마 이용중이시라면
/theme/이용중인테마폴더/skin/social/style.css
/theme/이용중인테마폴더/skin/social/social_login.skin.php
위 파일을 참고하시어 변경해 주시면 됩니다.
위에 알려드린 부분을 수정하시면 됩니다.
질문하신 부분은 어디를 수정하면 되는지 물어보는 질문이어서 해당 소스코드들이 어디에 있는지 모르시는것 같아 해당하는 부분을 알려드린것 뿐입니다.
원하시는대로 수정을해드리길 원한다면 찾으신 소스코드를 올려두시고 어떻게 수정하면될지를 물어보셨어야 하지 않을까요?
질문내용을 잘못이해하고 필요없는 답변을 드렸다면 사과드립니다.
답변을 작성하시기 전에 로그인 해주세요.