Customising Software with CSS for beginners

If you are using TutorCruncher then you may have come across the Custom CSS option in settings. CSS is a style sheet language used to describe how a document written in a markup language, such as HTML, is presented.

This is the area of the software where you can add key pieces of code to make the interface look like how you would prefer it and really make it your own. TutorCruncher allows you to do this in many ways.

This post will empower you to get creative with the all the different ways you can design your account.

Where you need to add the custom CSS?

If you are using a website builder like Squarespace or Wix, they will have a section in settings where you can add custom CSS. On TutorCruncher, you can head down to system in the menu options on the left, followed by settings and then scroll down and click on Custom CSS under system customisation.

You'll see that it is mostly blank with a little example of what CSS looks like, along with a note giving a short description of what you can do here:

Edit CSS

CSS allows you to modify the style of TutorCruncher, including colours and fonts. You will need some prior knowledge of CSS and HTML to effectively modify TutorCruncher’s theme, if you need help chat to your developer or contact us via our chat service below.

If you read through this post and still feel like you are not sure on how to edit this section, you can always drop us a message via email or the in app chat and we will be happy to help!

But I am confident that this guide will have you covered for the different ways you would like to make your TutorCruncher account look. Just as an added note, only admins with system permissions can edit and add to the Custom CSS section.

You don't need to be a developer!

Anyone can customise TutorCrunccher at the most basic level, e.g colour and fonts. This step by step guide in this post is going to show you how. By covering some basics of CSS, you'll quickly be able to grasp the concept of styling with code.

Aside from this guide there is so much information online about HTML, CSS and JavaScript that you can quite easily find out about, learn and incorporate into your website.

How it's done, step by step

It's important to understand the breakdown of the text you will be adding to create the customisation of your pages. This image breaks down what each part signifies.

Before we get started it is important to have a rough understanding of what each part of the text will contribute to the changes you would like to make.

1. Open the console

You first need to be in your TutorCruncher account, once you log in, you are taken to your dashboard. This is the perfect view to start with. To now open the console you need to press F12. A quick note here, once you open the console, you will not be able to navigate from that page until you close it. Once you hit F12 then you should see something like the example before.

You can open the console up on any webpage to see the code behind. This is where you can spot the name for the things you would like to edit and change. Don't worry about the long piece of code that shows in the console at this point. I can understand it may look daunting and top secret, like you should not be in there. But after using it a few times, you'll get comfortable!

Fun fact: The console is the best place to spot errors and bugs on a page. It will show you exactly where things are going wrong. Developers will often use this tool to debug their code. Use the selection tool to find the key parts of code to edit

2. Use the selection tool to find the key parts of code to edit

The element selection tool is found in the top left corner of the console, if you hover over it, a short description will appear next to it explaining its purpose.

We are going to use it to one by one select the different parts of the page we want to edit. If you hover around the page you will see how it quickly picks up the different components and gives you all the information about the code and details behind it.

This will be a good time to make a note of all the different element names you would like to change. So that you don't have to keep going back and forth. As explained earlier, once you are in the console, you will not be able to navigate to the other pages through that page.

What you could do is open lots of different tabs, or simply just make a note of the elements on a page, close the console and then navigate to another part of the page, for example Analytics. Then hit F12 again and use the selection tool to check the name of elements on that page that you would like to edit.

Once you've made all your notes on the elements, there is one more thing you should note down. This is the root of those elements, the image below will highlight where this is.

3. Now head to the Settings and select Custom CSS

When you go into the Custom CSS section, you may already see some code added there or there may be none at all. But TutorCruncher will give you a snippet of CSS example code.

Caption:

The comments in red are notes to explain the part of code written under it does.

As you can see the background colour has changed and this is because of this part of the code:

body {
  background: #cae1ea;
}

The colour code may look confusing and you must be wondering how do I figure out the code for the colour that I would like. It's easy, there are a number of colour selecting tools online that developers use to input colour choices into their code. I would recommend W3 Schools Colour Picker as it is very simple and easy to use. Just select a colour you like and it will tell you the code for it. You can then implement that into the different areas of your CSS. You can also visit W3 Font Family for more information about CSS font styles that you can use and you simply just copy and paste them into your Custom CSS section.

4. The layout of your CSS

All the notes you made earlier will not become handy! Enter the root that you copied down earlier at the start of your layout. You put the element name followed by opening { and closing brackets } in the format you see above and then add the colour and fonts you like between them.

Above is an example of code I have created that you can use as an example and try out. You can see the pattern that follows for each section that you want to edit with the name being listed first and the actions within the brackets.

Using these example codes and the two very useful links mentioned mentioned earlier, you will be able to make colourful and creative changes to your pages. If you find this comes naturally to you, then perhaps you can be a future developer!

Making TutorCruncher your own

You can now go ahead and implement the CSS that you have learnt into your TutorCruncher account and make it your own. If you want you can send in your designs to info@tutorcruncher.com and maybe it will be featured in our next update post, along with other new exciting features that are new to TutorCruncher.

Are you new?

If you are new to the world of TutorCruncher, check out this page to see what our software does. If you like what you see, sign up and enjoy the free trial!