CSS (Cascading Style Sheets)

1. From your homepage, select Site > Site Builder.
2. In your left menu, select Custom Code.
3. Here is where, line by line, you can add your external custom code.
4. Select the eye icon to preview changes you are making to your site design.
5. In the upper right of the page, click Publish when you're ready for your edits to go live. 
   

Applying CSS to widgets on a page offers several benefits, contributing to both the aesthetics and functionality of your site for your users. Most widgets in your Site Builder, allow for CSS to be applied.

There are a few methods to add CSS to widgets in Site Builder:

• Reference CSS classes directly in the CSS field in each widget, making sure to separate classes by a space in the field. Usually at the bottom of the widget editing options. Please note, not all widgets have a CSS field.
• If the widget has a WYSIWYG editor, you can get more granular by selecting the HTML button and work with the code editor in the WYSIWYG editor. Please note, not all widgets have a WYSIWYG editor.
• Use the Custom HTML widget to build a widget using CSS.

Follow these steps:

1. From your homepage, select Site > Site Builder.
2. In the left menu, select Layouts (or Pages if you are building a custom layout from scratch).
3. Select the layout in which you'd like to alter.
4. Click Actions > Edit (or Actions > Design on the Custom Page you'd like to alter.)
5. Click the pencil icon to edit the widget on the page.
6. Scroll down, inside the widget, to find the CSS field and add the CSS class.
   
7. To use the WYSIWYG (text box editor) within the widget, select widget from menu of widgets in the left menu and select the <> icon to begin.
   
8. To add a Custom HTML widget, select the widget option from menu of widgets in the left menu and it will get added to the bottom of your layout.

We are providing a list of commonly used custom code snippets for your convenience. However, please be advised that using this code is at your own risk. Thought Industries Support cannot and will not provide assistance with questions or tickets related to CSS issues.

It's also important to ensure that any code you add to your platform is compatible with the monthly feature releases and enhancements we implement. Regular updates are essential to keep your platform running smoothly and efficiently, so please verify that your custom code integrates well with these updates.

Frequently Applied CSS

1. Hide 'gift purchase' Button on the Detail Page:
   .widget--course-purchase .btn--secondary{display:none;} OR .enroll__secondary-actions .icon-gift {display:none;}
2. Hide Section Numbers:
   .syllabus__section-title-index {display:none;}
3. Hide Email and Print Icon in Articles:
   .article-header i {display:none;}
4. Hide Tags in Article and Video content:
   .article-sidebar__custom-fields {display:none;}
5. Hide the "complete" overlay (with a green check mark) on catalog widget tiles:
   .catalog-grid-item__completed-container {display:none;}
6. Hide testimonial box at the end of a course:
   .sidebar__testimonial {display:none;}
7. Hide Cart:
   #cart-button {display:none;}
8. Remove the Correct/Incorrect Text and Icon in a Quiz Response:
   .choice__icon, .choice__review, .choice__icon i, .choice__review i {display:none;}
9. Center images in the WYSIWYG Text editor:
   <img src="URLGoeshere"style="margin-left: auto; margin-right: auto; display: block, width:50%"
10. Hide Notes option in course sidebar for learners:
    a[href$="notes"] {display:none;}