How to customize allure report title and logo

Question

Below attached allure report image that generated via allure. Would like to customize report title and logo (image highlighted yellow) with my own title and logo instead of ALLURE REPORT and default logo. Appreciate your help.

Answer 1

To change the logo you should put the custom-logo-puglin into the puglins folder:

Edit the styles.css file and change the image reference to your own file.

In the jenkins to customize each project the plugins folder is placed here:

If you would like change for all the projects the folder is:

I recommend you the user manual

Answer 2

Title Change

I have changed the title by cloning the repository from git and built a local copy. (I am using Windows OS).

Prerequisite

1. Gradle Version 5.2.1-https://gradle.org/releases/
2. Node Js-https://nodejs.org/en/download/ -npm -6.4.1

After installing prerequisite please follow below steps

1. Visit https://github.com/allure-framework/allure2
2. Clone the repository- Link: https://github.com/allure-framework/allure2.git
3. Assume the repository is saved locally under C:\allure2-2.10.0
4. Navigate to C:\allure2-2.10.0\allure-generator\src\main\java\io\qameta\allure\summary

5. Edit SummaryPlugin.Java file with any text editor

6. Search for setReportName("Allure Report"); and change to whatever name you want to give. Example setReportName("Automation Report")and save that file

7. Navigate to C:\allure2-2.10.0\allure-generator
8. Open command prompt (cmd) from this folder.Type gradle build and hit enter
9. Wait for few mins till it builds. It takes around 20 mins.
10. Navigate to c:\allure2-2.10.0\allure-generator\build\libs
11. Copy newly created file in build\libs folder allure-generator-2.10.0.jar file
12. I have installed manually from https://docs.qameta.io/allure/#_manual_installation
13. Navigate to allure-2.10.0\allure-2.10.0\lib and override allure-generator-2.10.0.jar file with the file created newly from the gradle build folder

Title change image screenshot

---

Logo Change

1. I have installed manually from
   https://docs.qameta.io/allure/#_manual_installation
2. Navigate to folder allure-2.10.0\allure-2.10.0\config
3. With any text editor edit file named allure.yml
4. At the last add one more line i.e. enter code here - custom-logo-plugin and save the file to activate the plugin. allure.yml screenshot

5. Navigate to allure-2.10.0\plugins\custom-logo-plugin\static edit styles.css

   .side-nav__brand {
   background: url('yourlogo.svg') no-repeat left center !important;
   padding-left: 180px !important;
   margin-left: 10px;
   }
   

6. In the same folder put your svg file or png image file

7. Now generate allure report.

8. Both title and logo will be changed according to your needs.

   Hope it helps! Thanks

Answer 3

In the custom-logo-plugin/static/styles.css add "!important" to the background style. With that change the custom-logo-plugin should work. This replaces only the logo image.

You can also use a logo-with-text by using "display:none" to .side-nav__brand-text selector and adding a height to .side-nav__brand selector. Your logo in this case should be 170px width.

Answer 4

allure custom logo and report name / title plugin(s) are currently not working due to previous changes, you can achieve this goal by cloning the source, modifying it and building a local copy instead and using it until we fix such plugins or offer a new alternative.

Answer 5

I may answer a little late...

Concerning the report title, actually it seems to be hardcoded during the generation step. Take a look at the files in "allure-generator/src/main/java/io/qameta/allure/summary", especially SummaryPlugin.java SummaryPlugin.java

A short term solution could consist in editing the file "allure-report/widgets/summary.json" between "allure generate" and "allure open". summary.json

The long term one should be to add a parameter during the generation step.