Sclogin css styling issues

RossQ
Offline

Active Subscriptions:

None

5 years 10 months ago - 5 years 10 months ago #64203 by RossQ

Sclogin css styling issues was created by RossQ

Hi,

I'm trying to customize the style of the module, however, the class ".btn" seems to be overwriting the ".btn-primary" styling. I think this is because of the".btn" is the main class for any button on a site.

Are there anyways of resolving this?

Kind regards

Last edit: 5 years 10 months ago by RossQ.

The topic has been locked.

alzander
Offline

Support Specialist

5 years 10 months ago #64207 by alzander

Replied by alzander on topic Sclogin css styling issues

Can you let us know a URL where we can understand the issue further? If there's a specific style you're trying to apply, let us know that CSS as well (or any other details you can) so we can help investigate further.

Thanks,
Alex

The topic has been locked.

RossQ
Offline

Active Subscriptions:

None

5 years 10 months ago #64208 by RossQ

Replied by RossQ on topic Sclogin css styling issues

Thanks for your quick response,

the URL in question is herehttps://gemmaquinnells.co.uk

Mainly the issue occurs within the module popup, they should behave like the ones not within the popup.

Kind regards

The topic has been locked.

mel
Offline

Support Specialist

5 years 10 months ago #64214 by mel

Replied by mel on topic Sclogin css styling issues

Looking at your page, it seems as if the behavior that looks different is when you're hovering on the button. I'm comparing the modal buttons to the Login / Register buttons that launch the modal. If this is correct for hover being the problem, in your theme CSS file for SCLogin

1. Replace this style

.sourcecoast .btn-primary:hover, .sourcecoast .btn-primary:focus, .sourcecoast .btn-primary:active, .sourcecoast .btn-primary.active, .sourcecoast .btn-primary.disabled, .sourcecoast .btn-primary[disabled] {
background-color: #04c;
}

with the background-color of #000. The style on your page for the buttons is transparent, but that doesn't work so well with a modal background of white.

2. Replace

.sourcecoast .btn:hover, .sourcecoast .btn:focus {
background-color: #9DCB80;
}

with the same background color of #000.

If you're looking for other differences than the hover, I'd need more detail between what's expected and what you're seeing.

-Melissa

The topic has been locked.

RossQ
Offline

Active Subscriptions:

None

5 years 10 months ago #64267 by RossQ

Replied by RossQ on topic Sclogin css styling issues

Thanks for your help,

It is not far off from how I want it to behave, the hover events within the popup are exactly what I want to replicate on the main page where the login and register button is.

The topic has been locked.

mel
Offline

Support Specialist

5 years 10 months ago #64272 by mel

Replied by mel on topic Sclogin css styling issues

The buttons in the modal and on the main page both have the same classes .btn and .btn-primary. If you put the !important tag on the hover and focus styles you made, the changes should work for both sets of buttons for the hover and focus behavior. For instance:

.sourcecoast .btn:hover, .sourcecoast .btn:focus {
background-color: #9DCB80 !important;
}

and

.sourcecoast .btn-primary:hover, .sourcecoast .btn-primary:focus {
background-color: #9b3c99 !important;
}

-Melissa

The topic has been locked.

Start
Prev
1
Next
End

SourceCoast Login

Sclogin css styling issues