Changing font colours on the Walk-up Experience portal

[Alex Saager]

Hi there,

I'm looking to implement the walk-up experience but one thing I noticed was the default font colours on the check-in page are too light (see below)

I'm new to service portal development and was wondering what the easiest way to change these were.

Any help would be greatly appriciated.

Many thanks,

Alex

[Indira Panneers]

Hi Alex,

I am facing the same issue, Kindly let me know, if you find the solution for this.

Your help is highly appreciated

[Noah Thompson2 · Accepted solution]

Hello,

Recently resolved this issue in our instance. So, the colors are being picked in the Widget's CSS by default, and you cannot edit this. However, cloning the entire widget isn't necessary.

Go to the Widget Instances table and find the instance of the Online Check-In widget that you are using. Once there, you can use the CSS field on this instance to override the widget's non-editable CSS styling. 

Here is the style sheet that we replaced it with. This is largely the same as the default - the only key difference is that the header and sub-header text colors are now just #000000 (black) instead of referring to gray and gray-light on the widget's CSS styling.

$header: #000000;
$sub-header: #000000;
$border: $table-border-color;
$panel-border-info: $alert-info-border;
$brand-primary-darker: #165C53 !default;
$header-bg: $navbar-default-bg;
.nav-tabs {
  background-color: $header-bg;
}
.checkin {
  width:100%;
  max-width: 992px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}
.selectUser{
  padding-bottom:10px;
}
.userOnbehalf {
  padding-top: 14px;
  height:36px;
  width:100%;
  max-width:336px;
}
.queue-location-header {
  border-bottom: 1px solid $border;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 30.5px;
  height: 68px;
  .queue-name {
    font-size:18px;
    color:$header;
    h3 {
      font-size:18px;
      margin-bottom: 0;
      margin-top: 10px;
    }
  }
}
.waitTimeMsg {
  font-size: 14px;
}
.customWaitTime {
  padding-bottom: 14px;
}
.location {
  max-width:992px;
  min-height:161px;
  border: 1px solid $border;
  padding-left:30.5px;
  padding-bottom: 25px;
}
.location-loading {
  max-width:992px;
  border: 1px solid $border;
  padding-top: 25px;
  padding-left:30.5px;
  padding-bottom: 25px;
}
.main-frame {
  border: 1px solid $border;
  border-radius:4px;
  max-width:992px;
  width:100%;
  margin-bottom:20px;
}
a.location-change {
  padding:10px;
  font-size:14px;
  max-width:93px;
  height:18px;
}
.location-picker {
  padding-top:10px;
  padding-bottom:41px;
  max-width:336px;
  width:100%;
  height:36px;
}
.change-loc-picker {
  height:36px;
  width:100%;
  max-width:336px;
}
a.cancel-location-change {
  padding:6px;
  font-size:14px;
  max-width:93px;
  height:18px;
}
.selectLocMsg {
  word-wrap: break-word;
  padding-top:19px;
  color:$header;
  opacity:100%;
  font-size:18px;
}
.submit-btn-wrapper {
  height:35px;
  margin-top:16px;
}
.section-panel {
  margin:30.5px;
}
.form-panel {
  margin-top: 16px;
}
.form-container {
  padding: 8px;
}
.tab-link {
  color: $brand-primary-darker;
}
.apptmnt-tab {
  border: 0;
  border-bottom: 3px solid $brand-primary-darker;
  background-color: transparent;
}
.display-picker {
  display: flex;
  margin-top:3px;
}
.default-option {
  color:#CCCCCC;
  font-size:14px;
}
.reasons {
  color: $sub-header;
  font-size:14px;
}
.form-header {
  font-size:18px;
  color:$header;
  h4 {
    font-size:18px;
    margin-top: 0;
    margin-bottom: 10px;
    display: inline-block;
  }
}
span {
  color:$sub-header;
}
}
.apt-msg{
  font-size:14px;
  color:$sub-header;
  margin-bottom:-3px;
}
.reason-msg {
  margin-top:11px;
  font-size:14px;
  color:$sub-header;
}
.onBehalfReason-msg {
  padding-top:14px;
  margin-top:14px;
  font-size:14px;
  margin-bottom: -18px;
  color:$sub-header;
}
.appointment-wrapper {
  max-width: 336px;
}
.appointment-schedule {
  margin-top:0px !important;
}
.select-wrapper {
  max-width:336px;
  color:#CCCCCC;
  height:36px;
}
.other-wrapper {
  height:78px;
  max-width:336px;
  resize:none;
}
.wu_header {
  font-size: 1.40em;
  max-width: 512px;
}
.welcome-msg {
  word-wrap: break-word;
  font-size:30px;
  color:$header;
  width:100%;
}
.info-msg {
  word-wrap: break-word
    height:45px;
  color:$sub-header;
  padding-bottom: 25px
}
.search-title {
  color:$header;
}
.locationMsg {
  color:$sub-header;
  size:14px;
  max-width:52px;
  height:18px;
}
.position-msg {
  font-size:18px;
  color:$header;
}
.leave-btn {
  min-width:118px;
  height:35px;
  border: 1px solid $btn-default-border;
  background: $btn-primary-color;
  margin-bottom: 15px;
}
.panel-wrapper {
  border-left:1px solid $border;
  border-right:1px solid $border;
  border-top:1px solid $border;
  border-bottom: 0px solid $border;
  background-color: $header-bg;
  height:40px;
}
.search-results {
  border:0;
  max-width:992.5px;
}
.leave-msg {
  font-size:14px;
  color:$sub-header;
  text-align:center;
}
.list-wrapper {
  padding:8px,8px;
  margin-bottom:0 !important;
  border-top:0px solid $border!important;
  border-left:1px solid $border !important;
  border-right:1px solid $border !important;
  border-bottom:1px solid $border !important;
  &:first-child{border-top:1px solid $border !important}
}
.form-input {
  padding-left: 8px;
}
.header {
  color: $header;
}
.semi-bold {
  font-weight: 600;
}
.queue-position {
  font-size: 80px;
  line-height: 100px;
  font-weight: 700;
}
.serviced-banner {
  margin-top: 65px;
  margin-bottom: 65px;
  padding: 0 16px;
  text-align: center;
}
.h4 {
  color: $header;
}
.h5 {
  color: $sub-header;
}
.top-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .queue-container {
    margin-top: 30.5px;
  }
  .queue-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .username {
      max-width: 205px;
      word-break: break-all;
      display: inline-block;
    }
    .currently-served {
      min-width: 150px;
      flex-grow: 1;
    }
    .up-next {
      flex-grow: 2;
      .user-item {
        display: flex;
        flex-direction: row;
        .username {
          vertical-align: top;
        }
        .number {
          vertical-align: top;
          display: inline-block;
        }
        .time {
          display: inline;
          min-width: 80px;
          .icon-calendar {
            width: 12px;
            margin-right: 4px;
          }
        }
      }
    }
  }
  .location-section {
    flex-grow: 1;
    min-width: 280px;
    flex-basis: 40%;
    line-height: 20px;
    border-top: solid 1px $border;
    margin-top: -1px;
    box-sizing: border-box;
    .location-content-landscape {
      .padding-left {
        padding-left: 32px;
      }
      .padding-bottom {
        padding-bottom: 32px;
      }
      .padding-right {
        padding-right: 32px;
      }
      .schedule-summary {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: start;
        .image-container {
          max-width: 360px;
          width: 100%;
          min-width: 296px;
          padding-bottom: 32px;
          flex-basis: 40%;
          img {
            width: 100%;
          }
        }
      }
      .schedule-info {
        max-width: 360px;
        min-width: 296px;
        flex-basis: 60%;
      }
    }
    .location-content {
      margin: 32px;
      max-width: 520px;
      p.location-description {
        word-wrap: break-word;
      }
      .image-container {
        min-width: 214px;
        img {
          width: 100%;
        }
        margin: 24px auto;
      }
    }
  }
}
.padding-left {
  padding-left: 8px;
}
.padding-right {
  padding-right: 8px;
}
.queue-header {
  display: flex;
  flex-direction:row;
}
.left-section {
  flex-basis: 60%;
  flex-grow: 1;
  border-right: solid 1px $border;
  margin-right: -1px;
}
.left-container {
  flex-basis: 45%;
}
.right-container {
  flex-basis: 55%;
  text-align: right;
}
hr {
  border-color: $border;
}
.current-user {
  background: rgba($brand-primary, 0.2);
}
.user-item {
  padding-left: 8px;
  padding-right: 8px;
  line-height: 20px;
  .left-container {
    flex-basis: 75%;
    padding-right: 8px;
  }
  .right-container {
    flex-basis: 25%;
  }
}
.schedule-day {
  margin-bottom: 2px;
}
.schedule-entry {
  display: flex;
  .day-tag {
    flex-basis: 30%;
    padding-right: 8px;
  }
  .schedule-tag {
    flex-basis: 70%;
  }
}
.panel-body {
  p {
    margin-bottom: 0;
  }
}
.panel-info {
  border-left: solid 10px $panel-border-info;
}
.close-panel {
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -7px;
  color: $panel-border-warning;
  cursor: pointer;
}
.alert-info {
  margin-bottom: 24px;
  position: relative;
  p {
    padding-right: 26px;
  }
  .close-alert {
    position: absolute;
    right: 16px;
    &:before {
      font-size: 10px;
    }
    margin-top: -10px;
    top: 50%;
    cursor: pointer;
  }
}
.reason-text {
  margin-top: -16px;
}
/** CSS Overrides for appointment widget code **/
#appt-reselect-widget {
  .panel-heading {
    display: none;
  }
  .panel {
    box-shadow: none !important;
    border: none !important;
    .panel-body {
      padding: 0px;
      .appointment-duration {
        > span {
          display: flex;
          flex-direction: column-reverse;
          align-items: flex-start;
          .pull-right {
            display: inline-block;
            border: 1px solid $btn-default-border;
            border-radius: 3px;
            padding: 6px 12px;
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}
#appt-select-widget {
  span.fa, label {
    display: none;
  }
}

[NDizzy]

I am having a difficult time "over riding" the values. I am not able to edit the CSS field from 

$header: $gray;
$sub-header: $gray-light;

to 

$header: #000000;
$sub-header: #000000;

[Dagan]

Hi @NDizzy ,

What Noah means is to follow these steps:

1. Go to Service Portal > Widget Instances

2. Look for the "Online check-in experience" Widget

3. Open any and all instances of said widget and then paste the CSS above in the CSS field of the instance record.

This will allow you to override the CSS inside the widget.

Hope this helps.