A YouTube video showing the installation process is also available

1. Download LayoutStudio

2. Unpack the downloaded file, and place the layoutstudio folder in your sites/all/themes

   Note: While themes can be place in multiple locations, the sites/all/themes is strongly recommended because LayoutStudio will be the base theme of any subsequent themes you create.

3. Make a copy of the MYTHEME folder in your themes folder in one of the following locations:

   • sites/all/themes: making it available to the default Drupal site and
     to all Drupal sites in a multi-site configuration
   • sites/default/themes: making it available to only the default Drupal site
   • sites/mydomain.com/themes: making it available to only the example.com
     site if there is a sites/yourdomain.com/settings.php configuration file

4. In the template.php, theme-settings.php and MYTHEME.info files, replace all instances of MYTHEME with the name of your theme/project. It is strongly recommended that you use a lowercase name with no spaces (underscores are valid).

   For example, change all instances of MYTHEME to my_client.

5. Change the name of the theme folder to the same theme name.

   For example, rename MYTHEME folder to my_client.

6. Rename MYTHEME.info to the name of your theme/project.

   For example, rename MYTHEME.info to my_client.info.

7. Upload layoutstudio and your new theme folder to the remote server.

8. Enable your theme

9. Configure your theme

   Go to your theme's site configuration page for further options. Other than
   the typical Drupal core options, you also have the following fields available:

   • Random class: requires a number higher than 1.
   • Choose default layout
   • Specify layout dimensions

10. Get to work! Most CSS work is performed in the following stylesheets in your
    theme's CSS folder:

    • css/all.css (for all media types) - disabled by default: ideal for making some global overrides to the CSS reset defaults.
    • css/screen.css (for screen or projection media types)
    • css/print.css (for print media type) - disabled by default
    • css/fonts/fonts.css (for adding @font-face fonts) - disabled by default

    You can enable any of the stylesheets above at the top of your theme's info file. Just un-comment the appropriate line.

Recommended Modules

The following modules are highly recommended

• Conditional Stylesheets: allows themes to specify conditional stylesheets in their .info file and the conditional comments will be automatically included at the end of the standard $styles variable.
• IE Unlimited CSS Loader: solves the Internet Explorer limitation of loading not more than 31 CSS files per HTML page.

Once you have the Conditional Stylesheets module enabled, un-comment the IE conditional stylesheets in your theme's info file.