XF 2.0 Moving style modifications from templates to extra.less

[Connor Holio]

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!

 

[Ozzy47]

Well it would depend on exactly what you changed.

 

[S Thomas]

If you modified templates which don't have the ".less" format, you'd create template modifications instead.
/admin.php?template-modifications/

 

[Connor Holio]

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.

 

[Connor Holio]

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?

 

[S Thomas]

No, you can create any template for any style. You can't use HTML or XF Syntax in .less templates. Only less and css.

 

[Connor Holio]

No, you can create any template for any style. You can't use HTML or XF Syntax in .less templates. Only less and css.

Cool. I was confused because I got a message that two extra.less templates were "outdated" and need to be "reconciled".

 

[Connor Holio]

I am still hoping to get help with my Post #4, about moving the comment-outs. Thank you in advance.

 

[Connor Holio]

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.