5

Before making a CSS change that might possibly have unintended consequences, what's a good way to find where else on the whole site (not just this page) that id or class is used? (It doesn't have to be exhaustive, and semi-manual processes are ok, too.)

For a bit of context, it's a Joomla-based site with a lot of content, and I'm not yet familiar with most of it. The id in question has a two letter name, and I have no idea where else it might be used. I don't have direct access to the server for any grep-like approaches.

The only technique I can think of is using Stylish to make an obvious change to that one selector, and browsing the site for a bit to see where it pops up.

Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
  • You could use "Search entire local site" in Dreamweaver but if your class only has 2 letters it will probably return lots of erroneous result – Turnip Feb 28 '12 at 13:38
  • Are you only interested in pages that are linked directly, excluding any standalone pages you might have? The answer will affect whether or not a spidering of your site will be appropriate. If you really need *all* pages, whether they're linked or not, this will be tricky, since you can't just grep in templates, content, code - you need all 3. If that *is* the case, you might want to reduce the problem space to something like 'pages that have been accessed in the last n days' and grab those URLs from your access log. – Bobby Jack Feb 28 '12 at 16:45

5 Answers5

4

The easiest way would be a local grep, but since you don't have access to the server, try downloading it locally using wget:

wget -r -l --domains=http://yourdomain.com http://yourdomain.com

That'll recursively retrieve pages from your domain to an infinite depth, but only following links to pages within your domain. Once it's on disk, do a local grep and you're golden.

Karl Barker
  • 11,095
  • 3
  • 21
  • 26
  • Depending on how links work on your site, you may also want to use `--relative` to only follow relative links. – Karl Barker Feb 28 '12 at 13:39
  • Hmm, yeah that could work. Devil's advocate: it won't pick up styles applied after load. – Steve Bennett Feb 28 '12 at 13:42
  • That is sneaky...maybe this could help: http://stackoverflow.com/questions/5901661/wget-javascript – Karl Barker Feb 28 '12 at 13:50
  • Devil's advocate #2: Even a grep isn't guaranteed (and it seems like a *guarantee* is required) since that won't cater for commented-out code, occurrences of the class in normal text, etc. What you *really* need is a proper DOM parser ... – Bobby Jack Feb 28 '12 at 16:42
  • heh, guarantees definitely not required. (It's hard not to think like an over-engineer sometimes.) – Steve Bennett Feb 29 '12 at 02:52
  • 1
    Looks like the right arguments might be something like "wget --recursive --level 3 --convert-links --limit-rate=10k --accept html http://example.com" – Steve Bennett Feb 29 '12 at 03:08
  • 1
    This won't work because at best you will get the source code of the various pages within the site. It does nothing to solve the problem and determine whether the CSS is coming from the template, a module, a component, or a plugin. – Brent Friar Mar 03 '12 at 15:16
1

I use unused-css.com for this sort of thing. You simply put in your webpage, and it will look through the whole site (incl. login) and give you the CSS that you actually are using.

I've found it to be 95% correct - but it only doesn't pick up on things like some CSS browser hacks and some errors (ie. the CSS only displays after an error), so it should work fine for this.

You could also check the original template (assuming the template is a commercial one) to see where the id perhaps should be (they usually lay everything out in their demo template), but unused-css won't tell you exactly where it is used, only if it is or not. For that, I'd start with a view-source -> find on the major pages, and then try other mentioned solutions.

Nathan Keen
  • 45
  • 6
  • Interesting tool that's good to know about. It doesn't quite solve this particular problem, because I know the CSS style is used, I just don't know how much it's used. – Steve Bennett Mar 03 '12 at 03:12
  • I know this post is old but is referenced by google typing in some keywords fort this specific argument so I want to add my experience with this answer. Unfortunately Dust Me Selectors does not scan for ASP.Net Master Pages (*.Master) (and this is a real pity). – vaitrafra Sep 04 '14 at 09:06
0

Get the whole site's source tree into an IDE like NetBeans or Eclipse and then do a recursive search for id="theid" on the root folder.

If this is not possible, how are you updating the CSS?

Matt Gibson
  • 14,616
  • 7
  • 47
  • 79
0

Assuming you don't want to do the grep approach:

Is the ID in question appearing in the actual content area of the page, or in the 'surrounding' areas? If it seems like it's not part of the content, but rather appears in a template, you could search the template files for it. As you're updating the CSS, I'm going to assume you can at least get a hold of the template files. Many text editors/IDE's will let you do a 'global search'. I'd load the template files in TextMate (my texteditor of choice) and do a "search in project" for the particular ID.

That will at least give you a semblance of an idea of where in the site that ID shows up. No, it won't be every 'page', but you'll know what kind of page it appears on (which, with a CMS, is really what you're after).

If the ID in question appears in the content, that is, it was hand-entered by content creators, you'll have to go another route. Do you have access to the database? If you can get a dump of the database (I think Joomla! is MySQL based), you can open the sql in something like Sequel Pro and do a search in the content records for that ID.

chipcullen
  • 6,840
  • 1
  • 21
  • 17
0

This is not actually as hard as it sounds. First place to look the index.php file for the template. This file should be pretty small without a ton of code unless the template is from a developer that uses a template framework. If the ID is in there, then it will show up on every page in the website since this is the foundation that every page is built on.

If you don't find it in there, then you need to determine whether it is displaying in a module position or in the component area. You should be able to tell the difference by looking at the index.php file from the template.

If it's in a module position, then the ID should only show up in instances of that particular module.

If it's in the component area, then it should only display in any pages being created by the component. That does leave the possibility of it affecting many elements you don't want changed. But there is a solution for that. you can use the page class suffix in a menu item to add a unique id/class to the page you want to change (depends on your template). With that unique suffix you can create a specific selector that will only affect the pages you want to change.

Brent Friar
  • 10,588
  • 2
  • 20
  • 31
  • It's Joomla, as mentioned in the original question. Also, I have no access to any templates, also as mentioned... – Steve Bennett Mar 03 '12 at 03:13
  • Because it's Joomla is why I answered this way. You have access to the template files right through the Joomla admin and everything else is done by looking at the source code on the front end. You might want to read a couple of Joomla tutorials. Once you understand how Joomla works it's easy to tell where a particular class or ID is coming from and what it will affect. – Brent Friar Mar 03 '12 at 15:13