我有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代码中更改文本样式和颜色

编辑：

回答

相关问题