How to get equal height boxes on the login page

[14Steve14]

Using 1.0.8.20 Phoenix on test site.
Done a search and found no results.

We have two boxes side by side on the login page. One is for returning customers and one is for new customers.

How do I get both buttons, the 'sign in' on one box, and the 'create account' in the other, aligned with each other. I have so far added the following to a <P> tag in the sign in box template file but there must be a better way.

With the padding added they almost line up but its about 1-2 mm wrong and looks funny.

Code: Select all

<p class=" pt-4"><small><?php echo MODULE_CONTENT_LOGIN_FORM_FORGOT_PASSWORD_TEXT; ?></small>
  <small><?= '<a href="' . $GLOBALS['Linker']->build('password_forgotten.php') . '">' . MODULE_CONTENT_LOGIN_FORM_FORGOT_PASSWORD_LINK_TEXT . '</a>' ; ?></small></p>

Here is a screenshot of the page without anything added to the <p> tag

login-boxes.png

Any help appreciated

[bonbec]

Hello,
in a template, I placed everything in "card", for example:

Sans titre 3.jpg

Code: Select all

  <div class="card">
	<div class="card-body">
    <p class="card-title alert alert-success" role="alert"><?= MODULE_CONTENT_LOGIN_TEXT_RETURNING_CUSTOMER ?></p>
    <?php
  echo new Form('login', $GLOBALS['Linker']->build('login.php', ['action' => 'process']), 'post');
  $GLOBALS['customer_data']->act_on('username', 'display_input');
  $GLOBALS['customer_data']->act_on('password', 'display_input');
?>
	</div>
	  <div class="card-footer">
  <p class="text-right"><?= new Button(IMAGE_BUTTON_LOGIN, 'fas fa-sign-in-alt', 'btn-success btn-block') ?></p>
  </form>  
  <p><?= new Button("Mot de passe oublié ? Cliquez ici", 'fas fa-unlock-alt', 'btn-warning btn-block', [], $GLOBALS['Linker']->build('password_forgotten.php')) ?></p>
  </div>
  </div>

[14Steve14]

@bonbec Thanks for the reply.

I take it you mean that you override the template files. Then add all the card stuff to each template module so things like sort order and widths still work, but as they are all now cards the boxes/cards now all align properly. Or am I misunderstanding

[bonbec]

Hello @14Steve14

This is the tree I use. This way, if the files are updated, the template is not affected.

templates - your_template_name - includes - pages - login.php
templates - your_template_name - includes - modules - content - login - all tpl_cm_* you need

[burt]

Override the template files as per;
https://phoenixcart.org/phoenixcartwiki ... a_Template
In other words, as Fred describes above.

Then add in a .user.css as explained here;
https://phoenixcart.org/phoenixcartwiki ... and_Colour

In that .css file add

Code: Select all

.equal-height {
  min-height: 140px;
}

And in your overridden login template files, add in a equal-height div something like;

div.jpg