Uploading Themes Using LiveFirst

With LiveFirst, Percussion provides the ability to create a site by importing from an existing website. This can be used as the first step to migrate a site to Percussion CMS or it can be used as a means of importing a new design provided by a design agency.  

If used as a means of creating a new site, LiveFirst creates a theme for the site using a default Percussion CSS file. This file contains minimal styling, just that which is needed for Percussion's out-of-the-box widgets to display and function.  The theme is given the same name as the site that was created. For example, if the site was named www.sample.com, the theme would be named www-sample-com and the main CSS would be www-sample-com.css.

1. To start, click the Create Site button.

2. Name the site, enter the URL of the site to be imported and click Next.

From here the system performs the following steps in the background to create the theme:    

• Creates site, template and home page
• Imports theme (CSS, javascript and images)
• Parses imported CSS to identify any referenced CSS, js and images
• Imports referenced css, js and images

The theme is created in the Design\web_resources\themes\<themename> directory. Within the theme directory the following sub-directories are created: 

• images - contains the images required for the Percussion default theme
• js - contains the javascript required for the Percussion default theme
• import - contains any files identified and referenced during the import

Often times, sites will reference javascript or CSS maintained on third party sites. For example, if a site contains a Google map, the page with the map will reference javascript maintained on maps.googleapis.com.  To ensure that any references to third party sites remain in tact, those third party files are also copied into the Percussion CMS.  They are then storied in relative sub-directory under the /<themename>/import directory. Using the Google maps example above, the javascript was stored in /Design/web_resources/themes/<themename>/import/maps.googleapis.com/maps/api/<javascriptfile.js>.

Over time, you may wish to go back to referencing those javascript files on the third party site, at which time you would modify the page with the map to go back to referencing the javascript files on Google and remove them from the theme.

Adding Additional Templates

Once a Site has been created, the user can go through a similar process to create additional templates. 

1. Go to the Design Manager (on the top navigation menu select Design)

2. Select Actions > Add Template

From here you can enter an additional URL to create a new template for your site. For example, in addition to your main site, you may have a microsite that you want to migrate to Percussion and merge with your main site. That microsite might have a different design. In that case you would import the design using LiveFirst to add the template. When you do this, the additional css, image, and js are added to a sub-directory within the theme import directory.  

This technique is also useful when going about a redesign. If your design firm creates HTML mockups (as opposed to Photoshop), you can import them so that your new designs are available to be applied to your existing templates and pages.