Better typography for GLPI Knowledge Base

glpi-better-kb.css

#kbanswer {
  color: rgba(0,0,0,.80);
}

#kbanswer p {
  line-height: 1.58;
  font-size: large; 
  text-align: justify;
  letter-spacing: -0.003em !important;
}

#kbanswer strong{
  font-weight: bold;
}

#kbanswer a {
  font-size: large;
}

/**
 * Subject - Size and spacing
 */ 
.tab_cadre_fixe > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > h2 {
  margin-bottom: 10px;
}

.tab_cadre_fixe > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) {
  font-size: 2.0em !important;
}

.tab_cadre_fixe > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > h2:nth-child(1) {
    display: none;
}

/* Based on https://stackoverflow.com/a/48694906 */ 
#kbanswer code {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #f36d33;
  border-radius: 5px;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  max-width: 100%;
  overflow: auto;
  padding: 01em 1.5em;
  display: block;
  word-wrap: break-word;
}

#kbanswer h1 {
  font-size: 2.5em !important;;
}

#kbanswer h2 {
  font-size: 2.0em !important;;
}


#kbanswer h3 {
  font-size: 1.8em !important;;
}

#kbanswer h4 {
  font-size: 1.5em !important;
}

#kbanswer ol li, #kbanswer ul li {
  font-size: large;
  margin-left: 25px;
  line-height: 1.5;
}

The above CSS improves the GLPI Knowledge Base typography. See an example below:

Before:

After:

How to use:

To use it, simply download the file in the "css" folder (for example, "/var/www/glpi/css") and load it using the "css" method of GLPI's "Html" class.
You can edit the files "front/knowbaseitem.form.php" and "front/helpdesk.faq.php" to load the css just by adding a line shortly after the include statement, thus obtaining the file after the change:

include ('../inc/includes.php');
echo Html::css('css/glpi-better-kb.css');

@hi!

This still works? GLPI > 9.4

Yes! The same way.

Using GLPI 5.3.3 I was able to put this CSS into GLPI without editing any files. In GLPI, open Administration -> Root entity -> UI customization. Copy and paste the CSS from above.

I haven't tried it yet! In this way, are pages other than the knowledge base affected?

So far it only seems to affect knowledge base CSS.

I'm using the Fusion Inventory plugin and adding the CSS in UI customization break a lot of the forms...