XF 2.1 Using Chrome Inspector to Modify XF CSS

[Alfuzzy]

I'm trying to learn how to use the Chrome Inspector to modify Xenforo CSS. I've watched this video a bunch of times:

How to change almost anything quickly and easily...

Hey guys, I've been selling a lot of posts asking about how to change the spacing of x or the color of y, so I thought I would make a brief screencast that illustrates my process of finding out where/how to change something I want to change within a style... This will work for almost anything...

xenforo.com

This video was made around 2012...and although the basic principles shown in the video still apply...Chrome has changed since 2012.

For example at the 5:40 point in the video Eric highlights the .trophy .points code. This code is in the Chrome inspector section called "Matched CSS Rules".

In the present day version of Chrome the Chrome Inspector sections are not labeled like this any more...thus I'm a bit confused which section of the Chrome Inspector I need to look at...in order to copy the correct code to do a search within the Xenforo ACP templates.

As an example say I want to change the color of this text:

• What area/window of the Chrome Inspector should I be looking in to find the proper CSS code to search for in the XF ACP templates to do the modification?
• And in this specific example...what is the exact code I should be looking for to use as the search term for the XF ACP template search?

Thanks much

 

[l3ta]

So, now you go to extra.less and put this in it:

.node-title a { color: red;}

 

[Alfuzzy]

So, now you go to extra.less and put this in it:

.node-title a { color: red;}

Thanks very very much I3ta...really appreciate the detailed reply!

I think the part I assumed (wrongly)...was when using the Chrome Inspector...the code that shows up for the page item that was right-clicked...the code that's highlighted (1. in my image) in the Elements window...is the proper code to then look for the CSS info in the Styles window.

It looks like in this case I needed to go up one line in the Elements window (2. in my image)...and then get the proper CSS code in the Styles window (in this case .node-title).



I noticed that in the code you provided for the extra.less template...you added the "a"...to make the CSS .node-title a

Is the "a" necessary to make it different than the original template code for the .node-title? Or does the "a" in the .node-title a code from the <a href= statement?

2nd question. I see I would be adding the code to the extra.less template. Just curious...why wouldn't I want to edit the actual template that contain the .node-title code for this node...rather than adding code to the extra.less template?

I guess a lot of this comes with years of experience...then it's easy. Hopefully I'll get better with the more I do!

Thanks again very very much for the help!!!

 

[l3ta]

You're welcome!

You're styling a link, that's why the addition of the lowercase "a".

I wouldn't recommend doing changes to core templates unless you are pretty sure of wut you're doing. I recommend you do your modifications in style properties and in extra.less until you get comfortable with the software.

 

[Alfuzzy]

I wouldn't recommend doing changes to core templates unless you are pretty sure of wut you're doing. I recommend you do your modifications in style properties and in extra.less until you get comfortable with the software.

Good deal...makes sense. Thanks again.