Chapter 1:  Introduction

If you’ve spent much time at all working with 3D printing technology, you’ve almost certainly heard of Cura. Cura is 3D printing host software created by David Braam. The software is currently maintained by Ultimaker who hired David to continue developing the software. The purpose of Cura, and all other 3D printing host software, is to take a 3D model and turn it into a set of directions that a 3D printer can use to build that model.

Because the software is completely open source, all the files used to build Cura are available for download. This guide will teach you how to install Cura and modify the source files to customize the software, specifically Cura’s graphical user interface (GUI), for your own purposes. Whether you are a Maker looking to tailor the Cura experience to your own preferences, or a 3D printing company wanting to build a customized experience for your customers (see Cura Lulzbot Edition), this guide will walk you through the most common modifications you will want to make to the software.

This guide will cover four ways to customize Cura:

• Customizing the splash screen
• Customizing icons
• Customizing colors
• Customizing layout

Chapter 2:  Getting Started

Customizing Cura is not too difficult; it is certainly not as complicated as customizing AstroPrint, but it will require us to use a number of different software tools, which are listed below. As you install each tool, I would encourage you to do at least some preliminary reading about what each software package does and how each is used. We will not be using anything too exotic in this guide though.

Required Software

We will need a number of tools to customize Cura. We will be using the software listed below at various times during the process of customizing Cura.

Note that in this guide, I am using Windows 10. The software listed below is also available for OS X and Linux, plus the process of customizing Cura should be roughly the same for each operating system.

Install Git Client

Git is an extremely popular type of version control software that is ubiquitous in the open source community. Git basically stores a snapshot of a project throughout development which provides a simple and effective way of tracking changes. Git will allow us to make a copy of the Cura source code (called a Fork, more on this later) so we can freely experiment with the software without affecting the original version. Furthermore, Git will make it easy for us to comply with the AGPLv3 license under which Cura is released, specifically the requirements to share our modified code, attribute the source, state changes to the code, and include install instructions. The Git Downloads page has a version of the software for Windows, as well as other operating systems; go to the downloads page and install the Git client.

Install Atom (or other text editor)

Much of the Cura source code is written in Python. We will need a text editor capable of applying syntax highlighting to Python code. There are many, many different text editors you could use and the choice boils down to your preferences. In this guide I will be using Atom by GitHub. Atom is available for all of the popular operating systems, including Windows. I like Atom because it is free, and because it has a simple but very useful package management solution.

Install Adobe Photoshop (or other image editor)

We will be modifying a few images as part of the Cura customization process. To do this we will need an image editor. You have almost certainly heard of Adobe Photoshop, one of the most powerful and most well-known image editing tools available. However, you definitely do not need all of the power Photoshop provides for this project. You can use any image editor capable of working with .png files with transparency. A good free, web-based alternative to Photoshop that will work well for this project is Autodesk Pixlr.

Install Adobe Illustrator (or other vector graphics editor)

In addition to the .png images we will be customizing with Adobe Photoshop, the Cura source files also contain many vector images for the icons, which are in .svg format. We will need a vector graphics editing program to customize these icons. Adobe Illustrator is one of the best available. However, like with Photoshop, all Adobe software does come with a fairly high price tag and there are some free alternatives to using Illustrator. One free vector editor you could consider is Inkscape.

Chapter 3:  Install Cura

Download Cura 2.1

Now that we have all the software we will need to make modifications to the Cura source files, we need to install Cura so we will have files to work with. So, head over to the Cura download page on the Ultimaker website. Download the installer for Cura version 2.1.0 or higher.

Install the Software

After the Cura installer finishes downloading, we will need to use it. However, before you run through the process too fast, we are going to install Cura in a slightly different way than you may have done with Cura or other software in the past.

Throughout the process of customizing Cura, we will be using Git to track the changes we make to the software and also to comply with the AGPLv3 license under which Cura is published. On Windows, if you use the default installation settings, Cura will be installed under C:\Program Files\Cura 2.1. This is normally just fine except that for our purposes, it will cause a problem for using Git. Unless you want to get fancy with the command line, access to files under C:\Program Files\ is denied for Git. With Cura installed in its default directory, we will not be able to use Git for this project.

Therefore, we will install Cura 2.1 into a different directory. This will make no difference for running the program; you can still launch Cura from the start menu or a desktop shortcut.

To install Cura into a directory Git can access, we simply need to change the default directory during the installation process. The third step of the installation process (on Windows) will ask you to “Choose Install Location.” You should see that, by default, C:\Program Files\Cura 2.1 is populated as the install destination. Click the Browse button next to the destination field and select the folder where you want your Cura files to go.

Choose a directory in which to install Cura.

If you navigate to the directory you just selected, you will find all of the files for Cura. We will be modifying these files to customize Cura.

Set up Git

With Cura installed into a directory that Git can access, the next step is to set up Git. Start Git Bash and navigate to the location where you installed Cura using the cd command (if you’ve never used Git before, you will need to do a little bit of work to set up Git itself first, read Git’s Getting Started documentation for details). Then, cd one more time to navigate inside the Cura 2.1 directory.

Now use the git init command to initialize a Git repository for the project. Git will now keep track of all the changes we make to the Cura 2.1 source files. At various points throughout the rest of this guide, we will commit changes we make to the Git repository so we can document our development process and revert files if it becomes necessary.

Initialize the Git repository to track changes to the Cura files.

At any point we can create a record of our changes, which is essentially a snapshot of the Cura files at a particular point in time. We will generally record, or commit, our changes each time we make significant changes to the software.

Create an Initial Commit to the Git Repository

At this point, we have, in fact, already made a major change to all of Cura’s files by installing them on our computer. Therefore, we will do an initial commit right away so that we have a snapshot of the original versions of all the Cura files. If it ever becomes necessary or desirable, we can roll back the Cura source files to a previous point in our development process.

First we will add all of the Cura files to a staging index that will let Git know we want to track changes made to those files. Start by using the command git status to view all of the files that Git has detected have changed since the previous commit. Since we have yet to do our first commit, this will be every single file in the Cura 2.1 directory.

Using the git status command shows all the files that have changed since the last commit. In this case, that is all the files.

The git status command also gives us a clue to our next command. We could use the command git add <file> for each of the Cura 2.1 source files to let Git know we will be tracking changes for each file. However, this would take a long time so we will use a shortcut command, git add --all to add all of the files displayed from the git status command all at once.

Use the git add –all command to quickly add all of the Cura 2.1 files to Git’s index.

When you use the git add --all command for this many files, you will get a whole bunch of text filling up the Git bash window. However, if you use git status once again, you will see that this time all of the Cura 2.1 files are being tracked by Git. Git status shows what kind of change was made to each file since the previous commit. In this case, again because we have no prior commits, every file is listed as a new file.

Using git status again shows that all of the Cura 2.1 files are being tracked by Git.

Finally, we will commit all of these files to the Git repository. We will also include a short message with the commit so that, when we look into the repository later, it is clear what changes were made to each file. Use the git commit -m "<message>" to commit all of the green files listed to the repository. The message you enter will be displayed when you look back on all the commits done for the project, which you can do using the git log command.

Use git commit -m “message” to create a new commit for all the files added to the index.

Chapter 4:  Customize the Splash Screen

Alright, we’ve done all of our preliminary setup. We have Cura 2.1 installed, all the software we will need to make changes to the Cura source files installed, and we’ve initialized the Git repository we will be using to track the customization we make to the software. Now we are ready to start modifying Cura.

When you first launch Cura, an image displays in the center of the screen for a few seconds while the software loads. This is the first visual a user sees when opening Cura. In this chapter we will be modifying this splash screen so that, when Cura starts, a custom image displays identifying the software as our own customized version of Cura.

This is the original Cura splash screen.

We will be replacing this splash screen image with a custom version.

Create A New Splash Screen Image

Replacing the splash screen itself is easy. The splash screen is simply an image stored in the Cura install directory. The image is called cura.png and is located at [Cura install directory]\Cura 2.1\resources\images. Using your favorite image editor, change the image to anything you like. Your new splash screen image does not need to retain the same dimensions as the original. Feel free to be as creative as you like. Below is the splash screen image I created; it features 3DBenchy, a model used to test, calibrate, and tune 3D printers.

My custom Cura splash screen.

The file format for the splash screen image is .png and it does support full transparency. Notice that my custom splash screen has rounded corners with the areas outside transparent. You can use the transparency support to create subtle effects like this one, or you could get really artistic and do something like the image below.

The splash screen image supports transparency.

One note about the splash screen image is that, although you can make it any size you wish, if you make the image too large, it will not fit onto the screen properly. You can test your new splash screen image simply by opening Cura 2.1.

Commit the Changes to your Git Repository

Since changing the splash screen is a significant change, we will commit the changes we’ve made to the Git repository. This way we have a log to track our development process and it also gives us a convenient way to roll back the splash screen image to a previous version if we wish. We will follow the same procedure as we did for our initial commit.

Using the git status command will show that Git detects that we’ve made changes to the cura.png splash screen image. We can use git add --all to quickly add the file to Git’s index without having to type the full path for the file.

Use git status and git add to track changes to view and track changes to the splash screen image.

Finally, use git commit -m "<message>" to commit the changes we’ve made to the splash screen image to the Git repository. Afterwords, you can use git log to see the commits we’ve made thus far.

Use git commit -m “” to log our changes to the Git repository.

Chapter 5:  Customize Icons

Now that we’ve customized the splash screen, we can begin customizing the Cura software itself. The first thing we will do is customize the icons used throughout the software. There are a total of 56 icons used in various places in the Cura 2.1 user interface. All of these icons can be found in the same location in the Cura installation directory:  [Cura install directory]\Cura 2.1\resources\themes\cura\icons.

Downloading Replacement Icons

The icons are in SVG format, which is a vector graphics format. There are two ways we can modify the icons. The first option is to obtain replacement icons from an online icon vendor. I would highly recommend Iconfinder as a source from which to download your replacement icons. Iconfinder has a great selection of icons in many different styles to suite the design aesthetic of your custom version of Cura. Plus, Iconfinder is a reputable source for icons and you will not have to worry about malware being downloaded along with your icons.

Replacing the vanilla Cura icons with ones you download from Iconfinder is easy. Simply locate an icon you like on Iconfinder and purchase/download the icon. Rename the icon so that its name matches the name of the icon you will be replacing. Then, just copy the icon into the [Cura install directory]\Cura 2.1\resources\themes\cura\icons directory, overwriting the existing icon. To make it easier to identify which icon is which in the icons directory, since you will not have thumbnails available for SVG files, I’ve created a table below with each icon and the name of the file.

Cura Icon Table

Icon	File Name	Icon	File Name	Icon	File Name
	application.svg		arrow_bottom.svg		arrow_left.svg
	arrow_right.svg		arrow_top.svg		logo.svg
	basic.svg		category_adhesion.svg	[invalid file]	category_blackmagic.svg
	category_cool.svg		category_dual.svg		category_fixes.svg
	category_infill.svg		category_layer_height.svg		category_machine.svg
	category_material.svg		category_shell.svg		category_shield.svg
	category_speed.svg		category_support.svg		category_travel.svg
	category_unknown.svg		check.svg		cross1.svg
	cross2.svg		dense.svg		dot.svg
	hollow.svg		load.svg		mirror.svg
	notice.svg		open.svg		pencil.svg
	plugin.svg		plus.svg		print_time.svg
	printsetup.svg		quick.svg		reset.svg
	rotate.svg		rotate_layflat.svg		rotate_reset.svg
	save.svg		save_sd.svg		scale.svg
	scale_max.svg		scale_reset.svg		setting_per_object.svg
	settings.svg		solid.svg		sparse.svg
	ulti.svg		view_layer.svg		view_normal.svg
	view_xray.svg		viewmode.svg		warning.svg

Creating Custom Icons

The second option for customizing the icons is to modify the icons using Adobe Illustrator, or another vector graphics program. You have almost infinite flexibility in the way you choose to customize the icons for your customized version of Cura.

Also note that you should try not to be too concerned about how well the default color scheme pairs with your custom icons; in the next section we will be adjusting all of the colors used throughout the Cura software. For now, you could skip to the next section, adjust colors, and return to modify the icons, or you could use your imagination when picturing how your custom icons will work with the color scheme you will set up later.

More than likely, you will actually be using a combination technique of downloading icons from Iconfinder and then adjusting them to fit your custom Cura design. For example, I’ve never really liked the hourglass-looking icon Cura uses for its model manipulation controls in the upper-left corner of the screen. So, I used an icon from Iconfinder as a new generic model. I used Illustrator to modify the icon for the different controls.

Using Adobe Illustrator to modify icons.

Once you are finished modifying as many of the icons as you want, commit the changes in Git.

Commit changes to the Cura icons

Chapter 6

Next up we will be customizing Cura’s color scheme. This process is actually quite simple because almost all of the colors used for various elements in the Cura user interface can be customized from a single file:  [Cura install directory]\Cura 2.1\resources\themes\theme.json.

This theme file is in JSON format, so it consists of a series of "name": "value" pairs. Inside the color section there are many different "name": "value" pairs that determine the colors of almost every element in Cura. The trick to customizing the color scheme via the theme.json file is matching up the properties with the corresponding elements in Cura. The images below label each part of the Cura user interface with its name in the theme file.

Note that for many of the UI elements, the colors are controlled by a set of related properties. For example, many of the buttons have styles for their default color, their color on mouse hover, their color when selected or deselected, and so on.

With the different parts of the Cura user interface matched up with the corresponding properties in the theme file, we can begin customizing the colors. The format for the colors in the theme.json file is RGBA, so the values for each color go like this:  [red, green, blue, transparency]. Unless you are getting fancy with your design, you will probably be leaving the alpha, or transparency, value at 255 for every color, which is fully opaque.

Once you’ve customized the colors of as many parts of the software as you want, just close and re-open Cura to see your changes.

As always, when you are finished making all the changes you want, commit your work to the Git repository.

Chapter 7

Colors are not the only aspects of the Cura user interface design that can be modified via the theme.json file ([Cura install directory]\Cura 2.1\resources\themes\theme.json). In this chapter we will adjust the layout of the software by modifying the sizing of various elements. The process of adjusting Cura’s layout is similar to the process we used to adjust its colors. Each property in the theme.json file controls the sizing of a particular part of the Cura software. As with customizing Cura’s color scheme, the difficult part of modifying the layout is matching up each section of the software with the corresponding theme property.

The values for the size properties are easy to understand. Each property has a pair of values for the width and height of the corresponding element. The first number in each pair determines the width of the element; the second number determines the height.