# Theme with variable width inside settings
**URL:** https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790
**Category:** UX
**Created:** [June 5, 2021, 8:00pm UTC](https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790 "2021-06-05T20:00:49Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [June 5, 2021, 8:00pm UTC](https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790/1 "2021-06-05T20:00:49Z")
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.yaml`with e.g. this code:
```plaintext
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!
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [June 5, 2021, 8:24pm UTC](https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790/2 "2021-06-05T20:24:20Z")
In the CSS you can use something like this
`#{$header_width}` .
Check this topic:
> [@Add settings to your Discourse theme](https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557):
>
> Discourse has the ability for themes to have “settings” that can be added by theme developers to allow site owners to customize themes through UI without having to change any line of code and worry about losing their changes with future updates for the theme. Themes can also alter certain themeable site settings, for more information on that, see the [Themeable site settings](https://meta.discourse.org/t/-/374376) topic. heavy_plus_sign Adding settings to your theme Adding settings to your theme is a bit different from adding CSS a…
---
### Author:  [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [June 5, 2021, 8:45pm UTC](https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790/3 "2021-06-05T20:45:02Z")
Thank you for the link!
Is it really that easy!? 👍
~~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!
---
### Author:  [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [April 13, 2022, 9:55am UTC](https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790/4 "2022-04-13T09:55:27Z")
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.
```plaintext
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
```
And in the css file is this:
```plaintext
.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.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [April 13, 2022, 10:27am UTC](https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790/5 "2022-04-13T10:27:09Z")
> [@daemon](#):
>
> What irritates me now is the use of `#` instead of `$` like in other components I had a look
`#{...}` is scss interpolation:
> **[Sass: Interpolation](https://sass-lang.com/documentation/interpolation/)**
>
> Syntactically Awesome Style Sheets
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`
---
### Author:  [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [April 13, 2022, 10:51am UTC](https://meta.discourse.org/t/theme-with-variable-width-inside-settings/192790/6 "2022-04-13T10:51:48Z")
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 `$`.