Modify Login and Register buttons in eMember

[kmk293]

Hi there! I was wondering where the button images for the blue Login and Register buttons were located so I can modify them to match my site. I didn’t see them in the eMember images folder or any of the other ones. Thanks so much!

[admin]

You can modify them from the CSS file. Simply customize the following CSS class in the “wp-eMember/css/eMember_style.css” file or add your own CSS in the custom css file to override it:

.eMember_button

The following is another useful post on this topic:

https://support.tipsandtricks-hq.com/forums/topic/registration-form-buttons-css-customization

[kmk293]

Awesome, thanks so much!

On a related note, I have the login shortcode in a text widget on my sidebar. How do I center the Login button, Forgot Password Link, and Register Link with the login fields? Right now they are left aligned. I tried modifying the same CSS code but was unsuccessful.

Much appreciated!

[admin]

You will need to modify the PHP files for that as we don’t have a HTML tag wrapped around those links so it will be hard to change their position.

[Raymond Nelson]

Hi,

I want to replace the appearance of the Blue Login and Registration buttons with custom images that I have created in Illustrator.

I found the Login button instance on line 372 in the source code from the file eMember_auth_utils.php. I replaced Line 372 with:

<input name=”doLogin” type=”image” id=”doLogin” src=”http://bestfriendtraining.com/wp-content/uploads/2011/12/Login-Button2.png&#8221; value=”<?php echo EMEMBER_LOGIN;?>” />

I got the results I wanted.

My problem now is that cannot locate the instance of for the Blue Registration Button from the registration page.

Could you please tell me the file name and line number where I can find the instance of the blue registration button so that I may replace my uploaded customized image.

Thank-you

[Raymond Nelson]

Using Google Chrome deleloper tools I was able to locate the line of code that i want to change.

I want to change this

<input class=”eMember_button submit” name=”eMember_Register” type=”submit” id=”eMember_Register” value=”Register”>

into this

<input type=”image” src=”http://bestfriendtraining.com/wp-content/uploads/2011/12/Register-Button.png”&gt;

After I made this change the preview gave me the results the funtion and appearance that I wanted.

Unfortunately, Google Chrome developer tools do not tell me where the code is located.

I still need the file name and line number where I can find the instance.

Thank you

[Peter]

Hi,

I think this is what you might be looking for…….

Look in the eMember_registration_utils.php.

In this file you will see a line which goes something like:

<td><input class="eMember_button submit" name="eMember_Register" type="submit" id="eMember_Register" value="<?php echo EMEMBER_REGISTRATION;?>" /></td>

[Raymond Nelson]

Thank you

That was exactly the line of code I neededed. The change worked exactly right.

Now I am having a diffuculty locating the file and the line of code that control the “sign in” button on the dropdown menu attached to the Login link if you try to see the free content if you are not logged in

Please Login to view this Content.(Not a member? Join Today!)

Could you please tell me where I can locate the file and line where I can again replace the generic button with stylized button I made in Illustrator.

[Peter]

Hi,

The piece of code for the “Sign in” button is located in the fancy_login.php file.

See the line which goes like:

<p class="rememberme">

<input type="submit" tabindex="7" value="Sign in" class="emember_button" name="doLogin" id="doLogin">

[Raymond Nelson]

Thank you again

That was exactly the line of code I neededed. The change worked exactly right again.

[Author]

Posts