Changing font colours on the Walk-up Experience portal

Alex Saager — Thu, 10 Jun 2021 10:16:40 GMT

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

Re: Changing font colours on the Walk-up Experience portal

Indira Panneers — Fri, 18 Jun 2021 05:29:38 GMT

Hi Alex,

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

Your help is highly appreciated

Re: Changing font colours on the Walk-up Experience portal

Noah Thompson2 — Wed, 23 Jun 2021 21:00:33 GMT

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

Re: Changing font colours on the Walk-up Experience portal

Alex Saager — Thu, 24 Jun 2021 07:58:06 GMT

Thank you Noah, worked perfectly 🙂

Re: Changing font colours on the Walk-up Experience portal

NDizzy — Thu, 04 Nov 2021 14:25:47 GMT

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;

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

Re: Changing font colours on the Walk-up Experience portal

NDizzy — Thu, 04 Nov 2021 18:17:34 GMT

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;

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

Re: Changing font colours on the Walk-up Experience portal

Dagan — Wed, 25 May 2022 15:52:51 GMT

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.

question Re: Changing font colours on the Walk-up Experience portal in ITSM forum

Changing font colours on the Walk-up Experience portal

Re: Changing font colours on the Walk-up Experience portal

Re: Changing font colours on the Walk-up Experience portal

Re: Changing font colours on the Walk-up Experience portal

Re: Changing font colours on the Walk-up Experience portal

Re: Changing font colours on the Walk-up Experience portal

Re: Changing font colours on the Walk-up Experience portal