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

Question

I have IPSuite 4.1.11 which have "Similar Content" Block at the Sidebar. Im using Chameleon Theme, which can be found here

I wanted to style it with css but i got stuck- I cant change the style of the author name. And i mean- the author name. I successeded to style name and other text- but i want to color only the author name.

Here is the picture of the block:

Here is what i want to change:

Now here is the Relevant code of that author name:

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

Here is the Full "TopicFeed block" code:

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

I inserted css term into ipsuite that says:

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

and changed from:

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

to:

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

or to:

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

But without success.

What do i miss?

EDIT:

When i try to use " spencerlarry " first css answer i got this:

and when i add the !important; after each value i got that:

Why its acting like that?

Answer 1

Try adding the following to your css:

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

Answer 2

I think this is what you want: https://jsfiddle.net/aw8ycp0j/2/

I am using javascript to get the word "by" and changing it to black, that way only the authors name will be red. It is also getting the class names and iterating through to make the change, in case this is dynamically loaded content.

<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

Got IT!

I changed it via ACP -> languages.

I searched in languages the term: "byline_nodate"

And changed it from : By %s

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

The result was: