Theme with variable width inside settings

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 Like
#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

Hi again!

I want to add settings to my theme but I have a few questions about it.

I looked into the welcome-banner component because there is a setting to upload an image as background and other settings related to the background.

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: uses ..... CSS background size property</a>

And in the css file is this:

.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;
  }

What irritates me now is the use of # instead of $ like in other components I had a look.
So what do I need to use? Or doesn’t it matter?

I have another question about CSS, but first I want to solve the question above.
Of course I could try it but I want to be sure which is correct.

#5

#{...} is scss interpolation:

My guess is that it’s required in some of the examples you shared because all theme settings are ‘string’ variables. Interpolation allows those strings to be used in places which would normally require a specific variable type. In many case though, you can probably get away with just $variable

2 Likes
#6

Ok, I understand.
So if I would force the users to use the background color as RGB instead of using Hex, and would write the # hardcoded in the css file I could use $.

1 Like