Customize Login Button

JFBConnect allows you to customize the social network login buttons. By default, JFBConnect provides an icon button for each social network and a bigger button with the icon and social network name. However, sometimes these don't fit in well with the theme of your site and it's now easier to replace these files. By taking advantage of this mechanism, any changes made to your login buttons will persist through upgrade of JFBConnect installations.

Directory Structure for Social Network Login ButtonsThe images are kept in /media/sourcecoast/images/provider. There are many folders in that directory, one for each provider that JFBConnect supports - for instance, amazon, facebook, github, google, instagram, linkedin, meetup, twitter, vk, windowslive. In each of these folders are two image files, icon.png and icon_label.png. These are the two buttons mentioned above, with the simple icon buttons with the Social Media provider logo and the longer button with the Social Media provider logo and the name of the provider.

If you want to install your own set of icons then 1) you need to create icons with the same dimensions as the JFBConnect default icons and 2) you have to give them a different name, like mysite_icon.png and mysite_icon_label.png. Please note, the name of each of the icon image files for each of the providers has to be the same. Just use the same directory structure on your local computer as JFBConnect uses in /media/sourcecoast/provider to keep them from getting mixed up. You have to do this for each of the Social Media providers that you want custom icons for.

Additionally, once you add your new custom Social Media files as described above, you will have to make a couple of changes in your JFBConnect configuration:

  1. You will see them listed when you go to JFBConnect > Configuration > PROVIDER_NAME tabs, provided you made icons for each one of these providers. Set the 'Default Login Button' to your new file. This default can be used in the Joomla Users Login and Register pages if 'Integrate into Joomla Login' is enabled and the SCLogin module.
    login-button-github
  2. If you would like the SCLogin social buttons to be different than the 'Default Login Button' configured in the previous step, you will also need to edit the SCLogin settings. In SCLogin > Social Button Settings, set 'Social Login Buttons' to custom. Then simply select the desired icons for each provider by clicking the clicking the radio buttons to set the new Image Style.
    sclogin-button
  3. After performing the above steps, refresh your browser on the site front-end and your new icons should now be displayed.

By taking advantage of this mechanism, any changes made to your login buttons will persist through upgrade of JFBConnect installations.