2026, 새로운 도약을 시작합니다.

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

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개

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

댓글 남겨주셔서 감사합니다
감사합니다 ^^
제가 더 감사합니다. 좋은 하루 되세요
감사합니다. 금방 찾고있었거든요~

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 3일 전 조회 120
2740 5일 전 조회 109
2739 1주 전 조회 210
2738 1주 전 조회 218
2737 1주 전 조회 181
2736 1주 전 조회 280
2735 3주 전 조회 284
2734 3주 전 조회 263
2733 1개월 전 조회 265
2732 1개월 전 조회 301
2731 1개월 전 조회 268
2730 1개월 전 조회 227
2729 1개월 전 조회 357
2728 1개월 전 조회 245
2727 1개월 전 조회 422
2726 1개월 전 조회 256
2725 1개월 전 조회 332
2724 1개월 전 조회 361
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 212
2720 2개월 전 조회 304
2719 2개월 전 조회 307
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 202
2715 2개월 전 조회 312
2714 2개월 전 조회 273
2713 2개월 전 조회 376
2712 2개월 전 조회 289
🐛 버그신고