Проблемы применения стилей в плагине Breadcrumb NavXT для Wordpress - PullRequest
Новая
       14

Проблемы применения стилей в плагине Breadcrumb NavXT для Wordpress

1 голос
/ 23 ноября 2011

У меня огромные проблемы с применением моих стилей к плагину Breadcrumb NavXT.

Когда я применял свои стили в html тестовом документе, он выглядел нормально: снимок экрана

Когда я применил те же стили (но приспособленные к плагину) в документе WP, используя плагин Breadcrumb NavXT, лучшее, что я мог получить, было это: снимок экрана

Я попробовал очевидноеответы типа применяются наценка-право на последнего ребенка ничем не работает.Был бы очень признателен за помощь.

Вот соответствующий HTML-код, который выводит WP: 

<div class="breadcrumb">

<!-- Breadcrumb NavXT 3.9.0 -->
<a title="Go to Home." href="http://localhost/media">Home</a> &gt; 
<a title="Go to Email &#038; SMS Broadcasting." href="http://localhost/media/
email-sms-broadcasting/">Email &#038; SMS Broadcasting</a> &gt; Track &#038;   
Learn </div><!--END breadcrumb -->

Вот соответствующий CSS: 

.breadcrumb{ list-style:none; overflow:hidden; position:absolute; font:10px     
 Helvetica,Arial,Sans-Serif; top:160px; float:left}
.breadcrumb a{ color:white;  text-decoration:none;  padding:2px 0 2px 35px;     
 background:blue; background:#728c8c; position:relative;  display:block; float:left}

.breadcrumb a:after{ content:"";  display:block;  width:0;  height:0;  
 border-top:50px solid transparent;   border-bottom:50px solid transparent;  border-  
 left:30px solid #728c8c;  position:absolute;  top:50%;  margin-top:-50px;  
 left:100%;  z-index:2}

.breadcrumb a:before{ content:"";  display:block;  width:0;  height:0;  border-  
 top:50px solid transparent;  border-bottom:50px solid transparent;  
 border-left:30px solid white;  position:absolute;  top:50%;  margin-top:-50px;   
 margin-left:1px;  left:100%;  z-index:1}

.breadcrumb a:first-child { padding-left:10px;}

.breadcrumb a:nth-child(2) {background: #768c72}
.breadcrumb a:nth-child(2):after{border-left-color:#768c72}
.breadcrumb a:nth-child(3) {background: #909673}
.breadcrumb a:nth-child(3):after{border-left-color:#909673}
.breadcrumb a:nth-child(4) {background: #ad7601}
.breadcrumb a:nth-child(4):after{border-left-color:#ad7601}
.breadcrumb a:nth-child(5) {background: #E3E8E8}
.breadcrumb a:nth-child(5):after{border-left-color:#E3E8E8}
.breadcrumb a:nth-child(6) {background: #728c8c}
.breadcrumb a:nth-child(6):after{border-left-color:#728c8c}
.breadcrumb a:nth-child(7) {background: #768c72}
.breadcrumb a:nth-child(7):after{border-left-color:#768c72}
.breadcrumb a:last-child a{background:transparent !important;  color:black;  
pointer-events:none; cursor:default;}

.breadcrumba: hover {background: # 526476} .breadcrumb a: hover: after {border-left-color: # 526476! важный}

1 Ответ

0 голосов
/ 24 августа 2012

Звучит и выглядит так, как будто установка WP уже имеет стили CSS для класса «хлебная крошка». Это часто используемое имя класса. Чтобы решить проблему, либо переименуйте класс на что-то более индивидуальное, например, "ThisIsMyBreadcrumb".

Если это сгенерировано плагином breadcrumb, и вы не хотите входить в их PHP, чтобы изменить это (сохраняя будущие обновления), вы можете заключить класс breadcrumb в свой собственный div с помощью id или класса и использовать его для более конкретно в CSS.

например. все объявления CSS с этим ... 

.breadcrumb {}

... изменяется на это ... 

#thisIsMyBreadcrumb .breadcrumb {}

Предположим, вы представили HTML ... 

<div id="thisIsMyBreadcrumb">
    // place your breadcrumb here
</div>

Более конкретное объявление, указывающее на сделанное на заказ имя div, гарантирует, что тема WP или базовая таблица стилей не вызовут конфликтов - таким образом, вы вернетесь к визуализации этих элементов, которые вы успешно сгенерировали в статическом файле вдали от WP.

...