그

부트스트랩 폰트어썸 캡챠(kcaptcha) 적용

· 2016-09-27 (화) 17:15:38 · 10310 · 6
captcha1.jpg
captcha2.jpg
부트스트랩 반응형 적용하다보면 자동등록방지 캡차 이미지가 애매하더군요.
그누보드 원본파일 수정하기 싫었으나, 어쩔수 없었네요

아래 코드처럼 수정하시면 됩니다.
부트스트랩, 폰트어썸 적용했습니다.


수정파일 : /plugin/kcapcha/kcaptcha.lib.php

[code]

// 캡챠 HTML 코드 출력
/*
function captcha_html($class="captcha")
{
if(is_mobile())
$class .= ' m_captcha';

$html .= "\n".'<script>var g5_captcha_url = "'.G5_CAPTCHA_URL.'";</script>';
//$html .= "\n".'<script>var g5_captcha_path = "'.G5_CAPTCHA_PATH.'";</script>';
$html .= "\n".'<script src="'.G5_CAPTCHA_URL.'/kcaptcha.js"></script>';
$html .= "\n".'<fieldset id="captcha" class="'.$class.'">';
$html .= "\n".'<legend><label for="captcha_key">자동등록방지</label></legend>';
if (is_mobile()) $html .= '<audio src="#" id="captcha_audio" controls></audio>';
//$html .= "\n".'<img src="#" alt="" id="captcha_img">';
$html .= "\n".'<img src="javascript:void(0);" alt="" id="captcha_img">';
if (!is_mobile()) $html .= "\n".'<button type="button" id="captcha_mp3"><span></span>숫자음성듣기</button>';
$html .= "\n".'<button type="button" id="captcha_reload"><span></span>새로고침</button>';
$html .= '<input type="text" name="captcha_key" id="captcha_key" required class="captcha_box required" size="6" maxlength="6">';
$html .= "\n".'<span id="captcha_info">자동등록방지 숫자를 순서대로 입력하세요.</span>';
$html .= "\n".'</fieldset>';
return $html;
}
*/

// bootstrap, fontawesome 적용 수정
function captcha_html()
{

$html .= "\n".'<script>var g5_captcha_url = "'.G5_CAPTCHA_URL.'";</script>';
$html .= "\n".'<script src="'.G5_CAPTCHA_URL.'/kcaptcha.js"></script>';
$html .= "\n".'<div style="border:0px; width:200px;">';
$html .= "\n".'<div class="pull-left"><img src="javascript:void(0);" alt="" id="captcha_img"></div>';
$html .= "\n".'<div class="pull-right"><div class="btn-group-vertical btn-group-sm" role="group">';
if (!is_mobile()) $html .= "\n".'<button type="button" id="captcha_mp3" class="btn btn-default"><i class="fa fa-volume-up fa-fw"></i></button>';
$html .= "\n".'<button type="button" id="captcha_reload" class="btn btn-default"><i class="fa fa-refresh fa-fw"></i></button>';
$html .= "\n".'</div></div>';
if (is_mobile()) $html .= '<audio src="#" id="captcha_audio" controls style="width:200px;"></audio>';
$html .= '<input type="text" name="captcha_key" id="captcha_key" required class="form-control" maxlength="6" placeholder="숫자입력">';
$html .= '</div>';

return $html;
}

[/code]



제가 극하수라 디자인을 잘 할줄몰라서...
더 이쁘게 만들어주세요

첨부파일

kcaptcha.lib.php (10.9 KB) 53회 2016-09-27 17:17
captcha1.jpg (13 KB)
4회 2016-09-27 17:17
captcha2.jpg (14.9 KB)
0회 2016-09-27 17:17
|

댓글 6개

부트스트랩 공부하려고 준비중인데..감사합니다.
어디부터해야할지 모르겠네요.
2016-10-04 (화) 09:56:04
저도 극초보라...
http://getbootstrap.com/
매뉴얼 참고하시는게 제일 좋은 것 같습니다.

댓글 남겨주셔서 감사합니다
2016-10-11 (화) 17:32:01
감사합니다 ^^
2016-10-12 (수) 10:30:05
제가 더 감사합니다. 좋은 하루 되세요
감사합니다.
감사합니다. 금방 찾고있었거든요~
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
16-11-07 조회 1만
16-11-03 조회 2만
16-10-20 조회 1만
16-10-19 조회 8,895
16-10-13 조회 1.3만
16-10-09 조회 7,967
16-10-08 조회 8,164
16-10-06 조회 1만
16-09-30 조회 4.2만
16-09-27 조회 1만
16-09-27 조회 1.3만
16-09-27 조회 1.9만
16-09-26 조회 7,623
16-09-20 조회 9,896
16-09-19 조회 6,786
16-09-15 조회 7,087
16-09-14 조회 9,653
16-09-13 조회 1.1만
16-09-10 조회 8,087
16-09-10 조회 1.3만
16-09-10 조회 1.5만
16-09-07 조회 7,278
16-09-05 조회 1.2만
16-09-04 조회 8,196
16-09-04 조회 7,728
16-09-01 조회 2만
16-08-30 조회 9,183
16-08-29 조회 6,233
16-08-26 조회 7,193
16-08-24 조회 8,419