XF 2.0 Moving style modifications from templates to extra.less

Greetings!

I have just learned to make style modifications and made about 5-6 small changes. Not knowing how to do it differently, I modified multiple individual templates. I think I would like to change that.

I read somewhere that the preferred way of doing this is to add all such style modifications to extra.less instead, and keep the individual templates unmodified and original. How would I move all these changes into extra.less? Could someone show me an example of a proper way of doing this?

Thank you!
 
Ok, I am figuring this out. Could you please help me with this simple task. In template core.less I want to:

1) modify .likesBar to remove border-left.
2) modify .likeIcon to remove the icon.

My modified code simply comments out a few lines:

.likesBar
{
.m-transitionFadeDown();
.xf-minorBlockContent();
// border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
padding: @xf-paddingMedium;
font-size: @xf-fontSizeSmaller;
margin-top: @xf-paddingMedium;
}

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

How would I move these modifications into extra.less?

I have figured out how to move all my other modifications.
 
Last edited:
Also, is it true that there is only one common extra.less for all styles?

I need to make some style changes for one style but not for others. How would I make an IF statement in extra.less?
 
Someone recommended to use none !important command.

.likesBar
{
border-left: none !important;
}

.likeIcon:before
{
display: none !important;
}

This did not work. It removed the entire Likes Bar. It also took a while to undo.
 
Back
Top Bottom