Настройка оформления каптчи

Главные вкладки

Аватар пользователя TINC TINC 4 апреля 2020 в 1:42

Нужно настроить форму, в которой показывается каптча.

Как вы видите, эта форма шире тех, что сверху, а содержимое не выровнено по центру.

Где это можно поменять? Последний раз залазил в Друпал лет 10 назад.

Комментарии

Аватар пользователя TINC TINC 4 апреля 2020 в 12:17
<fieldset class="captcha form-wrapper"><div class="fieldset-wrapper"><div class="fieldset-description">Подтвердите, что вы человек.</div><input name="captcha_sid" type="hidden" value="103">
<input name="captcha_token" type="hidden" value="b96954c6d4805520f45a0c63e98faf53">
<img width="180" height="60" title="Image CAPTCHA" alt="Image CAPTCHA" src="/image_captcha?sid=103&amp;ts=1585991395" typeof="foaf:Image"><div class="form-item form-type-textfield form-item-captcha-response">
  <label class="in-field-labels-processed" for="edit-captcha-response">Введите текст <span title="Это поле обязательно для заполнения." class="form-required">*</span></label>
 <input name="captcha_response" class="form-text required" id="edit-captcha-response" type="text" size="15" maxlength="128" value="" autocomplete="off">
<div class="description">см. картинку выше</div>
</div>
</div></fieldset>

Не подскажете, что именно нужно прописывать в CSS?

Аватар пользователя sas@drupal.org sas@drupal.org 4 апреля 2020 в 14:38

План такой:
- Включаете в браузере DevTools = F12 или Ctrl+Shift+I
- Находите через наведение мыши на объект нужный объект
- Правите добавляете нужны свойства в css
P.S.
- Для установки ширины можно использовать width https://developer.mozilla.org/en-US/docs/Web/CSS/width
- Для выравнивания элементов можно использовать flex https://www.w3.org/TR/css-flexbox-1/

Аватар пользователя TINC TINC 4 апреля 2020 в 14:58

Сделал так, добавив в CSS темы:

.captcha {
  width: 77%;
  margin: 0 20px;
  border-color: #c0c0c0;
  border-top-style: none;
  border-top-width: 0.0625em;
  padding-top: 0.4625em;
  border-bottom-style: none;
  border-bottom-width: 0.0625em;
  padding-bottom: 0.9125em;
  border-left-style: none;
  border-left-width: 0.0625em;
  padding-left: 0.9125em;
  border-right-style: none;
  border-right-width: 0.0625em;
  padding-right: 0.9125em;
  text-align: center;
}

Не немножко сам модуль подправил. Теперь почти всё хорошо.