Yes, the pre-2018 legacy circle left themes do not use color variables so you will need to add custom CSS to preserve those colors in the new sidebar upgrade.
This article addresses the following pre-2018 themes:
- kl_circle_left_1
- kl_circle_left_2
- kl_circle_left_3
It's important to distinguish these pre-2018 themes with the newer legacy themes, which use color variables and upgrade just fine:
- kl_circle_left
- kl_circle_left variation_2
By default, the pre-2018 themes upgrade to use the color variables, which may be different from what your institution hard-coded as the colors for those themes. If this is the case, and it is important enough to you to preserve those colors, you can add custom CSS to your Canvas theme in order to set the specific colors to which these themes will upgrade.
/*DesignPLUS Pre-2018 Circle Left Theme Colors START */
/*kl_circle_left_1 upgraded colors*/
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-heading, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-heading {
background: #c2c9ce;
color: #000;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-header-pre, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-header-pre {
background: #0f2439;
color: #fff;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-header-subtitle, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-header-subtitle {
border-bottom: 3px solid #c2c9ce;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-header-description, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-header .dp-header-description {
border-bottom: 3px solid #c2c9ce;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-link-grid.dp-link-grid-circle-right.variation-1 > ul > li a:first-child, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-link-grid.dp-link-grid-circle-right.variation-1 > ul > li a:first-child {
background: #0f2439;
color: #fff;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-link-grid.dp-link-grid-circle-right.variation-1 > ul > li a:first-child i:first-child, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-1 .dp-link-grid.dp-link-grid-circle-right.variation-1 > ul > li a:first-child i:first-child {
background: #c2c9ce;
color: #000;
}
/*kl_circle_left_2 upgraded colors*/
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-heading, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-heading {
background: #0f2439;
color: #fff;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-header-pre, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-header-pre {
background: #bfa793;
color: #000;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-header-subtitle, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-header-subtitle {
border-bottom: 3px solid #bfa793;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-header-description, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-header .dp-header-description {
border-bottom: 3px solid #bfa793;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-link-grid.dp-link-grid-circle-right.variation-2-1.variation-2 > ul > li a:first-child, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-link-grid.dp-link-grid-circle-right.variation-2-1.variation-2 > ul > li a:first-child {
background: #bfa793;
color: #000;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-link-grid.dp-link-grid-circle-right.variation-2-1.variation-2 > ul > li a:first-child i:first-child, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-2-1.variation-2 .dp-link-grid.dp-link-grid-circle-right.variation-2-1.variation-2 > ul > li a:first-child i:first-child {
background: #0f2439;
color: #fff;
}
/*kl_circle_left_3 upgraded colors*/
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-heading, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-heading {
background: #0f2439;
color: #fff;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-header-pre, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-header-pre {
background: #c2c9ce;
color: #000;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-header-subtitle, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-header-subtitle {
border-bottom: 3px solid #0f2439;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-header-description, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-header .dp-header-description {
border-bottom: 3px solid #0f2439;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-link-grid.dp-link-grid-circle-right.variation-3 > ul > li a:first-child, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-link-grid.dp-link-grid-circle-right.variation-3 > ul > li a:first-child {
background: #c2c9ce;
color: #000;
}
.dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-link-grid.dp-link-grid-circle-right.variation-3 > ul > li a:first-child i:first-child, #dp-wrapper.dp-circle-left.dp-legacy-circle-left.variation-3 .dp-link-grid.dp-link-grid-circle-right.variation-3 > ul > li a:first-child i:first-child {
background: #0f2439;
color: #fff;
}
/*DesignPLUS Pre-2018 Circle Left Theme Colors END */