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). Ever won 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.stylesheetURL setting 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 RcaWTi0woO52rqZjlbApm2lL3Aokzd1bhCZZajX51aX4IQrH1Uj1D4ks9HfJtxoRI7HCsy
NVoc6Qj4oBfuplftc7tMbR26eZHwtEqaw9RLMBeIJDvqvqyD4l' \  
-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 Clients and 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 */