Theme the plugin?

So, in the plugins folder there is a style sheet.

wp-content>plugins>age-verify>assets>styles.css

I copied the styles and put them in my themes style sheet.

Then, in the settings for the plugin in the wp backend>settings>age-verify, you just uncheck the “Use built-in CSS on the front-end (recommended)” box.

From what I can tell, the whole thing is like a modal div covering the page, so you can’t make the overlay wrapper thing transparent or you will just see the page beneath. You can however make the overlay content box lighter, like you said, by just adding, background-color: rgba(0,0,0,.2); or whatever to the style sheet. You can change most of the stuff, but I would stay away from the positioning if you aren’t familiar with how the whole thing works.

I was hoping to use the background image that I’m inserting with backstretch.js, but it doesn’t look like that’s in the cards for me. At least there is plenty of ways to customize with the css though. NOTE: the @media query at the bottom –

/* AGE VERIFY STYLES (as of Feb 2013 - totally subject to change on future updates...) */

#av-overlay-wrap {
	position: fixed;
	height: 100%;
	width: 100%;
	background: #000;
	z-index: 10000;
	display: block;
	top: 0;
	left: 0;
}

#av-overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #ccc;
	z-index: 10001;
	padding: 30px 40px 34px;
	-webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	   -moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

#av-overlay h1 {
	font-family: "drunk-cowboy",sans-serif;
	font-size: 1.4em;
	line-height: 1.2em;
	margin-bottom: 20px;
}

#av-overlay p {

	/*color: red;*/
	font-size: 1em;
	margin-bottom: 14px;
}

#av-overlay .submit {
	margin-bottom: 0;
}

#av-overlay input[type=text] {
	width: 40px;
	outline: none;
}

#av-overlay .error {
	padding: 12px;
	background-color: #ffebe8;
	border: 1px solid #c00;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
}

/* Minimum width of 400 pixels. */
@media screen and (min-width: 400px) {

	#av-overlay {
		position: relative;
		top: auto;
		left: auto;
		width: 380px;
		height: auto;
		margin: 100px auto 0 auto;
	}

}