Custom CSS spoils Lightbox functions

  • Resolved JackGraal

    (@jackgraal)


    11 years, 6 months 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("https://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 https://jackgraal.com

Viewing 11 replies - 1 through 11 (of 11 total)

  • 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?

    Thread Starter JackGraal

    (@jackgraal)

    https://jackgraal.com/en/raptr-gamers-essentials/

    Thanks a lot

    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: https://jackgraal.com/pl/raptr-niezbednik-gracza/

    Is anything different between those two versions of the post?

    Thread Starter JackGraal

    (@jackgraal)

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

    Thread Starter JackGraal

    (@jackgraal)

    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

    Thread Starter JackGraal

    (@jackgraal)

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

    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?)

    Thread Starter JackGraal

    (@jackgraal)

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

    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?

    Thread Starter JackGraal

    (@jackgraal)

    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.

    Thread Starter JackGraal

    (@jackgraal)

    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.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Custom CSS spoils Lightbox functions’ is closed to new replies.

Tags