Notifications
Clear all

wpForo 1.x.x [Solved] How to change class of link in button??

14 Posts
4 Users
1 Likes
564 Views
civilenggnotes
Posts: 30
Topic starter
(@civilenggnotes)
Eminent Member
Joined: 2 years ago

Hello,

I am using a pop up login plugin where i need to add class in link to trigger the pop up, like <button class="lrm-login lrm-hide-if-logged-in" > Login </button> to trigger pop up login when clicked on login text.

Now, i can easily add the widget, but couldn't find any way to add that class to the buttons of the widgets. 

Please guide me regarding this..

Topic Tags
13 Replies
Sofy
Posts: 4057
 Sofy
Admin
(@sofy)
Support Team
Joined: 5 years ago

Hi @civilenggnotes,

Please read Alvina's answer here: https://wpforo.com/community/postid/45698/

3 Replies
civilenggnotes
(@civilenggnotes)
Joined: 2 years ago

Eminent Member
Posts: 30

hi @sofy

i just followed the steps in the post. it is working for "Please login or register to reply to this topic." message when trying to reply in forum post. but it is not for the "Please login or register" message when clicking on "add comment" button or the login/register button on the sidebar widget.

civilenggnotes
(@civilenggnotes)
Joined: 2 years ago

Eminent Member
Posts: 30

@sofy

I was trying inspection tool from google chrome. and I guess I found some solution, but don't know to go apply it. when I inspect the login button, I get the following code.

<a href="https://www.civilenggnotes.in/community/civil-engineering-softwares/system-requirements-for-autocad-2021/?foro=signin" class="wpf-button"><i class="fas fa-sign-in-alt"></i> Login</a>

It is to be replaced by 

<a href="#Login" class="wpf-button lrm-login lrm-hide-if-logged-in"><i class="fas fa-sign-in-alt"></i> Login</a>

The same thing is to be applied to register button with a little modification. 

civilenggnotes
(@civilenggnotes)
Joined: 2 years ago

Eminent Member
Posts: 30

Hi @sofy

Please have a look in this matter. I am waiting for a long time. I have changed everywhere to pop up the login model, except this one. I could not find any solution to change the class of the button of the sidebar widget. 

Johns0265
Posts: 1
(@johns0265)
New Member
Joined: 2 years ago

I would also suggest to use the unprefixed and standard value in your code – some browsers already have them, as Firefox.

Then, you can simple toggle the class when a button is clicked. Depends if you want remove the class when the same button is clicked again, you have to use addClass or toggleClass:

1 Reply
civilenggnotes
(@civilenggnotes)
Joined: 2 years ago

Eminent Member
Posts: 30

Hi @johns0265

Thanks for your suggestions. But i am totally a non-techy. Therefore, i could not understand completely what did you said..

civilenggnotes
Posts: 30
Topic starter
(@civilenggnotes)
Eminent Member
Joined: 2 years ago

hello, any expert here to help??

5 Replies
Sofy
 Sofy
Admin
(@sofy)
Joined: 5 years ago

Support Team
Posts: 4057

@civilenggnotes,

Use the following js code:

jQuery(document).ready(function($){$('.wpf-prof-footer > .wpf-prof-loginout a:first-of-type').attr('href', '#Login').addClass('lrm-login lrm-hide-if-logged-in');});

Use the second way explained in this article: https://www.collectiveray.com/add-javascript-to-wordpress

civilenggnotes
(@civilenggnotes)
Joined: 2 years ago

Eminent Member
Posts: 30

Hi @sofy

I tried to use the code in the header, but it is not working. Where to add this??

And will it work for login button only, or for registration button too??

civilenggnotes
(@civilenggnotes)
Joined: 2 years ago

Eminent Member
Posts: 30

hi @sofy

the login button is working fine, then tried the same for the register button. what should be JQuery for register??

and will that code be in the same js file?? actually I am using the 1st method described in the link you provide,.

Sofy
 Sofy
Admin
(@sofy)
Joined: 5 years ago

Support Team
Posts: 4057

@civilenggnotes,

try this one: 

jQuery(document).ready(function($){$('.wpf-prof-footer > .wpf-prof-loginout a:last-of-type').attr('href', '#Register').addClass('lrm-register lrm-hide-if-logged-in');});

and will that code be in the same js file?? actually I am using the 1st method described in the link you provide.

yes, you can add it in the same file. 

civilenggnotes
(@civilenggnotes)
Joined: 2 years ago

Eminent Member
Posts: 30

@sofy

it works.. thanks a lot.. 

Delores0187
Posts: 1
(@delores0187)
New Member
Joined: 2 years ago

Here I'll show you with a simple example on how to dynamically add or remove CSS class of link tags using jQuery methods.

 

 

 

Nox App Player

Share: