Как заменить внешний css на свой стиль на сайте Wordpress?

Question

[Сергей Смирнов]

На сайт с Wordpress CMS установил приём платежей через Яндекс, но в этом виджете свои стили, внешние и как я не пытался, но заменить внешние стили на свой стиль не получается.

Вот установленный виджет на самом сайте: abyssin.net/kontakty/vnesenie-zadatka.htm хотелось хотя бы заменить фон этого виджета на фон страницы, на которой находится сам виджет.

Прописал я в файле стилей темы сайта изменённый стиль виджета:

.widget-shop {
    background-color: #f7eac8 !important;
    padding: 20px !important;
    margin: 0px 0px 0px !important;
    width: 100% !important;
    box-shadow: 0 0 0 1px rgb(247, 234, 200), 0 3px 4px -3px rgb(247, 234, 200) !important;
    box-sizing: border-box !important;
}

Но, никакого изменения не происходит. Где я допускаю ошибку или перебить внешний CSS просто нереально?

Answer 1

[Владимир]

"Перебить" внешний css ещё как реально - как раз с помощью !important или инлайн-кода. Возможно, ваш CSS код подключается ПЕРЕД ворд-прессовским, а должен - ПОСЛЕ.

Comments

[Сергей Смирнов]

Ну дак а как сделать так, чтобы подключался мой код ПЕРЕД?

Answer 2

[Максим Кудрявцев]

Попробуй вот так

add_action( 'wp_footer', function() {
?>
	.widget-shop {
	    background-color: #f7eac8 !important;
	    padding: 20px !important;
	    margin: 0px 0px 0px !important;
	    width: 100% !important;
	    box-shadow: 0 0 0 1px rgb(247, 234, 200), 0 3px 4px -3px rgb(247, 234, 200) !important;
	    box-sizing: border-box !important;
	}
<?php
}, PHP_INT_MAX );

Разумеется, код необходимо добавить в function.php текущей темы

Comments

[Сергей Смирнов]

Вот мои три последние строки в файле функцион темы:

add_filter( 'comment_notification_recipients', 'true_change_notificator', 20, 2);
?>

в вашем предложеном коде не понятно зачем во второй строке ?> и ещё больше вопросов в предпоследней строке когда открывается <?php и не закрывается. Короче не работает ваш код, если добавляю в таком виде как вы написали, то сайт ложиться. Когда удаляю эти непонятно в каком порядке написанные <?php и ?> то сайт работает, но никаких изменений с виджетом на странице abyssin.net/kontakty/vnesenie-zadatka.htm

[Максим Кудрявцев]

Сергей Смирнов: "?>" - означает "конец использования PHP кода, далее пойдет HTML, интерпретатор PHP далее по файлу работать не будет", "<?php" - означает "Снова начинается PHP код, задействовать интерпретатор"

В твоем случае тебе нужно в functions.php удалить "?>" из последней строки и вставить то, что я предложил выше.

[Сергей Смирнов]

Максим Кудрявцев: Сделал всё как ты сказал. Вот код как выглядит конец файла functions.php

add_action( 'wp_footer', function() {
?>
  .widget-shop {
      background-color: #f7eac8 !important;
      padding: 20px !important;
      margin: 0px 0px 0px !important;
      width: 100% !important;
      box-shadow: 0 0 0 1px rgb(247, 234, 200), 0 3px 4px -3px rgb(247, 234, 200) !important;
      box-sizing: border-box !important;
  }
<?php
}, PHP_INT_MAX );

но на странице abyssin.net/kontakty/vnesenie-zadatka.htm никаких изменений не происходит. Кеш почистил.

[Сергей Смирнов]

Максим Кудрявцев: продолжает виджет брать стили отсюда: money.yandex.ru/b/desktop/_quickpay.css?v=tv6U7RF2cIa1BWB85NqDcoKI0e0

[Максим Кудрявцев]

Сергей Смирнов: могу сказать Вам три вещи:

1. Ознакомьтесь с основами HTML/CSS. В коде выше я допустил грубейшую ошибку, не обернув CSS-код в . См. определение
   
2. Чуть детальнее изучив тему, я понял, что вариант с !important с iframe не работает. Если стили объявлены в пределах одного документа, тогда без проблем, но через iframe мы подключаем другой документ
   
3. Для того чтобы переписать стили в дочернем фрейме из кодительского, необходимо немного js-магии. Смотрите вот здесь