회원가입 플러그인 Style

qpress 2020년 2월 15일 44

1. Ultimate Members

전세계적으로 가장 많이 사용되는 회원가입 플러그인입니다. 무료버전을 사용하더라도 필수적인 기능은 거의 다 충족이 되고, 설정 및 페이지들도 깔끔합니다.
버튼의 색깔과 입력폼 스타일만 수정해도 테마와 잘 어울리는데, 아래 CSS 코드를 ‘테마 디자인>사용자정의하가>추가CSS’ 부분에 삽입하시기 바랍니다.

.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
.um a.um-button,
.um a.um-button.um-disabled:hover,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:active {
    background: var(--main);
    color:var(--main-inverse);
}

.um .um-button.um-alt, .um input[type=submit].um-button.um-alt {
    background: #eeeeee;
    box-shadow: none;
}

.um .um-form input[type=text],
.um .um-form input[type=search],
.um .um-form input[type=tel],
.um .um-form input[type=number],
.um .um-form input[type=password],
.um .um-form textarea,
.um .upload-progress,
.select2-container
.select2-choice,
.select2-drop,
.select2-container-multi
.select2-choices,
.select2-drop-active,
.select2-drop.select2-drop-above {
    border: 1px solid var(--border-color) !important;
}

.um .um-form input[type=text]:focus,
.um .um-form input[type=search]:focus,
.um .um-form input[type=tel]:focus,
.um .um-form input[type=number]:focus,
.um .um-form input[type=password]:focus,
.um .um-form .um-datepicker.picker__input.picker__input--active,
.um .um-form .um-datepicker.picker__input.picker__input--target,
.um .um-form textarea:focus {
    outline: none!important;
    border-color:rgb(26, 140, 255)!important;
    box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.25)!important;
    z-index:99999999999!important;
}

.um input[type=submit].um-button:hover, .um a.um-button:hover {
    background-color: var(--main);
    box-shadow:1px 1px 50px 50px rgba(0,0,0,0.4) inset;
    color:#fff;
}

2. Wp members(wp-members)

가장 기본적인 워드포레스 회원가입 플러그인이라고 할 수 있습니다. 수많은 회원가입 플러그인들이 이 wp-member 플러그인을 Base로 만들어졌고, 국내향 회원가입 플러그인들은 더욱더 wp-members에 대한 의존도가 높습니다. 그래서 이러한 플러그인들은 wp-members와 함께 설치해야 작동하는 것들이 많습니다.

wp-members 역시 위의 Ultimate Member와 같은 방식을로 스타일을 수정해도 되지만, 설정에서 CSS파일을 지정할 수 있기 때문에, Q.PRESS 테마에 최적화 시킨 CSS 파일을 사용하는 것이 나을 듯 합니다.
아래 파일을 다운로드 한 후 압축을 푸신 후, CSS 파일을 서버의 적절한 곳에 업로드 하시기 바랍니다.

그리고 wp-members의 설정화면에서 업로드한 CSS 파일의 경로를 설정해 주시기 바랍니다.