Est-il possible de remplacer les variables Discourse ?

Soutien
1

Bonjour,

Je tente de modifier la typographie (famille de police, graisse et tailles de police) en utilisant les variables Discourse.

$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

Comment puis-je donc modifier la variable heading-font-family comme ceci : $heading-font-family: Arial; ? J’ai essayé plusieurs méthodes, mais les changements ne sont pas visibles.

$heading-font-family: Arial;

:root {
  --heading-font-family: Arial;
}

Une idée ?

2

Peut-être jeter un coup d’œil à https://meta.discourse.org/t/selectable-font-family-component/117493?

3

Merci pour votre réponse.

En fait, Discourse propose une fonctionnalité par défaut pour cela. Mais je souhaite personnaliser davantage la typographie.

image
image1480×436 20.6 KB

Je cherche donc un moyen de modifier les valeurs des variables. J’ai pensé que je pourrais ainsi facilement changer toute la typographie.

Depuis variables.scss

// Polices
// --------------------------------------------------

$base-font-size-smallest: 0.815em !default; // équiv. à 13px
$base-font-size-smaller: 0.875em !default; // équiv. à 14px
$base-font-size: 0.938em !default; // équiv. à 15px
$base-font-size-larger: 1.063em !default; // équiv. à 17px
$base-font-size-largest: 1.118em !default; // équiv. à 19px
$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

// Définitions de la taille de police, multiplicateur ^ (step / interval)
$font-up-6: 2.296em;
$font-up-5: 2em;
$font-up-4: 1.7511em;
$font-up-3: 1.5157em;
$font-up-2: 1.3195em;
$font-up-1: 1.1487em; // 2^(1/5)
$font-0: 1em;
$font-down-1: 0.8706em; // 2^(-1/5)
$font-down-2: 0.7579em; // Taille la plus petite que nous utilisons, basée sur la base de 1em
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

Pensez-vous qu’il soit possible de modifier ces variables ?

4

Oh. Je pensais que cela semblait ancien et qu’il existait maintenant une meilleure méthode. Désolé pour ça.

5

Merci pour la réponse @pfaffman. J’espère qu’il existe un moyen de remplacer ces variables. Sinon, je devrai modifier les classes CSS.

6

Relancez l’assistant de configuration : depuis la version bêta 2.6, la sélection de la police est désormais une étape de l’assistant de configuration.

7

Merci pour votre réponse @codinghorror. Ainsi, nous ne pouvons choisir que certaines polices, n’est-ce pas ? Et j’ai appris que ces variables ne peuvent pas être remplacées. Est-ce correct ?

8

@bekircem Je viens de tester l’assistant sur la version 2.7.0.beta1 et les polices disponibles sont les mêmes que celles des paramètres du site que vous avez partagés ci-dessus (il se peut que j’aie manqué quelque chose).

Vous l’avez probablement déjà résolu, mais au cas où, vous pouvez utiliser Google Fonts ou remplacer les variables CSS exactement comme vous l’avez fait dans votre premier message — ce qui aurait dû fonctionner.

J’utilise ce CSS sur mon instance et cela fonctionne (chargement de la police via <link/> ou @include).

:root {
  --heading-font-family: 'Inter', sans-serif;
  --font-family: 'Inter', sans-serif;
}