XF 2.2 How to use 'Inspect' or 'F12' to find what I'm trying to style?

CZ Eddie

CZ Eddie

Active member
If I find an object in the webpage that I want to style, can I use Inspect of F12 to discover the name of the template it's located in? Or the CSS that's styling it?
I'm sure it's possible but I'm getting confused on what to look for in F12. I'm using Chrome but have all the browsers.

As an example, this screenshot is what I get when I right-click my user-avatar here and click Inspect.
How do I translate that into the template and line that needs to be edited?

1719193857166.webp
 
Sort by date Sort by votes
You can copy the code into the template search.

Look at this guide. It applies to xf1 but the logic is the same.

Note the main template will be the <body> tag with a data-template attribute.

How To ... P

Resource update in 'How To ...'

If you wish to change the position of certain elements, add something specific, or create a unique style, it may be necessary to edit the templates. There are several ways of determining which template to edit. In this guide we're interested in the main forum index, which is the forum_list...
  • Like
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

ShikiSuen
  • Question Question
XF 2.1 How to use CSS/LESS to change postbit style according to the content line lengths of a post / message?
Replies
0
Views
645
ShikiSuen
ShikiSuen
randomchance
  • Question Question
XF 2.1 Could someone point me to any kind of a help or how-to section on creating a template and then using it in a style?
Replies
4
Views
446
randomchance
randomchance
PJG
  • Question Question
XF 2.0 Can't seem to find a 'how to install style-template.'
Replies
1
Views
1K
webbouk
webbouk
marcv
  • Question Question
XF 1.5 How to find what post or forum an image is posted in?
Replies
6
Views
1K
marcv
marcv
Amaury
  • Question Question
XF 1.4 How to Find What CSS Controls
Replies
8
Views
819
Amaury
Amaury
Back
Top Bottom