PHPコード内のテキストのスタイルと色を変更する方法

Question

サイドバーに「Similar Content」ブロックを持つIPSuite 4.1.11があります。 here

を見つけることができますChameleonテーマを使用して イムは、私はCSSでそれをスタイルしたかったが、私は著者名のスタイルを変更傾けるstuck-ました。そして、私は意味する - 作者の名前。 私はスタイル名やその他のテキストに成功しましたが、著者名だけを色付けしたいと思います。ここで

は、ブロックの画像である：ここで

は私が変更したいものです。

は今ここにその著者名の関連コードがあります：

    {{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ブロック" のコードです：

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

をしてから変更：

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

に私が言うipsuiteにCSSの用語を挿入

{{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}} 

：

<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> 

しかし、成功しませんでした。

何が欠けていますか？

EDIT：

私はこの得た "spencerlarry" 最初のCSSの回答を使用してみてください！

とするとき、私はを追加する重要。は、それぞれの値の後に私が得たもの：

なぜそのようなその演技？あなたのCSSに以下を追加

Answer 1

試してみてください。

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

Answer 2

私は、これはあなたが欲しいものだと思う：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; 
} 

Answer 3

は、ITを手に入れました！

私はACP - >言語で変更しました。

私は言語の用語を検索： "byline_nodate"

をそしてからそれを変更：にBy %s

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

結果だった：