SCLogin CSS Theme issues

mcintyro
Offline

Active Subscriptions:

None

6 years 10 months ago - 6 years 11 months ago #61769 by mcintyro

SCLogin CSS Theme issues was created by mcintyro

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 page@ 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

Last edit: 6 years 11 months ago by mcintyro.

The topic has been locked.

mel
Offline

Support Specialist

6 years 10 months ago #61773 by mel

Replied by mel on topic 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:

.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

The topic has been locked.

mcintyro
Offline

Active Subscriptions:

None

6 years 10 months ago #61775 by mcintyro

Replied by mcintyro on topic 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

The topic has been locked.

mel
Offline

Support Specialist

6 years 10 months ago #61776 by mel

Replied by mel on topic 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:

.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 { 
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

The topic has been locked.

mcintyro
Offline

Active Subscriptions:

None

6 years 10 months ago #61886 by mcintyro

Replied by mcintyro on topic 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

The topic has been locked.

mel
Offline

Support Specialist

6 years 10 months ago #61889 by mel

Replied by mel on topic SCLogin CSS Theme issues

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

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

The topic has been locked.

Start
Prev
1
Next
End

SourceCoast Login

SCLogin CSS Theme issues