osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 My Account Login Page Customization

Click on the My Account link goes to the Login page. There are two areas that you may wish to customize the Login page.

- The Header looks a bit simple. You may wish to customize it so that the design is consistent with other pages.

- The contents are too close to the left side. This is better to have some spacing.

osc login page customization

Okay! Let’s see try to customize these two areas.

Files required to customize:

catalog/login.php
catalog/stylesheet.css

1. Open catalog/login.php file with a text editor.

2. Navigate to line 88, and find this line of codes.

<h1><?php echo HEADING_TITLE; ?></h1>

This line of code generates the Header.


You can customize the Header easily in many ways, for example:

i) Use a new Div Layer that specially for the Login Header:

<div id="loginHeader"><?php echo HEADING_TITLE; ?></div>

ii) Use Div Layer that are using for other Header, for example, New Products Header:

<div id="newProductsHeader"><?php echo HEADING_TITLE; ?></div>

iii) Use some styling for the <h1> tag:

<h1 style="............"><?php echo HEADING_TITLE; ?></h1>

3. Let’s try to use the third method to customize the Header. Change the color of Header to blue:

<h1 style="color:#21588E;"><?php echo HEADING_TITLE; ?></h1>

4. Refresh browser to see the results.

osc login page customization

You can also customize the styles of <h1> tag in stylesheet. This way, all sub-pages header with <h1> tag will be affected and have the same results.

Next, give some spacing to the left side of the contents.

Before customizing the contents, this is better to study the code structure of login.php file first.

Navigate down to line 96 - 105 of login.php file.

<div class="contentContainer" style="width: 45%; float: left;">
<h2><?php echo HEADING_NEW_CUSTOMER; ?></h2>

<div class="contentText">
<p><?php echo TEXT_NEW_CUSTOMER; ?></p>
<p><?php echo TEXT_NEW_CUSTOMER_INTRODUCTION; ?></p>

<p align="right"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL')); ?></p>
</div>
</div>


This is the left Div Layer (with class contentContainer) that contain the New Customer contents.

Navigate down to line 107 - 132 of login.php file.

<div class="contentContainer" style="width: 45%; float: left; border-left: 1px dashed #ccc; padding-left: 3%; margin-left: 3%;">
<h2><?php echo HEADING_RETURNING_CUSTOMER; ?></h2>

<div class="contentText">
<p><?php echo TEXT_RETURNING_CUSTOMER; ?></p>

<?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL'), 'post', '', true); ?>

<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr>
<td class="fieldKey"><?php echo ENTRY_EMAIL_ADDRESS; ?></td>
<td class="fieldValue"><?php echo tep_draw_input_field('email_address'); ?></td>
</tr>
<tr>
<td class="fieldKey"><?php echo ENTRY_PASSWORD; ?></td>
<td class="fieldValue"><?php echo tep_draw_password_field('password'); ?></td>
</tr>
</table>

<p><?php echo '<a href="' . tep_href_link(FILENAME_PASSWORD_FORGOTTEN, '', 'SSL') . '">' . TEXT_PASSWORD_FORGOTTEN . '</a>'; ?></p>

<p align="right"><?php echo tep_draw_button(IMAGE_BUTTON_LOGIN, 'key', null, 'primary'); ?></p>

</form>
</div>
</div>


This is the Right Div Layer (also with class contentContainer) that contain the Returning Customer contents.

As you should noticed that both Left and Right Div layers are using the same class (contentContainer). Therefore you can edit the styles of class contentContainer in stylesheet.

5. Open catalog/stylesheet.css with a text editor.

6. Navigate to about line 71 – 75. Find the following codes:

.contentContainer {
padding-bottom: 10px;
}

7. Add 10 pixels padding to the left.

.contentContainer {
padding-bottom: 10px;
padding-left:10px;
}

8. Refresh browser to see the changes.

osc login page customization

 

Many pages of osCommerce store are sharing the same Div and CSS classes. Therefore changing the styles of contentContainer class will also change the styles of other pages. Always check if other pages have also be affected and changed.

Always create a new class (e.g. loginContentContainer) if you do not want to make changes of other pages.

This is the end of osCommerce My Acount Login page customization.