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 under <variables> with the name of the custom CSS file.

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

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 them 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/Baskervville-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: Baskervville; src: url(Baskervville-Regular.ttf); } .title__content { font-family: Baskervville; }

• If you want to use a font hosted externally, you can import it at the beginning of your custom CSS file. For example, to use Matemasie for titles:

  @import url('https://fonts.googleapis.com/css2?family=Matemasie&display=swap'); .title__content { font-family: "Matemasie"; }