Default Stylesheet

Style.css is the cascading stylesheet used to format Hosted Login-specific screens and pages (for example, the login screen or the “forgot password” screen. Why are the primary fonts on the login screen black (or, more correctly, why are they medium dark gray):

That’s easy: the fonts are gray because Style.css sets the font color to #444 (medium dark gray):

h1, h2, h3, h4, h5, h6, p, a, span {
 font-family: 'Lato', sans-serif;
 color: #444;
}

But what if you’d rather have bright red fonts on your login page, something more like this

Well, if that is what you want to do, there’s a way to do it. To get that effect, you’d first make a copy of Style.css (see below) and then, within that copy, change the font color accordingly:

h1, h2, h3, h4, h5, h6, p, a, span {
 font-family: 'Lato', sans-serif;
 color: red;
}

From there, you’d complete the following procedure to replace the default stylesheet with your new stylesheet:

  1. Place your new CSS file on a publicly-available website.
  2. Add the theming.stylesheetURLsetting to the API client associated with the OIDC client that handles logons and registrations. Set the value of theming.stylesheetURL to the URL of the new CSS file. This is done by using the /config/{app_id}/clients/{client_id}/settings endpoint.

For example, the following Curl command changes the CSS file for the API client brg3q7xh8try6yy7clo09te24qaw487h5:

curl -X PUT \
https://v1.api.us.janrain.com/config/pg65klnchge38jfhrs3c7pfww/clients/brg3q7xh8try6yy7clo09te24qaw487h5/settings \
-H 'Authorization: Basic RcaWTi0woO52rqZjlbApm2lL3Aokzd1bhCZZajX51aX4IQrH1Uj1D4ks9HfJtxoRI7HCsyNVoc6Qj4oBfuplftc7tMbR26eZHwtEqaw9RLMBeIJDvqvqyD4l' \  
-H 'Content-Type: application/json' \
  -d '{
   "theming.stylesheetURL":"https://dyzz9obi78pm5.cloudfront.net/app/image/id/5c9169d16e121c920956f573/n/new-style.css"
}
'

That’s how you can customize your Hosted Login screens.

Note. However, we recommend that you not run the preceding command until you’ve read the article API Client and API Client Settings.

Here’s a copy of Style.css that you can use as the foundation for your custom stylesheet. If you want to try your hand at modifying Hosted Login styles then might also want to take a peek at the article CSS Reference.

/* BEGIN STYLESHEET HERE */

body {
 background-color: #f2f2f2;
 margin: 0;
}

h1, h2, h3, h4, h5, h6, p, a, span {
 font-family: 'Lato', sans-serif;
 color: #444;
}

h1, h2, h3 {
 font-weight: bold;
 line-height: 125%;
}

h1 {
 margin-bottom:20px;
 font-size: 22px;
}

h2 {
 margin-bottom: 15px;
 font-size: 18px;
}

h3 {
 margin-bottom: 10px;
 font-size: 16px
}

p {
 margin-bottom: 15px;
 font-size: 14px;
 line-height:150%;
}

a {
 text-decoration: underline;
}

a:hover {
 color: #5f80c5;
}

button {
 background-color: #5F80C5;
 border: 1px solid #5F80C5;
 border-radius: 2px;
 cursor: pointer 
 color: #fff;
 padding: 10px 15px;
 margin: 0px;
 font-size: 18px;
 font-family: 'Roboto';
}

button:hover {
 background-color: #3F5FA1
}

button.secondary {
 background-color: #fff;
 border: 1px solid #5F80C5;
 color: #5F80C5;
}

button.secondary:hover {
 background-color: #ECF2FF;
}

button.danger {
 background-color: #fa5151;
 border: 1px solid #de0606;
}

button.danger:hover {
 background-color: #de0606;
}

#logo {
 min-width: 400px;
}

#main-container {
 display: flex;
 align-items: center;
 justify-content: center;
 padding-top: 25px;
 padding-bottom: 25px;
}

#floating-container {
 min-width: 400px;
 background-color: #fff;
 box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.1);
 /* height: 100px; */
}

#header-container {
 padding:20px;
 border-bottom: 1px solid #f2f2f2;
 display: flex;
 align-items: center;
 justify-content: center;
}

#content-container {
 padding: 25px 0 0 0;
}

.footer-container {
 padding:25px;
 border-top: 1px solid #f2f2f2;
 text-align: center;
 margin-top: 25px;
}

.footer-container span {
 font-size: 14px;
}

.auth-screen, .auth-success-screen {
 max-width: 300px;
 margin: 0 auto;
}

.auth-success-screen {
 display: flex;
 margin-bottom: 25px;
}

.auth-success-screen h2 {
 margin: auto;
 padding-left: 20px;
}

.social-login-buttons ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.social-login-buttons button {
 margin: 5px 0;
 padding: 0;
 width: 100%;
}

.social-login-buttons button.google {
 background-color: #4285F4;
}

.social-login-buttons button.google:hover {
 background-color: #3367D6;
}

.social-login-buttons button.facebook {
 background-color: #4267B2;
}

.social-login-buttons button.facebook:hover {
 background-color: #2B467E;
}

.social-login-buttons button.twitter {
 background-color: #1DA1F2;
}

.social-login-buttons button.twitter:hover {
 background-color: #0060D4;
}

.social-login-buttons button > span {
 display: block;
 max-width: 55%;
 margin: 0 auto;
 text-align: left;
}

.flex-quad .social-login-buttons button > span {
 max-width: 75%;
}

.social-login-buttons span.provider-icon {
 margin-right: 15px;
 background-color: #fff;
}

.lang-rtl .social-login-buttons button > span {
 text-align: right;
}

.lang-rtl .social-login-buttons span.provider-icon {
 margin-right: 0;
 margin-left: 15px;
}

.social-login-buttons span.provider-name {
  font-size: 18px;
 line-height: 48px;
 color: #fff;
 font-family: 'Roboto';
}

.form-action-buttons {
 margin-top: 20px;
 margin-bottom: 20px;
 margin: 0 -10px;
 position: relative;
}

.form-action-buttons .forgot-password-link {
 position: absolute;
 right: 8px;
 bottom: 0;
}

.form-action-buttons button {
 margin: 0 5px;
}

.form-action-buttons.flex {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.form-action-buttons.flex button {
 flex-grow: 1;
 margin: 0 10px;
}

.manage-screen {
 max-width: 800px;
 margin: 0 auto;
 padding: 0 25px;
}

.profile-header {
 display: flex;
 flex-direction: row;  flex-wrap: wrap;
}

.profile-header > div {
 flex-grow: 1;
 flex-basis: 0;
}

.profile-header-image {
 text-align: right;
}

.profile-header-image .profile-image {
 margin-right: 20px;
 border-radius: 50%;
 max-height: 100px;
 max-width: 100px;
}

.profile-management-row {
 display: flex;
flex-direction: row;
 flex-wrap: wrap;
 margin: 0 -8px;
}

.profile-management-card {
 flex-grow: 1;
 /* flex-basis: 0; */
 background-color: #fff;
 box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.1);
 margin: 8px;
 min-width: 270px;
}

.action-card {
 flex-grow: 1;
 flex-basis: 0;
 margin: 8px;
 background-color: #f2f2f2;
 padding: 0 20px 20px 20px;
}

.profile-management-card.large {
 min-width: 600px
}

.card-heading {
 border-bottom: 1px solid #f2f2f2;
}

.card-body {
 padding: 30px 25px 15px;
}

.card-icon.profile-data {
 background-image: url('/static/personal_data_icon.png');
}

.card-icon.profile-preferences {
 background-image: url('/static/content_prefs_icon.png');
}

.card-icon.profile-security {
 background-image: url('/static/account_security_icon.png');
}

.card-icon.profile-privacy {
 background-image: url('/static/privacy_settings_icon.png');
}

.card-heading > h1 {
 margin-top: 15px;
 position: relative;
}

.card-heading .card-icon {
 background-size: 25px 25px;
 height: 25px;
  width: 25px;
  display: inline-block;
  margin: 0 15px;
 position: relative;
 top: 3px;
}

.card-heading .chevron.right {
 position: absolute;
 right: 0;
 margin-right: 20px;
}

.card-heading .chevron.left {
 position: absolute;
 left: 0;
 margin-left: 20px;
}

.profile-management-card.large .card-heading .chevron.left {
 margin-left: 60px;
}

.profile-management-card.large .card-heading .card-icon {
 margin-left: 100px;
}

.manage-screen .profile-management-card.large .card-body .capture_editProfileForm {
 max-width: 375px;
 margin: auto;
}

.lang-rtl .card-heading .chevron.right {
 right: unset;
 left: 0;
 margin-right: 0;
 margin-left: 20px;
}

#mergeAccounts .profile-account-photo {
 display: inline-block;
}

#mergeAccounts .profile-account-photo img {
 height: 48px;
 width: 48px;
 border-radius: 2px;
}

.linked-profile-image {
 max-height: 32px;
 max-width: 32px;
 margin: 10px 10px 20px 0;
}

/* Controls and pagewide stuff */
.switch label {
 display: inline-block;
 height: 34px;
 position: relative;
 width: 60px;
 text-indent:70px;
 white-space: nowrap;
}

.switch input {
 display:none;
}

.slider {
 background-color: #ccc;
 cursor: pointer;
 left: 0;
 position: absolute;
 top: 9px;
 transition: .4s;
 height: 34px;
 width: 60px;
}

.slider:before {
 background-color: #fff;
 bottom: 4px;
 content: "";
 height: 26px;
 left: 4px;
 position: absolute;
 transition: .4s;
 width: 26px;
}

input:checked + .slider {
 background-color: #66bb6a;
}

input:checked + .slider:before {
 transform: translateX(26px);
}

.slider.round {
 border-radius: 34px;
}

.slider.round:before {
 border-radius: 50%;
}

.flex-container {
 display: flex
}

.flex-row {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin: 0 -8px;
}

.flex-quad {
 flex-grow: 1;
flex-basis: 0;
 margin: 8px;
 min-width: 270px;
}

.screen-heading {
 text-align: center;
}

.auth-screen .screen-heading {
 text-align: left;
}

.aic-control {
 cursor: pointer;
}

.chevron::before {
 border-style: solid;
 border-width: 0.12em 0.12em 0 0;
 content: '';
 display: inline-block;
 height: 0.65em;
 left: 0.15em;
 position: relative;
 top: 0.32em;
 transform: rotate(-45deg);
 vertical-align: top;
 width: 0.65em;
 border-color: #979797;
}

.chevron.right:before,  .lang-rtl .chevron.left:before {
    left: 0;
    transform: rotate(45deg);
}

.chevron.bottom:before {
    top: 0;
    transform: rotate(135deg);
}

.chevron.left:before, .lang-rtl .chevron.right:before {
    left: 0.25em;
    transform: rotate(-135deg);
}

.success-check {
 display: inline-block;
 height: 80px;
 width: 80px;
 min-width: 80px;
 border-radius: 50px;
 background-color: #57d38f;
 border: 1px solid #31b06a;
}

.success-check::before {
 border-color: #fff;
 border-style: solid;
 border-width: 0px 6px 6px 0px;
 position: relative;
 top: 14px;
 left: 29px;
 height: 38px;
 width: 20px;
 content: '';
 display: inline-block;
 transform: rotate(45deg);
}

.toastify.error {
 background: linear-gradient(135deg,#FA5151,#DE0606);
}

.toastify .toast-close {
 padding-right: 0px;
 padding-left: 10px;
}

.error-cross {
 display: inline-block;
 height: 80px;
 width: 80px;
 min-width: 80px;
 border-radius: 50px;
 background-color: #B00020;
 border: 1px solid #B00020;
}

.error-cross::before {
 background-color: #fff;
 position: relative;
 top: 18px;
 left: 37px;
 height: 44px;
 width: 6px;
 content: '';
 display: inline-block;
 transform: rotate(45deg);
}

.error-cross::after {
 background-color: #fff;
 position: relative;
 top: 18px;
 left: 31px;
 height: 44px;
 width: 6px;
 content: '';
 display: inline-block;
 transform: rotate(-45deg);
}

/* Debugger */
#gizmo-debugger {
 position: absolute;
 top: 0px;
 right: 0px;
 background-color: #fff;
 padding: 20px;
 border: solid #09c;
 border-width: 0 0 2px 2px;
 border-style: outset;
 box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.1);
 overflow: hidden;
}

#gizmo-debugger.minimized {
 height: 20px;
 padding: 0 20px;
}

#gizmo-debugger > div {
 margin-top: 20px;
}

#gizmo-debugger label {
 padding-right: 20px;
}

#gizmo-debugger-minimize-button {
 position: absolute;
 left: 5px;
 top: 0;
 text-decoration: none;
}

/* END STYLESHEET HERE */