Adding Hover Effect to SCLogin and Registration page Icons

webdevtim
Offline

Active Subscriptions:

None

9 years 3 months ago - 9 years 3 months ago #49949 by webdevtim

Adding Hover Effect to SCLogin and Registration page Icons was created by webdevtim

How do I add :hover, :active :focus effects to SCLogin and Registration modules.?

I created a second and third set of icons and I would like to name them icon_hover.png, icon_active.png and icon_label_hover.png, icon_label_active.png and add them to the /media/sourcecoast/images/provider/facebook and all the other providers so that the resultant html is:

<div class="social-login facebook jfbcLogin pull-left">
  <a id="sc_fblogin" onclick="jfbc.login.provider('facebook');" href="javascript:void(0)">
    <img onmouseout="this.src='/media/sourcecoast/images/provider/facebook/icon_active.png'" onmouseover="this.src='/media/sourcecoast/images/provider/facebook/icon_hover.png'" src="/media/sourcecoast/images/provider/facebook/icon.png" title="Log in with Facebook" alt="Log in with Facebook" />
  </a>
</div>

I also want to add jQuery transition effects to boot. Or can I do this with CSS

Last edit: 9 years 3 months ago by webdevtim.

The topic has been locked.

alzander
Offline

Support Specialist

9 years 3 months ago #49959 by alzander

Replied by alzander on topic Adding Hover Effect to SCLogin and Registration page Icons

To do that, you'd want to edit our /component/com_jfbconnect/libraries/provider.php file. Around line 241, you'll see:

return '<div class="social-login ' . $this->systemName . ' ' . $loginClass . ' pull-' . $alignment . '">
        <a id="' . $loginID . '" href="javascript:void(0)" onclick="jfbc.login.provider(\'' . $this->systemName . '\');">
            <img src="' . JURI::root(true) . '/media/sourcecoast/images/provider/' . $this->systemName . '/' . $image . '" alt="' . $buttonAltTitle . '" title="' . $buttonAltTitle . '"/></a>
            </div>';

You can add your extra code there and force the images for hover and whatnot.

You may run into some issues there because the $image value has the extension (.jpg, .png) included and that code works any time a login button is displayed. If you want a custom set of images for different sections of your site, it could be difficult (but possible) to do right. If you just want the same images everywhere with hover effects, hard-coding it there shouldn't be a problem.

I'm not sure what jQuery transition effects you want, but that's the code for rendering the buttons. I think that's a good starting point for anything you're looking to do.

Good luck,
Alex

The topic has been locked.

Start
Prev
1
Next
End

SourceCoast Login

Adding Hover Effect to SCLogin and Registration page Icons