Styling to add border around SCLogin Module

Hello, thanks for the very good SCLogin module. One thing I'd like to be able to achieve and that's putting a thin border around the SCLogin module, if possible to do with CSS.

I should also mention that I'd like to be able to do this for the vertical and horizontal styles.

Thanks !

jimsparkman wrote: Hello, thanks for the very good SCLogin module. One thing I'd like to be able to achieve and that's putting a thin border around the SCLogin module, if possible to do with CSS.

I should also mention that I'd like to be able to do this for the vertical and horizontal styles.

Thanks !

I resolved this using a module class suffix, but if there's a better way such as applying CSS to the SCLogin Module, advice would be appreciated.

- Jim

Thanks Alex, and by the way, the SCLogin module is working out great for me. Nice work!

- Jim

alzander wrote: Finally, if you haven't already, please consider leaving a rating and review for SCLogin, or our support, on the Joomla Extension Directory. It certainly isn't required, but is very appreciated:
extensions.joomla.org/extensions/access-...authentication/24054

Wanted to let you know I added a comment on JED.

Thanks again for a great module. Starting to think about the benefits JFBConnect will bring now.

Hi Jim,

For those of us who are not yet adept at using the module class suffice, I'd sure appreciate your sharing with us exactly what code you added and where.

Thanks!

Scott

SixSummits wrote: Hi Jim,

For those of us who are not yet adept at using the module class suffice, I'd sure appreciate your sharing with us exactly what code you added and where.

Thanks!

Scott

Scott, sure thing... First of all, the template I'm using allows for "Custom CSS" in template config, so it makes it easy to add without worry about overwriting with template updates later on. If your template doesn't accommodate that, the just add the CSS below to your "template.css" file. Then use the class name in the SCLogin Module's "module class suffix" field (without the leading "."). Let me know if this isn't clear enough. You can see how I've used this at afxmedia.com.

/* Add a Shaded Border to any Module by using
a module class suffix in advanced module configuration */
.myModuleBorderGray
{
border-radius: 5px;
background-color: #fdfdfd;
background-image: -moz-linear-gradient(top,#fff,#fafafa);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fafafa));
background-image: -webkit-linear-gradient(top,#fff,#fafafa);
background-image: -o-linear-gradient(top,#fff,#fafafa);
background-image: linear-gradient(to bottom,#fff,#fafafa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fffafafa', GradientType=0);
border: 1px solid #DADADA;
}
.myModuleBorderGreen
{
border-radius: 5px;
background-color: #fdfdfd;
background-image: -moz-linear-gradient(top,#fff,#fafafa);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fafafa));
background-image: -webkit-linear-gradient(top,#fff,#fafafa);
background-image: -o-linear-gradient(top,#fff,#fafafa);
background-image: linear-gradient(to bottom,#fff,#fafafa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fffafafa', GradientType=0);
border: 1px solid #4E7401;
}
.myModuleBorderBrown
{
border-radius: 5px;
background-color: #fdfdfd;
background-image: -moz-linear-gradient(top,#fff,#fafafa);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fafafa));
background-image: -webkit-linear-gradient(top,#fff,#fafafa);
background-image: -o-linear-gradient(top,#fff,#fafafa);
background-image: linear-gradient(to bottom,#fff,#fafafa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fffafafa', GradientType=0);
border: 1px solid #996633;
}
.myModuleBorderBlue
{
border-radius: 5px;
background-color: #fdfdfd;
background-image: -moz-linear-gradient(top,#fff,#fafafa);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fafafa));
background-image: -webkit-linear-gradient(top,#fff,#fafafa);
background-image: -o-linear-gradient(top,#fff,#fafafa);
background-image: linear-gradient(to bottom,#fff,#fafafa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fffafafa', GradientType=0);
border: 1px solid #5569B0;
}
.myModuleBorderOrange
{
border-radius: 5px;
background-color: #fdfdfd;
background-image: -moz-linear-gradient(top,#fff,#fafafa);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fafafa));
background-image: -webkit-linear-gradient(top,#fff,#fafafa);
background-image: -o-linear-gradient(top,#fff,#fafafa);
background-image: linear-gradient(to bottom,#fff,#fafafa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fffafafa', GradientType=0);
border: 1px solid #E75F2F;
}
/* End of Border module class suffixes */