mwilday

Broken Express Theme Preference page code fix.

Discussion created by mwilday on Jul 12, 2017

For those of you that haven't transitioned to boost or snap and discovered the broken Notification preferences page in express. Fear not! Below you can find the CSS code fix to straighten out the mess that was left in the aftermath of End of Support. Just add this block of code to the custom CSS section in your express block and it will straighten out the unusability of the Notification Preferences.

 

/***Notification Prefereneces***/
#page-message-notificationpreferences tr {
  background: #e3e3e3;
}
#page-message-notificationpreferences tr.preference-row,
#page-message-notificationpreferences thead tr
 {background: transparent;
}
#page-message-notificationpreferences .preference-name {
  padding-left: 2em;
}
.checkbox-container .loading-icon {
  display: none;
}
.checkbox-container.loading .loading-icon {
display: inline-block;
}
#page-message-notificationpreferences h4 {
  font-size: 1.2em;
  text-transform: normal;
  color: #393939;
}
.hover-tooltip  {
  display:none;
}
.accesshide {
    position: absolute;
    left: -10000px;
    font-weight: 400;
    font-size: 1em;
}
.preferences-container .preference-table .preference-row .preference-state {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}
.hover-tooltip-container {
    position: relative;
}
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked+.preference-state-status-container {
    background-color: #5cb85c;
}
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked+.preference-state-status-container .on-text {
  display: block
}


.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .on-text {
    display: none;
}
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    background-color: #d9534f;
    color: #fff;
    cursor: pointer;
}
.col-xs-6 {
    float: left;
    width: 40%;
}
.helptooltip img{
  width:100%;
  text-align: center;
  float: none;
}
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked+.preference-state-status-container .off-text {
    display: none;
}
.preference-state .preference-state-status-container  .loading-icon {
  display: none;
}
.preference-state.loading .preference-state-status-container  .loading-icon {
  display: inline-block;
  position: relative; 
  top: -30px;
}
#page-message-notificationpreferences .disabled-message {
  display: none;
}

Outcomes