Support » Plugin: Age Verify » Theme the plugin?

Viewing 2 replies - 1 through 2 (of 2 total)
  • cheezpuff1

    (@cheezpuff1)

    Chase,

    Along with this might there also, be a way to use a static image with a “yes” or a no” mapped as the authentication method? With that, is there the an ability to have the grey background display in 40% opacity?
    Both of these would be killer helps in the branding, identity, and customer experience categories.

    Thanks,

    Doug.

    sheriffderek

    (@sheriffderek)

    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;
    	}
    
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Theme the plugin?’ is closed to new replies.