CODEWITHSUNDEEP
etlmodelingdbtbrandingfishtown-analytics
user961
user961

Reputation: 713

DBT docs generate - How to give the specific branding to the documentation website

How to replace the DBT logo with some other image in the website header, generated by dbt docs generate command.

Upvotes: 1

Views: 3875

Answers (3)

ChiTownTimmy23
ChiTownTimmy23

Reputation: 1

Wanted to expand on @Kay answer a bit as it helped me tremendously.

To find the dbt installation folder on Windows, you need to go into your venv folder within your project and navigate down to the dbt/include folder. This may be different for different projects/OS, so here is my path to help shed light on where this may be:

venv --> Lib --> site_packages --> dbt --> include --> index.html

Once you have located the file, follow the steps in @Kay answer. The only modification that I made is to add in a corresponding file path in the HTML added to the index.html file

<link rel='stylesheet' href='**..dbt_project_path**/styles.css' />

Next, in your dbt project, go and add that specific folder to your root dbt project directory. From there, add in your .css file. By aligning the index.html file path to the file path created in your dbt project, you will always reference the .css (or any other modifications you have) when running the dbt docs generate command.

Upvotes: 0

Kay
Kay

Reputation: 2332

If you change the file in the source folder, I believe the index.html file is copied from the dbt installation folder to the target folder everytime you run dbt docs generate. You can customize the index.html file from that directory and then you don't have to worry about making any changes when you run dbt docs generate.

This is what I'd do:

  • Find index.html file in the dbt installation directory add the line

     <link rel='stylesheet' href='/styles.css' />

    in the <head> tag. This way, you only have to make this change again when you update dbt

  • Add a styles.css file in your target folder and then target the class of the dbt logo. If you change the background color of the logo, you should be fine and you will not have to re-copy every time you run dbt docs generate.

     .logo {
     background-image: url(<<path or url to your image>>);
     background-color: transparent;
}

You can adjust other properties like background-repeat, background-position, background-size, background-color according to your preferences.

Upvotes: 1

Josh D.
Josh D.

Reputation: 1326

The documentation consists of an index.html file, which loads data from the artifact files (source).

If you edit the index.html file you will be able to customise it as you wish. Note that each time you run dbt docs generate the file will be re-copied into your target folder, so you’ll need some mechanism for either copying the artifacts to wherever your new index.html` is located or overwriting the file with your customised version.

Upvotes: 1

Related Questions