Custom Coding on TutorCruncher

Learn how to customise the CSS & JavaScript of your company's site

Sam Linge avatar
Written by Sam Linge
Updated over a week ago

How do I customise the style of my company's site?

Navigate to System > Settings > System Customization > Custom CSS. You will see a CSS editor containing several of the main classes used on TutorCruncher pages. Once you make your desired changes, delete the /* on the first line of the editor and click 'Save'. Your site's style should automatically change according to your custom CSS

Here is an example of a custom CSS template that you can import & edit into your branch settings:


@import url('....');

/* General */

body {
background: #FFF;
font-family: 'Inter', sans-serif;
font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Titillium Web', sans-serif;
font-weight: 800;
}

.tc-colour, .bg-primary, .navbar .user-photo-button, #headline-figures, #sidebar a.menu-item.active {
background-color: blue !important;
}

.btn-primary, .badge-primary, .btn.action-btn, .top-tips .title-label {
background-color: dodgerblue !important;
border-color: dodgerblue !important;
}

.btn-secondary {
background-color: white !important;
border-color: dodgerblue !important;
color: dodgerblue !important;
}

.btn-success {
background-color: red !important;
border-color: red !important;
}

.btn.btn-danger {
background-color: white !important;
border-color: red !important;
color: red !important;
}

a, a:hover,
.subtle-link,
.card-custom > .card-header .card-title a,
.card-custom > .card-body .card-title a,
.btn.btn-link {
color: dodgerblue;
}

How do I enter custom JavaScript?

PLEASE NOTE: We don't allow any requests to third party sites from within secure.tutorcruncher.com (or your custom domain if you are using one). This is a security step we have taken in line with OWASP recommended policies, and will not change. If you attempt to do a request to a third party URL, you will get an error in your console:

Refused to connect to 'https://foobar.com/' because it violates the following Content Security Policy

You can add your own custom JavaScript to be run for your company's pages within TutorCruncher. Simply navigate to System > Settings > System Customization > Custom JavaScript and enter your code there.

Please note that all JavaScript has to be approved by the TutorCruncher team before it will go live.

You can submit your code for review by clicking the "Send for Review" button below. Once that happens we will take up to 2 business days to approve it, or get in contact with you with any issues.

In order to get your code approved as fast as possible, please consider the following points:

  • Format your code so it's easy to read. We recommend using a code editor like VSCode to help you.

  • Please don't request reviews for your code often. We'd like to continue to offer this service for free but won't be able to if we have to review code daily.

  • Your code must be bug-free (there should be no errors in the console) and must not crash the browser.

  • GET Requests made to TutorCruncher will be reviewed on a case-by-case basis. POST requests are not allowed.

  • The user's experience must not be adversely affected.

  • We enforce a Content Security Policy to stop data being loaded or sent to or from any other site. If you have another site that you wish to add to our exemption list, get in contact. We can only add exemptions for sites we trust, such as Facebook and Google. We will not do this for customers own sites as it adds a security risk.

We reserve the right to disable this feature for any one company at any time.

You can test your unapproved JavaScript in action at any time by switching to your demo branch.

Did this answer your question?