Get started by downloading the Example Theme from Github.

New in RapidWeaver 8

  • Sliders
  • Inputs
  • Logo Dimensions

Updates of note in RapidWeaver 8

  • Theme tags are now correctly processed in all CSS files. Yes, you can now use theme tags in any CSS/HTML theme file.
  • Colour values can be reset to default by users.

---

1. Sliders

You can now create a slider by specifying a type of Slider . You can optionally add a steps  property to give evenly spaced steps between the given minimum and maximum values.

Sliders work for any type of units, be it pixels, rems, percentage, or any other valid CSS unit. Simply specify the unit you want to use by setting the Unit  property.

Key takeaways:

  1. Set a min and max value with the Minumum and Maximum keys
  2. Use the Steps key to step evenly between the min and max values.
  3. Use the Unit  key to specify a valid CSS unity — RW will automatically append this to the outputted tag.
  4. Want a non-formatted value? Omit the Unit key and you'll get a raw number.

Adding the below example, to one of your theme's RWStyleVariations > RWStyleGroups  dictionaries, will give you a "Font Size" slider.

<dict>

    <key>Default</key>

    <string>18</string>

    <key>Maximum</key>

    <integer>26</integer>

    <key>Minimum</key>

    <integer>14</integer>

    <key>Name</key>

    <string>Font Size</string>

    <key>Steps</key>

    <string>13</string>

    <key>Tag</key>

    <string>%body_font_size%</string>

    <key>Type</key>

    <string>Slider</string>

    <key>Unit</key>

    <string>px</string>

</dict>

Handy Note: this code will give you 12 evenly spaced steps even though the Steps key is set to 13. If you're used to working with the HTML range input, you would expect to enter 12 as the Steps value, however an extra step is required for the first initial step — this is a quirk with the underlying Apple frameworks being used and not the implementation in RapidWeaver.

Output values: 14px , 16px ... 24px , 26px  to the %body_font_size%  tag.

---

2. Number Inputs

Allows the user to enter a number in to a input box.

Key takeaways:

  1. Set the Type to Number  and you're good to go.

Adding the below example, to one of your theme's RWStyleVariations > RWStyleGroups  dictionaries, will give you a "Maximum Width" number input.

<dict>

    <key>Default</key>

    <string>960</string>

    <key>Name</key>

    <string>Maximum Width</string>

    <key>Tag</key>

    <string>%site_width%</string>

    <key>Type</key>

    <string>Number</string>

</dict>

Handy Note: there is no unit key for number inputs, the specified tag will receive the raw number entered by the user in RapidWeaver.

---

3. Logo Width and Height — Requires 8.0 +

In your theme's Info.plist, you can now specify RWAssetOptions, and inside of this dictionary, you can specify RWThemeLogoImageRecommendedWidth, RWThemeLogoImageRecommendedHeight, this will allow you set the exact size of a logo when displayed in your theme.

<Insert example here>

Did this answer your question?