ccs design ccs designs

Download Free Samples

Documentation > CodeCharge Studio

Creating and Applying CCS Design with Artisteer

Designing CodeCharge Websites
Applying Artisteer Design and Viewing Templates

Using Artisteer you can generate CodeCharge Studio projects in few minutes without learning Photoshop, Dreamwaver or CSS. Artisteer allows you to create fantastic looking design for your website and customize it to your taste.

Designing CodeCharge Websites

Here is how you can quickly create your own unique CCS templates.
  1. Start Artisteer and click the "Suggest Design" button several times, until you see a CCS design idea that you like (use "Undo" and "Redo" buttons to browse generated ideas back and forward).

  2. ccs design

  3. Modify the design elements, such as layout, background, header, fonts, etc.

  4. ccs design

  5. Export your template to a folder on your computer.

    Note: The CodeCharge Studio export plugin is not included in Artisteer 4.0 by default. You need to install it (for free) from Artisteer Marketplace. Select Export -> Marketplace -> New -> CodeCharge Studio Project to install the plugin.

  6. ccs design

    After that you will be able to export your design to CodeCharge Studio 5.

    ccs design

  7. In Artisteer 4 you can add content to your CCS 5 template as well. To do this please enable "Include Content" before exporting the template.

  8. ccs design

Applying Artisteer Design and Viewing Templates

There are two basic ways of applying Artisteer Design to a project in CodeCharge Studio, depending on whether you'd like to apply the template with content or only the design itself.

To apply the template with content to a project in CCS 5 please follow these steps:
  1. In CodeCharge Studio navigate File -> Open Project.
  2. Browse for the template folder you've exported from Artisteer.
  3. In the template folder choose the .ccs file and click "Open".

  4. ccs design

  5. Double-click your blog- or homepage in the "Project Explorer" and choose the Preview tab to preview the page.

  6. ccs design

  7. Navigate Home -> Publishing -> Publishing Settings.
  8. In the Project Settings enter the full path to your site folder on server and the server URL.
  9. Check "All files excluding extensions" and click "OK".

  10. ccs design

  11. Enter the URL in your browser, choose and click the page you'd like to view (e.g. home.php or blog.php).

  12. ccs design

Note: To import the template with content don't forget to enable Include Content before exporting it from Artisteer.

To apply the Artisteer design without content:
  1. Open your CCS 5 project.
  2. Go to the Home tab -> Project -> Designs.
  3. Click the "plus" icon ("Add Design"), browse for the theme folder exported from Artisteer and click "OK" to add design to the project.

  4. ccs design

  5. Apply the selected design to your project.

  6. ccs design

Now you can edit and finetune your web application with CodeCharge Studio 5.
Congratulations on your great looking website powered by your CCS template designed with Artisteer!

Download Free Artisteer Trial  Watch Flash Demo

Artisteer is not affiliated with or endorsed by Joomla!™ or Drupal or WordPress Projects.