Search Knowledgebase: |
Cosmetic Filter
This is a very powerful feature that allows you to completely remove unwanted content from a page. Cosmetic filters are applied before the page is processed by WebSite-Watcher. Result is or can be a (much) smaller page with only the content you want to monitor.
This feature can also be used to remove floating banners that hide other elements, for example cookie banners, login panels, etc.
Include/Remove filters
To remove content from a page, you have to create include and remove filters. Remove filters will remove all found matches. Ignore filters will use all found matches and ignore everything else.
These filters are based on the used CSS definitions, so you typically have to analyze the HTML source code to get these definitions. WebSite-Watcher simplifies this part with a simple 3-step assistant:
| 1. | Select text Search and select words in a text for which you want to create a filter. This works best with some unique words (or very short phrases which are not splitted by HTML tags). Clicking "Next" will find all related CSS definitions. |
| 2. | Select CSS definition Select and test the found CSS definitions. It should include the whole text you want to remove or include. |
| 3. | Create the filter Select if you want to create a Remove filter or an Include filter. Test your filter carefully, then click "Add filter" to create it. |
This is a very powerful feature that removes content from the page. Please test the selected CSS filters carefully so that no important content will be removed.
2-step execution
In the first step, WebSite-Watcher will execute all Include filters.
In the second step, WebSite-Watcher will execute all Remove filters.
This allows you to define parts of the page you want to monitor and then remove unwanted content from these parts.
Syntax of cosmetic filters
Remove filters can by entered directly, Include filters have to be placed between brackets.
There are mainly 3 type of rules:
| • | #name Matches all elements with id="name" Example: #header-menu will match: <div id="header-menu">...</div> |
| • | .name Matches all elements with class="name" Example: .top-bar will match: <div class="top-bar">...</div> |
| • | .name* Matches all elements with class attribute containing "name" (will match class="name name2") Example: .dropdown* will match: <div class="left dropdown">...</div> |
Any line that starts with an exclamation mark is a comment.
Examples
| • | Example of Remove filters: #left-menu !this is a comment, the next filter will remove the cookie banner .consentbanner |
| • | Example of Include filters: (#breaking-news) (.top-stories) |
See also:
