[WordPress] スライダーと干渉するワードプレスの css クラス

スポンサーリンク

質問

私 wordpress ページのカスタム スライダーを作成しようとしている私は、JSFiddle を通じて作成開始しました、それから私に挿入したそれ私のテーマしかし、いくつか他のクラスまたは css コード、それは文句を言わないので、スライダーを使ってどの以外は同じ外観を取得があるようです。この要素を調べることによって確認可能ですか?または、問題を見つけるようであることができないので、これを近づくことができる方法ですか?

どちらが正しいスライダーの JSFiddle

http://jsfiddle.net/2patspw2/530/

ここにそれを追加しました wordpress のページにリンクされて

http://ggwp.dk/test

にセンタリングされていないすべての最初であり、し、一番下の行はそれを見ることができる

html:

<div class="demo">
    <ul id="demo" class="content-slider">

        <li>
            <div class="slider-content">
                <h3 class="center lead league-name">Liga BBVA</h3>
                <div class="row center">
                    <div class="xs-4">
                        <img src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/151.png" alt="Barcelona">
                        <strong>Copenhagen Wolves</strong>
                    </div>
                    <div class="xs-center">
                        <p class="score">3 - 1</p>

                    </div>
                    <div class="xs-4">
                        <img src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/131.png" alt="Granada">
                        <strong>Yoe Flash Wolves</strong>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="slider-content"><h3>2</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>3</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>4</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>5</h3></div>
        </li>

    </ul>
</div>  

CSS:

.content-slider ul {
    list-style: none outside none;
    padding-left: 0;
}
.content-slider li {
    text-align: center;
    color: #FFF;
}
.content-slider {
}
.content-slider .slider-content {
    margin: 0;
    padding: 60px 20px;
      display: inline;
}
.demo {
    position: relative;
    overflow: hidden;
    width: 357px;
    background:url('http://tnuqq21kt870t8n1egkbrmbr.wpengine.netdna-cdn.com/wp-content/uploads/2014/10/MLG-Championship-Anaheim-2014-Crowd-Enrique-Espinoza.jpg') no-repeat;
    background-size: cover;
}
.lSSlideOuter .lSPager.lSpg{
    background:#FFF;
}


.league-name {
  margin-bottom: 0;
}

.center {
  text-align: center;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.xs-4 {
  width: 40%;
    float: left;
}

.xs-center {
  width: 20%;
    float: left;
}

.xs-4 img {
  margin: 10px 0;
  width: 64px;
  height: 64px;
}

.xs-4 strong {
  display: block;
  font-size: 14px;
}

.xs-center .score {
  font-size: 36px;
  line-height: 36px;
  font-weight: bold;
  margin-top: 20px;
}

.lSSlideOuter .lSPager.lSpg {
  background: #FFF;
  margin-right: -1px;
}

答え

あなたは正しい、あなたのスタイルをオーバーライドする CSS のテンプレートがあります。次のプロパティを追加する必要がある:

.post-content .content-slider {
    margin:0;
}

.post-content .slider-content h3 {
    color:#fff;
}

答え

これを試して、

行番号 3554 css スタイル.. 以下が含まれている、これをリセット css、

.post-content ul {
margin-left : 21px 
}

css を追加する

.post-content ul#demo  {
    margin-left : 0px 
    }

を変更する、または

.post-content ul {
    margin-left : 0px 
    }

http://stackoverflow.com/questions/29094985/wordpress-css-classes-interfere-with-slider

スポンサーリンク

Leave a Reply