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

If you use the Gallery Formatter module based on the Imagefield within the Marinelli theme, the arrows of the gallery don't appear as they should (see step 1). This is apparently a CSS problem caused by conflict between the theme related CSS and the module related CSS. This howto shows you how to quickly solve the problem.

Step 1: 
Problem -> CSS conflict between theme and module

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

Step 2: 
Locate the conflict

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.

Step 3: 
Solution: Change name of variable in Gallery Formatter module

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
Step 4: 
Verify result

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


Drupal themes to be compared