XF 2.2 How to do a reverse-engineering for css targets?

sbj

Well-known member
Hello,

I have accumulated a lot of css codes for my extra.less file over the years. In the beginning I was not smart enough to comment all the stuff, which was a big mistake. So, how can one do a reverse-engineering for css targets and find out what exactly was changed?

Say I have this code:
CSS:
.block-filterBar .filterBar-menuTrigger {
    color: white;
    background: rgb(0, 157, 255);
}

How do I find out what I was targeting there with .block-filterBar .filterBar-menuTrigger? I am about to upgrade to 2.2 soon and need to check all the codes to make sure. How do I find all the stuff in the front-end?
 
Solution
One other method, but you will want to do this on a test installation, is to change the CSS to a noticeable colour, such as orange, pink, etc., and even add some additional elements to make it stand out.

Less:
.block-filterBar .filterBar-menuTrigger {
    color: orange;
    background: black;
    font-size: 50px;
}

Then click around the site until you see it.

Brogan

XenForo moderator
Staff member
You can search the templates in the ACP - you would have to enter the search terms as e.g. filterBar-menuTrigger.

Or you could do a browser page source search if you know which page/view it is.
 
  • Like
Reactions: sbj

sbj

Well-known member
As an example that search finds 18 templates (addons included).

Now even if I figure out which template I was targetting (which is very hard to do), how do I find the corresponding template on the front-end so I can see it live?
 

Brogan

XenForo moderator
Staff member
The template name will more or less point to the page on the front end.

Ignoring the less files, you can immediately work out from this list what the page/block is:

1612045384599.png
 
  • Like
Reactions: sbj

Brogan

XenForo moderator
Staff member
One other method, but you will want to do this on a test installation, is to change the CSS to a noticeable colour, such as orange, pink, etc., and even add some additional elements to make it stand out.

Less:
.block-filterBar .filterBar-menuTrigger {
    color: orange;
    background: black;
    font-size: 50px;
}

Then click around the site until you see it.
 
  • Haha
Reactions: sbj
Solution

RalleRalle

Active member
@Brogan for real now? this is the offical solution to this? There is no admin-tool* that lets me render any given page with the phrasenames instead of the phrasecontents and put all template names and style properties as <!--comments into the html code?

* how about an option I have to enable and then three checkboxes show up next to my "administration"-button in the topmost header: "[ ] embed templates names [ ] embed styleporperty names [ ] show phrasenames"
 
Top