Как я могу безопасно переопределить стили оформления контакта 7?

Где я могу поместить стили CSS для переопределения стилей по умолчанию формы контакта 7, чтобы мои изменения не перезаписывались всякий раз, когда я обновляю этот плагин?

Solutions Collecting From Web of "Как я могу безопасно переопределить стили оформления контакта 7?"

Вот несколько способов сделать это.

Если вы используете настраиваемую тему, вы можете отредактировать этот стиль.css и внести изменения стиля, которые вы там хотите.

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

Вы можете создать свою собственную таблицу стилей и просто ссылаться на нее в header.php в теме, которую вы используете.

Мой сайт также использует контактную форму 7 с пользовательскими стилями и бутстрапом: http://splash.inting.org/wp/

Вот ваши варианты:

1) При создании вашей формы приложите поля к другим элементам html (с соответствующими классами), как показано ниже:

<div class="control-group"> <label class="control-label" for="input01">First Name*</label> <div class="controls"> [text* FirstName id:FirstName class:input-xlarge] </div> </div> 

Вы также можете определить идентификаторы и классы для ваших элементов контактной формы 7, как указано выше.

2) Создайте файл custom.css и обновите заголовок header.php текущей темы, убедившись, что таблица стилей добавлена ​​последним (прямо перед закрытием заголовка). Если он добавлен последним, менее вероятно, что он будет перезаписан стилями темы или плагина.

3) Используйте! Важно для определения класса и идентификатора CSS, чтобы они не перезаписывались другими стилями

То, что я сделал, – это просто запретить загрузку таблицы стилей плагина. Это описано в http://contactform7.com/controlling-behavior-by-setting-constants/ и выглядит следующим образом:

 /* Settings for Contact Form 7 */ define('WPCF7_LOAD_CSS', false); 

Этот фрагмент находится в файле wp.config.

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

Например, мои стили для контактной формы выглядят так:

 .wpcf7-form { margin-top: 1em; } .wpcf7-form fieldset p { margin: 0; } .wpcf7-form label { display: block; float: left; clear: left; width: 150px; text-align: right; margin-right: 5px; margin-bottom: 1.5em; } .wpcf7-form input[type="text"], .wpcf7-form textarea { display: block; float: left; width: 250px; margin-top: 0; } .wpcf7-form textarea { width: 450px; } .wpcf7-form fieldset.submit { margin-top: 1em; position: relative; } .wpcf7-form input[type="submit"] { display: block; margin-left: 154px; width: 150px; } .wpcf7-display-none { display: none; } .wpcf7-response-output { margin: 0 155px; border: 1px solid #000; padding: 0.5em; top: -1em; position: relative; } .wpcf7-mail-sent-ok { border-color: #398f14; } .wpcf7-mail-sent-ng { border-color: #ff0000; } .wpcf7-spam-blocked { border-color: #ffa500; } .wpcf7-validation-errors { border-color: #f7e700; } .wpcf7 img.ajax-loader { margin: 1em 0 0 155px; } span.wpcf7-form-control-wrap { position: relative; float: left; } span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; background: #fff; border: 1px solid #ff0000; font-size: 0.9em; padding: 0.2em; } span.wpcf7-not-valid-tip-no-ajax { color: #f00; font-size: 10pt; display: block; } 

.wpcf7- бит является важным, поскольку стили могут быть ограничены только формами, создаваемыми этим плагином.

Это распространенное заблуждение относительно того, что плагин Contact Form 7 (CF7) контролирует появление форм CF7, хотя плагины CSS-стилей. По правде говоря, плагин Contact Form 7 использует только очень минимальное стилизацию CSS, чтобы форма CF7 могла сочетаться с большинством веб-сайтов.

Фактический вид форм CF7 на вашем сайте будет зависеть в основном от текущей используемой темы WordPress и стиля CSS, который применяется к стандартным элементам HTML-формы. Чтобы изменить внешний вид форм CF7 в соответствии с вашими требованиями, вам нужно будет настроить CSS, используемый вашей текущей темой для этих элементов формы HTML.

Используйте дочернюю тему для внесения изменений в формы CF7 CSS

Наиболее распространенным и предпочтительным способом внесения изменений в стиль оформления CF7 является создание дочерней темы. Внесите необходимые дополнения в дочерние темы style.css, а не непосредственно в темы styles.css. Таким образом, вы не потеряете свои изменения при обновлении темы.

Файл style.css дочерней темы обычно импортирует все стили из родительской темы, включая следующий CSS-код в верхней части файла style.css дочерней темы.

 /* Import Parent Theme */ @import url('../parent-theme/style.css'); 

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