Centering A Slideshow and Resolving CSS Conflicts

The following medium size slideshow is centered in the content section of the page and has a clickthrough link to the photoset on Flickr.

slickr-flickr id="44124342631@N01" search="sets" set="72157629078314079" type="slideshow" border="on" items="60" size="medium" align="center" link="http://www.flickr.com/photos/gailontheweb/sets/72157629078314079/"

Identifying Theme or Plugin Conflicts

The slideshow above is centered but it may not be centered when you run the same slickr-flickr command on your site.

This will either be down to your WordPress theme or other plugins that are overriding Slickr Flickr settings

Below is a process which will help you isolate where the conflict is. It can be the theme or another plugin that has conflicting CSS elements. What we have to identify which…

1) Temporarily switch the theme to TwentyTen or TwentyEleven – does the slideshow center correctly?
2) Switch off the plugins one at a time, refreshing and checking the page each time until the slideshow is centered. The last plugin is the one that is conflicting.

Once we had identified the source of the conflict we can try and look deeper at which lines of CSS are overriding Slickr Flickr’s attempt to center the slideshow.

Then the technique is to produce a more specific line of CSS that produces the intended behaviour and add this to the style.css

Inspecting CSS Conflicts

However, there is a simpler method if you are familiar with CSS. I am using Google Chrome’s “Inspect Element” to expose all the CSS elements that influence the display of the slideshow.

Below are 2 screenshots; the first is showing the non-centered slideshow which has the CSS conflict; and the second where I have disabled the conflicting line in the theme’s style.css file and hence the slideshow is correctly centered.

The conflicting CSS element is

.border { border: 5px solid black; display: table-cell; border-image: initial; }

The bit that is causing the slideshow to display on the left instead of centered is the display: table-cell

Fixing the Theme’s CSS

To override this setting we add one line to style.css


.slickr-flickr-slideshow .border { display: block; }


This element only affects Slickr Flickr slideshows and will not affect any other aspect on the theme.