The SCLogin module supports the easy inclusion of special CSS files to quickly change the overall appearance of the output. Included is a "Default" theme, which is very similar to the Joomla 3.x mod_login looks, and "SourceCoast" which has a similar look to the login popup used on this site.

Selecting a Theme

Choosing the Theme to use is done in the SCLogin module parameters. The first setting in the module is for the "Theme". Simply use the drop-down to choose from the themes available and click "Save" to use that on your site.

Joomla Login Theme Location

The themes for the SCLogin module are initially installed in the /media/sourcecoast/themes/sclogin/ directory. There are 2 files installed by the SCLogin module automatically:

  • Default.css - A Joomla / standard Bootstrap styled look
  • Sourcecoast.css - Overrides to make the login module look similar to that of the modal login popup

Modifying / Creating Your Own Joomla Theme

You could modify the files above directly. However, you shouldn't. If you do, then each time you upgrade the SCLogin module, your changes will be overwritten with the standard CSS that comes with the module. Instead, you should create a template override for your modifications or new theme files.

Creating a Template Override

Creating a template override is the process of creating a special file in your Joomla's template directory. The SCLogin module will automatically search for and use these special files, if found. To create a template override, you'll first need to create the following directory:

Once that structure exists, you can copy the original theme CSS files from the media directory to your new template override directory. If you leave the file name the same, that file will be used instead of the one in the /media directory.

Alternatively, you can rename the file to something else, like "my-sclogin.css". Once renamed, go to the SCLogin parameters area and the "Themes" option will now show your new file. Select your new theme and your CSS file will automatically be included whenever the SCLogin module is loaded.

Modify The Styles To Suit Your Site

Once you've created (or copied) the proper CSS file, you can edit it however you want. You're free ot add new styles or update existing styles. Whatever changes you make in your template override will not be overwritten whenever you update the SCLogin module.