Как менять CSS плагина?

Question

[Rezonatorrr]

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

Comments

[Антон Литвиненко]

усиляйте селекторы, проверьте с импотантами

[Rezonatorrr]

Антон Литвиненко, ...простите, это вы о чём?)

[Антон Литвиненко]

Rezonatorrr, Почитайте про основы Каскадных Таблиц Стилей.
Для того чтобы перебить стиль с одинаковым селектором, правило должно идти ниже перебиваемого. Например кастомная таблица стилей, подключена ниже. Если по какой-то причине, нельзя написать правило ниже, то селектор необходимо усилить (читаем про Специфичность https://developer.mozilla.org/ru/docs/Web/CSS/Spec...), для теста или если совсем ничего не помогает можно попробовать !important.
Если же ваши стили вообще не появляются на сайте, значит гдето кешируется, нужно сбросить кеш

[Rezonatorrr]

!important уже пробовал - не помогает

[Антон Литвиненко]

Rezonatorrr, в какой файл или в каком месте сохраняете? у вас явно есть дочерняя тема, также стоит autoptimize, возможно чтото для кеширования. не хватает данных

[Rezonatorrr]

Антон Литвиненко, сохраняю где и всё CSS - в дочерней теме, в дополнительных стилях. да, autoptimize есть, но он не влияет на это дело - проверял

Answer 1

[Il'ia Kartovitskii]

Добавь к свойствам, которые переназначешь !important

.example {
background: #fff!important;
}

Но вообще такой метод используй только в крайнем случае

Comments

[Rezonatorrr]

пробовал уже - не работает

Answer 2

[Elena Fire]

Проблема в том, что в консоли вы пишите стили для данного элемента. А на него влияют все остальные стили, прописанные ниже в консоли. И раз уж речь идет о WP, то вам не !important указывать надо, а всю длиннющую строку пути к вашему элементу, причем для большей надежности (если это только на одной странице или посте) еще и включать в начало body.[#id-post].
Вашим свойствам явно не хватает веса.

Comments

[Rezonatorrr]

Вот я прописываю для скрытия заголовка "классные", например

.wpb_text_column h1, .wpb_text_column h2, .wpb_text_column h3, .wpb_text_column h4, .wpb_text_column h5, .wpb_text_column h6, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
    display: none !important;
}

но не работает

[Elena Fire]

Rezonatorrr, у вас только один класс и тег. Здесь явно вопрос в приоритетах. В Битриксовских стилях часто !important есть уже в родном коде, плюс есть элементы, у которых стили тупо прописаны прямо в html -

[Elena Fire]

Rezonatorrr, вы хотите убрать все заголовки из шаблона? Ваш код прячет ВСЕ заголовки в шаблоне. Этот ведь не тот результат, который нужен?

[Rezonatorrr]

Elena Fire, нет, конкретно заголовок "Классные..."

[Elena Fire]

Rezonatorrr, переопределение стилей заголовков может плачевно закончиться для всего шаблона. Для уборки отображения h3 на этой конкретной странице, нужно написать так:

table div>h3.tag-groups-first-group {
display: none;
}

В результате у вас не будет показываться заголовок 3 уровня с классом tag-groups-first-group, который находится в div в таблице.

[Rezonatorrr]

Elena Fire, добавил. заголовок остался на месте)

[Elena Fire]

Rezonatorrr, пропишите это в файле custom.css - лежит в папка шаблона -> css -> custom.css.

[Rezonatorrr]

Elena Fire, так туда и прописал

[Elena Fire]

Rezonatorrr, тогда смотреть надо - это же битрикс....

[Elena Fire]

Можно еще уточнить:

.entry-content table div>h3.tag-groups-first-group {
display: none;
}

[Rezonatorrr]

Elena Fire, тоже безрезультатно. это вордпресс

[Elena Fire]

пардоньте)))))
Хотя странно, что это не работает. Тогда точно смотреть надо в сам код - в файл стилей и страницу

[Elena Fire]

Попробуйте тогда так:

.page-id-7731 .entry-content table div h3.tag-groups-first-group {
display: none;
}

[Rezonatorrr]

Elena Fire, тоже нихт арбайтен)

[ProjectSoft]

А у вас custom.css точно подключается к шаблону или вставляются в шаблон?
Что-то я его не обнаружил в коде.

[Rezonatorrr]

ProjectSoft, ну в дочерней теме (как и в основной) в настройках внешнего вида есть пункт "Дополнительные стили" - там я прописываю все правки СSS

[Elena Fire]

Rezonatorrr, тогда понятно, почему не фурычит. Сделайте нормальный отдельный файл css и подключите его через хуки в functions.php

[ProjectSoft]

Rezonatorrr, но его нет в коде.
МБ вы или кто-то до вас удалил строчку подключения стиля в вашем шаблоне.
В принципе это не важно.
Создайте файл стилей, разместите его в папке стилей темы и подключите его кодом в вашем шаблоне. В теге head перед самым body. Т. е. ниже всех файлов.

[ProjectSoft]

Rezonatorrr, вы вносите свои стили в медиа запрос. И при этом сам медиа запрос не закрыт

@media (max-width:1024px){
.topbar_item.topbar__menu{
display:none;
}
.page-id-7731 .entry-content table div h3.tag-groups-first-group {
display: none;
}

Выведите их оттуда и закройте медиа запрос.
И предыдущий медиа запрос закройте.
Весь код, который вы размещаете после ошибок не будет работать. Отформатируйте код ваших стилей.

[Rezonatorrr]

ProjectSoft, етить же ж его перетудыть!)) перенёс код выше и реально всё получилось. спасибо и вам, и всем остальным в любом случае. впервые, кстати, такую активность в вопросе замечаю). а вы не знаете какой код прописать теперь, чтоб не было переносов строк в этом блоке?

[ProjectSoft]

Rezonatorrr, Поправить таблицу (у вас она из двух колонок) убрать инлайновые стили с элементов, задать

.page-id-7731 .tag-groups-tag-list .tag-groups-tag {
    display: inline;
}

Не форматируя код и не удаляя инлайновые стили из кода - не получится. Это будут только костыли.

[Rezonatorrr]

ProjectSoft, а как этот блок без таблицы посередине сделать? а то в редакторе не хочет и кодом justify-content: center; тоже. На худой конец, в два столбика блок разместить

[ProjectSoft]

Rezonatorrr, первое - убрать инлайновые стили с id="tag-groups-tag-list-608ae6ac8c2d9"
Для class="tag-groups-tag-list-tags" задать стили

.page-id-7731 .tag-groups-tag-list-tags {
    column-count: 2;
    column-gap: 10px;
}

Для данной страницы будет в 2 столбика.

И запомните - инлайновые стили ЗЛО.

[Rezonatorrr]

ProjectSoft, ну а с центрированием как быть?

[ProjectSoft]

Rezonatorrr, о каком центрировании? Я вам сказал про две колонки. Отлично смотрится.
По центру одна колонка.
Повторяю
первое - убрать инлайновые стили с id="tag-groups-tag-list-608ae6ac8c2d9"
Второе - для .page-id-7731 .tag-groups-tag-list-tags задать стили

.page-id-7731 .tag-groups-tag-list-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
}

у вас будет такая картинка

Либо для .tag-groups-keep-together задать

.page-id-7731 .tag-groups-keep-together {
    text-align: center;
}

А для .tag-groups-tag-list-tags

.page-id-7731 .tag-groups-tag-list-tags {
    display: inline-block;
    text-align: left;
}

У вас получится вот такая картинка

[Rezonatorrr]

ProjectSoft, задал

.page-id-7731 .tag-groups-tag-list-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
}

но почему-то получается выравнивание по левую сторону. Или это как раз из-за "неубранных" инлайновых стилей этого блока? Но дело в том, что как их убрать, я не знаю просто)

[ProjectSoft]

Rezonatorrr, вам придётся перелопатить php файлы темы для поиска формирования блок с id #tag-groups-tag-list-608bd8b73ad67
И никуда от этого не деться. Там не нужен этот стиль, который ему задан. Его можно и нужно задавать только в CSS файле.

Либо смотрите саму страницу с формирование данного списка. К какому шаблону привязан, к какому файлу и т. д. Или плагин, который формирует данный блок.

[Rezonatorrr]

ProjectSoft, а как вам тогда удалось сделать как на картинке? может тогда в 3 столбика лучше? или всё равно будет привязано влево?

[ProjectSoft]

Rezonatorrr, 3 столбика не получится.

как вам тогда удалось сделать как на картинке?

Ну как бы инструментами разработчика я умею пользоваться :)

PS: Вам всё-равно этот инлайновый стиль удалять. Он бьёт блок на две колонки. Бьёт его удачно.
Так как дочерних элементов всего один - отображается одна колонка.

[Rezonatorrr]

ProjectSoft, так почему тогда просто кодами не прописать это в functions и в дополнительных стилях?

[ProjectSoft]

Rezonatorrr, ну попробуйте прописать

div#tag-groups-tag-list-608be640837a8 {
    column-count: auto !important
}

Но это плохо. id по сути чем-то генерируется. Если он изменится - нужно что-то новое писать. А это ни айс.

[Rezonatorrr]

ProjectSoft, ну это не действует

[Elena Fire]

Есть еще вариант прописать

div[id^="tag-groups-tag-list"] //здесь нужные изменения

тогда будут меняться значения свойств для всех div, у которых id начинается с tag-group-tag-list.
И не надо лопатить php и js

[Rezonatorrr]

Elena Fire, прописать куда и что должно быть в "здесь нужные изменения"?). по ходу придётся всё-таки использовать таблицу

[Elena Fire]

Rezonatorrr, а что сейчас за задача? Какой конечный вид нужен?

[Rezonatorrr]

Elena Fire, вид нужен такой: https://habrastorage.org/webt/60/8b/87/608b87494cc...

[Elena Fire]

Rezonatorrr, тогда

.page-id-7731 .tag-groups-tag-list-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
     width: 50%; /*для оперирования отступами*/
     margin-left: auto;
     margin-right: auto;
}

И про колонки забываем.

[Rezonatorrr]

Elena Fire, неа. разъезжается всё

[Elena Fire]

.page-id-7731 .tag-groups-tag-list-tags {
    
    column-gap: 10px;
}

Здесь удалить column-count: 2

[Elena Fire]

и вообще можно удалить свойство column-gap

[Rezonatorrr]

Elena Fire, нет, тогда всё уходит влево

[Elena Fire]

Rezonatorrr, будет конкретны:

.page-id-7731 .tag-groups-tag-list-tags,
.page-id-7731 .tag-groups-tag-list {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

А все остальное удаляем за ненадобностью.

[Rezonatorrr]

Elena Fire, опять всё слева)

[Elena Fire]

Rezonatorrr, удалите этот блок

.page-id-7731 .tag-groups-tag-list {
    column-count: 2;
    column-gap: 10px;
}

Обратите внимание, что здесь класс заканчивается словом list - в отладчике видно, что к нему привязаны эти свойства.

[Rezonatorrr]

Elena Fire, так у меня он и не прописан сейчас в таком виде

[Elena Fire]

[Rezonatorrr]

Elena Fire, ну так у меня в дополнительных стилях нет этого кода. и где его искать, как убрать я соответственно не знаю)

[Elena Fire]

div[id^="tag-groups-tag-list"] {
columns: none;
}

[Rezonatorrr]

Elena Fire, однако браво). помогло. только теперь бы понять, как перенос слов убрать. а то вот тут например "хилькевич" смотрится коряво

[Elena Fire]

Rezonatorrr, вопрос: таблица была вставлена или была там изначально?
Кстати, мое предыдущее предложение не повлияло на отображение.
Просто в таблице, в которой все эти фамилии написаны, левый столбец 33%, а правый с фамилиями 59%. И все эти свойства тянутся откуда-то - потому что они прямо прописаны в html.

[Rezonatorrr]

Elena Fire, как же не повлияло, если посередине как раз всё стоит теперь? таблицы в редакторе страницы нет, вероятнее всего она формируется плагином Tag groups. от него на страницу в редакторе вставлен шорткод, в результате которого и показан этот столбец

[Elena Fire]

Rezonatorrr, а вот и нашелся вредитель! У плагина есть файл стилей - давайте в него заглянем и найдем те самые свойства, которые мешают поставить текст по макету!

[Rezonatorrr]

Elena Fire, как предлагаете в него заглянуть?

[Elena Fire]

Rezonatorrr, через ftp. Или через админку хостинга

[Rezonatorrr]

Elena Fire, так вам нужен доступ или как?

[Elena Fire]

Rezonatorrr, это деловой подход. Давайте. Телеграм @ecfinal

[Rezonatorrr]

Elena Fire, отписался вам там).