Форма для комментариев

Доброго времени суток, всем читателям — Sozdaiblog.ru!

Сегодня я покажу, как может преобразиться стандартная форма для комментариев в WordPress с помощью неоновой подсветки.

Думаю, что все пользователи WordPress (установка wordpress) обратили внимание на унылый вид стандартной формы комментариев практически всех шаблонов созданных для нашего любимого движка.

Решил я это дело исправить. Мне захотелось добавить немного жизни в скучные поля заполнения данных.

Для этого в файл «style.css», который находится в папке Вашей активной темы оформления, я добавил следующие стили:

 

#respond {
background: #ffffff;
}

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

 

Теперь при клике по одному из полей вокруг него образуется неоновая подсветка. Для наглядности можете опуститься в конец поста и посмотреть.

Следующим шагом в поле адреса сайта я изменил его цвет отображения с помощью добавления следующего стиля:

 

#url  {
color: #21759b;
}

 

Ну а последним штрихом в модернизации формы для комментариев стала доработка кнопки отправления сообщений. Это было реализовано с помощью CSS3:

 

#submit {
font-family: Arial;
color: #ffffff;
font-size: 14px;
padding: 0px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
}

#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
  background: -moz-linear-gradient(top, #003366, #006ad4)
}

 

Надеюсь, что теперь форма для комментариев привлечёт больше Вашего внимания, нежели раньше, и Вы обязательно что-нибудь прямо сейчас прокомментируете.

На сегодня это всё. Удачи.

 

С уважением, Денис Черников!