# How do I create a custom theme for the HTML Report? CVE Binary Tool provides HTML Report as an output type and although the Report design will work for most of the users it might be the case that we want to update the Report Design according to our needs. So in this tutorial, we will be discussing on how to customise the HTML Report. CVE Binary Tool provides the functionality to edit report components which we can use to redesign or change the report. CVE Binary Tool uses Object Oriented Programming approach for redesigning that means we need to overwrite files to update the design. > Example: If we want to update the dashboard then we only need to provide `dashboard.html` file. It will update the dashboard design as specified in the given file. All the remaining design will be as it is. Before we start let's discuss the requirements. So first and the most important requirement is that we must know `Jinja` because cve-bin-tool uses that as its templating engine. We don't need the advance concepts but knowledge of jinja variables `{{ }}` and jinja block `{% %}` is a must. For more info see [Jinja Basics.](https://jinja.palletsprojects.com/en/2.11.x/templates/) Second we must setup a directory to work with. So let's start by creating a new directory. > This guide assumes that you are using the version `1.1` or above of `cve-bin-tool`. ## Setting up the directory Before we start customising the report we have to set up our work directory. Work directory or root directory will contain all the configuration files for components we want to update. We first need to set up our root directory and then we need to create config folders inside this root directory. **steps to setup directory:** 1) Create a root directory anywhere on your computer. We can name this directory whatever we want. I will create a new directory named `my_theme` because I want to store my config files there. ```console user@ubuntu: ~$ mkdir my_theme user@ubuntu: ~$ cd my_theme/ ``` 2) Create a new config folder `templates`. Config folders are simple folders but with a specified name. Note that the config folder name must match with `templates` otherwise it will not overwrite components. ```console user@ubuntu: ~/my_theme$ mkdir templates user@ubuntu: ~/my_theme$ cd templates/ # Actual Path After the Steps user@ubuntu: ~/my_theme/templates$ ``` This will set up our templates config folder( templates directory ) and now we are ready to start customising the HTML Report. ## Setting up the Files Now as we have set up our templates folder we will create files that are needed for the report redesign. CVE Binary Tool allows customisation of 4 basic templates. We only need to implement only those templates that we want to overwrite. 1) base.html 2) dashboard.html 3) row_cve.html 4) row_product.html These files will control the structure and design of the report. We'll discuss in detail on what things we need to consider while creating these files and we'll also discuss which files correspond to which part of the report. But before that let's create those files. I'll create those files using terminal but you can also create them with the help any File Manager or Text Editor. ```console user@ubuntu: ~/my_theme/templates$ touch base.html user@ubuntu: ~/my_theme/templates$ touch dashboard.html user@ubuntu: ~/my_theme/templates$ touch row_cve.html user@ubuntu: ~/my_theme/templates$ touch row_product.html ``` We can confirm that using `ls` in the current directory ```console user@ubuntu: ~/my_theme/templates$ ls base.html dashboard.html row_cve.html row_product.html ``` HTML Report with a custom theme can be generated after creating these files and providing the `--html-theme` argument with the root directory path. Now we'll discuss in detail to see what is the role of each file and how to customise that according to our needs. ### row_cve.html --------------------- #### Role: Each CVE has a unique number associated with it called CVE Number and a severity level measuring the level of severity( Critical, High, Medium, Low). Apart from that a small description of CVE is also present. The `row_cve.html` handles all the information about CVE and design. Design info includes component design for a single cve and it must not be a full HTML. Full html include `,
` tags. **Example of half html** ```htmlThis is a example code for half-html
{{ description }} ..read more