Wordpress siteme kurduğum WordPress Popular Posts eklentisinin github sayfasında hoşuma giden bazı stiller buldum ancak websitemde nedense doğru bir şekilde görüntülenmiyor. Asıl tuhafıma giden ise jsfiddle da sorunsuz çalışıyor ancak wordpress > ek css kısmına ilgili CSS kodlarını eklediğimde Post başlığının solunda belirmesi gereken numaralar görüntülenmiyor;

Görüntülenmesi gereken:


Görüntülenen:


HTML Kodları:

<div class="widget popular-posts wpp-ajax">
  <h2>Popular Posts</h2><!-- cached -->


  <ol class="wpp-list">
    <li> <a href="https://www.google.com/" class="wpp-post-title" target="_self">Malesuada bibendum arcu vitae elementum.</a> <span class="wpp-stats"><span class="wpp-views">45 views</span> | <span class="wpp-comments">0 comments</span></span></li>
    <li> <a href="https://www.google.com/" class="wpp-post-title" target="_self">3 Awesome Security Plugins for WordPress</a> <span class="wpp-stats"><span class="wpp-views">14 views</span> | <span class="wpp-comments">0 comments</span></span></li>
    <li> <a href="https://www.google.com/" class="wpp-post-title" target="_self">The Fastest WordPress Theme</a> <span class="wpp-stats"><span class="wpp-views">13 views</span> | <span class="wpp-comments">0 comments</span></span></li>
    <li> <a href="https://www.google.com/" class="wpp-post-title" target="_self">Top 10 Contact Form Plugins</a> <span class="wpp-stats"><span class="wpp-views">5 views</span> | <span class="wpp-comments">0 comments</span></span></li>
    <li> <a href="https://www.google.com/" class="wpp-post-title" target="_self">placerat in egestas erat imperdiet sed euismod</a> <span class="wpp-stats"><span class="wpp-views">3 views</span> | <span class="wpp-comments">0 comments</span></span></li>

  </ol>
</div>

CSS Kodları:

ol.wpp-list {
  list-style-type: none;
  list-style-type: decimal !ie;
  /*IE 7- hack*/

  margin: 0;
  margin-left: 3em;
  padding: 0;

  counter-reset: li-counter;
}

ol.wpp-list>li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 0.5em;
  min-height: 3em;
  border-left: 2px solid #CCCCCC;
}

ol.wpp-list>li:before {
  position: absolute;
  top: 0;
  left: -1em;
  width: 0.8em;
  font-size: 3em;
  line-height: 1;
  font-weight: bold;
  text-align: right;
  color: #464646;
  content: counter(li-counter);
  counter-increment: li-counter;
}

ol.wpp-list li span.wpp-stats {
  display: block;
}

JSFiddle Linki: https://jsfiddle.net/jpaqxrvs/

Sorun nerede olabilir arkadaşlar?