Handy Custom CSS Snippets - Appsembler

Handy Custom CSS Snippets

Tahoe Pro users have access to apply
Custom CSS to their sites. If you don’t have access to a design team that knows CSS and can write some for you, here are some snippets of code that you can copy and paste into your site in order to perform some very straightforward functions. 

If you ever want to take Custom CSS any further than these, we strongly recommend working with a visual designer who knows how to use CSS.

Hide the Enroll Button on a course About page

.a--course-about-01__courseware-button-wrapper{    
display:none;
}

Warning Banner

Useful for sandbox sites or general site-wide announcements.

/* Warning Banner */

.window-wrap:before {
    display: block;
    width: 100%;
    background-color: #FFCE33;
    color: #000000;
    font-size: 24px;
    padding: 15px 40px;
    text-align: center;
    content: 'YOU ARE WORKING ON THE SANDBOX SITE';
}

Change the colour of the Completion XBlock

.done_onoffswitch-inner:after { 
     background-colour: #31C256;
}

Adjust size of the left-hand course nav bar

NOTE: This one
doesn’t seem to work just yet…

body.view-in-course .content-wrapper .container .course-wrapper.legacy-nav-enabled {
    grid-template-columns: 10rem 1fr;
}

Remove an account settings section

This should work, provided their account settings page has the same number of sections as mine. If it doesn’t, just adjust the number until you hit the right section. That rule is basically saying “Look for the 4th child with the class name section that is a child of account-settings-tabpanels  and hide it”
.account-settings-tabpanels .section:nth-child(4){
     display: none;
}

Remove ‘Discover New Courses’ header item

This only applies when logged in

.tab-nav-link.discover-new-link {
    display: none !important;
}

Change color of partially correct highlighted response

.choicegroup_partially-correct {
    border: 2px solid #eb840e !important;
}
.status.partially-correct {
     filter: hue-rotate(240deg);
}