WordPress.org

Ready to get started?Download WordPress

Forums

Age Verify
Theme the plugin? (3 posts)

  1. sheriffderek
    Member
    Posted 1 year ago #

    Are there any docs for customizing the theme of this plugin? I would like to control the background and fonts etc.

    http://wordpress.org/extend/plugins/age-verify/

  2. cheezpuff1
    Member
    Posted 1 year ago #

    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.

  3. sheriffderek
    Member
    Posted 1 year ago #

    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;
    	}
    
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.