Изменить цвет сообщения об успехе / ошибке MailChimp - PullRequest
Новая
       5

Изменить цвет сообщения об успехе / ошибке MailChimp

0 голосов
/ 08 мая 2019

Я пытаюсь изменить сообщение об успехе / ошибке формы подписки mailchimp (правая боковая панель) на моем веб-сайте www.justnk.com

Я не могу понять, что мешает моему css-коду работать / что в html может вызывать некоторые автоматические попытки, о которых я не знаю.

Я попытался обойти различные ответы, показанные здесь, но большинство из них касается изменения самого текста, а не цвета. У WordPress.org также было это руководство (https://wordpress.org/support/topic/change-colour-of-success-message-text/), но я не смог его найти работа.

CSS я использую

/ Ответ на отправку формы / 

#mc_embed_signup #mce-responses #mce-error-response #mce-success-response.response {color: #ffffff !important; display: none !important;

Mailchimp html 

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"><style type="text/css"> #mc_embed_signup { clear:left; font:14px Helvetica,Arial,sans-serif; }</style>
<div id="mc_embed_signup">
<form action="https://justnk.us20.list-manage.com/subscribe/post?u=065434ce0102b8abd6dc55f58&amp;id=2b797af7d4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h6>JOIN THE NEWSLETTER</h6>
        <p align="center">
            My newsletter on the latest from the blog. Don't worry we won't spamming.
        </p>
<div class="indicates_required"> *indicates required </div>
<div class="mc-field-group">
<input type="text" value="*First Name" name="FNAME" class="required" id="mce-FNAME" placeholder=""  onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

<input type="email" value="*Email Address" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=""  onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

</div>
<div id="mce-responses" class="clear" color="white">
    <div class="response" id="mce-error-response" style="display:none"> 
</div>
    <div class="response" id="mce-success-response" style="display:none">      
</div>
</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_065434ce0102b8abd6dc55f58_2b797af7d4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script> 
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

Поскольку фон ярко-розовый, я бы предпочел, чтобы сообщения об успехе / ошибке были зелеными и серыми соответственно, поэтому я бы хотел, чтобы он был белым.

1 Ответ

0 голосов
/ 10 мая 2019

Давайте разберемся, чтобы вам было легче.

  • Если вам нужно только изменить цвет шрифта, вам нужно нацелить область сообщения. В области сообщений используются классы #mc_embed_signup (который отмечает, что это идентификатор всего этого поля) и # mce-success-response (что означает, что в этом поле регистрации вы хотите настроить таргетинг только на сообщение об успехе). В этом случае введите этот код CSS в часть «Дополнительные CSS» Wordpress Customizer: 

    #mc_embed_signup #mce-success-response {
color: white;
}

    Как вы увидите, шрифт сообщения об успехе будет белым. Вы можете изменить его на любой другой цвет, а также использовать коды цветов HEX (помогите себе с этой страницей ). Если вам также необходимо изменить сообщение об ошибке, вместо #mce-success-response используйте #mce-error-response. Проверьте эту страницу на CSS " color " свойство.

  • Если вы хотите добавить фон в это поле, вы используете тот же код, что и выше, но вместо color: вы используете background-color: - то же самое, что и выше. Используйте код цвета HEX и укажите, какой цвет фона вы хотите.

  • Но если вы добавите этот код, вы можете увидеть, что в поле не будет передышки:

    enter image description here

Это потому, что поле не подготовлено для цвета фона, поэтому вы должны указать класс этого поля (div.response) и изменить его заполнение. Таким образом, вы можете использовать этот код: 

#mc_embed_signup div.response {
padding: 1em 1em 1em 1em;
}

Так что, если мы подведем итоги. Если вы хотите изменить цвет шрифта и цвет фона, используйте этот код: 

#mc_embed_signup #mce-success-response {
color: white;
background-color: blue;
}

Это говорит о том, что поле сообщения об успехе будет иметь белый цвет шрифта и синий цвет фона. Для сообщения об ошибке необходимо использовать тег #mce-error-response (#mc_embed_signup #mce-error-response). Если вы хотите добавить к нему некоторые отступы, используйте приведенный выше код и измените его по своему усмотрению (вы можете использовать 0.5em или 1.2em и т. Д.).

Подробнее об этом читайте здесь: этот о свойстве padding, этот о модуле "em", и у вас есть несколько статей выше для HEX-кодов и текста цвета.

...