How-to: conflict resolution for the installed styles

All 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:

NightShift - eye care

then you’ve decided to add a site-specific style, i.e., Polygon Turquoise Google for This style is applied only to the pages on domain and looks like this:

Polygon Turquoise Google

Now as both styles applied for simultaneously and their visual effects are overlapping, which brings unexpected results that often interferes with the proper use of a site. For example:

unexpected results

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 Here we have a potential problem, so the dialog window appears asking if everything is okay with the way the website is displayed.

dialog window

If there’s a problem, you can easily go to the conflict resolution mode by clicking “Yes, it seems strange”

conflict resolution mode

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 style installed for FreeStyler.WS website. Now, from any page of 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.

choose which styles should take precedence over global styles

In our example, let’s choose Full-width and click Confirm.

As a result, Full-width 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.

Styles manager

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.

style details block

For global style

The details block contains a list of site-specific styles that overrides the selected global style

style details block interface

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"), it would be the same as to uncheck the “All global styles are disabled when this style is active” box in the "Full-width" 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:

global style blocked by an active site-specific style

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.

tweak the style's setting

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.

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:

  1. Use exceptions mechanism to prevent style from applying on some pages in a few clicks. Read more about exceptions here.
  2. Edit the style manually.

Also, in case the style seems to work incorrectly, you can contact its author or site admin using one of the following ways:

  1. leave a comment at the style’s page on site.
  2. use a contact form - look for the Report style issues link on the style’s page or send an email
  3. contact us in our social accounts (Facebook, Twitter, etc.).

You should to add comment.


+ Create discussion

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.