Need help removing grey box around text excerpt

Hi Crystal!

The grey slide excerpt box is styled in your theme’s CSS:

.slide-excerpt {
	background-color: #fff;
	filter: alpha(opacity=80);
	display: block;
	margin: 10px;
	opacity: 0.8;
	padding: 0;
	position: absolute;
	z-index: 8;
}

To remove the box background color, you would need to change that code to look like this:

.slide-excerpt {
	display: block;
	margin: 10px;
	padding: 0;
	position: absolute;
	z-index: 8;
}

To change the slider excerpt text font or color, you can add CSS such as this to your stylesheet:

.slide-excerpt h2 a {
	color: green;
	font-family: Georgia, serif;
	font-size: 22px;
	line-height: 30px;
	text-transform: none;
}

You would edit the color and other properties there to adjust the style of the font.

Hi Nick
Thanks for answering. This has been driving me crazy!

I looked into the CSS theme and I can’t seem to find this:
.slide-excerpt {
background-color: #fff;
filter: alpha(opacity=80);
display: block;
margin: 10px;
opacity: 0.8;
padding: 0;
position: absolute;
z-index: 8;
}

Instead I found this in my theme:

html > body .slide-excerpt-border {
background: none;
border: 0px none!important;
display:none;visibility:hidden
margin: 0 auto !important;
position: relative;
text-align: center;
z-index: 8;

}

#genesis-responsive-slider {
border: none !important;
padding: 0px !important;
}

.slide-excerpt-border {
border: 0;
display: inline;
float: left;
margin: 0;
padding: 0;
width: 100%;
}

Should I just add the code? Sorry this I am not very familiar with changing the code.

Thanks,
Crystal

I was able to change the slider excerpt. Thanks so much! It’s the first bit that I am still having issues with.

You’re welcome!

To remove the grey box behind the excerpt, you’ll need to make the first edit I described above. That involves finding and changing this code: https://d.pr/i/1lSbE

When you’re done, the code should look like this instead:

.slide-excerpt {
	display: block;
	margin: 10px;
	padding: 0;
	position: absolute;
	z-index: 8;
}

You guys are awesome! You saved me a lot of headache. I finally got it right. Just one additional question – how do I “bold” the text?

I assume it is in here somewhere?

.slide-excerpt h2 a {
color: green;
font-family: Georgia, serif;
font-size: 22px;
line-height: 30px;
text-transform: none;
}

Glad we could help!

To bold the text, you would use font-weight: bold;, like this:

.slide-excerpt h2 a {
	color: white;
	font-family: Georgia, serif;
	font-size: 30px;
	font-weight: bold;
	line-height: 30px;
	text-transform: none;
}

Thank you all! It worked but something happened along the course of it. Now my images have in the slider shrunk and I don’t know what to do to fix them.

Any idea what to do?

Your slider images seem to use the full width for me. Were you able to resolve this?

Hi Nick,

I think it’s a Christmas miracle! It was NOT working last night when I went to bed. Not sure what happened but I see my changes (removing the white/grey box and changing the text) have reverted back.

Thanks for your help!

Crystal

Okay I think I finally have it figured out.

Now one last thing. I want the color of the text to be white. This is what I have in my theme css style. Am I on the right track for changing the color?

slide-excerpt h2 a {
? ? ? ? color: white;
? ? ? ? font-family: Georgia, serif;
? ? ? ? font-size: 30px;
? ? ? ? font-weight: bold;
? ? ? ? line-height: 30px;
? ? ? ? text-transform: none;
}

html > body .slide-excerpt-border {
background: none;
border: 0px none!important;
margin: 0 auto !important;
position: relative;
text-align: center;
z-index: 8;

}