dave-foy
10/4/2018 - 6:43 AM
Thinkific Course Player resource boxes
Code to display the nice Video Transcript, Updates, Lesson Links and Lesson Materials boxes.
Add the CSS to Settings > Code & Analytics > Custom CSS: Site Wide (<< ask Thinkific support to add this for you).
Add the HTML to the code view when editing a lesson.
<!--— Video transcript starts —-->
<div class="lesson-resources lesson-resources__downloads">
<p><a href="#" target="_blank">Video Transcript</a></p>
</div>
<!--— Video transcript ends —-->
<!--— Lesson Updates starts —-->
<div class="lesson-updates">
<h2>Updates</h2>
<p>Update content here.</p>
</div>
<!--— Lesson Updates ends —-->
<!--— Lesson Materials starts —-->
<div class="lesson-resources lesson-resources__materials">
<h2>Lesson Materials</h2>
<p><a href="#" target="_blank">NAME OF LINK</a></p>
</div>
<!--— Lesson Materials ends —-->
<!--— Lesson Links starts —-->
<div class="lesson-resources lesson-resources__links">
<h2>Lesson Links</h2>
<p><a href="#" target="_blank">Link Text</a></p>
<p style="font-style: italic; margin-top: -1.5em;">* = affiliate link</p>
</div>
<!--— Lesson Links ends —-->@import 'https://use.fontawesome.com/releases/v5.3.1/css/all.css';
/* TEMPORARY */
.course-player__preview-bar {
display: none;
}
/*--------------------------------------------------------------
1.0 - Global Styles
--------------------------------------------------------------*/
/* Typography */
body {
line-height: 1.5;
}
h1, h2, h3 {
font-weight: 900;
}
.custom-theme .fr-view ul li, .fr-view ul li {
padding-bottom: .5em;
}
/* Colors */
.brand-color {
color: #173231;
}
/*--------------------------------------------------------------
2.0 - Course Player
--------------------------------------------------------------*/
/* Common */
.course-player__course-navigation__header,
.course-player__chapters-list,
.course-player__course-content__panel {
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.06);
}
/* Page/Outer */
.take.course_player_white {
background-color: #f5f5f5; /* Match Thinkific admin setting */
}
.course-player {
margin-top: 1em;
}
._course__container_n1vbpj {
max-width: 1500px;
}
/* Sidebar */
.course-player__course-navigation {
margin: 0 .5em 0 1em;
}
.course-player__course-navigation__header {
background-color: #173231;
border-radius: 4px;
color: #fff;
margin-bottom: 1.5em;
padding: 1.5em 1em 1em;
}
.course-player__course-logo__container {
float: right;
}
.course-player__course-navigation-links {
margin-top: 0 !important;
}
.course-player__course-navigation__header .nav-button {
background-color: rgba(39, 85, 83, 1);
}
.course-player__course-navigation__header .nav-button:hover {
background-color: rgba(39, 85, 83, 0.8);
}
._top-nav__container_t2nzf7 i {
font-size: 1em;
}
.course-player__course-dashboard-link span {
display: none;
}
.course-player__course-dashboard-link.nav-button {
background-color: #3db464;
}
.course-player__course-dashboard-link.nav-button {
background-color: rgba(61, 180, 100, 1);
}
.course-player__course-dashboard-link.nav-button:hover {
background-color: rgba(61, 180, 100, .8);
}
._top-nav__container_t2nzf7 ._link__dashboard_t2nzf7 i {
margin-right: 0;
}
._top-nav__container_t2nzf7 ._link__dashboard_t2nzf7 {
padding-right: 5px;
}
.course-player__course-logo__container {
margin-top: -3px;
width: 50px !important;
}
.course-player__course-title {
font-size: 20px;
margin-top: 1.2em !important;
padding-top: 0 !important;
text-transform: uppercase;
}
._top-nav__container_t2nzf7 ._course-title_t2nzf7 {
margin-bottom: .5em;
}
._top-nav__container_t2nzf7 ._player-navigation_t2nzf7 ._achievements_t2nzf7 ._achievements__pill_t2nzf7 {
background-color: #3db464;
}
._top-nav__container_t2nzf7 ._player-navigation_t2nzf7 li a .course-player__achievements-details--pill {
font-size: 0.9em;
}
.course-player__user-search {
margin-bottom: 1em;
}
._chapters-list_1tqvoe h3 {
font-size: 1.05em;
}
._content__list_d57kmg {
font-size: .95em;
}
._chapter__title_d57kmg div {
font-weight: 900;
color: #173231;
}
.course-player__content-item.active {
background-color: #E1E3E4;
font-weight: bold;
}
._details__container_nffvg8,
.course-player__content-details {
display: none !important;
}
._content__item_nffvg8 {
background-color: #fafafa;
}
._content__item_nffvg8.active {
background-color: #E1E3E4;
border-bottom: none;
}
._content__item_nffvg8._active_j5bjgt,
._content__item_nffvg8.active {
box-shadow: none;
}
._chapter__title_d57kmg.ui-accordion-header-active div {
color: #39A85D;
}
._course-footer_t2nzf7 {
color: #E1E3E4;
margin-top: 1.5em;
}
._course-footer_t2nzf7:hover {
color: #275553;
}
/* Main column */
.course-player__course-content__panel {
margin: 0 1em 0 .5em;
}
.course-player__course-content__panel a {
color: #3db464;
font-weight: bold;
text-decoration: none;
}
.course-player__course-content__panel h3 {
font-size: 1em;
}
.course-player__course-content__panel a:hover {
text-decoration: underline;
}
._content_1vr68b {
margin: 0 0 5em;
}
@media only screen and (min-width: 900px) {
._content_1vr68b {
margin: 0 25px 5em;
}
}
._fullscreen_86to91 i, ._menu-toggle_86to91 i {
font-size: 1em;
}
._chapter__container_1tqvoe:last-of-type {
border-bottom: none;
}
._top-navigation_n1vbpj {
background-color: #fff;
}
._container_86to91 > div.course-player__top-nav__content {
display: none;
}
.course-player__course__content {
color: #173231;
}
.course-player__course__content p {
font-size: 1em;
}
.course-player__course__content p:first-child {
margin-top: 0;
}
.course-player__course__content h1 {
font-size: 1.7em;
margin-top: 1.2em;
}
.course-player__course__content h2 {
font-size: 1.1em;
margin: 2em 0 0.5em;
}
.alignright {
float: right !important;
margin: 0 0 1em 1em !important;
}
.fr-view blockquote {
padding-left: 1em;
}
.lesson-resources {
background-color: #f5f5f5;
margin-top: 1.5em;
margin-bottom: 2em;
}
.lesson-resources + .lesson-resources {
margin-top: -1em;
}
.course-player__course__content .lesson-resources h2,
.course-player__course__content .lesson-updates h2,
.elementor-update h2 {
background-color: #173231;
color: #fff;
font-size: 1em;
margin: 0;
padding: 16px 20px;
text-transform: uppercase;
}
.lesson-resources p {
display: flex;
flex-wrap: wrap;
padding: 5px 0 10px;
}
.lesson-resources a {
flex: 0 0 50%;
padding: 0 16px 12px 0;
}
.course-player__course__content .lesson-resources p {
font-size: .95em;
margin-left: 20px;
margin-right: 20px;
}
.lesson-resources.lesson-resources__downloads {
background-color: #fff;
font-size: 0.9em;
margin: 0;
}
.lesson-resources.lesson-resources__downloads p {
margin: 0;
}
.lesson-updates {
background-color: #ffffe8;
border: 1px solid #F2EE00;
overflow: hidden;
margin-bottom: 2em;
}
.lesson-updates h2, .lesson-updates p, .lesson-updates ul,
.lesson-updates h3 {
margin-left: 20px;
margin-right: 20px;
}
.course-player__course__content .lesson-updates h2 {
background-color: #F2EE00;
color: #173231;
}
.course-player__course__content .lesson-resources__updates {
color: #111;
}
.lesson-resources h2::before,
.lesson-updates h2::before,
.lesson-resources a::before,
.course-player__content-next-btn::before,
.course-player__content-incomplete-btn::before {
display: inline-block;
font: normal normal normal 14px/1 'Font Awesome 5 Free';
font-weight: 900;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0,0);
font-size: 16px;
margin-right: 10px;
}
.lesson-resources a::before {
font-size: .95em;
}
.lesson-updates h2::before {
content: "\f06a";
}
.lesson-resources.lesson-resources__materials h2::before {
content: "\f15c";
}
.lesson-resources.lesson-resources__links h2::before {
content: "\f0c1";
}
.lesson-resources.lesson-resources__links a:before {
content: "\f35d";
}
.lesson-resources.lesson-resources__materials a:before,
.lesson-resources.lesson-resources__downloads a:before {
content: "\f019";
}
.lesson-resources.lesson-resources__downloads a:before {
margin-right: 5px;
}
.elementor-update {
background-color: rgba(206, 51, 98, 0.05);
padding-bottom: 10px;
margin-bottom: 1.5em;
}
.elementor-update h2 {
background-color: rgba(206, 51, 98, 1);
color: #fff;
line-height: 25px;
padding-top: 12px;
padding-bottom: 12px;
}
.elementor-update h2 img {
width: 30px;
height: 30px;
}
.elementor-update p {
color: #090204;
margin-left: 20px;
margin-right: 20px;
}
.elementor-update a {
color: #8B2242 !important;
}
._container_apmbd3 {
background-color: #173231;
border-top: none;
}
._actions_apmbd3 button.course-player__content-next-btn {
font-size: .85em;
font-weight: 900;
font-weight: bold;
padding: 7px 14px;
}
._actions_apmbd3 button.course-player__content-next-btn:hover {
background-color: #37A35B;
}
.course-player__content-next-btn::before {
content: "\f058";
margin-right: 5px;
position: relative;
top: 1px;
}
._actions_apmbd3 button.course-player__content-incomplete-btn {
background-color: rgba(48, 105, 103, 1);
color: #fff;
padding: 5px 7px 7px;
}
._actions_apmbd3 button.course-player__content-incomplete-btn:hover {
background-color: rgba(48, 105, 103, .8);
}
.course-player__content-incomplete-btn::before {
content: "\f057";
margin-right: 5px;
position: relative;
top: 2px;
}@import 'https://use.fontawesome.com/releases/v5.3.1/css/all.css';
/* TEMPORARY */
.course-player__preview-bar {
display: none;
}
/*--------------------------------------------------------------
1.0 - Global Styles
--------------------------------------------------------------*/
/* Typography */
body {
line-height: 1.5;
}
h1, h2, h3 {
font-weight: 900;
}
.custom-theme .fr-view ul li, .fr-view ul li {
padding-bottom: .5em;
}
/* Colors */
.brand-color {
color: #2c2747;
}
/*--------------------------------------------------------------
2.0 - Course Player
--------------------------------------------------------------*/
/* Common */
.course-player__course-navigation__header,
.course-player__chapters-list,
.course-player__course-content__panel {
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.06);
}
/* Page/Outer */
.take.course_player_white {
background-color: #f5f5f5; /* Match Thinkific admin setting */
}
.course-player {
margin-top: 1em;
}
._course__container_n1vbpj {
max-width: 1500px;
}
/* Sidebar */
.course-player__course-navigation {
margin: 0 .5em 0 1em;
}
.course-player__course-navigation__header {
background-color: #2B294E;
border-radius: 4px;
color: #fff;
margin-bottom: 1.5em;
padding: 1.5em 1em 1em;
}
.course-player__course-logo__container {
float: right;
}
.course-player__course-navigation-links {
margin-top: 0 !important;
}
.course-player__course-navigation__header .nav-button {
background-color: rgba(69, 62, 106, 1);
}
.course-player__course-navigation__header .nav-button:hover {
background-color: rgba(69, 62, 106, 0.8);
}
._top-nav__container_t2nzf7 i {
font-size: 1em;
}
.course-player__course-dashboard-link span {
display: none;
}
.course-player__course-dashboard-link.nav-button {
background-color: #CE3362;
}
.course-player__course-dashboard-link.nav-button {
background-color: rgba(206, 51, 98, 1);
}
.course-player__course-dashboard-link.nav-button:hover {
background-color: rgba(206, 51, 98, .8);
}
._top-nav__container_t2nzf7 ._link__dashboard_t2nzf7 i {
margin-right: 0;
}
._top-nav__container_t2nzf7 ._link__dashboard_t2nzf7 {
padding-right: 5px;
}
.course-player__course-logo__container {
margin-top: -3px;
width: 32px !important;
}
.course-player__course-title {
font-size: 20px;
margin-top: 1.2em !important;
padding-top: 0 !important;
text-transform: uppercase;
}
._top-nav__container_t2nzf7 ._course-title_t2nzf7 {
margin-bottom: .5em;
}
._top-nav__container_t2nzf7 ._player-navigation_t2nzf7 ._achievements_t2nzf7 ._achievements__pill_t2nzf7 {
background-color: #CE3362;
}
._top-nav__container_t2nzf7 ._player-navigation_t2nzf7 li a .course-player__achievements-details--pill {
font-size: 0.9em;
}
.course-player__user-search {
margin-bottom: 1em;
}
._chapters-list_1tqvoe h3 {
font-size: 1.05em;
}
._content__list_d57kmg {
font-size: .95em;
}
._chapter__title_d57kmg div {
font-weight: 900;
color: #2c2747;
}
.course-player__content-item.active {
background-color: #E1E3E4;
font-weight: bold;
}
._details__container_nffvg8,
.course-player__content-details {
display: none !important;
}
._content__item_nffvg8 {
background-color: #fafafa;
}
._content__item_nffvg8.active {
background-color: #E1E3E4;
border-bottom: none;
}
._content__item_nffvg8._active_j5bjgt,
._content__item_nffvg8.active {
box-shadow: none;
}
._chapter__title_d57kmg.ui-accordion-header-active div {
color: #CE3362;
}
._course-footer_t2nzf7 {
color: #E1E3E4;
margin-top: 1.5em;
}
._course-footer_t2nzf7:hover {
color: #275553;
}
._progress-indicator_d57kmg,
._status__container_nffvg8 i {
color: #CE3362;
}
._container_t2nzf7 a:active, ._container_t2nzf7 a:hover, ._container_t2nzf7 a:link, ._container_t2nzf7 a:visited {
color: #2c2747;
}
._container_t2nzf7 .course-player__course-navigation__header a:link,
._container_t2nzf7 .course-player__course-navigation__header a:visited,
._container_t2nzf7 .course-player__course-navigation__header a:hover,
._container_t2nzf7 .course-player__course-navigation__header a:active {
color: #fff;
}
/* Main column */
.course-player__course-content__panel {
margin: 0 1em 0 .5em;
}
.course-player__course-content__panel a {
color: #CE3362;
font-weight: bold;
text-decoration: none;
}
.course-player__course-content__panel .lesson-updates a {
color: #2c2747;
text-decoration: underline;
}
.course-player__course-content__panel h3 {
font-size: 1em;
}
.course-player__course-content__panel a:hover {
text-decoration: underline;
}
._content_1vr68b {
margin: 0 0 5em;
}
@media only screen and (min-width: 900px) {
._content_1vr68b {
margin: 0 25px 5em;
}
}
._fullscreen_86to91 i, ._menu-toggle_86to91 i {
font-size: 1em;
}
._chapter__container_1tqvoe:last-of-type {
border-bottom: none;
}
._top-navigation_n1vbpj {
background-color: #fff;
}
._container_86to91 > div.course-player__top-nav__content {
display: none;
}
.course-player__course__content {
color: #2e2e2e;
}
.course-player__course__content p {
font-size: 1em;
}
.course-player__course__content p:first-child {
margin-top: 0;
}
.course-player__course__content h1 {
color: #2c2747;
font-size: 1.7em;
margin-top: 1.2em;
}
.course-player__course__content h2 {
font-size: 1.1em;
margin: 2em 0 0.5em;
}
.alignright {
float: right !important;
margin: 0 0 1em 1em !important;
}
.fr-view blockquote {
padding-left: 1em;
}
.fr-file:after {
content: "" !important;
}
.lesson-resources {
background-color: #f5f5f5;
margin-top: 1.5em;
margin-bottom: 2em;
}
.lesson-resources + .lesson-resources {
margin-top: -1em;
}
.course-player__course__content .lesson-resources h2,
.course-player__course__content .lesson-updates h2,
.elementor-update h2 {
background-color: #2c2747;
color: #fff;
font-size: 1em;
margin: 0;
padding: 16px 20px;
text-transform: uppercase;
}
.lesson-resources p {
display: flex;
flex-wrap: wrap;
padding: 5px 0 10px;
}
.lesson-resources a {
flex: 0 0 50%;
padding: 0 16px 12px 0;
}
.course-player__course__content .lesson-resources p,
.course-player__course__content .lesson-resources h3 {
font-size: .95em;
margin-left: 20px;
margin-right: 20px;
}
.course-player__course__content .lesson-resources h3 {
border-bottom: 1px solid #ddd;
color: #2c2747;
font-size: 1em;
margin-bottom: -.5em;
padding-bottom: .5em;
}
.course-player__course__content .lesson-resources p + h3 {
margin-top: -1em;
}
.lesson-resources.lesson-resources__downloads {
background-color: #fff;
font-size: 0.9em;
margin: 0;
}
.lesson-resources.lesson-resources__downloads p {
margin: 0;
}
.lesson-updates {
background-color: #fffbe5;
border: 1px solid #FFE74C;
overflow: hidden;
margin-bottom: 2em;
}
.lesson-updates h2, .lesson-updates p, .lesson-updates ul,
.lesson-updates h3 {
margin-left: 20px;
margin-right: 20px;
}
.course-player__course__content .lesson-updates h2 {
background-color: #FFE74C;
color: #2c2747;
}
.course-player__course__content .lesson-resources__updates {
color: #111;
}
.lesson-resources h2::before,
.lesson-updates h2::before,
.lesson-resources a::before,
.course-player__content-next-btn::before,
.course-player__content-incomplete-btn::before {
display: inline-block;
font: normal normal normal 14px/1 'Font Awesome 5 Free';
font-weight: 900;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0,0);
font-size: 16px;
margin-right: 10px;
}
.lesson-resources a::before {
font-size: .95em;
}
.lesson-updates h2::before {
content: "\f06a";
}
.lesson-resources.lesson-resources__materials h2::before {
content: "\f15c";
}
.lesson-resources.lesson-resources__links h2::before {
content: "\f0c1";
}
.lesson-resources.lesson-resources__links a:before {
content: "\f35d";
}
.lesson-resources.lesson-resources__materials a:before,
.lesson-resources.lesson-resources__downloads a:before {
content: "\f019";
}
.lesson-resources.lesson-resources__downloads a:before {
margin-right: 5px;
}
.elementor-update {
background-color: rgba(206, 51, 98, 0.05);
padding-bottom: 10px;
margin-bottom: 1.5em;
}
.elementor-update h2 {
background-color: rgba(206, 51, 98, 1);
color: #fff;
line-height: 25px;
padding-top: 12px;
padding-bottom: 12px;
}
.elementor-update h2 img {
width: 30px;
height: 30px;
}
.elementor-update p {
color: #090204;
margin-left: 20px;
margin-right: 20px;
}
.elementor-update a {
color: #8B2242 !important;
}
._container_apmbd3 {
background-color: #2c2747;
border-top: none;
}
._actions_apmbd3 button {
background-color: #CE3362;
}
._actions_apmbd3 button.course-player__content-next-btn {
font-size: .85em;
font-weight: 900;
font-weight: bold;
padding: 7px 14px;
}
._actions_apmbd3 button.course-player__content-next-btn:hover {
background-color: #CE3362;
}
.course-player__content-next-btn::before {
content: "\f058";
margin-right: 5px;
position: relative;
top: 1px;
}
._actions_apmbd3 button.course-player__content-incomplete-btn {
background-color: rgba(48, 105, 103, 1);
color: #fff;
padding: 5px 7px 7px;
}
._actions_apmbd3 button.course-player__content-incomplete-btn:hover {
background-color: rgba(48, 105, 103, .8);
}
.course-player__content-incomplete-btn::before {
content: "\f057";
margin-right: 5px;
position: relative;
top: 2px;
}