Как перезаписать CSS, сгенерированный из внешнего виджета? - PullRequest
Новая
       1

Как перезаписать CSS, сгенерированный из внешнего виджета?

0 голосов
/ 05 марта 2019

Я встроил виджет на свою страницу, который ссылается на этот файл javascript: https://widget.zola.com/js/widget.js

Виджет генерирует раздел заголовка, который я хотел бы удалить.https://widget.zola.com/v1/widget/registry/taylorandjaredseptember7/html?:1

Я проверил элемент и смог нацелиться на раздел и добавить к нему display: none.Это сработало, но когда я скопировал код в таблицы стилей CSS, он не работал.Я даже попытался добавить !important к нему без удачи.

Есть ли что-то очевидное, чего мне не хватает?

Это код, который я добавил в свои таблицы стилей.

.registry-header {
display: none !important;
}

Я также пытался настроить таргетинг на классы, в которые он был вложен, например: 

.row registry-header-section .col-xs-12 .registry-header {
display: none !important;
}

Другая справочная информация, которая может оказаться полезной: - Мой сайт - это сайт Wordpress, использующий Diviтема.

1 Ответ

0 голосов
/ 05 марта 2019

Установите , где генерируются текущие правила в дереве документов, а затем используйте этот вопрос и ответ , чтобы найти, как эффективно перезаписать эти правила.

Возможные маршруты:

  • Вам может понадобиться использовать тег id для элемента и применить стиль к #id, потому что это будетперезаписать .class уровень стилизации.

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

  • Помните, что если виджет использует просто файл JS, то он, вероятно, редактирует CSS с помощью встроенного Javascript, поэтому он будет делать это inline поэтому вам может потребоваться добавить переопределение стиля inline в саму страницу.Установите, чтобы ваш блок <style> отображался как можно позже в <head> и добавьте !important к необходимым элементам

  • Создайте свой собственный скрипт Javascript для загрузки после скрипта их виджета изаставить CSS адаптироваться так, как вы хотите, с помощью javascript или jQuery блоков кода.

Сумасшедшая идея ....но это может просто сработать.

Сначала вам нужно будет экспортировать из вашего Browser Inspector текущий примененный стиль, сгенерированный виджетом, и сохранить его в своем собственном (доменном) файле CSS.

Затем вы можете использовать Политика безопасности контента , чтобы специально блокировать 'unsafe-inline' и 'unsafe-eval' в вашей style-src: части, чтобы запретить применение javascript и других встроенных стилей к странице.

Заменив это на свою таблицу стилей CSS для экспорта, следует избегать Javascript / встроенных стилей и позволить вам настроить стиль так, как вам нужно, просто отредактировав свой код CSS.Вы можете точно настроить это в зависимости от ваших зависимостей и кодовой базы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...