SCLogin CSS Theme issues

SCLogin CSS Theme issues

I am struggling with SCLogin and not being a CSS guru I don't really know how to overcome the issues below:

I have purchased JFBConnect and also downloaded the SCLogin module.  I have the SCLogin module displaying on my home [email protected] https://www.borderhighlands.com but my site template is polluting the login and register buttons - when I hover on them they are changing shape and 50% colour and also growing larger which is displacing them.  I believe there is some inheritance from template.css impacting this.  I have tried forcing the theme to "sourcecoast" in the SCLogin module parameters but this changes the buttons even more and their behaviour is still not right.

I understand it is not recommended to modify the contents of media/sourcecoast/css files so I need one of two outcomes:

- The buttons to be stock standard and not be impacted by my site template or...
- For them to look at work like the other buttons on my site based fully on my site template

I would prefer them to have the same look and feel as the site if possible - can anybody help me?

Thanks
Ross

Edited by: mcintyro - May-18-17 05:26:32
mcintyro
useravatar
Offline
4 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: SCLogin CSS Theme issues

Ross,

First, I would suggest making your own theme for SCLogin by following the steps here. Since the default theme seems to be closest for you, I would suggest for you to copy that one into your new theme as a starting point.

The following styles should get you closer to matching that existing green login button from your "User Login" module and should be added to the new SCLogin theme:

Code:

.sclogin button.btn-primary {

color: #DDEBDB;
border: 1px solid #375732;
background:linear-gradient(to bottom, #69A460 0, #66A25D 3%, #294125 100%) no-repeat;
}

.sclogin .btn:hover {
color: #192B0D !important;
border: 1px solid #61A630;
background: linear-gradient(to bottom, #A6DA81 0, #74C639 60%, #58962C 100%) no-repeat;
}

.sclogin .btn {
padding: 0px 25px;
border-radius: inherit;
font-size: 13px;
}

.sclogin .btn:hover {
background: linear-gradient(to bottom, #A6DA81 0, #74C639 60%, #58962C 100%) no-repeat;
}

The padding on the .sclogin .btn block is 0px 25px to match the existing button. However, if you want to get the Log in and Register buttons on the same line, I'd suggest changing it to 0px 15px

I would also suggest changing the "a.forgot.btn i" margin-top to 0px instead of 6px to center the question mark buttons for forgot username/password. This was in our theme file, not your template file, so just search for that block

I hope this helps get you closer to what you want, but let me know if you need more help.

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3543 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: SCLogin CSS Theme issues

Wow thanks - this has taken me very close to success.  For some reason the "Register" button is still grey and not pickedup the new styling - any ideas why that would be - does it not also take from the same button primary code block?

Thanks
Ross

mcintyro
useravatar
Offline
4 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: SCLogin CSS Theme issues

I left them different colors since our SCLogin module had them two different colors. The Log In is the primary button and the Register is the secondary button. If you'd like it also to be the same, then you'd change:

Code:

.sclogin button.btn-primary { 

color: #DDEBDB;
border: 1px solid #375732;
background:linear-gradient(to bottom, #69A460 0, #66A25D 3%, #294125 100%) no-repeat;
}

to

Code:

.sclogin .btn { 

color: #DDEBDB !important;
border: 1px solid #375732;
background:linear-gradient(to bottom, #69A460 0, #66A25D 3%, #294125 100%) no-repeat;
text-shadow:none;
}

This also changes the forgot buttons to green as well.
* If you like that, I'd suggest using the white question marks instead of the black ones. At this point, you can combine the two style blocks for ".sclogin .btn" that you've added.
* If you'd rather keep them the gray color change ".sclogin .btn" to ".sclogin #form-sclogin-submitcreate .btn"

-Melissa

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3543 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: SCLogin CSS Theme issues

Melissa,

Sorry to trouble you again but I am seeing an issue that the button cannot be clicked - when clicked - it increases in size and jumps to another row - it looks to be picking up from template.css but I can't figure out how to keep it consistent with the view and hover settings we worked on earlier in this post.

Any clues?

Thanks
Ross

mcintyro
useravatar
Offline
4 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: SCLogin CSS Theme issues

You need to target the active and focus states with something like the following:

Code:

.sclogin .btn:focus, 

.sclogin .btn:active {
background: linear-gradient(to bottom, #A6DA81 0, #74C639 60%, #58962C 100%) no-repeat;
padding: 0px 15px !important;
}

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3543 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.
There are 0 guests also viewing this topic
There are 0 users also viewing this topic

Board Info

Board Stats
 
Total Topics:
11497
Total Polls:
0
Total Posts:
48402
Posts today:
1
User Info
 
Total Users:
47468
Newest User:
hannatee
Members Online:
1
Guests Online:
785

Online: 
annatech
Social Stream
Refer and Earn

Like our extensions? You're not alone! That's why they're used on tens of thousands of websites. Now you can earn 20% of any sale you refer to SourceCoast.com.

We provide excellent documentation, well laid out sales pages and great support. All you need to do is spread the word and we'll take care of the rest.

Learn About Our Affiliate Program