SC Login module - bad display

scomar
Offline

Active Subscriptions:

None

7 years 9 months ago #58818 by scomar

Replied by scomar on topic SC Login module - bad display

Great - the horizontal / vertical setting did it close enough.

The !important fixed the half-button color but I an still left with a blue outline. I copied what I thought was the border-color to common.css as follows:

.sourcecoast .btn{ 
background-color:#6D850A !important; 
background-image: linear-gradient(to bottom, #9bbe0e, #6D850A); 
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
padding: 0 10px !important;
}

.sourcecoast .btn:hover { 
background-color: rgb(109, 133, 10); 
background-image: none; 
} 
//.sourcecoast .btn:hover{ 
//background-color: #9bbe0e; 
//}

.sourcecoast .btn-primary{ 
background-color:#6D850A; 
background-image: linear-gradient(to bottom, #9bbe0e, #6D850A); 
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
} 
.sourcecoast .btn-primary:hover{ 
background-color: #9bbe0e; 
}

The topic has been locked.

mel
Offline

Support Specialist

7 years 9 months ago #58834 by mel

Replied by mel on topic SC Login module - bad display

Sorry for missing this post. The style you're looking for is "outline", so something like

.sourcecoast a.btn.btn-primary,
.sourcecoast a.btn {
outline: none !important;
}

The topic has been locked.

scomar
Offline

Active Subscriptions:

None

7 years 9 months ago #58838 by scomar

Replied by scomar on topic SC Login module - bad display

Thanks - that works.

Pretty frustrating though - I keep trying to use what I am learning on other styles and it seems that no two buttons are alike.

Now I am dealing with the logout button - see screencast.com/t/CIMrrn8CTKE2 - partial green mouseover - grey mouseout.

The topic has been locked.

mel
Offline

Support Specialist

7 years 9 months ago #58840 by mel

Replied by mel on topic SC Login module - bad display

I attempted to create a user on your site to be able to inspect the button but the account needs to be activated. In the meantime, I would recommend using Developer Tools in your browser to inspect the HTML element on the page and see the CSS styles associated with it. I'm using the ones in Chrome to look at your page and how I quickly see the styles that are causing the problems.

The topic has been locked.

scomar
Offline

Active Subscriptions:

None

7 years 9 months ago #58849 by scomar

Replied by scomar on topic SC Login module - bad display

Your account is now activated www.keymarwesleyan.org/new

The topic has been locked.

mel
Offline

Support Specialist

7 years 9 months ago #58850 by mel

Replied by mel on topic SC Login module - bad display

Your template's styles are being used on those buttons:

"#jsn-page .button" element
Styles are

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999), to(#777));
backgound-image: -webkit-linear-gradient(top, #999, #777);

When I disabled those two styles, the button got the correct stylings from the .sourcecoast .btn styles. Therefore, I'd suggest having all the styles you've done apply to the "button" class as well such as ".sourcecoast .button.btn", ".sourcecoast .button.btn.btn-primary", etc.

The topic has been locked.

scomar
Offline

Active Subscriptions:

None

7 years 9 months ago #58852 by scomar

Replied by scomar on topic SC Login module - bad display

OK - I see that now.

Adding to an existing style is done like:

.sourcecoast .button.btn{ 
background-color:#6D850A !important; 
background-image: linear-gradient(to bottom, #9bbe0e, #6D850A); 
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
padding: 0 10px !important;
}

.sourcecoast .button.btn,
.sourcecoast .btn{ 
background-color:#6D850A !important; 
background-image: linear-gradient(to bottom, #9bbe0e, #6D850A); 
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
padding: 0 10px !important;
}

Seems like neither one works?

The topic has been locked.

scomar
Offline

Active Subscriptions:

None

7 years 9 months ago - 7 years 9 months ago #58853 by scomar

Replied by scomar on topic SC Login module - bad display

Nevermind - got it! Option 2 + !important did the trick.

Thanks so much for all of your patient help!

Last edit: 7 years 9 months ago by scomar.

The topic has been locked.

mel
Offline

Support Specialist

7 years 9 months ago #58858 by mel

Replied by mel on topic SC Login module - bad display

Awesome, glad you got it resolved. Styling extensions with all the different templates out there can be tricky sometimes

The topic has been locked.

SourceCoast Login

SC Login module - bad display