Как настроить дизайн хлебных крошек в WP?

Question

[E Happy]

Доброго времени суток гуру тостера.
Не кидайтесь пожалуйста тапками, а помогите лучше с решением проблемы:

Есть определенная страница (не моя, сайт чужой) - тык - под верхней лентой (4 картинки) есть хлебные крошки. У них настроенный шрифт, задний фон (обратите внимание на горизонтальную черточку, которая делит 4 картинки и крошки) и размер, цвет (+ ховер эффект при наведении), а так же изменяется последняя запись (так же как и категория (в данном случае Figma)) при смене страницы или другой категории.

Всё это делается с помощью Yoast SEO Pack.

А вот у меня получилось так: - увы, есть проблемы:
1) При наведении появляется только рыжая черточка (сами слова почему то рыжие, хотя должны быть так же в примере выше серые (и при наведении становиться рыжими + подчеркивание))
2) Шрифт меньше
3) Сам контейнер меньше
4) Не появилась черточка ограничения блока (та, что делит 4 картинки и крошки)
5) Я убрал название записи в функциях (не нужны), но до этого обнаружил ошибку что какую бы запись я не открывал, название Одно и То же (в крошках).

Имеются следующие (идентичные примеру) css настройки:

.breadcrumbBlock {
background:#fafafa;
}

.breadcrumbs {
font-size:12px;
color:rgba(0,0,0,0.3);
margin:0;
padding:12px 0;
}

.breadcrumb a {
color:rgba(0,0,0,0.5);
border-bottom:1px solid rgba(0,0,0,0.05);
}

.breadcrumb a:hover {
color:#f98140;
text-decoration:none;
border-bottom:1px solid #f98140;
}

Но никак не выходит создать Нормальный Рабочий Похожий блок.
Просьба помочь с этим блоком-контейнером, может быть даже за какую то копеечку - уже 4 дня муаюсь и всё тщетно - что то всё равно не так.

Answer 1

[Aoshi77]

Панировочные сухари:)
Так в представленном сайте наоборот при наведении - text-decoration: underline;
Для последнего элемента:

.breadcrumb a:last-child{
text-decoration: none;
border-bottom:none;
color: rgba(0, 0, 0, 0.3);}

А во вторых, посмотрите на то, какие стили наследуем ваш элемент. Может какие-то стили просто перекрывают, написанное вами?

Comments

[E Happy]

Спасибо за ответ!
Не совсем понимаю этот Child :) А именно его функцию - что значит наоборот при наведении?
У меня складывается ощущение что я неправильно шаманю в самом php-файле этой карусели. Очень мало информации по тому, как хлебные крошки кастомизировать

[Aoshi77]

.breadcrumb a:hover {
color:#f98140;
text-decoration:none;
border-bottom:1px solid #f98140;
}

это значит, что данные стили будут применяться при наведении на ссылку.
Чтобы подчеркивание было в цвет с текстом, надо чтобы здесь было:
text-decoration: underline;
Я это имел ввиду

[E Happy]

Еще немного поработал с css, пока никак не получается сделать нормально...
Вот кручусь вокруг, да около

Решил сжато спросить:
1) Как убрать рыжий цвет у Главная - по умолчанию он сразу стоит, вне зависимости от наведении?
2) Как добавить полоску под текстом (та что border-bottom) везде, с цветом обычным (а то она только у Главной нормальная, у категории и дальше - сразу с цветом стоит, неважно - наведена мышка или нет)?

[E Happy]

Так, с категорией относительно полоски разобрался

Вопросы остаются с:
1) "Главная" - при наведении полоска становится рыжей (это ок), а само слово рыжее постоянно (это плохо).
2) При смене рубрики - в крошках она не меняется и всё равно написано Главная / Новости
3) Почему то блок большой, хотя я сделал ему контейнер + разделяющей полоски нет :(

Прикладываю код для крошек в php:

<div class="breadcrumbBlock">
<div class="container">
               <?php if ( function_exists('yoast_breadcrumb') ) 
               {yoast_breadcrumb('<div class="breadcrumb"> <p id="breadcrumbs">','</p></div>');
               } ?>
</div>
</div>