The7 Design Wizard simplifies the process of theme configuring: choose header layout, upload your logo and set up background, fonts and accent colour. The7 will intelligently calculate the best values for advanced options available in the theme.

Wizard works in two modes: it allows to “Customize Existing Design” (Only if have configured theme options already) or “Start From a Scratch”(fig. 1)

Fig. 1. Wizard mode

Fig. 1. Wizard mode

In Wizard > General

  • Select site layout: boxed or wide.
  • Set background color and image “under the box”.
  • Set basic site background color.
Fig. 1.1. Layout options.

Fig. 1.1. Layout options.

As per fig. 2:

  • Select font-family for content text.
  • Select font color for content text.
  • Select font-family for header text.
  • Select font color for header text.
  • Set the color accent.
  • There are 4 predefined button styles iOS, flat, 3D, Material design.
  • Set border radius for the site, it will be used for buttons, sidebar borders etc.
Fig. 1.1. Wizard Options

Fig. 2. Wizard Options

In  Wizard > Top Bar & Header

  • There are six header layouts available within The7.3.
  • You can also fine-tune elements alignment.
  • You can also select header layout: boxed or wide.
Fig. 2-1. Header Layout.

Fig. 3. Header Layout.

In the Top Bar section, you can specify:

  • elements font color;
  • background style: content-width line, full-width line, background, disabled (fig. 4);
  • background color;
Fig. 2.2. Top Bar Settings.

Fig. 4. Top Bar Settings.

Then setup site navigation (fig. 5):

  • Header background color.
  • Main menu font color.


  • Background color of the submenu.
  • Opacity of the submenu.
  • Font color of text in submenu.

Floating Header:

  • if this header should be enabled;
  • effect: Fade on scroll, Slide on scroll, Sticky;
Fig. 2.3. Header/Menu Settings.

Fig. 5. Header/Menu Settings.

This option allows you to specify: (fig. 6)

  • Header switch point (for phones);
  • header height and layout for phones.
  • enable or disable floating mobile navigation;
Fig. 2.4. Mobile Menu Settings.

Fig. 6. Mobile Menu Settings.

In Wizard > Branding:

On this section of the page you can upload logos for different locations at your site, favicon, set up copyright information, etc. (fig. 7):

  • Logo in Header: Upload logo for ordinary desktop devices and a high resolution logo for retina devices.
  • Transparent header: Logo to display on pages using Transparent header.
  • Floating navigation: Enable/disable and upload logo in floating menu (menu which appears on the top, when you scroll down the site).
  • Mobile : Logo to display on mobile devices.
  • Bottom bar: Logo to display in the bottom bar of the site.
  • Favicon: Upload favicon, please refer here if you’r not sure about what is a favicon.
Fig. 3.1. Branding Settings.

Fig. 7. Branding Settings.

  • Enter copyright information.
  • Enable/disable Dream-Theme credit in your bottom bar.
Fig. 2. Copy right & Credits

Fig. 8. Copy right & Credits.

In Wizard > Sidebar & Footer (fig. 9):

  • Choose the sidebar style.
  • Background color of footer.
  • Color of headers inside footer.
  • Color of content inside footer.
  • Layout: number of columns;
Fig. 4. Sidebar and Footer Settings.

Fig. 9. Sidebar and Footer Settings.