4. Customizing the Background Image

Customizing the background image is the last thing we will go over in this tutorial. Start off by appending the code in red below into settings.html.

<fieldset>
  <legend>Font, Logo, Background</legend>
  <table>
    <tr>
      <th><label for="regular_font">Regular text</label></th>
      <td>
        <select class="font" name="regular_font" id="regular_font">
          <option value="Helvetica, Arial, sans-serif" selected="selected">Helvetica, Arial, sans-serif</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>Site logo</th>
      <td><input type="file" id="logo_image" name="logo.png" data-max-height="200" data-max-width="800"/></td>
    </tr>
    <tr>
      <th><label for="use_bg_image">Use a background image?</label></th>
      <td><input type="checkbox" id="use_bg_image" name="use_bg_image" checked="checked" value="1"/></td>
    </tr>
    <tr>
      <th>Image</th>
      <td><input type="file" id="bg_image" name="bg.gif"/></td>
    </tr>
    <tr>
      <th><label for="bg_image_position">Position</label></th>
      <td id="bg_image_position">
        <select name="bg_image_y_position" id="bg_image_y_position">
          <option value="top" selected="selected">Top</option>
          <option value="center">Center</option>
          <option value="bottom">Bottom</option>
        </select>
        <select name="bg_image_x_position" id="bg_image_x_position">
          <option value="left">Left</option>
          <option value="center">Center</option>
          <option value="right" selected="selected">Right</option>
        </select>
      </td>
    </tr>
    <tr>
      <th><label for="bg_image_repeat">Tiling</label></th>
      <td>
        <select name="bg_image_repeat" id="bg_image_repeat">
          <option value="no-repeat" selected="selected">Do not tile</option>
          <option value="repeat-x">Tile horizontally</option>
          <option value="repeat-y">Tile vertically</option>
          <option value="repeat">Tile everywhere</option>
        </select>
      </td>
    </tr>
    <tr>
      <th><label for="bg_color">Background Color</label></th>
      <td><input id="bg_color" name="bg_color" class="color" value="#ffffff"/></td>
    </tr>
    <tr>
      <th><label for="bg_image_attachment">Scrolling</label></th>
      <td>
        <select name="bg_image_attachment" id="bg_image_attachment">
          <option value="scroll">Scrolls with page</option>
          <option value="fixed" selected="selected">Stays fixed</option>
        </select>
      </td>
    </tr>
  </table>
</fieldset>

Save the the settings form, and refresh the page. Adding the code above will create new options for the background image, as show in the screenshot below. Their respective id’s are also labeled in red.

Next, in layout.css.liquid, paste over the CSS selector for ‘body’ with the following:

body {
        background-color: {{ settings.bg_color }};
        {% if settings.use_bg_image %}
           background-image: url(bg.gif);
           background-position: {{ settings.bg_image_y_position }} {{ settings.bg_image_x_position }};
           background-repeat: {{ settings.bg_image_repeat }};
           background-attachment: {{ settings.bg_image_attachment }};
        {% else %}
            background-image: none;
        {% endif %}
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	font-size: small;
        color: {{ settings.text_color }};
	}

Save layout.css.liquid. In the code above, the If-statement (colored in red) first checks if the “Use a background image?” checkbox is checked. In Liquid terms, it checks if {{ settings.use_bg_image }} has a value or not.

If settings.use_bg_image has a value, then it will run the code in blue, which outputs the uploaded image as the background. The background also takes on the CSS properties background-position, background-repeat, and background-attachment, whose values are being set by the settings form.

If the settings.use_bg_image does not have a value, then it will run the code in green, which will set the CSS property background-image to none. Keep in mind that you can still set the background color even if you don’t plan on using a background image.

Here are some examples of what you can do with the background using only the settings form (they’re not the prettiest examples, but I just wanted to show you the capabilities of the settings form).

Position: Top Left, Tiling: Do Not Tile, Background Color: #ffffff.

Position: Top Left, Tiling: Tile Horizontally, Background Color: #1f62ff.

Tiling: Tile Everywhere.

Conclusion

That’s it for this tutorial! You can download the finished version of the theme and settings form here.

The tutorial turned out to be a bit longer than I had expected, but I hope it will give you an idea of how to customize the settings form for your own themes. If you have any comments/questions, please leave a comment below, thanks!

Pages: 1 2