Добавление фотографий и галерей картинок для WordPress (WordPress для начинающих)
Опубликовано: 13.10.2016
Мы сгенерировали форму подписки, устанавливаем ее в боковую колонку нашего веб-сайта и лицезреем вот такую картину — форма обширнее, чем колонка веб-сайта. Что делать?
Для решения заморочек с высотой либо шириной формы нам необходимо в ее коде поменять характеристики, определяющие ее размеры. Если у вас установлено расширение FireBug для браузера Firefox и вы имеете в нем работать, то отлично — находите характеристики и исправляете.
Если же нет — разглядим процесс детально. Я объясню на примере работы в браузере Firefox, но нужные составляющие для работы с веб-сайтом есть во всех современных браузерах.
Не устанавливается драйвер видеокарты NVIDIA
А) Открываем наш веб-сайт с формой подписки в браузере, наводим курсор на форму и жмем правую кнопку мыши. Дальше находим и жмем на «Изучить элемент».
Б) Раскрывается интегрированный в браузер редактор стилей дизайна веб-сайта, мы лицезреем код частей формы. Нужно подняться выше по коду, чтоб отыскать где задается ширина формы подписки.
Как установить и настроить программу "Evolve" ? Легко !
1. Это наша форма подписки, она выделена пунктиром, ее код отображается ниже и доступен для исправления.
2. Вот фактически html-код формы. Стрелка показывает на строчку, в какой задается ширина формы подписки:
В коде ширина задана так: style="width: 390px;"
3. Справа правила CSS-стилей отображения частей веб-сайта (в том числе и формы подписки). Стрелка показывает как раз на значение ширины формы.
В) Мы отыскали подходящий код, сейчас изменим ширину формы подписки.
Для этого в правой колонке (обозначена цифрой 3) кликаем на значение ширины 390px, оно становится доступно для правки и вносим конфигурации.
Г) Сейчас нужно перенести изготовленные конфигурации в код формы на веб-сайте.
Наша форма установлена в боковой колонке виджетов, потому мы ее находим через редактор виджетов WordPress. Если вы ставили форму в тесте статьи либо другом месте, то отыскиваете код формы там, куда вы его располагали.
Воспользуемся интегрированным в браузер поиском: нажмем комбинацию кнопок ctrl+F и наберем поисковый элемент 390px
На картинке выше выделена отысканная строчка, в какой задается ширина формы в коде. Ее и нужно поправить. Заменяем 390px на подходящую нам ширину. Я заменю на 280px. Все, форма сейчас имеет правильную ширину.
Но будьте готовы, что вам повстречаются еще трудности и форма будет как и раньше отображаться некорректно. Если такое случилось — напишите мне — я помогу все поправить.
Понятно, что в файле CSS для вашего веб-сайта уже заданы все нужные стили отображения частей. Этот файл вы сможете отыскать в папке вашей темы дизайна (обычно он именуется style.css). Случается, что стили дизайна вашего веб-сайта конфликтуют со стилями дизайна формы подписки. На данный момент мы научимся решать такую делему.
На картинке видно, что кнопка «Подписаться» имеет маленькие вырезы — они образуются итоге конфликта со стилем кнопок темы дизайна.
Чтоб убрать конфликт, необходимо пользоваться функцией «Изучить элемент» браузера либо инвентарем Firebug. Поочередно отключайте стили и смотрите, как меняется внешний облик кнопки. Таким методом вы отыщите конфликтующий элемент.
В нашем случае конфликт происходит со свойством:
button, input, textarea {
border: 1px solid rgb (204, 204, 204);
border-radius: 3px 3px 3px 3px; — это скругление углов кнопки, оно и делает недостаток отображения
font-family: inherit;
padding: 0.428571rem;
}
Чтоб убрать конфликт, можно пойти 2-мя способами:
А) Удалить обозначенное свойство. Тогда правда и стандартные кнопки на веб-сайте изменят внешний облик. Это не всегда подходит.
Б) Агрессивно задать значение характеристики для кнопки подписки.
Для этого в код формы подписки в характеристики кнопки мы допишем
style="border: !0important; border-radius: !0important;"
Директива !important задает ценность обозначенных параметров над другими, уже имеющимися в стилях веб-сайта.