2009-11-11 6 views
11

recaptcha가 기본 프레임없이 완전히 사용자 정의 할 수 있는지 알 수 있습니까? 나는 recaptcha 이미지가 특정 너비뿐만 아니라 입력 필드가 필요합니다. 전에 성공한 사람이 있습니까?Recaptcha - 양식 사용자 정의

답변

11

:

: 당신은 다음 페이지에 사업부를 만들
<script type="text/javascript"> 
    var RecaptchaOptions = { 
     theme : 'custom', 
     custom_theme_widget: 'recaptcha_widget' 
    }; 
</script> 

이 같은 custom_theme_widget ID와 일치하는
<div id="recaptcha_widget"> 
    <div id="recaptcha_image"></div> 
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" /> 
</div> 

이 같은 CSS를 사용하여 폭을 제한 할 수 있도록 이미지의 recaptcha_image 사업부에 삽입됩니다

#recaptcha_image img { 
    width: 200px; 
} 

... 브라우저에서 더 큰 이미지의 크기가 조정되고 captcha가 읽을 수 없게 될 수 있으므로 반드시 권장하지는 않습니다. recaptcha_response_field 입력은 원하는대로 스타일을 지정할 수도 있습니다.

사용자 지정 테마에서 수행 할 수있는 작업 (및해야 할 작업)에 대한 자세한 예제는 "모양 및 사용자 지정"단원 here을 참조하십시오.

4

theme 사용자 지정 입력란을 작성하는 데 도움이되는 맞춤 설정을 만들 수 있지만 이미지 크기는 운이 좋지 않을 것입니다. 300 x 57로 고정되어 있지만 물론 크기를 변경할 수는 있습니다. 아마도 더 왜곡, 완전히 읽을 수, 이미지의 결과)는 6으로 작업을해야하는 경우

3

http://risingofsilversurfer.blogspot.com/2009/10/customize-recaptcha-theme.html

이, 파이어 폭스에 대한 다른 브라우저에 대한하지만 확실하지 작동 내가 그것을 생각하지 않는다 CSS 이미지 크기가 바뀌기 때문에 모든 모양이 어긋납니다.

당신은 당신의 페이지에 이런 일을 포함하여 '사용자 정의'테마 옵션을 사용하여 사용자 정의 태그를 지정할 수 있습니다
1

나는 모두 reCAPTCHA 스타일을 업데이트했습니다.

다음 CSS는 이미지와 컨테이너의 너비와 높이를 변경합니다. 크기는 원래 Google에서 정의하지만 페이지에 새 스타일을 추가하여 덮어 쓸 수 있습니다.

<style type="text/css"> 
#recaptcha_image img{ 
    height:46px; 
    width:230px; 
    margin: 0px; 
    padding: 0px; 
} 
#recaptcha_container { 
    margin: 0px; 
    padding: 0px; 
    width: 230px; 
} 
</style> 

이미지가 작을수록 사용자가 읽는 것이 더 어려워집니다.

관련 문제