How to solve the CSS conflict between the Marinelli theme and the Gallery Formatter module?

The arrows of the gallery are not at the right position and they have a blue and thick border.

Usually it is the easiest way to use the inspect element function of the browser to identify such problems (see Use "Inspect Element" to Troubleshoot potential Design/CSS problems). If you do so you will find out that both of the problems are caused by a code in the comments.css (sites/all/themes/marinelli/css). The problematic code related to the positioning can be found in the section Structure (line 32-38), the code related to the border in the section Look & Feel (line 85-88). These codes are applied to the Gallery Formatter arrow, because the same variable "arrow" is used.

The most proper solution is to change the name of the variable in the Gallery Formatter module (for Example from arrow to arrow2). Thus you can avoid that the code from the comments.css is applied to the arrows in the gallery. To do so you have to edit the following files:

• greenarrows.css -> sites/all/modules/galleryformatter/gallerystyles/greenarrows
• galleryformatter.css -> sites/all/modules/galleryformatter/theme
• infiniteCarousel.js -> sites/all/modules/galleryformatter/theme

Open the files and search for "arrow" and change it to "arrow2". There are 5 instances to change (see also picture):

• greenarrows.css -> line 7 and 69
• galleryformatter.css -> line 56
• infiniteCarousel.js -> line 66, two instances

After you applied solution 1 or 2 you can reload the page. If everything went fine, the arrows are okay now.