Custom CSS and font

Use custom CSS

1. Save your CSS file in the static subdirectory of the build configuration directory. For example, cfg/static/custom.css with the following sample code:

   /* set the main background for the light theme to pink */ :root { --wh-color-bg-main: rgb(255, 198, 227); } /* make the border for images transparent with a 30px radius */ .article__img { border-radius: 30px !important; border: none; }

2. Open buildprofiles.xml and add the <custom-css> element with the name of the custom CSS file.

   <custom-css>custom.css</custom-css>

3. Preview any topic and make sure that the customization is applied.

Change the font

• If you want to use only system fonts, you can define it for various classes in the custom CSS file. For example, to use a lightweight Comic Sans MS font for titles and regular Times New Roman for paragraphs:

  .title__content { font-family: "Comic Sans MS"; font-weight: lighter; } .article__p { font-family: "Times New Roman"; }

• If you want to bundle a custom font with your help website, save your font file in the static subdirectory of the build configuration directory. For example, cfg/static/BaskervvilleSC-Regular.ttf. Then define a new font face in the custom CSS file and use it for whatever classes you want.

  @font-face { font-family: Baskerville; src: url("BaskervvilleSC-Regular.ttf") format("truetype"); } .title__content { font-family: Baskerville; }