编辑：

Question

我有IPSuite 4.1.11，其中包含＆＃34;类似内容＆＃34;在侧边栏处阻止。我正在使用Chameleon主题，可以找到here

我想用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}}

这是完整＆＃34; TopicFeed块＆＃34;代码：

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

但没有成功。

我错过了什么？

编辑：

当我尝试使用＆＃34; spencerlarry ＆＃34;第一个css回答我得到了这个：

当我在每个值之后添加！important; 时：

为什么它的表现如此？

Answer 1

尝试将以下内容添加到您的css中：

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

Answer 2

我认为这就是你想要的：https://jsfiddle.net/aw8ycp0j/2/

我使用javascript来获取单词“by”并将其更改为黑色，这样只有作者名称才会为红色。它也是获取类名并迭代进行更改，以防这是动态加载的内容。

<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

得到了它！

我通过ACP改变了它 - ＆gt;语言。

我用语言搜索了“byline_nodate”

从：By %s

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

结果是：

如何在PHP代码中更改文本样式和颜色

编辑：

3 个答案: