4.14 How to Use Custom CSS

The CSS file layout.css gets included (with three other CSS files) in almost all the English articles through server/head-include-2.lang.html. However, sometimes this style isn’t quite right for translations—many languages have much longer expressions, and that is natural. To include your own CSS, create a file style.lang.css and add it after the directive to include server/head-include-2.lang.html and before the closing </head> tag in server/banner.lang.html, i.e.

<!-- start of banner.bg.html -->
<!--#include virtual="/server/head-include-2.bg.html" -->
<link rel="stylesheet" href="/style.bg.css" media="screen" />
</head>

Override only what is necessary and looks broken in your language; do not invent your own style. This is important for the consistency of the gnu.org website. Also, please check if the issue is language-independent; in this case a change for layout.css should be discussed with the webmasters.

A typical language-specific style.lang.css file looks like this:

.inner { max-width: 85em; }

#fssbox {font-size: 50%;}

This widens the menu and the area where the articles are displayed (because the menu entries are much longer than the English equivalents when translated), includes a localized logo, and makes the font size for the FSF widget twice smaller (because in this language, the translations are almost twice longer and displayed truncated, which is undesirable).

When creating your own style.lang.css, don’t forget to include the license notice from the layout.css, with a short comment.

If using the default CSS style for translations does not give the expected good results, or there are other problems (significant or not) that obstruct reading or worsen the look from an aesthetic point of view, please write to [email protected] with a description of the issue. If there are several unrelated problems, send separate messages with appropriate explanation (which may include a demonstration of the bug, such as a screenshot).

• Specific Issues Related to RTL