WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom CSS spoils Lightbox functions (12 posts)

  1. JackGraal
    Member
    Posted 1 year ago #

    Hi, for some time I was searching for a reason why my lighbox does not work (with any plugin) and now I know that it was my custom CSS that broke the lightbox effect. The question is - which part of my CSS causes the problem.

    /*
    Welcome to Custom CSS!
    
    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.
    
    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don't need to copy all
    your theme's stylesheet content.
    */
    
    .post-meta .meta_categories {
    	background: url("http://jackgraal.com/wp-content/uploads/2013/04/category-icon.png");
    }
    
    #copyright h3 {
    	display: none;
    }
    
    #copyright p {
    	width: 960px;
    }
    
    #footer-menu {
    	display: none;
    }
    
    #footer {
    	background: transparent !important;
    	padding-top: 20px;
    	border: none;
    }
    
    .sidebar {
    	position: relative;
    	top: -23px;
    }
    
    #content {
    	top: -10px;
    	position: relative;
    }
    
    .sidebar div {
    	margin-left: -11px;
    	margin-right: -11px;
    	margin-top: -4px;
    	margin-bottom: -14px;
    }
    
    #disqus_thread {
    	background-color: #ededed !important;
    	margin: 0;
    	padding: 10px;
    }
    
    #container {
    	box-shadow: none;
    }
    
    #top-bar,.top-bar-preview .top-bar {
    	background: none;
    }
    
    #top-bar,.top-bar-preview .top-bar {
    	border: none;
    }
    
    #header, .header-preview .header {
    	border: none;
    }
    
    #header-menu-wrap {
    	background: #000000;
    	background: -moz-linear-gradient(#000000,#000000);
    	background: -webkit-linear-gradient(#000000,#000000);
    	background: -o-linear-gradient(#000000,#000000);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#000000');
    	background: linear-gradient(#000000,#000000);
    }
    
    #header-menu > li > a {
    	color: #ffffff;
    }
    
    #header-menu > li:hover,#header-menu > li.current-menu-item,#header-menu > li.current-menu-ancestor {
    	background: #e6e6e6;
    	background: -moz-linear-gradient(#eee,#e6e6e6);
    	background: -webkit-linear-gradient(#eee,#e6e6e6);
    	background: -o-linear-gradient(#eee,#e6e6e6);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eee',EndColorStr='#e6e6e6');
    	background: linear-gradient(#eee,#e6e6e6);
    }
    
    #header-menu ul li, .primary-menu-preview.dropdown ul li {
    	background: #e6e6e6;
    	background: -moz-linear-gradient(#eee,#e6e6e6);
    	background: -webkit-linear-gradient(#eee,#e6e6e6);
    	background: -o-linear-gradient(#eee,#e6e6e6);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eee',EndColorStr='#e6e6e6');
    	background: linear-gradient(#eee,#e6e6e6);
    }
    
    #header-menu ul li:hover,#header-menu ul li.current-menu-item,#header-menu ul li.current-menu-ancestor,.primary-menu-preview.dropdown ul li.current-menu-item,.primary-menu-preview.dropdown ul li.current-menu-ancestor {
    	background: #333333;
    	background: -moz-linear-gradient(#000000,#333333);
    	background: -webkit-linear-gradient(#000000,#333333);
    	background: -o-linear-gradient(#000000,#333333);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#333333');
    	background: linear-gradient(#000000,#333333);
    }
    
    #nav #header-menu ul,.primary-menu-preview .sub-menu {
    	box-shadow: 0 1px 2px #000000;
    }
    
    #secondary-menu-wrap {
    	background: #333333;
    }
    
    #secondary-menu-wrap {
    	border-color: #333333;
    }
    
    #secondary-menu ul li:hover,#secondary-menu .sub-menu li.current-menu-item,#secondary-menu ul li.current-menu-ancestor,.secondary-menu-preview .sub-menu li.current-menu-item,.secondary-menu-preview .sub-menu li.current-menu-ancestor {
    	background: #333333;
    	background: -moz-linear-gradient(#333,#333333);
    	background: -webkit-linear-gradient(#333,#333333);
    	background: -o-linear-gradient(#333,#333333);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333',EndColorStr='#333333');
    	background: linear-gradient(#333,#333333);
    }
    
    #nav #secondary-menu ul,.secondary-menu-preview .sub-menu {
    	box-shadow: 0 1px 2px #333333;
    }
    
    #content, .menu-bottom-shadow, #sidebar_bottom {
    	background-color: rgba(0,0,0,0);
    }
    
    .post-title, .post-title a, .post-title a:visited, .entry-footer {
    	border-color: #dbdbdb;
    }
    
    .sticky {
    	background-color: #ffffff;
    }
    
    .child-page {
    	background-color: #ffffff;
    }
    
    .sidebar div.sidebar-wrap {
    	background-color: #ffffff;
    	background: none;
    }
    
    .sidebar div.sidebar-wrap {
    	-moz-box-shadow: 0 0 0 #ededed;
    	-webkit-box-shadow: 0 0 0 #ededed;
    	box-shadow: 0 0 0 #ededed;
    }
    
    .sidebar ul li {
    	border-color: #d4d4d4;
    }
    
    .sidebar h3 {
    	border-color: #000000;
    }
    
    .sidebar h3 {
    	text-shadow: 0 -1px #000000;
    }
    
    .sidebar h3 {
    	background: #000000;
    	background: -moz-linear-gradient(#000000,#000000);
    	background: -webkit-linear-gradient(#000000,#000000);
    	background: -o-linear-gradient(#000000,#000000);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#000000');
    	background: linear-gradient(#000000,#000000);
    }
    
    .featured_slider {
    	background: none;
    }
    
    .block-button, .block-button:visited, .Button, .colour-preview .button, #commentform #submit, .wpsc_buy_button {
    	background: #000000;
    	background: -moz-linear-gradient(#000000,#000000);
    	background: -webkit-linear-gradient(#000000,#000000);
    	background: -o-linear-gradient(#000000,#000000);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#000000');
    	background: linear-gradient(#000000,#000000);
    	border-color: #000000;
    	text-shadow: 0 -1px 1px #363636;
    	color: #fff;
    	-moz-box-shadow: 0 0 5px #fff;
    	-webkit-box-shadow: 0 0 5px #fff;
    	box-shadow: 0 0 5px #fff;
    }
    
    .block-button:hover, .colour-preview .button:hover, #commentform #submit:hover,.wpsc_buy_button:hover {
    	background: #000000;
    	background: -moz-linear-gradient(#000000,#000000);
    	background: -webkit-linear-gradient(#000000,#000000);
    	background: -o-linear-gradient(#000000,#000000);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#000000');
    	background: linear-gradient(#000000,#000000);
    	color: #fff;
    }
    
    .page-title {
    	background: #ffffff;
    	background: -moz-linear-gradient(left top,#ffffff,#ffffff);
    	background: -webkit-linear-gradient(left top,#ffffff,#ffffff);
    	background: -o-linear-gradient(left top,#ffffff,#ffffff);
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorStr='#ffffff',EndColorStr='#ffffff');
    	background: linear-gradient(left top,#ffffff,#ffffff);
    }
    
    .page-title {
    	color: #575757;
    }
    
    .page-title span {
    	color: #000000;
    }
    
    .page-title {
    	text-shadow: 0 -1px 0 #ffffff;
    }
    
    #footer,.graphene-footer {
    	background-color: #000000;
    	color: #999;
    }
    
    #copyright h3,.graphene-copyright .heading {
    	color: #999;
    }
    
    .header_title, .header_title a, .header_title a:visited, .header_title a:hover, .header_desc {
    	color: #000000;
    }
    
    #header .header_title {
    	font-family: 'Russo One';
    }
    
    .featured_slider #slider_root {
    	height: 214px;
    }
    
    a,.post-title,.post-title a,#comments > h4.current a {
    	color: #284f86;
    }
    
    a:visited,.post-title a:visited {
    	color: #284f86;
    }
    
    a:hover,.post-title a:hover {
    	color: #9a2323;
    }
    
    .post-title, .post-title a, .post-title a:hover, .post-title a:visited {
    	color: #000000;
    }

    Thanks to everyone who is willing to help.

    my webiste http://jackgraal.com

  2. pressupinc
    Member
    Posted 1 year ago #

    Hi Jack,

    Would be happy to try to take a look, but I can't find anywhere on your site were a lightbox effect is being used. That'd make it a lot easier to figure out what's going on. Can you direct me somewhere?

  3. JackGraal
    Member
    Posted 1 year ago #

  4. pressupinc
    Member
    Posted 1 year ago #

    Hi Jack,

    The lightbox seems to work fine in the link you sent, in Firefox and Chrome--here's a screenshot.

    It does not seem to work in the Polish version: http://jackgraal.com/pl/raptr-niezbednik-gracza/

    Is anything different between those two versions of the post?

  5. JackGraal
    Member
    Posted 1 year ago #

    Well, the CSS is the same on both versions. EN works for me too

  6. JackGraal
    Member
    Posted 1 year ago #

    I've checked differences in plugins and plugin settings to set same settings on both sites. Now it seems to work well so it turned out that there was nothing wrong with CSS. My bad :) Nevertheless, thanks for help

  7. JackGraal
    Member
    Posted 1 year ago #

    The problem is back so I uninstalled the lightbox plugin (lightbox plus colorbox) and activated Jetpack's carousel but it doesn't work.

  8. pressupinc
    Member
    Posted 1 year ago #

    Hi Jack,

    I'm curious if the problem might have "come back" because of some form of server-side caching. Could something like that be an issue? (Are you running a caching plugin and/or have you switched browsers during the day?)

  9. JackGraal
    Member
    Posted 1 year ago #

    Caching plugin is turned off and I usualy check changes on multiple browsers.

  10. pressupinc
    Member
    Posted 1 year ago #

    I'm now seeing the problem in both language versions. It's an interesting problem--definitely not related to the CSS, I'd imagine. Can you think of anything that might be changing on the back end for one or the other language version?

    Which plugin are you running now? The Jetpack one? Does the English version still work with the lightbox plugin you were running yesterday?

  11. JackGraal
    Member
    Posted 1 year ago #

    Both run now on identical settings (same plugins, same CSS) and the galleries in both versions of Raptr post are set to the same settings also.

  12. JackGraal
    Member
    Posted 1 year ago #

    Hi again, I think I resolved the problem. It was Jetpack's Tiled Galleries option - i deactivated it and most of lightbox plugins started to work. The only thing that does not work is Jetpack's Carousel function but I don't need it.

Topic Closed

This topic has been closed to new replies.

About this Topic