Remove View full size in jetpack-carousel.css update

UPDATE: https://dev.nataliebork.com/projects/glance/#jp-carousel-651

I was able to remove the text by adding the following to Appearance > Theme Options > General > Custom CSS

a.jp-carousel-image-download {
	display: none!important;
}

But how can I remove the background box?

You can follow this tutorial to find the right CSS selector to use to hide specific elements from the Carousel, or other elements of your site:
https://dailypost.wordpress.com/2013/07/25/css-selectors/

You can also check this page to learn how to use CSS to customize your site:
https://www.htmldog.com/guides/css/beginner/

Thank you Jeremy. https://dailypost.wordpress.com/2013/07/25/css-selectors/ sums it up beautifully, but I most be doing something wrong.

Visit https://dev.nataliebork.com/#jp-carousel-713

In the jetpack-carousel.css I changed it to

.jp-carousel-light .jp-carousel-image-meta {
	background: #fff;
	border: 0px solid #fff;
	border-top-color: #fff;
	border-left-color: #fff;
	color: #fff;
}

but in Chrome: Access the browser tool via the browser menu: go to View > Developer > Developer Tools

I still see

.jp-carousel-light .jp-carousel-image-meta {
background: #fafafa;
border: 1px solid #eee;
border-top-color: #f5f5f5;
border-left-color: #f5f5f5;
color: #333;
}

Let me know if you still see the gray box.

In the jetpack-carousel.css I changed it

You’ll want to avoid editing plugin files. If you do so, your changes will be deleted every time you update the plugin. To add custom CSS to your site, use the Custom CSS editor available under Appearance > Edit CSS, or use a Child Theme.

Thank you for telling me about https://jetpack.me/support/custom-css/

I added this to Appearance → Edit CSS and it works in the preview. But I do not see the change after I saved it. I clear the cache also.

.jp-carousel-light .jp-carousel-image-meta {
	background: #fff;
	border: 0px solid #fff;
	border-top-color: #fff;
	border-left-color: #fff;
	color: #fff;
}

Let me know if you still see the gray box in https://dev.nataliebork.com/#jp-carousel-713

Your changes are correctly saved and work. You can check it with the browser inspector, as explained here:
https://dailypost.wordpress.com/2013/07/25/css-selectors/

I’m happy the gray box is gone on your screen, but I still see the gray box on my browser even after clearing the cache.

Also, I do not see the option to edit the CSS in CSS Customizer and it’s not under the title as shown in https://dailypost.wordpress.com/2013/07/25/css-selectors/ and https://en.support.wordpress.com/customizer/.

I still see the gray box on my browser even after clearing the cache.

I would suggest trying a different browser, just to make sure. If you continue to experience issues, you can use your browser inspector to check if your custom CSS is applied to the page.

I do not see the option to edit the CSS in CSS Customizer

This option is not available on self-hosted WordPress sites yet. You’ll want to use Jetpack’s Custom CSS editor instead, as I mentioned earlier. It offers the same features, but under a different menu (Appearance > Edit CSS).

I still see the old CSS in Chrome: View > Developer > Developer Tools.

Maybe I need to wait a few hours to see the update? I viwed it on Firfox, Chrome and Safari. I cleared the cache every time, but no change.

I’ll add changes to Appearance > Edit CSS.

Thanks again for your help.

If you’re not happy with your CSS changes, I would suggest trying to hide elements with display:none; instead of changing their color.

You can read more about it here:
https://www.w3schools.com/css/css_display_visibility.asp

Thank you for sending https://www.w3schools.com/css/css_display_visibility.asp.

I added this to Appearance > Theme Options > General > Custom CSS.

The box is gone on Chrome and Safari, but not Firefox. Can you confirm on your end?

https://dev.nataliebork.com/#jp-carousel-709

.jp-carousel-light .jp-carousel-image-meta {
display: none;
	background: #fff;
	border: 0px solid #fff;
	border-top-color: #fff;
	border-left-color: #fff;
	color: #fff;
}

div#carousel-reblog-box {
	background: #222;
	background: -moz-linear-gradient(bottom,#222,#333);
	background: -webkit-gradient(linear,left bottom,left top,from(#222),to(#333));
	padding: 3px 0 0;
	display: none;
	margin: 5px auto 0;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
	box-shadow: 0 0 20px rgba(0,0,0,0.9);
	height: 74px;
	width: 565px;
}

.jp-carousel-titleanddesc p:empty {
	display: none;
}

#jp-carousel-comment-form-submit-and-info-wrapper {
	display: none;
/*margin-bottom:15px;*/
	overflow: hidden;
	width: 100%;
}

#jp-carousel-comment-post-results {
	display: none;
	overflow: auto;
	width: 100%;
}

#jp-carousel-comments-closed {
	display: none;
	color: #999;
}

#jp-carousel-comments-loading {
	font: 444 15px/1.7 "Helvetica", sans-serif !important;
	display: none;
	color: #ff;
	text-align: left;
	margin-bottom: 0;
}

@media only screen and (max-width: 760px) {
	.jp-carousel-info {
		margin: none !important;
	}

	.jp-carousel-next-button, .jp-carousel-previous-button {
		display: none !important;
	}

	.jp-carousel-buttons {
		display: none !important;
	}

	.jp-carousel-image-meta {
		float: none !important;
		width: 0 !important;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.jp-carousel-close-hint {
		font-weight: 800 !important;
		font-size: 26px !important;
		position: fixed !important;
		top: -10px;
	}

	.jp-carousel-slide img {
		filter: alpha(opacity=100);
		opacity: 1;
	}

	.jp-carousel-wrap {
		background-color: #000;
	}

	.jp-carousel-fadeaway {
		display: none;
	}

	#jp-carousel-comment-form-container {
		display: none !important;
	}

	.jp-carousel-titleanddesc {
		padding-top: 0 !important;
		border: none !important;
	}

	.jp-carousel-titleanddesc-title {
		font-size: 1em !important;
	}

	.jp-carousel-left-column-wrapper {
		padding: 0;
		width: 100% !important;
	}

	.jp-carousel-photo-info {
		left: 0 !important;
		width: 100% !important;
	}
}

The box is gone in all browsers for me.

If you still experience issues, please start a new thread in the CSS forums:
https://www.ads-software.com/support/forum/themes-and-templates

As always, thank you for your help. The box is no longer visible in all the browsers.

It seems like a lot of code to include in Appearance > Theme Options > General > Custom CSS. Which one is actually fixing the problem? It would take me hours to remove and tell all of it.

Which one is actually fixing the problem? It would take me hours to remove and tell all of it.

Instead of removing the CSS you added, I would suggest using your browser inspector to find out what CSS affects the box. That’s the code you want to keep.

I reviewed it with CSS in Chrome: View > Developer > Developer Tools, but I do not see, or know where to see the code, that is working. Can you make a screen shot so show where I should see this?