Thème avec largeur variable dans les paramètres

UX
1

Hallo!

I’ve made a theme (css only) with a variable width.
Now I think about to share it, but not every one wants the variable width. So my consideration was to use variables to set the width inside the theme settings.
I know I need a settings.yamlwith e.g. this code:

composer width:
  default: 1110
  type: integer
  description: "Set the width of the composer"

header width:
  default: 1110
  type: integer
  description: "Set the width of the header"

Now I’m not a specialist with CSS so I don’t know how to use these variables inside of SCSS.
Do I need a function for these settings?
Can someone give me an example on how to set the value for the header for example?

Thank you!

2

In the CSS you can use something like this
#{$header_width} .

Check this topic:

1 « J'aime »
3

Thank you for the link!

Is it really that easy!? :+1:

So, one more question.
As width you can set px or %, so my variables need to be a string as data type?
But how can I prevent such inputs like 1100 apples?

I have a better idea with int and enum!

Thank you!

4

Salut !

Je souhaite ajouter des paramètres à mon thème, mais j’ai quelques questions à ce sujet.

J’ai examiné le composant welcome-banner car il existe un paramètre pour télécharger une image en arrière-plan et d’autres paramètres liés à l’arrière-plan.

banner_background_image:
  type: upload
  default: ""

banner_background_repeat:
  type: enum
  default: no-repeat
  choices:
    - no-repeat
    - repeat
    - repeat-x
    - repeat-y

banner_background_size:
  type: string
  default: cover
  description: utilise la propriété CSS background-size de .....<a/>

Et dans le fichier CSS, il y a ceci :

.welcome-link-banner-wrapper {
    background-color: #{$banner-background-color};
    background-image: url(#{$banner-background-image});
    background-size: #{$banner-background-size};
    background-repeat: #{$banner-background-repeat};
    background-position: center center;
  }

Ce qui m’irrite maintenant, c’est l’utilisation de # au lieu de $ comme dans d’autres composants que j’ai consultés.
Alors, qu’est-ce que je dois utiliser ? Ou cela n’a-t-il pas d’importance ?

J’ai une autre question sur CSS, mais je veux d’abord résoudre la question ci-dessus.
Bien sûr, je pourrais essayer, mais je veux être sûr de ce qui est correct.

5

#{...} est une interpolation scss :

Je suppose que c’est nécessaire dans certains des exemples que vous avez partagés car tous les paramètres de thème sont des variables de type ‘string’. L’interpolation permet d’utiliser ces chaînes dans des endroits qui nécessiteraient normalement un type de variable spécifique. Dans de nombreux cas, cependant, vous pouvez probablement vous en sortir avec juste $variable.

2 « J'aime »
6

Ok, je comprends.
Donc, si je forçais les utilisateurs à utiliser la couleur d’arrière-plan en RVB au lieu de l’hexadécimal, et que j’écrivais le # en dur dans le fichier CSS, je pourrais utiliser $.

1 « J'aime »