Changing font colours on the Walk-up Experience portal

Alex Saager · ‎06-10-2021

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

Noah Thompson2 · ‎06-23-2021

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;
  }
}

View solution in original post

Alex Saager · ‎06-24-2021

Thank you Noah, worked perfectly 🙂

NDizzy · ‎11-04-2021

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;