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

[sbj]

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:

.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?

 

[Paul B]

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.

 

[sbj]

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?

 

[Paul B]

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:

 

[Paul B]

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.

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

Then click around the site until you see it.

 

[sbj]

I think that's the best and quickest solution. (Also the most funny ). Thanks for the support.

 

[RalleRalle]

@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"