在Wordpress中更改動態內容的邊框顏色

如果以前曾詢問過，請致歉。說實話，我不知道什麼條件可以找到相關內容。在Wordpress中更改動態內容的邊框顏色

目標：我的公司有一個使用WordPress內置的一些自定義PHP構建的新聞頁面。新聞頁面可以在這裏看到：http://www.hospitalityq.com/press

我的營銷管理人員想將印刷機上的淺灰色邊框更改爲我們公司調色板中的顏色。我們會有5種顏色，我們希望新聞項目在整個過程中旋轉。是否有可能使用自己的顏色對每篇新聞文章進行着色，並通過添加到我們的PHP腳本來完成這些工作？

下面是我們現有腳本的副本。

我希望這是有道理的。如果更簡單，我很樂意發佈樣機。

最佳，丹

<?php 

$postID = get_the_ID(); 
$meta = get_post_meta($postID); 
?> 
    <!--pre> 
    <?php 
    //var_dump ($meta); 
    ?> 
    </pre--> 
<?php 
    if(has_post_thumbnail($postID)):; 
?> 
    <div class="clear-after"> 
    <div class="post-image"> 
    <a 
     href="<?php echo $meta['hq_news_articles_link'][0] ?>" 
     class="vc_read_more" 
     title="Read about <?php the_title_attribute(); ?>" 
     target="_blank"> 
     <?php the_post_thumbnail($postID); ?> 
    </a> 
    </div> 
<?php 
    endif; 
    $infoClass = 'post-info '. (!has_post_thumbnail($postID) ? 'no_image' : ''); 
?> 
<div class="<?php echo $infoClass; ?>"> 
<h4> 
    <a 
     href="<?php echo $meta['hq_news_articles_link'][0] ?>" 
     class="vc_read_more" 
     title="Read about <?php the_title_attribute(); ?>" 
     target="_blank" 
    > 
     <?php the_title();?> 
    </a> 
    </h4> 
     <h5> 
     <?php the_date('F j, Y');?> 
     </h5> 
     <p><?php 
      echo substr(get_the_excerpt(),0, 115); 
      // echo wp_trim_words(get_the_excerpt(), 20); 
      ?>&hellip; 
     <br><a 
     href="<?php $meta['hq_news_articles_link'][0] ?>" 
     class="hq_press-read-more" 
     title="Read about <?php the_title_attribute(); ?>" 
     target="_self" 
    > 
     Read article 
    </a> 
    </p> 
</div> 
</div>

來源

2016-07-26 Dan Catinella

這看起來不像它的印刷公司從傳統的循環'for'，'foreach'），這使它很難。你有沒有看過使用CSS？特別是'nth-child'？ – Shane

我會用CSS nth-child：

.company { 
 
    border: 1px solid black; 
 
} 
 

 
.company:nth-child(5n+1) { 
 
    border-color: red; 
 
} 
 

 
.company:nth-child(5n+2) { 
 
    border-color: green; 
 
} 
 

 
.company:nth-child(5n+3) { 
 
    border-color: yellow; 
 
} 
 

 
.company:nth-child(5n+4) { 
 
    border-color: blue; 
 
} 
 

 
.company:nth-child(5n+5) { 
 
    border-color: purple; 
 
}

<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div>

來源

2016-07-26 21:40:55 Shane

這太棒了。感謝你們。我認爲第十個孩子是一條很好的路。 –

這是你需要做什麼，在評論闡述了答案爲了使用第n個孩子。

以下示例的目標是您需要的。此示例以每個第三個元素爲目標並應用此樣式。所以在你的情況下，使用你的5種不同的顏色，你會使用：1n + 1,2n + 2,3n + 3等。

li.entry-hq_news_articles:nth-child(3n+3) { 
    border: 1px solid #e31b12; 
}

來源

2016-07-26 21:46:17 Duncubuntu

在Wordpress中更改動態內容的邊框顏色

回答

相關問題