카카오 로그인 버튼의 가로폭 길이 늘리려면 어떻게 할까요? style.css
본문
카카오 로그인 사용시 버튼 가로폭 늘리려면 어떻게 할까요?
네이버 로그인은 사용 안해서 카카오 로그인 버튼을 두배로 하려구요
/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 {position:relative;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:#4285F4;background-position:5px 5px;border-bottom:1px solid #3567c6;letter-spacing:-0.5px}
#sns_login .sns-google .ico {position:absolute;top:3px;left:3px;width:33px;height:33px;background:url('./img/sns_gp_s.png') no-repeat center center;background-color:#fff;background-size:28px 28px!important;border-radius:2px}
#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)}
이하는
/social_login.skin.php
<div id="sns_login" class="login-sns sns-wrap-32 sns-wrap-over">
<h3>소셜계정으로 로그인</h3>
<div class="sns-wrap">
<?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 ?>
답변 2
#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 {text-align: center; width:100%; padding-left:10px;border-left:1px solid rgba(0,0,0,0.1);display:block;font-weight:bold}
왠지 느낌이 이거 같은데 한 번 수정해보시면 어떨지..
width: 100%; 추가..
#sns_login .sns-kakao {background-color:#ffeb00;background-position:5px 5px;border-bottom:1px solid #e2c10a; width: 100%;}
답변을 작성하시기 전에 로그인 해주세요.