Есть ли способ добавить новый класс div через дополнительный CSS интерфейс темы?

Question

Я пытаюсь изменить веб-сайт woocommerce, и у меня очень мало обучения HTML / CSS. Большая часть того, что я узнал, получена путем проб и ошибок, некоторых онлайн-руководств, экспериментов с консолью разработчика в Chrome, и c ....

Я пытаюсь добавить граница изображения в верхней части заголовка страницы прямо перед областью с именем tg-container. Я смог поместить один под ним, используя существующий класс, информацию о котором мне не нужно было видеть. Можно ли это сделать с помощью интерфейса Additional CSS, встроенного в тему, или мне нужно добавить go в стиль css и html для создания границы? Я знаю, что преимущество интерфейса Additional CSS заключается в отсутствии необходимости редактировать файлы темы напрямую при каждом обновлении темы.

Обход страницы

Пример страницы с рамкой - доступна только после посещения страницы обхода

ИЗОБРАЖЕНИЕ: Пример страницы с Chrome Консолью разработчика, открытой и отображающей код для области

- ------------------- Дальнейшие эксперименты -------------------------

Я создал дочернюю тему и пытаюсь добавить ее таким образом, но мне чего-то не хватает (потому что я не кодировщик), мне удалось создать область для изображения, но изображение не отображается . Я пробовал добавить его в дочернюю тему и в родительскую тему (редактирование style.css и page.php).

В page.php дочернего (и родительского) (после следующего)

<div class="page-header clearfix">
            <div class="tg-container">

Я добавил

<h3 class="title-border"> </h3>

Я пробовал это в style.css ребенка:

/*Add Wycinanki Borders*/

.title-border {
  background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

Я пробовал это в style.css дочернего элемента:

/*Add Wycinanki Borders*/

.page-header .title-border {
  background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

Я пробовал это в style.css родительского элемента:

.page-header .title-border {
        background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
        background-repeat: repeat-x;
        font-weight: 600;
       color: #3b3b3b;
    font-size: 14px;
    line-height: 30px;
    margin: 5px 0; }

Опять же, он создал пространство для изображения, но изображение не отображается. Я скопировал другие атрибуты из «entry-sub-title», где я смог успешно разместить изображение, думая, что они будут стилизованы таким же образом.

Спасибо за любую информацию и помогли мне узнать, что Я делаю, хахаха.

Answer 1

Хорошо, разобрался. Я добавил <div class="title-border-top"> </div> над заголовком страницы (и фактически добавил <div class="title-border-bottom"> </div> ниже для будущих изменений.

Затем я добавил следующее в Дополнительное CSS:

.page-header .title-border-top{
    background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
    background-repeat: repeat-x;
    height: 30px;
            margin: 10px;
}

Это работает, и я скрываю entry-sub-title, которое я взял на себя для границы. Теперь мне нужно выяснить, какие шаблоны страниц WP использует для всех основных страниц, поэтому я могу добавить к ним html.