Affiliate Area Login and Register Button Styling

—

by

Andrew

There is no styling on the Affiliate Area buttons or the rest of the page. Why did it not inherit from my theme?
My main issue are the buttons, as there are no hooks for them. It uses names, but not ID’s.

I have three classes that I use for a button in my Avada theme, which in this case would be class=”small green button”.

If I modify the submit button for /wp-content/plugins/affiliates-pro/lib/core/class-affiliates-registration.php, I can add a class, but this is not a good idea since it will be overwritten when there are updates.

Secondly, I cannot find the location for the login button, as the afore mentioned only handles the register button.

Shouldn’t there be a way to apply easily to all buttons in the Affiliate Area?

It would be nice if you could include skin styling in your plugin, or somehow let it inherit from the theme.

Thank you

Posted in
Tags , , , , , , , , ,

Comments

5 responses to “Affiliate Area Login and Register Button Styling”

  1. Andrew Avatar
    Andrew

    Thank you for your reply. As far as I am aware, getElementByName is only available on IE, no? I haven’t gotten it to work on Chrome, Safari, etc, but maybe I am doing something wrong.

    I have read that it is not proper to embed JQuery into a WordPress page, so I would need to run it site-wide, which I don’t want to do.

    Can you please help me with the code, and post a specific resolution to the way the buttons on your page are configured?

    Thank you so much.

    1. kento Avatar
      kento

      That function is not available in IE <= 9, see this test page and also DOM Core for a comparison of supporting browsers.

      Regarding this:

      “I have read that it is not proper to embed JQuery into a WordPress page, so I would need to run it site-wide, which I don’t want to do.”

      Whoever wrote that needs to learn more 😉 The opposite is true, a resource should only be loaded where it is required. Just like you don’t carry around a toolbox in real life unless you need it.

      The immediate solution for this is to include jQuery on that page and use the code indicated above 🙂

  2. Andrew Avatar
    Andrew

    Thank you for your reply and code. I don’t want to run JQuery on a WordPress page directly.
    Unfortunately I can’t grab the node by name easily. I thought maybe a javascript function could look for the name once it has found the input type submit, but I am not sure how to do that.
    Is there any other way to change the second button without hardcoding it in the php file?

    Thanks

    1. kento Avatar
      kento

      You can use Javascript to get it by name as well, see e.g. http://stackoverflow.com/questions/10306129/javascript-get-element-by-name

      Why not use jQuery for that though? It makes it so much simpler.

  3. kento Avatar
    kento

    Hi Andrew,

    Good questions, there are a couple of sensible solutions that I can think of.

    For the login button you could add the required classes via Javascript, the ID of the button is wp-submit:


    var submitButton = document.getElementById("wp-submit");
    submitButton.className = submitButton.className + " small green button";

    Assuming you’d be ok with using jQuery for that, you can use this to add the classes to both the login button and the sign-up button:


    $("#wp-sumit").addClass("small green button");
    $('[name="affiliates-registration-submit"]').addClass("small green button");

    And the other option would be to provide filters for the classes but the above would be an immediate solution for you.

Share