Drupal Gardens Theme Builder - dummies

By Lynn Beighley, Seamus Bellamy

After you have the Drupal Gardens setup out of the way, you can start to have some fun and play with themes on your site. Controlling the appearance of your site with the Drupal Gardens Theme Builder is the major way it differs from installing your own copy of Drupal. But you’re not missing much because the Theme Builder offers you tremendous flexibility and a great interface.

  1. Log in to your Drupal Gardens site and click the Appearance link.

    This opens the Drupal Gardens Theme Builder.


  2. Click the right arrow next to the theme thumbnails and scroll through the available themes. Click the theme you like.

    For this example, the Sparks theme was clicked. You now see a preview of your site behind the Theme Builder, using the theme you selected.


  3. Click the Publish button to make this theme show up on your site.

  4. (Optional) Type in a name you will remember for this theme and click OK.

    The Theme Builder applies this theme to your site and saves this named theme under the My Themes tab on the left. You can have many different customized themes that are stored here.

  5. Click the Brand tab and click the palette you like.

    The Spring Rain palette on the bottom right was clicked.

  6. Click Save.

    This changes the colors your site uses and saves the changes to your saved theme.

  7. On the Brand tab, click the Logo link on the left. If you have an image you want to use as a site logo, click Browse and upload it.

  8. Click Save.

    You can also modify the favicon here. (The favicon is the small icon that appears in the browser’s address bar next to your site’s URL when someone visits your site.)

  9. Click the Layout tab.

    These are the options for how the content in your site will be arranged on the page.

  10. Click the layout thumbnail you like, and click Save to save your selection.

  11. Click the Styles tab, and then click the Font link on the left.

  12. Click the title of your site (in this case, it’s lynnwrites) and change the font.

    The Styles tab is interactive. Anything you click in the preview page behind the Theme Builder is changed when you modify the Styles settings. A blue line shows up around the element you’ve currently selected.

    For example, if you click the menu bar and change the font to Georgia and click Save to save your changes, the text for these menu items all over the site will change. You can control the font color, the style, the alignment, and the size in the Font section.

    When you’re changing styles, you’re not stuck with only the part of the page that’s visible. If you use your browser’s scroll bar, you can scroll down your page while leaving the Theme Builder visible to make changes to things farther down on the page, such as the footer.


  13. Click the Borders & Spacing link on the left under the Styles tab and click the gray border that surrounds the header.

    The border style currently being used for this element is displayed. It can be turned off by choosing the Style drop-down list on the right and selecting None.


  14. Click the Background link on the left to change the styling of the background image.

  15. Click the Advanced tab if you want to add your own CSS code to your theme.

Theme Builder simply offers too much to cover everything but there’s an excellent online resource from the Drupal Gardens folks here: