You can create options for your theme so users can change some aspect of your theme just for their site. Let’s create an option that allows users to set the header to 100% or to a fixed width of 1024px. Options are implemented in the manifest. You can read more about options here.
If you’re not in the Code Editor, from the Theme tab, click Edit HTML/CSS.
- Open the
- After the
color-presetsentry, enter the following (don’t forget to add a comma to the end of the preceding line):
This code gives the name
banner-full-width to the option and will be used to create classes that set the banner to full width or a set width. The title Full Width Banner will display in the editor. The type
toggle means that a switch will be used to turn the option on and off.
We’ve set the default to
true, which means the option will be turned on by default. We’ve set the
true so we can use the
body.full-width-banner-on classes in the LESS stylesheet to change the banner
- Let’s use the
body.full-width-banner-onclass to make the header full width. Open the
main.lessfile, scroll down to the
headerarea, and enter the following:
- Let’s use the
body.full-width-banner-offclass to give the header a max width, instead of full width.
- Click Save.
In the editor, you’ll now see a Theme Options menu. Click it and you’ll see that the Full Width Banner option now appears. Click it to Off and note that header displays at a 1024px width.
What Just Happened?
You used the manifest to create options that the user can turn on and off for their site. These manifest entries create new style classes that allow you to control the display in the LESS file.