{"id":390,"date":"2012-02-02T13:05:38","date_gmt":"2012-02-02T13:05:38","guid":{"rendered":"http:\/\/www.diywebmastery.com\/slickrflickrpro\/?p=390"},"modified":"2012-02-02T15:01:18","modified_gmt":"2012-02-02T15:01:18","slug":"centering-a-slideshow","status":"publish","type":"post","link":"https:\/\/www.slickrflickr.com\/members\/390\/centering-a-slideshow","title":{"rendered":"Centering A Slideshow and Resolving CSS Conflicts"},"content":{"rendered":"<p>The following medium size slideshow is centered in the content section of the page and has a clickthrough link to the photoset on Flickr.<\/p>\n<p><code>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\/\"<\/code><\/p>\n<div id=\"flickr_72157629078314079_4857\"><div class=\"slickr-flickr-slideshow landscape medium center\"><div class=\"active\"><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7010\/6785859605_d4f9c0b2f3.jpg\" title=\"tea eggs | Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">tea eggs | Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7034\/6780561175_3479ecc2ca.jpg\" title=\"go bao or go home | Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">go bao or go home | Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7165\/6780574295_890a334fc2.jpg\" title=\"okonomiyaki isn&#039;t Chinese but ANYWAY Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">okonomiyaki isn't Chinese but ANYWAY Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7032\/6781304613_44dc7b6a31.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7142\/6781306855_ac363c8cd5.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7171\/6786085005_28f8eb773d.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7160\/6786088237_843118da93.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7173\/6785793199_e1fa01d50e.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7019\/6781308291_20de817cff.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7015\/6785796307_c20c1ac28d.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7151\/6785798919_e03bd11d40.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7025\/6785801985_545aaf8dd5.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7029\/6785805017_e0e58a1c56.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7021\/6785807277_66d952e330.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7150\/6785809785_d603c21c31.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7158\/6780588405_a6956e8521.jpg\" title=\"fortune cookie: now is the time to try something new\" alt=\"\"  class=\"border\" \/><p class=\"border\">fortune cookie: now is the time to try something new<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7154\/6785761337_47fd2c130f.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7157\/6785153503_d849b91bb8.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7013\/6785399553_c48e3d19a3.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7174\/6786492441_7a984286d1.jpg\" title=\"the burn | Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">the burn | Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7144\/6786495249_2461d7afc0.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7147\/6786499163_5e8ab162cc.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7166\/6781360097_d5e3cd70dc.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7013\/6781358969_74f73f8594.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7016\/6786612403_7561b8c5b2.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7024\/6781036513_2b2f161542.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7159\/6781308779_7395a8070f.jpg\" title=\"one way to warm up in winter | Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">one way to warm up in winter | Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7164\/6786502409_a883bcff39.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7166\/6781003067_5b56840f87.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7021\/6781020375_79f3e0cf34.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/farm8.static.flickr.com\/7021\/6781022261_db1a477513.jpg\" title=\"Happy Year of the Dragon!\" alt=\"\"  class=\"border\" \/><p class=\"border\">Happy Year of the Dragon!<\/p><\/div><\/div><div style=\"clear:both\"><\/div><\/div>\n<h3>Identifying Theme or Plugin Conflicts<\/h3>\n<p>The slideshow above is centered but it may not be centered when you run the same slickr-flickr command  on your site.<\/p>\n<p>This will either be down to your WordPress theme or other plugins that are overriding Slickr Flickr settings<\/p>\n<p>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&#8230;<\/p>\n<p>1) Temporarily switch the theme to TwentyTen or TwentyEleven &#8211; does the slideshow center correctly?<br \/>\n2) 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.<\/p>\n<p>Once we had identified the source of the conflict we can try and look deeper at which lines of CSS are overriding Slickr Flickr&#8217;s attempt to center the slideshow.<\/p>\n<p>Then the technique is to produce a more specific line of CSS that produces the intended behaviour and add this to the style.css <\/p>\n<h3>Inspecting CSS Conflicts<\/h3>\n<p>However, there is a simpler method if you are familiar with CSS. I am using Google Chrome&#8217;s &#8220;Inspect Element&#8221; to expose all the CSS elements that influence the display of the slideshow.<\/p>\n<p>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&#8217;s style.css file and hence the slideshow is correctly centered.<\/p>\n<p><img decoding=\"async\" src=\"\/\/slickrflickr.cdn746.com\/media\/forums\/slideshow-not-centered.jpg\" alt=\"Screenshot of slideshow that is not centered\" \/><\/p>\n<p><img decoding=\"async\" src=\"\/\/slickrflickr.cdn746.com\/media\/forums\/overriding-theme-css.jpg\" alt=\"Screenshot of slideshow that is centered when theme CSS is suppressed\" \/><\/p>\n<p>The conflicting CSS element is <\/p>\n<p><code>.border { border: 5px solid black; display: table-cell; border-image: initial; }<\/code><\/p>\n<p>The bit that is causing the slideshow to display on the left instead of centered is the display: table-cell<\/p>\n<h3>Fixing the Theme&#8217;s CSS<\/h3>\n<p>To override this setting we add one line to style.css<\/p>\n<p><code><br \/>\n.slickr-flickr-slideshow .border { display: block; }<br \/>\n<\/code><\/p>\n<p>This element only affects Slickr Flickr slideshows and will not affect any other aspect on the theme. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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=&#8221;44124342631@N01&#8243; search=&#8221;sets&#8221; set=&#8221;72157629078314079&#8243; type=&#8221;slideshow&#8221; border=&#8221;on&#8221; items=&#8221;60&#8243; size=&#8221;medium&#8221; align=&#8221;center&#8221; link=&#8221;http:\/\/www.flickr.com\/photos\/gailontheweb\/sets\/72157629078314079\/&#8221; Identifying Theme or Plugin Conflicts The slideshow above is centered but it may not be centered when you run the same [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-390","post","type-post","status-publish","format-standard","category-examples","entry"],"_links":{"self":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/posts\/390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/comments?post=390"}],"version-history":[{"count":0,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/posts\/390\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/media?parent=390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/categories?post=390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/tags?post=390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}