Images in the registration module

[pero]

If you want to display an image in the registration module, upload these images password.png and username.png to your / images folder.
Then find the following template login_main
Roughly on the line
23- <span class="td">
<input type="text" value="{vb:var formData.username}" class="js-login-username b-form-input__input b-form-input__input--full" placeholder="{vb:hrase {vb:var loginPhrase}}" />
</span>
Add this before <img src="images/username.png" alt="Username">

<span class="td">
<img src="images/username.png" alt="Username"> <input type="text" value="{vb:var formData.username}" class="js-login-username b-form-input__input b-form-input__input--full" placeholder="{vbhrase {vb:var loginPhrase}}" />
</span>

Roughly on the line
28-<span class="td">
<input type="password" autocomplete="off" name="password" class="js-login-password b-form-input__input b-form-input__input--full" placeholder="{vb:hrase password}" />
</span>
Add this before <img src="images/password.png" alt="Password">

<span class="td">
<img src="images/password.png" alt="Password"><input type="password" autocomplete="off" name="password" class="js-login-password b-form-input__input b-form-input__input--full" placeholder="{vbhrase password}" />

</span>

[glennrocksvb]

Thanks for posting the code, pero.

There's an alternative solution to that without editing the login_main template by simply adding this custom CSS code in css_additional template.

.login-fieldset .tr:first-child .td:before {
   content: '';
   background: url('https://s20.directupload.net/images/220729/3y9vnt9o.png');
   display: inline-block;
   width: 16px;
   height: 16px;
}

.login-fieldset .tr:nth-child(2) .td:before {
   content: '';
   background: url('https://s20.directupload.net/images/220729/4cwo45fu.png');
   display: inline-block;
   width: 16px;
   height: 16px;
}

The result will look like this which is exactly the same for the first post:



An improvement to this solution is to move the icons inside the input fields to prevent extra lines and keep the login form compact as the original.

.login-fieldset .td {
    position: relative
}
.login-fieldset .tr:first-child .td:before {
   content: '';
   background: url('https://s20.directupload.net/images/220729/3y9vnt9o.png');
   display: inline-block;
   width: 16px;
   height: 16px;
   position: absolute;
   top: 4px;
   left: 5px;
}

.login-fieldset .tr:nth-child(2) .td:before {
   content: '';
   background: url('https://s20.directupload.net/images/220729/4cwo45fu.png');
   display: inline-block;
   width: 16px;
   height: 16px;
   position: absolute;
   top: 4px;
   left: 5px;
}

.login-fieldset .td input {
   padding-left: 24px;
}