Блог

В настоящее время я использую это расширение в своем проекте Yii http://www.yiiframework.com/extension/recaptcha /

он работает нормально. но с тех пор я хочу сделать свой сайт более отзывчивым. я внес некоторые изменения в код, и он перестал работать.

это моя предыдущая настройка, которая работала нормально

 /*<![CDATA[*/
var RecaptchaOptions = {
   theme : 'white',
   lang : 'en',
   tabindex : 0
};
/*]]>*/
 

это мои текущие настройки

 /*<![CDATA[*/
var RecaptchaOptions = {
   theme : 'custom',
   custom_theme_widget : 'responsive_recaptcha',
   lang : 'en',
   tabindex : 0
};
/*]]>*/
 

ниже мой CSS

 *,
*:after,
*:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#responsive_recaptcha {
  background-color: #b71800;
  padding: 0.5em;
  border-radius: 1em;
  position: relative;
  overflow: auto;
  max-width: 480px;
  font: 0.75em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#responsive_recaptcha a {
  color: #ffffff;
  text-decoration: none;
}
#responsive_recaptcha img,
#responsive_recaptcha #recaptcha_image {
  width: 100% !important;
  height: auto !important;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#responsive_recaptcha .solution {
  margin-top: 0.5em;
  padding: 0.5em;
  padding-top: 1em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fbe098;
  color: #000000;
  display: block;
}
#responsive_recaptcha .solution input {
  display: block;
  width: 100%;
  margin: 0.5em auto;
  -webkit-appereance: none;
  border: 1px solid #f7c236;
  font: inherit;
  font-size: 150%;
  outline: none;
}
#responsive_recaptcha .solution input:focus {
  border-color: #b71800;
}
#responsive_recaptcha .options {
  margin-top: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#responsive_recaptcha .options a {
  background-color: #c5523d;
  display: block;
  padding: 0.5em;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}
#responsive_recaptcha .options a:first-child {
  border-radius: 0.5em 0.5em 0 0;
}
#responsive_recaptcha .options a:last-child {
  border-radius: 0 0 0.5em 0.5em;
  border-bottom: 1px solid #000000;
}
@media screen and (min-width: 480px) {
  #responsive_recaptcha .solution {
    float: left;
    width: 66%;
    margin-top: 0.5em;
    padding: 1em;
  }
  #responsive_recaptcha .solution input {
    margin: 0.35em auto;
    width: 90%;
  }
  #responsive_recaptcha .options {
    float: right;
    width: 34%;
    padding-left: 0.5em;
  }
}
 

когда я использую свою пользовательскую тему, больше ничего не отображается. Есть идеи, чего мне не хватает?

я просто делал это пару месяцев назад. вот мое решение

откройте свою extensions/recaptcha/EReCaptcha.php и измените run() функцию на эту

 /**
     * Renders the widget.
     */
    public function run()
    {
      $body = '';
      if ($this->hasModel()) {
         $body = CHtml::activeHiddenField($this->model, $this->attribute) . "n";
      }

      /*
       * Added the HTML below to support our custom responsive theme!!
       */
      echo $body . '<div id="responsive_recaptcha" style="display:none">

                   <div id="recaptcha_image"></div>
                   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

                  <label class="solution">
                    <span class="recaptcha_only_if_image">Type the two words:</span>
                    <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

                    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
                  </label>
                  <div class="options">
                    <a href="javascript:Recaptcha.reload()" id="icon-reload">Get another CAPTCHA</a>
                    <a class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')" id="icon-audio">Get an audio CAPTCHA</a>
                    <a class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')" id="icon-image">Get an image CAPTCHA</a>
                    <a href="javascript:Recaptcha.showhelp()" id="icon-help">Help</a>
                  </div>
                </div>'.

      recaptcha_get_html($this->publicKey,
                                      null,
                                      ($this->useSsl ? true : Yii::app()->request->isSecureConnection));
    }
 

это должно сработать 🙂