我有IPSuite 4.1.11，它在邊欄上有「類似內容」塊。即時通訊使用Chameleon主題，它可以發現here如何在PHP代碼中更改文本樣式和顏色

我想使用CSS來設計它，但我卡住了 - 我不能改變作者名稱的風格。我的意思是作者的名字。我接受了樣式名稱和其他文本 - 但我只想着色作者姓名。

這裏是塊的圖片：

這裏是我想改變：

現在這裏是，作者姓名的相關代碼：

    {{endif}} 
        <a href="{$topic->url()->setQueryString('do', 'getNewComment')}" title='{lang="view_this_topic" sprintf="$topic->title"}' class='ipsDataItem_title ipsType_break'>{wordbreak="$topic->title"}</a> 
        <br> 
        <p class='ipsType_reset ipsType_medium ipsType_blendLinks'> 
         <span>{lang="byline_nodate" htmlsprintf="$topic->author()->link()"}</span> 
         <span class='ipsType_light'>{lang="topic_started_date" htmlsprintf="\IPS\DateTime::ts($topic->mapped('date'))->html()"}</span> 
        </p> 
       </div> 
      </li> 
     {{endforeach}}

這裏是全「TopicFeed塊」代碼：

{{if !empty($topics) }} 
    <h3 class='ipsWidget_title ipsType_reset'>{$title}</h3> 

    {{if $orientation == 'vertical'}} 
     <div class='ipsPad_half ipsWidget_inner'> 
      <ul class='ipsDataList ipsDataList_reducedSpacing'> 
       {{foreach $topics as $topic}} 
        <li class='ipsDataItem{{if $topic->unread()}} ipsDataItem_unread{{endif}}{{if $topic->hidden()}} ipsModerated{{endif}}'> 
         <div class='ipsDataItem_icon ipsPos_top'> 
          {template="userPhoto" group="global" app="core" params="$topic->author(), 'tiny'"} 
         </div> 
         <div class='ipsDataItem_main'> 
          <div class="ipsCommentCount ipsPos_right {{if ($topic->posts - 1) === 0}}ipsFaded{{endif}}" data-ipsTooltip title='{lang="replies_number" pluralize="$topic->posts - 1"}'>{expression="$topic->posts - 1"}</div> 
          {{if $topic->mapped('featured') || $topic->hidden() === -1 || $topic->hidden() === 1}} 
           <span> 
            {{if $topic->hidden() === -1}} 
             <span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$topic->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span> 
            {{elseif $topic->hidden() === 1}} 
             <span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span> 
            {{endif}} 
            {{if $topic->mapped('featured')}} 
             <span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> 
            {{endif}} 
           </span> 
          {{endif}} 
          <a href="{$topic->url()->setQueryString('do', 'getNewComment')}" title='{lang="view_this_topic" sprintf="$topic->title"}' class='ipsDataItem_title ipsType_break'>{wordbreak="$topic->title"}</a> 
          <br> 
          <p class='ipsType_reset ipsType_medium ipsType_blendLinks'> 
           <span>{lang="byline_nodate" htmlsprintf="$topic->author()->link()"}</span> 
           <span class='ipsType_light'>{lang="topic_started_date" htmlsprintf="\IPS\DateTime::ts($topic->mapped('date'))->html()"}</span> 
          </p> 
         </div> 
        </li> 
       {{endforeach}} 
      </ul> 
     </div> 
    {{else}} 
     <div class='ipsWidget_inner'> 
      <ul class='ipsDataList'> 
       {{foreach $topics as $topic}} 
        {template="row" group="global" app="forums" location="front" params="NULL, NULL, $topic, FALSE"} 
       {{endforeach}} 
      </ul> 
     </div> 
    {{endif}} 
{{endif}}

我插入CSS項到ipsuite，上面寫着：

.ipstlight_auther {font-weight: bold; color:red;}

和變更情況：從

<span>{lang="byline_nodate" htmlsprintf="$topic->author()->link()"}</span>

到：

<span class='ipstlight_auther'>{lang="byline_nodate" htmlsprintf="$topic->author()->link()"}</span>

或郵寄至：

<span>{lang="byline_nodate" <span class='ipstlight_auther'>htmlsprintf="$topic->author()->link()"}</span></span>

但沒有成功。

我錯過了什麼？

編輯：

當我嘗試使用「spencerlarry」第一個CSS的答案我得到這個：

，當我加入重要;每個值後，我得到了：

爲什麼它的作用那樣？

來源

2016-05-19 StackBuck

嘗試添加下列到你的CSS：

p.ipsType_blendLinks span:nth-child(1) { 
    font-weight: bold; 
    color: red; 
}

來源

2016-05-19 22:43:42

藥物工作。在底部的主要問題中查看上面的細節（在編輯下）。 – StackBuck

現在可能會有效。我的第一個答案選擇了兩個'span'元素。這種方式只選擇第一個。 –

我想這是你想要什麼：https://jsfiddle.net/aw8ycp0j/2/

我使用的JavaScript「由」得到了這個詞，並將其更改爲黑色，即只有作者的名字會是紅色的。它也獲取類名並迭代完成更改，以防動態加載內容。

<body onload="highlight('by')"> 

<span class='ipstlight_auther'>by author</span> 

<script> 
    function highlight(text) { 

    var x = document.getElementsByClassName("ipstlight_auther"); 
     var i; 
     for (i = 0; i < x.length; i++) { 
      var inputText = x[i]; 
     var innerHTML = inputText.innerHTML; 
      var index = innerHTML.indexOf(text); 

     if (index >= 0) { 
     innerHTML = innerHTML.substring(0, index) + "<span class='black'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length); 
     inputText.innerHTML = innerHTML 
     } 
     } 
} 
</script> 
</body>

CSS

.ipstlight_auther { 
    font-weight: bold; 
    color: red; 
} 

.black { 
    color: black; 
}

來源

2016-05-19 23:05:36

它的寫作全部由php： {lang =「byline_nodate」htmlsprintf =「$ topic-> author（） - > link（）」}所以我不知道如何實現這個 – StackBuck

@StackBuck你說你改變了span這個' {lang =「byline_nodate」htmlsprintf =「$ topic-> author（） - > link（）」}'這就是我使用的 –

對不起我的壞... – StackBuck

得到它！

我通過ACP - >語言進行了更改。

我在語言搜索術語：「byline_nodate」

而且改變了它從：By %s

到：By <span style="font-weight: bold; color:red;">%s</span>

結果是：

來源

2016-05-20 06:57:25 StackBuck

如何在PHP代碼中更改文本樣式和顏色

編輯：

回答

相關問題