Overview

This document explains the relationship between the SCSS styles in login_modal.scss and the PHP structure in login_register_modal.php. It will help you understand how to properly implement the login modal in your WordPress theme.

Main Wrapper

The main wrapper for the login modal is defined in the PHP file as:

<div id="modal_login_wrapper">

</div>

This corresponds to the SCSS selector:

#modal_login_wrapper {
// Styles for the main wrapper
}

Modal Background

The semi-transparent background is created with this PHP:

<div class="modal_login_back"></div>

And styled with this SCSS:

.modal_login_back {
// Styles for the modal background
}

Modal Container

The main container for the modal content is defined in PHP as:

<div class="modal_login_container ">

</div>

The corresponding SCSS:

.modal_login_container {
// Styles for the modal container

&.wpestare_recaptcha_extra_class {
// Additional styles when reCAPTCHA is present
}
}

Login/Register Image Section

The left side of the modal with the background image is created with:

<div class="login-register-modal-image" style="background-image: url('<?php echo esc_url($background_modal);?>')">
<div class="featured_gradient"></div>
<div class="login-register-modal-image_text"><?php echo esc_html(wpresidence_get_option('wp_estate_login_modal_message',''));?></div>
</div>

Styled with:

.login-register-modal-image {
// Styles for the image section
}

.login-register-modal-image_text {
// Styles for the text overlay
}

Form Wrapper

The right side of the modal containing the forms is structured as:

<div class="login-register-modal-form-wrapper">

</div>

With corresponding SCSS:

.login-register-modal-form-wrapper {
// Styles for the form wrapper
}

Close Button

The close button for the modal is a simple div:

<div id="login-modal_close"></div>

Styled with:

#login-modal_close {
// Styles for the close button
}

Form Sections

Each form section (login, register, forgot password) follows this structure:

<div class="login_form" id="login-div_topbar">
<div id="login-div-title-topbar"><?php esc_html_e('Sign into your account','wpresidence');?></div>

</div>

The SCSS for the titles:

#forgot-div-title-topbar,
#register-div-title-topbar,
#login-div-title-topbar {
// Styles for form section titles
}

And for the form containers:

#forgot-pass-div,
#register-div-topbar,
#login-div_topbar {
// Styles for form containers
}

Submit Buttons

Submit buttons in the forms are styled uniformly:

#wp-submit-register_topbar,
#wp-login-but-topbar,
#wp-forgot-but-topbar {
// Styles for submit buttons
}

Terms and Conditions Checkbox

The terms and conditions checkbox in the register form:

<input type="checkbox" name="terms" id="user_terms_register_topbar" />
<label id="user_terms_register_topbar_label" for="user_terms_register_topbar">
<?php esc_html_e('I agree with ','wpresidence');?>
<a href="<?php print wpestate_get_template_link('terms_conditions.php');?>" target="_blank" id="user_terms_register_topbar_link">
<?php esc_html_e('terms & conditions','wpresidence');?>
</a>
</label>

Styled with:

#user_terms_register_topbar {
// Styles for the checkbox
}

#user_terms_register_topbar_label {
// Styles for the label
}

Modal Control Links

The links at the bottom of the modal for switching between forms:

<div class="login_modal_control">
<a href="#" id="widget_register_topbar"><?php esc_html_e('Register here!','wpresidence');?></a>
<a href="#" id="forgot_pass_topbar"><?php esc_html_e('Forgot password?','wpresidence');?></a>
<a href="#" id="widget_login_topbar"><?php esc_html_e('Back to login','wpresidence');?></a>
<a href="#" id="return_login_topbar"><?php esc_html_e('Back to login','wpresidence');?></a>
<input type="hidden" name="loginpop" id="loginpop" value="0">
</div>

Styled with:

.login_modal_control {
// Styles for the control links container
}

Conclusion

By matching the PHP structure with the SCSS selectors, you can ensure that your login modal is styled correctly. Remember to enqueue your compiled CSS file in your WordPress theme for the styles to take effect.