/** * WP-Members Styles CSS * * CSS for the WP-Members plugin using Twenty Twelve Theme * * This file is part of the WP-Members plugin by Chad Butler * You can find out more about this plugin at http://rocketgeek.com * Copyright (c) 2006-2014 Chad Butler * WP-Members(tm) is a trademark of butlerblog.com * * @package WordPress * @subpackage WP-Members * @author Chad Butler * @copyright 2006-2014 */ /* This stylesheet is designed to integrate WP-Members with the Twenty Twelve theme. There are quite a few examples in here of what you can do to style the forms. You can build off of this or start from scratch and set your own custom css for the plugin (set the location in the admin panel). See http://rocketgeek.com/tips-and-tricks/setting-up-a-custom-wp-members-stylesheet/ for information on how to set up the plugin with a custom stylesheet. For information how to load custom stylesheets with wp_enqueue_style, see http://rocketgeek.com/tips-and-tricks/load-a-custom-stylesheet/ */ /* Error and Dialog Messages */ #wpmem_msg, .wpmem_msg { margin-left:-6px; width: 100%; background: #F9F9F9; border:1px solid lightGrey; border-radius: 3px; font-size: 14px; font-weight: bold; } .wpmem_msg{ padding: 20px 0 0 0; } #wpmem_msg{ padding: 0 0 20px 0; } #wpmem_msg h2, .wpmem_msg h2 { font-size: 24px; color: #373737; line-height: 30px; } /* Sidebar Login Widget */ #wp-members { width: 100%; margin-bottom: 20px; } #wp-members p { font-size: 13px; font-size: 0.928571429rem; line-height: 1.846153846; } #wp-members fieldset { margin-top: 15px; } #wp-members label { font-weight: normal; color: #777; } #wp-members input { padding: 6px; padding: 0.428571429rem; font-family: inherit; border: 1px solid #ccc; border-radius: 3px; } #wp-members input[type="text"], #wp-members input[type="password"]{ margin: 0 0 4px 0; width: 85%; } #wp-members .button_div { margin-top:4px; } #wp-members .buttons { height: 30px; padding: 6px 10px; padding: 0.428571429rem 0.714285714rem; font-size: 11px; font-size: 0.785714286rem; line-height: 1.428571429; } #wp-members .buttons:hover{ color: #5e5e5e; } #wp-members .buttons:active { color: #777; } #wp-members .err { width:85%; padding: 5px; background-color:#F9F9F9; font-family: inherit; border: 1px solid #ccc; border-radius: 3px; } /* Login Form and Registration Form */ #wpmem_reg, #wpmem_login { margin-left:-26px; padding-top:30px; } #wpmem_reg fieldset, #wpmem_login fieldset { padding:10px 0 10px 28px; } #wpmem_reg legend, #wpmem_login legend { font-size: 20px; font-size: 1.428571429rem; line-height: 1.2; font-weight: normal; } #wpmem_reg label.text, #wpmem_reg label.checkbox, #wpmem_reg label.textarea , #wpmem_reg label.select, #wpmem_login label { height: 26px; width:30%; float:left; display: block; } #wpmem_reg label.text, #wpmem_reg label.checkbox, #wpmem_login label { padding: 16px 0; } #wpmem_reg label.textarea { height: 200px; padding: 10px 0; } #wpmem_reg label.select { padding: 18px 0; } #wpmem_reg .form, #wpmem_login .form { margin:0; padding:0; } #wpmem_reg .clear, #wpmem_login .clear { clear:both; } #wpmem_reg .holder, #wpmem_login .holder { background-color:#fff; } #wpmem_reg .div_text, #wpmem_reg .div_textarea, #wpmem_reg .div_select, #wpmem_login .div_text, #wpmem_reg .div_checkbox { width:68%; float:right; padding: 6px 0; } #wpmem_reg .div_checkbox { padding: 17px 0; } #wpmem_reg .dropdown, #wpmem_reg .textbox, #wpmem_login .textbox, #wpmem_reg .username, #wpmem_login .username, #wpmem_reg .password, #wpmem_login .password { height: 24px; } #wpmem_reg .div_textarea textarea, #wpmem_reg .textbox, #wpmem_login .textbox, #wpmem_reg .username, #wpmem_login .username, #wpmem_reg .password, #wpmem_login .password { display: block; width:95%; padding: 10px; font: inherit; } #wpmem_reg .dropdown { height: 50px; border: 1px solid #ccc; border-radius: 3px; color: inherit; padding: 10px; font: inherit; width:100%; } #wpmem_reg .textbox:focus, #wpmem_reg .textbox:hover, #wpmem_login .textbox:focus, #wpmem_login .textbox:hover, #wpmem_reg .username:focus, #wpmem_reg .username:hover, #wpmem_login .username:focus, #wpmem_login .username:hover, #wpmem_reg .password:focus, #wpmem_reg .password:hover, #wpmem_login .password:focus, #wpmem_login .password:hover { background-color:inherit; } #wpmem_reg textarea { height:185px; } #wpmem_reg .req { color: #bd3500; font-size: 22px; line-height: 50%; } #wpmem_reg .req-text { float:left; margin: 20px 0px 0px 5px; } #wpmem_reg .noinput { margin: 10px 0 12px 10px; } #wpmem_reg .captcha { margin: 5px 0px; } #wpmem_reg .captcha table{ line-height: 0px; } /* Buttons */ #wpmem_reg .button_div, #wpmem_login .button_div { width:100%; float:right; text-align:right; height:35px; padding: 6px 0; } #wpmem_reg .buttons, #wpmem_login .buttons { padding: 6px 10px; padding: 0.428571429rem 0.714285714rem; font-size: 11px; font-size: 0.785714286rem; line-height: 1.428571429; font-weight: normal; color: #7c7c7c; background-color: #e6e6e6; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: linear-gradient(top, #f4f4f4, #e6e6e6); border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); } #wpmem_reg .buttons:hover, #wpmem_login .buttons:hover { color: #5e5e5e; background-color: #ebebeb; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb); background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb); background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb); background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb); background-image: linear-gradient(top, #f9f9f9, #ebebeb); } #wpmem_reg .buttons:active, #wpmem_login .buttons:active { color: #777; background-color: #e1e1e1; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1); background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1); background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1); background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1); background-image: linear-gradient(top, #ebebeb, #e1e1e1); box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4; border: none; } /** for smaller screens */ @media screen and (max-width: 720px) { #wpmem_reg label.text, #wpmem_reg label.checkbox, #wpmem_reg label.textarea , #wpmem_reg label.select, #wpmem_login label, #wpmem_reg .div_text, #wpmem_reg .div_textarea, #wpmem_reg .div_select, #wpmem_login .div_text, #wpmem_reg .div_checkbox, #wpmem_reg .button_div, #wpmem_login .button_div { float: none; } #wpmem_reg label.text, #wpmem_reg label.checkbox, #wpmem_reg label.textarea , #wpmem_reg label.select, #wpmem_login label { width: 90%; padding: 5px 0 0 0; } #wpmem_reg label.textarea { height: 26px; } #wpmem_reg .div_text, #wpmem_reg .div_textarea, #wpmem_reg .div_select, #wpmem_login .div_text, #wpmem_reg .div_checkbox { width: 98%; } }