XF 2.0 What template is the equivilent to extra.css in XF1?

[Brad Padgett]

Hi I simply wish to know which template is for adding the additional css involved in the website. In Xenforo 1 it was "extra.css".

I thought it was "extra.less" but when I made an edit I received errors that were logged.

If that's the correct file to edit then can you explain why I was receiving an error being logged? Just wondering why it would flag an error for editing that template. Maybe it's not the correct one to edit? Please let me know and thanks.

- Brad

 

[Mike]

It is extra.less. What errors did you receive?

Note that the code you add has to be valid LESS, which is essentially just valid CSS. If you have errors in what you add, it will trigger errors when displayed.

 

[Mr Lucky]

That’s the one

I have sometimes found errors for what does seem to be valid code

 

[Mr Lucky]

https://xenforo.com/community/threads/why-did-i-get-this-error-re-css-less.136718/

 

[W1zzard]

Should we add custom addon CSS to extra.css via template modification or rather to more specific CSS files like message.less?

 

[Brad Padgett]

It is extra.less. What errors did you receive?

Note that the code you add has to be valid LESS, which is essentially just valid CSS. If you have errors in what you add, it will trigger errors when displayed.

It was an error having to do with the css I pasted into extra.less

I tried to change the node icon with font awesome and the code was more than likely not the intended css to use which is why I got that error. I appreciate you letting me know that it actually does trigger errors if the css isn't correct.

Also I have one last question. You said it "has to be valid less" which "is essentially just valid css". I haven't learned less yet so my question is will css alone work in the file? Let's say I didn't want to use less quite yet and just wanted to use ordinary css. Would that bring an error?

I'm obviously aware my code wasn't correct for doing what I intended though I am positive the css was valid as a whole. It was valid css, just not correct for doing what I had intended.

So does the code have to be valid syntax or will it trigger errors if the intended result isn't correct? I'm positive my syntax was valid just not the right way to use it.

 

[Mike]

LESS is more or less a super set of CSS: http://lesscss.org/ Valid CSS will virtually always be valid LESS.

If you were pasting in CSS that was designed for XF1, bear in mind that XF1 actually had a layer on top of the CSS for things like style properties. If what you used included that, it wouldn't necessarily be valid any longer. (XF2 properties are different and there's a different syntax for accessing them.)

 

[Brad Padgett]

LESS is more or less a super set of CSS: http://lesscss.org/ Valid CSS will virtually always be valid LESS.

If you were pasting in CSS that was designed for XF1, bear in mind that XF1 actually had a layer on top of the CSS for things like style properties. If what you used included that, it wouldn't necessarily be valid any longer. (XF2 properties are different and there's a different syntax for accessing them.)

What I do is right click > inspect element over the element I want to change and then add the css class to extra.less and then use css

How do I access Xenforo 2 items. Is it different then in Xenforo 1 where you would just inspect the element and add your css to the Xenforo class?

Thanks for answering. I'm learning a lot.

 

[Chris D]

Inspecting elements is the same regardless.

What we actually need is an example of what you've tried to use, what caused the error and what the error actually was. It's very difficult to advise you accurately without this information.

 

[Brad Padgett]

Inspecting elements is the same regardless.

What we actually need is an example of what you've tried to use, what caused the error and what the error actually was. It's very difficult to advise you accurately without this information.

Yes as I do apologize for not having the error. I had deleted the error as I don't like to keep errors in my admincp. It's annoying to see it.

I'm sure I'll be editing my extra.less file again soon so if I receive the error I'll update this thread with it.

 

[Steve F]

Yes as I do apologize for not having the error. I had deleted the error as I don't like to keep errors in my admincp. It's annoying to see it.

I'm sure I'll be editing my extra.less file again soon so if I receive the error I'll update this thread with it.

What was the CSS code you tried to use...

 

[Brad Padgett]

What was the CSS code you tried to use...

.node-icon i::before {
font-family: 'Font Awesome', sans-serif;
content: '\f121';

}

That was the exact code I used. Although I just recently found out Font Awesome is enabled by default so all I would need is the icon content.

However that was the wrong selector to use. I just took another look and it seems this is the correct one to use for node icon changing:

.node--category .node-icon i, .node--forum .node-icon i {

}

I assume with adding the ::before pseudo element to the above selector I could achieve a Font Awesome icon simply by adding the content property and putting the icon of my choice.

Maybe it will help you recreate the error if you use the first set of code. Thanks for the help.