Quantcast
Channel: WordPress.org Forums » All Topics
Viewing all articles
Browse latest Browse all 59525

Steps to Customize the CSS

$
0
0

Replies: 0

I was practicing some CSS and thought this might help users of this plugin, if they want to config the text boxes, fields, links, margins, hovers, etc…

This is the end result of the CSS on my site. I`m not a programmer but hopefully it saves some people some time.

If you want to use it simply copy/paste into your themes Child Themes Additional CSS area. (save and purge cache). I left out some elements like font-family, z-index and others because I didn`t need to change them.

If I`ve made any errors, I apologize. Please let me know so we all can learn.

If you didn`t know…anything between /*comments*/ are notes to what that CSS affects.

/* START EDIT LOGIN REGISTRATION POPUP */

/* all field labels and Remember Me */
.xoo-aff-group label {
font-weight: 600;
margin-bottom: 5px;
}

/* forgot password link */
a.xoo-el-lostpw-tgr {
font-weight: 600;
margin: 0 0 5px 0;
}

/*close X */
span.xoo-el-close {
font-size: 23px;
position: absolute;
right: -11px;
top: -11px;
background-color: white;
border-radius: 50%;
font-weight: 400;
cursor: pointer;
border: 4px solid #fff;
}

/*close X hover */
span.xoo-el-close:hover {
color: #e63030;
}

/* Login and Sign up tabs */
/* Font */
.xoo-el-form-container ul.xoo-el-tabs li.xoo-el-active {
font-weight: 500;
}
/* active tab */
ul.xoo-el-tabs li.xoo-el-active {
background-color: #d72929;
color: #fff;
}
/* tab container */
.xoo-el-form-container ul.xoo-el-tabs li {
padding: 10px 20px;
text-align: center;
margin: 0;
}

/* name Username input field */
.xoo-aff-group input[type=”text”] {
height: 30px;
padding: 6px 12px;
}
/* email field */
.xoo-aff-group input[type=”email”]{
margin-bottom: 0;
height: 30px;
padding: 6px 12px;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 7px!important;
}

/* password input field */
.xoo-aff-group input[type=”password”] {
height: 30px;
padding: 6px 12px;
}

/* bottom margin */
.xoo-aff-group {
margin-bottom: 10px;
}

/* button text */
.woocommerce button.button {
color: #ffffff;
border-color: #020202;
background-color: #020202;
}

/* button size shape etc… */
.button.xoo-el-action-btn {
text-transform: none!important;
background-color: #333;
margin-bottom: 20px;
border-radius: 7px !important;
}

/* button hover */
.button.xoo-el-action-btn:hover {
background-color: #000;
color: #fff;
border-color: #d72929;
text-transform: none!important;
}

/* all left side icons */
.xoo-aff-input-group .xoo-aff-input-icon {
padding: 6px 0;
font-size: 14px;
color: #555;
background-color: #eee;
border: 1px solid #ccc;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-radius: 4px!important;
border-top-right-radius: 4px!important;
border-bottom-right-radius: 4px!important;
border-right: 80px!important;
border-bottom-right-radius: 0!important;
border-top-right-radius: 0!important;
Width: 100%;

}
/* END EDIT LOGIN REGISTRATION POPUP */


Viewing all articles
Browse latest Browse all 59525

Trending Articles