XF 2.0 Changing the color of the "Likes" strip and font.

[Donske]

I have looked at the Styles Settings and I can make a global change in the "Likes" bar or strip, but it also changes other things as well. What I wish to do and it might be a .less css code to add, but I would like to change just the color of the "bar" or "strip" of the Likes Bar. I also would like to change the font color as well. I included a screen shot of what I am referring to.
I appreciate any responses that can help. I hope that it can be an isolated css to add, this way, I would have more flexibility. I already have the css mod to change the color of the tiny thumbsup.

 

[Steve F]

Add this to extra.less

.message
{
    .likesBar
    {
        background: red;
        .likeIcon:before, a
        {
            color: yellow;
        }
    }
}

I included the likeIcon in the CSS as well with .likeIcon:before, but you can remove it of course.

 

[Donske]

HI Steve,
thank you very much. Actually, I was about right when I did some research my self. What I did was I ran the Xenforo in Fire F using "Inspector" mode which allowed me to zero in on the css that modifies those elements. Basically, did the same thing you did. But, I am glad that you replied anyway bc I might not have been able to figure it out.
www.shipsofscale.com

This is my entire edit of the likesBar and the Quotes in the core.less

.likesBar
{
.m-transitionFadeDown();
.xf-minorBlockContent();
border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
padding: @xf-paddingMedium;
font-size: @xf-fontSizeSmaller;
margin-top: @xf-paddingMedium;
/*these items added 10.12.2018*/
border-left: 7px solid #515151;
/*background: #dbd7d1;*/
background: #b29c85;
font-size: 15px;
}

/*this changes the color of the quote background*/
.bbCodeBlock-title {
background: #b29c85;
font-size: 15px;
color: white;
}

.likeIcon
{
&:before
{
.m-faBase();
/*.m-faContent(@fa-var-thumbs-o-up, .86em);*/
.m-faContent(@fa-var-thumbs-o-up, 1em);
color: @xf-textColorFeature;
margin-right: .2em;
}
}


I also have this in the extra.less

/* Like Icon on post*/
.likeIcon:before
{
/*color: #9fe1e7;*/
color: yellow;
}

/*this changes the quote to italics*/
.bbCodeBlock.bbCodeBlock--quote .bbCodeBlock-content {
font-style: italic;
font-size: 1em;
}