Как удалить оттенок на определенной странице WordPress

Question

У меня проблемы с удалением оттенка только на главной странице.

Я считаю, что мой идентификатор страницы:

9148

Вот div, который я пытаюсь изменить

 .page-id-9148 .hero-tint { 
 display: none !important; 

}

Я использовал CSS, который не работает.

     .page-id-9148 .hero-tint { 
     display: none !important; 
}

Answer 1

В вашем случае может случиться так, что ваш css вызван неправильно, потому что ваш css правильный.

Но есть более профессиональный способ решить эту проблему, так как вы хотите, чтобы элемент не появлялся на экране.

Я дам 3 способа сделать это правильно, помня, что первый является наиболее подходящим.

1 ° Добавление условия для отображения кода. Поскольку вы делаетеЕсли вы не хотите отображать этот элемент только на главной странице, лучше всего поставить условие в коде php, где вызывается этот html. Найдите вашу тему / плагин, где она была добавлена, и поместите условное выражение, похожее на это:

<?php if(  !is_home() && !is_front_page() ): ?>
    <div class="hero-tint"></div>
<?php endif; ?>

ИЛИ

<?php if(  !is_page( 9148 ) ): ?>
    <div class="hero-tint"></div>
<?php endif; ?>

2 ° Удаление с помощью CSS В вашем случаеВаш CSS правильный, но, возможно, он вызывается перед обновлением CSS или вообще не вызывается. Чтобы убедиться, что он вызывается, найдите файл footer.php вашей темы, найдите код wp_footer () и сразу добавьте код. что-то в этом роде:

    wp_footer(); 
?>
<style>
    .page-id-9148 .hero-tint {
        display: none !important;
    }
</style>

3º Удаление через javascript Найдите тему для файла footer.php и вставьте что-то вроде этого:

<script type="text/javascript">
    jQuery('.page-id-9148 .hero-tint').remove();
</script>

Answer 2

Вариант 1. В редакторе html на странице с идентификатором 9148 добавьте следующее:

<style>.hero-tint {display: none !important;}</style>

Вариант 2. Отредактируйте файл footer.php в своей теме и добавьте его куда угодно:

<?php if (is_page('9148') ):?>
<style>
    .hero-tint {display: none !important;}
</style>
<?php endif; ?>