How-to: conflict resolution for the installed stylesAll manuals
Several installed styles for a single page can bring unexpected effect. Here’s an example:
you’ve installed a global style, i.e. NightShift - eye care which is applied to every page you visit. So your pages would look like this:
Now as both styles applied for Google.com simultaneously and their visual effects are overlapping, which brings unexpected results that often interferes with the proper use of a site. For example:
Here’s how you can solve this kind of a problem.
First of all please remember that most of the times it is better to use only one style, not two or more simultaneously for one site/page.
FreeStyler allows you to disable global styles for current page automatically in case site-specific style is active for this page.
You can manually set up which site-specific styles should shut down global styles.
There is also another option, which can suppress effects of specified style on specific urls. Follow the link to read more about it.
How it works
Here’s what you should watch for while installing conflicting styles
Installing a style for a site with active global style
Let’s assume that we’ve already installed the following global style Global dark style - changes everything to DARK. Now from the menu at FreeStyler.WS choose another style for the site Full-width Freestyler.ws. Here we have a potential problem, so the dialog window appears asking if everything is okay with the way the website is displayed.
If there’s a problem, you can easily go to the conflict resolution mode by clicking “Yes, it seems strange”
As a solution, you are advised to turn off global styles when site-specific styles are active. At the same time a preview of the page appears. By switching the checkbox, you can see how the page layout changes. Click “Confirm” to save the changes.
You can check the “Don’t show this message again”, and the notification won’t be shown again. The display mode can be customized via style settings in the menu or the manager.
Installing global style with site-specific style already on
Assume that we already had Full-width Freestyler.ws style installed for FreeStyler.WS website. Now, from any page of FreeStyler.ws domain let’s add global style Global dark style - changes everything to DARK from the menu. Again we face a potential problem - the dialog window appears asking user if everything is okay with site looks.
No notification appears if there’s a site-specific style with a rule to suppress global styles already installed for this page. In this case, global style will be suppressed without any additional appeals to the user.
In the conflict resolution mode, you can see the list of active site-specific styles for the current page and choose which styles should take precedence over global styles.
In our example, let’s choose Full-width Freestyler.ws and click Confirm.
As a result, Full-width Freestyler.ws should be active, and the effect from the global style suppressed.
Note that if you have several site specific styles installed it won't matter if you check just one style or several, since global style will be suppressed by checking any site-specific style.
Configuration of the already set styles
You can configure the style interaction rules from the menu and the style manager. The menu only lets you configure styles applicable to the current page while the manager contains settings without URL limitations.
For a Site-specific style
You can locate the “All global styles are disabled when this style is active” checkbox in the style details block.
For global style
The details block contains a list of site-specific styles that overrides the selected global style
You can edit the list by clicking Edit list.
N.B.: you can use both ways of changing the parameters (for the global style or the site-specific one) as they lead to the same changes. For example if you uncheck the box with site-specific style for the global style settings (i.e. "Full-width Freestyler.ws"), it would be the same as to uncheck the “All global styles are disabled when this style is active” box in the "Full-width Freestyler.ws" style settings. We’ve decided to leave the two-ways access to these settings to ease up the search and clearly show the correlation between the styles.
When global style is blocked by an active site-specific style, the menu should look like this:
To tweak the style's setting you can either access the style manager or standard style menu (“See style features”) by hovering over the question mark and clicking the corresponding link.
In the menu, there are several similar configuration options both for global and site-specific styles (similar to the manager). You can find those settings on the style details panel.
If you’re stuck…
Some site-specific styles can be applied to sites they are not intended for by mistake. In such a case to eliminate potential problems with layout you have two options:
- Use exceptions mechanism to prevent style from applying on some pages in a few clicks. Read more about exceptions here.
- Edit the style manually.
For example, we have a style for a Facebook (not a global one) which by mistake is also applied to Google. Let’s edit the style to eliminate our problem.
- Go to Google (or any other page with the applied style we want to remove)
- Start the style editor (menu -> hover over the style and click the wrench icon -> Edit style
- Now we need to locate a section (sections) of the style that is applied to the current site. To do so:
- Choose the first style section in the list on the left
- Open the list of applicability criteria on the top section (see Applies:)
- Select the criteria marked with a green check mark – these criteria “worked” on the current page. In our case, it was the “URLs starting with: http” (url-prefix in the @-moz-document notation).
- Edit these criterion so that it no longer applied to the current page. In our example, the style is obviously intended for Facebook, so change the “URLs starting with: http” rule to the following: "URLs on domain: facebook.com". This should result in this style section being applied only to Facebook and not Google pages.
- Click Save to save the changes and close the editor.
- Thoroughly check all the sections of the style and make changes, if needed.
Also, in case the style seems to work incorrectly, you can contact its author or site admin using one of the following ways:
- leave a comment at the style’s page on site.
- use a contact form - look for the Report style issues link on the style’s page or send an email email@example.com
- contact us in our social accounts (Facebook, Twitter, etc.).