Version 3.

1

2
page

Table of Contents
Table of Contents ............................................................................................................... 2 What is Artisteer? ............................................................................................................... 6 What’s New in Artisteer 3.0 ................................................................................................ 7 How to work with the Artisteer interface? ........................................................................... 8 Start-Up Dialog ................................................................................................................ 9 Quick Access Toolbar ................................................................................................... 11 File Menu ...................................................................................................................... 11 Preview Area ................................................................................................................. 18 Ribbon Bar .................................................................................................................... 26 Quick Start Guide ............................................................................................................. 27 Downloading Artisteer ................................................................................................... 27 Editions of Artisteer: Home&Academic vs. Standard..................................................... 28 System Requirements ................................................................................................... 29 Installing Artisteer .......................................................................................................... 31 Activating the Software.................................................................................................. 32 Creating an Artisteer Project ......................................................................................... 33 Using the Artisteer Samples .......................................................................................... 35 Creating a Website or Blog ........................................................................................... 37 Supported Content Management Themes and Web Design Templates ....................... 38 Creating a basic design ................................................................................................. 40 Design Customization ................................................................................................... 41 Supported Color Models and Properties ....................................................................... 42 Exporting and Publishing Templates, Projects, Websites or Blogs .................................. 44 The Export Options Dialog ............................................................................................ 46 General Tab ............................................................................................................... 46 CSS Options Tab ....................................................................................................... 47 Description Tab .......................................................................................................... 47 Watermark Tab .......................................................................................................... 47 Footnote Tab .............................................................................................................. 48 artisteer.com | page 2

3
page WordPress Export Options ......................................................................................... 48 Blogger Export Options .............................................................................................. 50 DotNetNuke Export Options ....................................................................................... 51 ‘Website or Blog’ Export Options ................................................................................ 52 Website or Blog:Exporting and Publishing an HTML Project ......................................... 53 Website or Blog:Publishing a Blog to Artisteer.Net ....................................................... 55 Joomla Template:Export and Installation ...................................................................... 57 Tips and Tricks: .......................................................................................................... 58 How to Use Joomla Menus with Artisteer ................................................................... 58 WordPress Theme:Export and Installation .................................................................... 59 Drupal Theme: Export and Installation .......................................................................... 61 Blogger Designs: Publishing and Export ....................................................................... 62 DotNetNuke Skin:Export and Installation ...................................................................... 64 ASP.NET Project:Exporting a Design............................................................................ 64 CodeCharge Studio Project: Exporting a Design........................................................... 66 Ideas Tab ......................................................................................................................... 69 Creating Your Design ................................................................................................. 69 Making Adjustments ................................................................................................... 69 Home Tab (Website or Blog Only) ................................................................................... 70 Edit Tab (Website or Blog Only) ....................................................................................... 74 Setting the Content Layout ............................................................................................ 75 All Pages Option ........................................................................................................ 78 Row Options............................................................................................................... 79 Cell Options................................................................................................................ 80 Inserting Media and Links ............................................................................................. 83 Insert an Image .......................................................................................................... 83 Insert a Video ............................................................................................................. 86 Insert a Table ............................................................................................................. 88 Insert a Hyperlink ....................................................................................................... 90 Insert a Button ............................................................................................................ 92 Editing the HTML Source .............................................................................................. 94 Colors & Fonts Tab .......................................................................................................... 96 artisteer.com | page 3

4
page Colors ......................................................................................................................... 96 Paints ......................................................................................................................... 99 Color Selector Dialog (More Colors)......................................................................... 100 Fonts ........................................................................................................................ 103 Layout Tab ..................................................................................................................... 107 Content Tab ................................................................................................................... 118 Shape ....................................................................................................................... 118 Content Styling (Website or Blog Only) .................................................................... 121 Style and Font .......................................................................................................... 122 Paragraph ................................................................................................................ 127 Metadata .................................................................................................................. 129 Background Tab ............................................................................................................. 134 Sheet Tab....................................................................................................................... 144 Header Tab .................................................................................................................... 149 Header Layout .......................................................................................................... 149 Header ..................................................................................................................... 152 Background Image ................................................................................................... 153 Foreground Photo .................................................................................................... 162 Flash ........................................................................................................................ 164 Title .......................................................................................................................... 167 Title Style ................................................................................................................. 168 Menu Tab ....................................................................................................................... 170 Menu Layout ............................................................................................................ 170 Menu Styles ............................................................................................................. 172 Menu bar .................................................................................................................. 172 Item .......................................................................................................................... 175 Subitem .................................................................................................................... 177 Blocks Tab ..................................................................................................................... 179 Block Styles.............................................................................................................. 180 Block Content ........................................................................................................... 187 Vertical Menu Tab .......................................................................................................... 190 Layout and Styles ..................................................................................................... 190 artisteer.com | page 4

............................................. 200 Layout ............................ 200 CMS-Specific Features ................................................................................com | page 5 .......... 196 Footer Tab..................................... 194 Buttons Tab .............................................................................................. 203 Glossary .................................................................................................................................................................................................................................................................................................................................................................................................................................... 191 Item ......................................................................................... 192 Subitem ............................................................................................... 200 Footer Styles ... 206 artisteer........................................................................5 page Menu Bar..................................................................... 203 Theme options for WordPress themes ...............................................................

With Artisteer YOU immediately become a Web design expert.com | page 6 . coding XHTML and CSS. cross browser compatible and fully compliant HTML and CSS code. without having to know anything about editing graphics or HTML. backgrounds.all in minutes. adjust the generated designs using many included elements. editing and slicing graphics.6 page What is Artisteer? Artisteer is the first and only Web design automation product that instantly creates fantastic looking Website and Blog templates. table less. and export your design to create great looking Web and Blog templates. and creating CMS templates and WordPress themes . Use Artisteer to generate cool Web design ideas. create professional. and with little or no technical training required. without expensive software like Photoshop or Dreamweaver. Artisteer lets you create fantastic looking Website designs and templates in just minutes. photo objects and buttons. WordPress themes and other blog templates. Creating great designs has never been easier! artisteer. This powerful software can make YOU a professional Web designer of Websites.

net (accessible from within Artisteer) Header and footer can now be page-wide Added transparency areas for various graphical effects Added masked header textures (transparency areas in the texture graphics) artisteer. generating thematic web designs (corporate.0 The new features in Artisteer 3. simple. etc. retro.) Custom CSS options in Export Options WordPress theme code based on the default WP 3.com | page 7 .7 page What’s New in Artisteer 3.0 TwentyTen theme Additional header and background graphics Additional color themes Free website hosting service at www.artisteer.0 include: • • • • • • • • • • • • • Website creation features with support for editing pages and blog posts Web design and website samples Support for fluid layouts (resizable sheet width) Interactive web design preview area (clicking a web design element navigates to the corresponding tab in Artisteer) Ability to specify design styles for the "Suggest" feature.

and About Artisteer dialog. Open. Redo. File Menu contains basic options (New. Design Preview lets you see how your design will look like. There are several main items: File Menu. Save. Ribbon contains the designer’s tools.8 page How to work with the Artisteer interface? The Artisteer interface is very simple to learn. Export options. Save.com | page 8 . Activation settings. CSS Options. Undo. Quick Access Toolbar contains Open. Ribbon with Tabs and Design Preview (highlighted on the image below). the Preview in Browser option. artisteer. Favicon). and Quick Export options. the Change Template option. the Export menu (Template. Clicking on any objects in the Design Preview will automatically change the tab on the Ribbon bar to the options you can use to style those objects. Quick Access Toolbar. Save As). HTML.

You can also create web templates for ASP. start with one of the ready-made website samples. WordPress.NET applications. You can create a website or blog. or create a CMS template for Joomla. Blogger. or DotNetNuke. or CodeCharge Studio projects.9 page Start-Up Dialog The Artisteer start-up dialog suggests types of projects available in Artisteer.com | page 9 . artisteer. Drupal.

such as Joomla. Blogger System Themes or DotNetNuke template for your website or blog.NET application or CodeCharge Studio project. .e. Wordpress.a free online hosting service for Wordpress style blogs.net . . . Content Management Create and export a Joomla. which can be downloaded and previewed for free. download the Artisteer and open the Artisteer project (i. etc. These samples cover different categories of websites with typical start-up content. *. Blogger. Drupal. ‘Online Samples’ will take you to Artisteer.com and show you a gallery with ready-made templates. Note. If you want to use one of the sample designs as the basis.artx file). Web Design Templates artisteer. From each sample page. WordPress. you cannot import CMS templates into Artisteer. or idea for your own website. Create and export an ASP.10 page Icon Option Description You can create a website in Artisteer and export it as an Website or Blog HTML website or publish it to Artisteer. . you can download and install one of the CMS templates. or Online Samples you can download the Artisteer project from which these templates were created.com | page 10 . There are several sample templates installed with Samples Artisteer.. even the ones that were created with Artisteer.

start up and preview settings can be adjusted in the Preferences dialog (at the bottom right corner of the file menu). artisteer. Save As). change the template. right click on the desired command button in the Ribbon bar and select "Add to Quick Access Toolbar" option. To add a new item. Save. and select "Remove from Quick Access Toolbar". The language of the Artisteer interface.11 page Quick Access Toolbar The Quick Access Toolbar is a customizable toolbar which you can use to create one-click shortcuts to frequently used commands. Undo. For some commands. Open. the "Add to Quick Access Toolbar" option in the right click menu is disabled. By default. To remove an existing item. the Artisteer Quick Access Toolbar contains the Open. your license key etc. File Menu In the File menu you can manage Artisteer projects (New. export or preview it as well as find general information about the version of Artisteer. Save.com | page 11 . right click on the item in the Quick Access Toolbar. but you can customize the content of the toolbar by adding or removing items as you like. and quickly perform the most common tasks. Redo and Export commands. Note: Not all the commands located in the Ribbon bar can be added to the Quick Access Toolbar.

you can create templates for Joomla. When you change templates within a project. you can create any template from one project.12 page Please note that the Save/Save As option is disabled if you are using Artisteer in trial mode. That artisteer. where the CMS templates share the same design elements. you do not lose the design you were working on. if you create a ‘website or blog’ project. if you are using the ‘standard’ edition of Artisteer. Rather. Although when you create a project. For example. the ‘style’ elements. If you would like to switch your template to a different application or Content Management System. all from one project.. such as pages and post articles. If you change the template type to Wordpress. but the content is not because with Wordpress. the design you create with one template is applied to the other. etc. You can also create content for your website. you design a Header and create ‘style’ choices for the content such as how headings and tables will look on your website. Wordpress. like most CMSs. Where they are different. Blogger. you have to pick the type of template you want to create. open Change Template and select the desired type of template. For example. You do not have to create separate projects for each template.com | page 12 . the content is added in the Wordpress backend. and other choices are automatically applied to your Wordpress theme. such as the Header. the changes are saved and you can come back to them at any time by changing the template type.

pages and posts) disappears in Artisteer. HTML page. and/or configure Export options.g. you only define the design. The content has not been deleted. But. Use the Export menu to export your template to a single file (i.13 page is. The export features are also available on the Quick Access Toolbar. you do not create content with Artisteer when you are creating a CMS template. or ‘style’ of how the content will appear.e. you will notice that when you switch from a ‘website or blog’ to Wordpress.com | page 13 . you can go back to the content at any time by changing the template type from ‘Wordpress’ back to ‘website or blog’. the content (e. artisteer. Use the Export menu in Artisteer to export a template. The content in your website is added in the backend of the CMS. ‘archive’ file). or to a file folder.

com | page 14 .net. you can elect to publish your project to a file or folder and move them yourself later to your remote. or FTP your files to a remote host using Artisteer’s FTP client (This option is only available for static HTML websites.net).net.14 page If your project is a ‘website or blog’. you can publish and host your project on Artisteer. publish your pages to a local file or folder.net. If you publish your website to Artisteer. If you are creating a static HTML website (not hosted on Artisteer. artisteer. This is the only way to copy your files to Artisteer. Your host provider should provide you with the information you need to configure the Artisteer FTP client). all of your ‘style’ selections and content is automatically copied to Artisteer. You must add your FTP settings before using: FileExportExport OptionsFTP Server.net. and/or copy your files to your own hosting service using Artisteer’s FTP client.

com | page 15 .NET project WordPress – WordPress theme Publish the template to a local computer.NET – ASP.15 page Publish to Local or FTP Specify the type of the exported template: HTML – a group of HTML pages Blogger – Blogger template CodeCharge Studio – CCS project DotNetNuke –DNN skin Template Drupal –Drupal theme Joomla – Joomla template ASP. artisteer. or Export to remote hosting service.

use ContentText to set the font. The distinction can be ambiguous though. Help Get online instructions on exporting the template/project. This may be useful if you want to make a copy of your project file. font selection). but the actual text of the article is created in the CMS. This only applies to ‘website or blog’ projects. Use the Preview area to enter text in your page or post directly (e. you define the design.artx project. or you want to share your project with Include *. Select this option if you want to create a single archive file to contain your files. Path Create ZIP File Use the Import feature to import the design and content from another . With other types of projects. select artisteer. like Joomla. images. size and color of the text in your article.g. this has no effect on your website or template. and other CMSs. What you see in the Preview area of Artisteer is some sample text.com | page 16 . For example. designed to show you in general what your web pages will look like with the design selections you have made in Artisteer (e. Specify a folder path where you want to export your template files. or ‘style’ of your content but the content is added in the backend of the CMS. size and color of the text in your articles. you choose the font.ARTX Project other Artisteer users. Otherwise.artx). before you elect this option you should always save your project first so your actual project file and the one in your template are the same. you create both the design and the content at the same time. Note. tables. In a ‘website or blog’ project. Wordpress. Select this option if you want to include your project file with your template (*. etc.16 page Folder name This name will be used as the subfolder or archive name where your template files will be saved.g. For example.

artisteer. or ‘content’ (e. The language of the Artisteer interface may be configured in the Preferences dialog.. Suggest icon). Use the Preview in Browser option to see how your website looks in different browsers. Artisteer highlights the area with a border and special icons you can use to manipulate the area (eg.g. The changes you made with the ‘Content’ tab are part of your ‘design’ just like working with any CMS template. The default language is English (US). or a post article) in the Preview area. pages or posts).g. The preview (e.g.17 page the content area and enter your text). Chrome) is only available in the list of browsers if the browser is already installed on your computer. which could include Head. You can also use the Preferences dialog to: • • • Enable or disable the start-up dialog – this is the dialog you see when you start Artisteer without a project file. Sheet options. Page Background. This can be distracting to some users. Enable or disable Preview Highlights – when you move the mouse over content (e.com | page 17 . etc. or both design and content.g. The changes you made with the Preview area and the Edit tab are part of your ‘content’. but Artisteer supports many other languages. or ‘style’ settings from another project (e. The Import option lets you import just design. your changes will appear in the Preview area. such as changing colors etc. Use the Edit tab to override the default ‘style’ options you selected with the ‘Content’ tab.). Enable of disable ‘Auto-preview’ – when you make ‘style’ changes in Artisteer. a block in the sidebar.

and Footer: artisteer. Horizontal Menu. Header.18 page Preview Area Template Layout The default Artisteer template layout reflects the typical website page structure.com | page 18 . Content (Article 1. Blocks). consisting of the Page Background (Background Tab in Ribbon). Sidebar (Vertical Menu. Article 2).

Over each layout element there is a mini toolbar with available features displayed as icons. Delete Block . and Hide Article artisteer. Left-clicking the mouse over one of the layout element activates the corresponding options on the Ribbon bar. such as Suggest . Pages .com | page 19 . Width (Sheet only) .19 page The borders of layout elements are highlighted in the Preview area in yellow when you mouse over the area. Position .

For example.g. the article has a headline.20 page Title . For example. What you see in the Preview area is an example of your ‘style’ defined in Artisteer applied to a sample image and text.com | page 20 . Similarly. You can define what icon to use to begin each list item (e. Position. you will not see the image and sample text as you see here since the content for your Post is written in the CMS. ‘Article’ is a sample except the Preview area shows you all of the possible style elements you can control in Artisteer. Delete Block. Wordpress. Width Suggest. Suggest Mode artisteer. you can decide how ‘lists’ should appear on your pages. write a Post article). Pages (Website or Blog only) Suggest. When you create your content in the CMS (e. Position. What you will see on your website is your ‘style’ applied to the content you create in the CMS. Position Suggest Suggest. Some of these features may be absent depending on the type of Artisteer project and CMS you are designing. Pages (Website or Blog only) Block Sidebar Content Article Title Footer Suggest. ‘Article 1’ in the picture above is an example of an Post article written for your blog as it would appear if created in a CMS like Joomla.g. Delete Block. numbers or bullets). Position Suggest Suggest Hide Article Title (Website or Blog only) Suggest Note. etc. and what font each line item should have. Layout Element Header Page Background Sheet Menu Vertical Menu Mini Toolbar Features Suggest. if you include a ‘list’. an author reference and icon links to related content. When you are working with a CMS like Joomla. this is how the list will appear. Wordpress. etc. a date and time..

the Header on your page is a layout element. You can also cycle thru suggestions on an element by holding the Ctrl key down while moving the mouse over the Preview area. click the Undo button on the quick access toolbar. When you left-click the mouse. the Suggest icon should appear over the element that is highlighted. Artisteer will suggest a design idea and change the layout. Otherwise. Artisteer will highlight a layout element by adding a yellow border around the area. Select the Suggest Mode buttion in the upper right corner of the Ribbon bar. when you move the cursor over various parts of the Preview area. you can ask for another suggestion just by holding the Ctrl key down and clicking the mouse. Position In the Preview area you can manage the position of the Header. For example. and then hover the cursor and left-click the mouse on the element you want to change in the Preview area. If you do not want the change. Click the Suggest Mode button again to change Artisteer back to regular editing. etc. Again.21 page You can also use the suggest mode to see some design ideas for a layout element. When you press the Ctrl key.com | page 21 . Blocks. Vertical Menu and Blocks. Hover the mouse over the appropriate element and click the Position icon . Menu. the horizontal menu is a layout element. as well as the Sheet. Please note. that the artisteer.

Website Map (Website or Blog Project Only) The website map is located on the left side of the preview window. Use as Blog Page. click the Pages icon and select the page you want to include. Right-click the mouse on one of the pages to display the context menu and select the approriate command – New Page. The ‘Website or Blog’ Artisteer project includes an additional Pages option. artisteer. Hide Article Title.com | page 22 . as the position of these elements can only be changed within the CMS. The map helps you see and manage the organization of your web pages.22 page position of Blocks and Vertical Menu is not available for Drupal and DNN skins. Hide the website map by clicking the icon. New Blog Post. Properties. Edit. Rename. which helps to link pages and the appropriate horizontal and vertical menu items. Delete. or exclude from the menu. New Child Page. Hover the mouse over the menu.

This is used in the URL to identify the page on your website. this is different from artisteer. Note.23 page Page Properties In the page properties you can define attributes of your page. or in your favorites list if you bookmark the page. If the browser supports it. this is the title of your page as it appears in the browser’s tabs. HTML HTML reference to your page.com | page 23 . Some of these are very important to search engine optimization (SEO). General Option Name URL Description Name of the web page.

The page title in the website map is used in your horizontal and vertical menu (if you have not change the menu source). Vertical Menu Check the box to have the page displayed in the Vertical Menu or artisteer. <meta name="keywords" content="sepkeyword" /> This is important to SEO. Keywords Your keywords become part of the meta tag. <meta name="description" content="this is my separator page" /> This is important to SEO. These are important to the search engine rankings for your page.com | page 24 . in the HTML code for this page. ‘keywords’.us /> Show in Menu Option Horizontal Menu Description Check the box to have the page displayed in the Horizontal Menu or uncheck the box to exclude it from the menu. Custom Meta Tags Use this text box to add the HTML code to define additional meta tags you want included.24 page the title that appears in the website map. Page Tags Option Description Description Give a short description of the created page. Your description becomes part of the meta tag. in the HTML code for this page. ‘description’. <meta name=”author” content=”Bob Smith” /> <meta name=”contact” content=bsmith@robertsmith.

com | page 25 . and Footer text may be changed in Artisteer with WYSIWYG editing mode. Articles. Click the text area in the Preview window. Page Title. The website Headline. WYSIWYG Editing (Website or Blog Only) ‘What You See Is What You Get’ (WYSIWYG) Editing is a simple and effective way to add new data to a website. Slogan. Horizontal and Vertical Menu item names may be altered in the website map (select the page and press F2 or right-click the mouse on the page and select Rename) artisteer.25 page uncheck the box to exclude it from the menu. delete the sample text and add/paste the new content. Block.

Sheet. Some extra tabs with options for adding and editing content appear on the Ribbon if you create a Website or Blog project in Artisteer (see the sections Home Tab and Edit Tab below for more details) artisteer. Content. Vertical Menu. Layout) to specific elements (Background. Moving from left to right. Buttons. we become more focused on specific parts of the site such as blocks and buttons. As we move to the right. Each Tab contains options in a logical sequence from general ideas and options (Ideas. Header. Footer). we begin with the overall idea and layout of the site. You can use the Preview area to click on the part of the template you would like to design and select the options available inside the active tab. Sidebar.com | page 26 .26 page Ribbon Bar The Ribbon bar is divided into Tabs. Colors and Fonts. Menu.

With the ‘trial’ version of Artisteer you can also try Artisteer. you can export templates. The software is provided with a free trial period that allows you to evaluate the product before purchasing. offering you to purchase Artisteer or continue using the trial version within the next fourteen days. When this period expires. The trial period is unlimited and you can activate the software at any time you wish.artisteer.net with the following restrictions: Trial Version Free Disk Space Artisteer Image Gallery Custom Domain The Usage of Blog 10 MB unavailble unavailable free 30 day trial* 200 MB available available Full Version unrestricted After the 30 day trial. Please choose the release of Artisteer appropriate for the platform you will be using: PC or Mac. but all the templates and images generated with Artisteer will have watermarks on them until the product is activated.com/?p=news. Activation instructions are covered in the Activating the Software chapter below. however you will not be able to save your Artisteer project. you will receive another e-mail notification. During this period of time. a notification will be sent to your e-mail. or http://www.com/?p=downloads. artisteer. There are no functional differences between the PC and Mac releases.27 page Quick Start Guide Downloading Artisteer You can download the Artisteer installation file from the official Artisteer Web site at http://www. Artisteer is fully functional and has all of its features available for testing.com | page 27 .artisteer. Also.

If you purchased the Standard edition.NET Application Export to CodeCharge Studio Custom Values Dialogs* Library of Textures. these appear with the icon in the bottom right corner of the command block on the Ribbon artisteer.5. 1. Normally. and Gradients Number of Color and Font Schemes     Partial (75%)      Home&Academic Edition        Standard Edition        50+ 70+ *Custom Values Dialogs refers to additional customization options available in the Standard edition.7 Template Export as Drupal 5/6/7 Theme Export as ASP. but the features available in Artisteer depend on the type of license you have purchased. The following chart illustrates the differences between both editions: Version Free upgrades for 1 year Design Suggestions Design Features Export as XHTML+CSS Export as Wordpress Theme Export as Blogger Template Export as Joomla 1. Standard There is only one platform release (Mac or PC) of the Artisteer software that you install on your system. Glares. If you purchased the Home edition.28 page Editions of Artisteer: Home&Academic vs. all features of Artisteer are available. or 1.com | page 28 .6. there are certain templates you will not be able to export and you will not be able to set most of the custom options available in the Standard edition.

com/downloads/en/details.0+. It can be obtained from the Microsoft website at: http://www.33GHz or faster processor 150 MB free disk space 1GB of RAM Mac OS X v10.5. Also. Windows Intel® or AMD® processor 1500 Mhz or faster 150 MB free disk space 1 GB of RAM Microsoft® Windows® XP.g.x or 10. many submenus in Artisteer have a More… selection or a specific item selection that allows you select advanced options (e. Font Options…. Gradient Options…. Windows Vista® or Windows Seven® Microsoft .microsoft.com | page 29 . etc.NET Framework 2.) System Requirements This section describes the system requirements for the Artisteer software.aspx?FamilyID=9CFB2D51-5FF4-4491-B0E5B386F32C0992 Mac OS (Intel) Intel Core™ Duo 1.6.29 page bar.x Mac OS (PowerPC) Not supported artisteer.

30 page Browsers supported: Internet Explorer 7+ Firefox 2+ Opera 9+ Safari 1+ Google Chrome 1+ Technologies supported: CodeCharge Studio 4 WordPress 2.net Standards supported: XHTML 1.7) content management system Drupal (5.9+ ASP.x.com | page 30 . 1.x.x) content management system Blogger DotNetNuke 4. 1. 7.7-3. 6.0 Transitional CSS 2 Section 508 (partially) artisteer.5.1 content management system Joomla (1.NET / Visual Studio Artisteer.6.

check "I Accept the terms of the License Agreement" option and proceed to the next step. Follow the instructions provided by the installation wizard. or assume the Primary Administrator role. progress bars etc. quit the installation. Click Install button to start the installation. Indicate whether you want to create shortcut icons on the desktop and Quick Launch panel. This will run the installation process in the background without displaying the installer dialogs. Before you proceed. please make sure that your computer meets the requirements listed in the System Requirements chapter. Click the Next button.exe. Otherwise. Select the language that you’d like to use during the installation. Carefully read the License Agreement. Log into Windows as a Power User. This will launch a standard installation process. Click Finish button when the installation is complete. Double-click the installation file called ArtisteerInstall.31 page PNG with transparency Installing Artisteer This chapter describes how to install Artisteer on your computer. If you would like to install the software using silent installation. please use /silent key to perform silent installation of Artisteer.com | page 31 . Select the destination folder where you want to install the product. If you accept its terms. Artisteer supports silent installation. Your installation query should look similar to the following: artisteer.

Note. artisteer. return an activation key. For example. and automatically enable the features of Artisteer. the license key is associated with the Artisteer release. use the following link to obtain the activation key from any other computer connected to the web: http://www. The type of license that you purchased determines the features that are available in Artisteer (‘Home’ vs. If you work off-line. The activation removes the watermarks added to the generated templates in the trial version.com | page 32 . ‘Standard’). not the target platform.com/?p=a2 In this case. the license key is the same for both Mac and PC if you are installing Artisteer 3. the software will connect to the Artisteer servers on the Internet.artisteer. To activate the product select File  Artisteer Activation and enter your license key number in the first box. It also automatically enables all of the features of Artisteer for the edition you have purchased (‘Home’ vs. If successful. ‘Standard’).32 page Activating the Software After you have purchased Artisteer you will receive a License Key by e-mail to be used to activate the software. uncheck the "Auto-activation through the internet" option and enter the activation key you obtained from the other computer directly in the Activation Key box. If your computer is connected to the internet. check "Auto-activation through the internet" option and click the Activate button.1 even though the software package may be different.

Your project file is very important.33 page Creating an Artisteer Project You create an Artisteer project using either the start-up dialog (described above) when you start Artisteer.artx project files. like Joomla. Normally. You select the type of project you want to make.g. or FileSave As… This creates a special Artisteer project file (e. artisteer. you must select a specific project type corresponding to the template you want to create (e. You can export CMS templates from Artisteer. Wordpress).e.com | page 33 . you will create and work with a single design. or with FileNewNew Project.artx files. and then save your changes with FileSave. Eventhough when you first create a project in Artisteer. You can only work with . you are not constrained to one particular theme or template. In each project file. you can create designs for several types of templates at once. you want to create a design for Wordpress. create your design and content. you will need your project file. but you cannot import CMS templates created with other software (or even CMS templates created with Artisteer). FileChange Template). <your project name>.g. but suppose you decide that instead of one CMS. You can simply change the template type using the File menu (i. If you later want to make changes to your design. so you should save your changes when your design is finished and keep backup copies of your projects. Artisteer only works with .artx).

these are ‘content’ elements. When you save your Artisteer project. For example. When you are working with a ‘website or blog’ project you are creating both the ‘style’ and the ‘content’ at the same time. if you set the Page Background to ‘red’ in your Joomla template and then switch to Wordpress.) is normally added in the CMS host software (the ‘backend’). When you add text. images. your new template will also have a ‘red’ page background because Page Background is a common ‘style’ element. where the old and the new templates share the same ‘style’ elements. If you swtich from a ‘website or blog’ project to another template. text. both your ‘style’ and ‘content’ is saved at the same time. your content will reappear. Every time you publish your website from the desktop to Artisteer. the selected color of your Page Background is a ‘style’ element. This free hosting service is Wordpress based so adding content and managing your website is very similar to Wordpress. You should refer to the Artisteer. you create the ‘style’ but the content (i.g. etc. If you switch back to a ‘website or blog’ template. artisteer. If you are working with Joomla. You only work with one template type at a time in Artisteer. and other content for your pages and posts.34 page If you have created a ‘website or blog’ project. or some other CMS. Your work is not lost. images. and how your ‘content’ and ‘style’ are kept in-synch. For example.e. This is because there are two parts to your project: the ‘style’ and the ‘content’. you will see that some of your design changes have been applied but your content (e. The ‘style’ represents those elements that describe how your website will appear.net. pages and posts) disappears.net.net. your ‘content’ and ‘style’ that you see on the desktop is synchronized with the content you added on Artisteer.net manual for more details about how to use Artisteer. you can also create content on Artisteer. How you want Headings to appear in your content is another ‘style’ element. Artisteer applies the existing ‘style’ changes you made to the new template.com | page 34 . If you are hosting your website on Artisteer. When you change template types (FileChange Template). and added content to your website.net. like Wordpress.net so you should re-publish your website often and save your project file to keep your content current. you can still change the project without losing any of your content.

com | page 35 . there are many more free samples on Artisteer’s website http://www. or customize as you choose. Artisteer will open the project sample file and you can begin making changes. Select “Online Samples” Select Online Samples in the Artisteer start up artisteer. If you open one of the built-in samples.35 page Using the Artisteer Samples Artisteer is installed with several professionally designed sample projects which you can use as-is.com/?p=license_agreement. The Artisteer built-in sample projects were designed to give you some ideas on the possible layout. You can also get to this page by clicking on the ‘Online Samples’ icon in the Artisteer start-up dialog when you create a new project. You are free to use the Artisteer samples as you wish so long as you follow the license agreement at http://www.com/?p=free_website_templates.artisteer. make sure the project (template) type corresponds to the type of template you want to create (FileChange Template). select Samples on the program start up and then just pick the template you want to use.artisteer. To create a website based on one of the Artisteer sample websites. 1.artx project file and then open the project file from wherever the file was downloaded. design and content of a website depending on the topic it covers. you will need to download the . When your project is opened. If you want to use one of the on-line samples. Besides the samples that are installed with Artisteer.

The other templates are only for illustration purposes only. Joomla) even if the template was exported from Artisteer. Find a Sample Find the sample website. They allow you to.g. which seems closest to your target website.artx project. for example. there are several template types besides the Aristeer project file that you can download and use.com | page 36 . On the web. This is the only template format that you can use within Artisteer. artisteer. install it and see immediately what the template would look like in Joomla. You cannot import other formats (e. download and use only the Artisteer project. download a Joomla template.36 page 2. If you want to use the sample as the basis for your own website. or if you want to make changes to the sample to create a new website. Download the Artisteer Project Download and open the . 3.

FileChange TemplateJoomla) for your website.e.0. use the standard Artisteer tools to add and modify your design and publish the created website to Artisteer. included with Artisteer. creating a website is now as easy as 1-2-3 1. or available on Artisteer’s website. Select Project Select a Website or Blog project in the Artisteer start up dialog. or choose one of the professionally done samples. pages and posts) disappear. don’t worry. Most of the samples have been created as ‘website or blog’ so when you open the project you may see that several pages and posts have been created already. If you see the content (i.net (Artisteer’s free hosting service). artisteer. You can always get these pages back if you change the project type back to ‘website or blog’.g. You can either start from the default project. you can create a website or blog in Artisteer. So.37 page As mentioned above (‘Creating an Artisteer Project’). This means you can add and edit content in WYSIWYG mode.com | page 37 . The first thing you want to do then is check the project type and change it if you want to use a different type of template (e. you can export your project to any type of template that your particular version of Artisteer supports. Creating a Website or Blog Starting from Artisteer 3. or export it as an HTML website.

or Export the website as HTML. You can also export Artisteer generated templates as ASP.NET and/or CodeCharge Studio applications.a free online hosting service and blogging service. Supported Content Management Themes and Web Design Templates On the Artisteer start-up dialog you can choose the type of project you would like to create.com | page 38 . Edit Edit the sample content in the Preview area by clicking the content area and pasting/typing your own text.net . WordPress. you can design templates for Joomla. 3. Publish/Export Click Create Website to publish the website with the help of Artisteer. Drupal.38 page 2. With Artisteer. Blogger. artisteer. and DotNetNuke.

39 page Artisteer generated templates of any supported Content Management System and Application may also be exported as HTML pages. artisteer.com | page 39 .

Export to save the created design as a WordPress theme. or click again to see another design suggestion artisteer.com | page 40 . The corresponding “Suggest …” buttons will help you find what you want 3.40 page Creating a basic design Creating a design with Artisteer is as easy as 1-2-3: 1. You may want to adjust some design elements like colors. fonts or background separately. HTML template or any other template format you like. Suggest Design is a tool to find a basic theme idea by viewing different design suggestions genereated at random 2. This creates a random design that you can either work with as-is. Select Design when you find a good design idea. nearly everything you need to do can be started by clicking the Suggest Design button. In most cases.

Also. Note: Some options may not be available depending on the settings and layout choices you have made in other areas. all of the advanced options are not available in the ‘Home’ edition of Artisteer.com | page 41 . normally there is a “More…” selection to get full customization capabilities: Here is an example of how it looks for the Sheet tab: Even more options artisteer. After you find a good design idea you may go into a specific tab and adjust the design options until you get exactly the appearance you want.41 page Design Customization Artisteer is a powerful tool with great customization capabilities. That is not all! If you can’t find the option you want in a specific list. On each tab there are several options for customizing specific elements.

You can also enter the desired value directly in the textbox. The artisteer. Position the pointer over the slider and drag it to the right or left to increase or decrease a specific option’s value. The values for red. For example. This HSL scheme defines colors more naturally and can be visualized as a cylinder whose central axis ranges from black at the bottom to white at the top with neutral colors between them. a mix of red and green produces the yellow color. green. Instead it is more convenient to describe colors as made up of hue. However human perception does not see colors as triplets of numbers: red. green and blue. Mixing all three base colors with full intensity produces the white color while the absence of all the color components returns black. you can create any of the colors which a monitor can display.42 page The user interface for a typical dialog box includes a list of option groups located in the left pane of the dialog box. green and blue base colors. The selected value will be displayed in the box next to the slider bar. Depending on how much you take from each base color. Most of the dialog boxes contain settings that can be changed using slider bars.com | page 42 . saturation and lightness (or luminosity). RGB is a convenient color model for computer graphics because the human visual system works in a similar way. Supported Color Models and Properties The colors on computer monitors are made up of varying amounts of red. where 255 represents 100% intensity of the color. Click on the group to show its options. and blue base colors are usually specified using a scale from 0–255 (decimal). a mix of red and blue – magenta and so forth.

expressed as a degree between 0° and 360°. saturation increases from the center to the edge. It is measured as a location on the color wheel. hue is identified by the name of the color such as red. The distance from the axis corresponds to “saturation”. On the standard color wheel. The desired color can be specified in the Color Selector dialog. spectral color. It represents the amount of grey in proportion to the hue. or green. Hue 0 1 2 3 4 5 6 Color red yellow green cyan blue magenta red Saturation is the purity of the color. or “luminosity”.com | page 43 . and the distance along the axis corresponds to “lightness”. In common use.43 page angle around the axis corresponds to “hue”. orange. usually measured as a percentage from 0% (black) to 100% (white). Luminosity (Lightness): is the relative lightness or darkness of the color. Hue specifies a pure. Artisteer allows you to work with both HSL and RGB color schemes. artisteer. measured as a percentage from 0% (grey with no hue at all) to 100% (fully saturated color).

(this depends on your project type). An export button is also located on the Quick Access Toolbar. To export the template/HTML/application. If you choose. Projects. you can export it as a template compatible with the type of blog.com | page 44 . you can also publish your website to Artisteer.44 page Exporting and Publishing Templates. If you have created a ‘Website or Blog’ project you can publish your website as HTML pages to a local folder on your computer or move it to a hosting server via Artisteer’s FTP client. CMS. Blogger users may publish templates directly to Blogger. Websites or Blogs Once you have settled on the basic look of your site. or application that you want to use. Joomla Template etc. You can also export your template using the File menu. Click WordPress Theme. 1) Press Ctrl+E. artisteer.net.

You can also save your .com | page 45 . DotNetNuke. This has no affect on installing or using your template.45 page 2) In the Export dialog indicate the template type (HTML. If necessary. Joomla. If you want to export a different type of template select FileChange Template.NET Application. Blogger. and Drupal templates). CodeCharge Studio). compress the template folder by using "Export as a ZIP archive" option. ASP. 3) Click Export to finish the process or select Options to adjust some specific export options: artisteer.artx project file with your template. the template type depends on the type of your project. Specify the desired template name and the folder where you want to export your template files. and version of your CMS (for Joomla DotNetNuke. Drupal. Note. This option is useful though if you want to create a backup copy of your project file. WordPress. or you want to transfer your template to another Artisteer user.

You can use this dialog to set specific options for exporting templates from Artisteer. Most of them are optional. will display this next to the web address for your site in the address bar and/or the browser’s artisteer. Site Icon Choose a site icon from the gallery or insert a custom icon from a file. but also how text is inserted in Artisteer. Browsers that support favicons. the advanced export options are located in the File Menu and on the Ideas tab (Export group). The available options are described below. General Tab The general options help to adjust the text/writing direction and Site Icon (Favicon) Option Text Direction Description Specify the text/writing direction. This is not only how the text will appear on your pages.46 page The Export Options Dialog Apart from the Export dialog.com | page 46 . Note: some extra group tabs may appear depending on the template type. no value is assigned when a field is left empty. Artisteer supports both Left to Right and Right to Left directions.

if your CMS supports such functionality. Identifies the Version Number of the template. Option Author Name Author URL Template Version Template URL Tags Description Description Identifies the name of a person or organization creating the design. Provides additional information about the theme. “_”) and should start with an A-z letter. Additional CSS styles You can enter custom CSS styles here. CSS Options Tab Option CSS prefix Description The CSS prefix exists to avoid conflicts with CSS classes of 3rdparty modules. It may contain only alphanumeric symbols and dashes (A-z.47 page bookmarks. This information is used by the CMS. which may be modified. Description Tab The Description tab describes the information to be used by Artisteer to generate the stylesheet header and the metadata information for the theme. Specifies the keywords associated with the theme. the Watermark Text will be repeated throughout the artisteer. Provides a reference to the Author's website. 0-9. The “art-“value is a default CSS prefix in Artisteer. Specifies the location of the template on the web. They will be embedded in the CSS file generated by Artisteer.com | page 47 . Watermark Tab Option Show Watermark Description If checked. “-”.

WordPress Export Options The WordPress tab contains ‘home page’ Menu Item settings. Uncheck this box if you do not want this to appear. ‘Categories’ means the categories you create in Wordpress. the CMS name and “Artisteer” will appear at the bottom of the page. ‘Pages’ means the static pages on your website. Include a backward link to the CMS and the Artisteer When checked. Footnote Tab Option Include a backward link to the author Description When checked. Watermark Text The text to be displayed across the page when the "Show Watermark" option is enabled. which specify whether Artisteer should create a special menu item pointing to the homepage (front page) of the website.48 page page.com | page 48 . the above-defined author name will be displayed at the bottom of the page with a link using the name of the Author and the Author’s URL address as defined above. Categories are arbitrary artisteer. Menu Source settings define the source of the menu items: categories or pages.

Option Show Home Item Description Normally. The ‘Home’ option only applies to the default frontpage.com The default page.g. if I unselect ‘Show Home Item’ in my Theme options.e. when viewers visit your site. www. Home Item Caption Specifies the caption of the menu item pointing to the home page if you have select ‘Show Home Item’ above. Menu Source Defines whether ‘categories’ or ‘pages’. In the Reading settings in Wordpress. the ‘Home’ item does not appear so while viewers are on your site. then it overrides this setting in my exported theme. The horizontal menu bar normally consists of items that are links to the pages of your site. your Theme options are shared for all of the Artisteer themes you have installed. the URL they use does not reference a specific page. This option also appears in your Theme options in Wordpress.mysite. the ‘Home’ option no longer applies (i. are used as the source for artisteer. See ‘Theme options for Wordpress’ section below. a menu item is added to your horizontal menu bar so your viewers can always go back to this page. if you change the frontpage from the default. even if I uninstall. you can change the frontpage to either a static page. delete and reinstall the theme. or frontpage for a Wordpress site is normally a list of your Post articles. For example. Also. If you unselect this option. which is a list of your Posts.49 page names you use to organize your posts and pages. they cannot select a choice on the menu bar to navigate back to this page. E. or a specific Post page. If you select this option. you will not see your ‘Home’ option in the menu bar).com | page 49 . Any settings in your Theme options override the same settings in your theme generated from Artisteer. these names can be arranged in a hierarchical order. However.

Home page menu item Specifies the caption of the menu item pointing to the home page.com | page 50 . ‘Pages’ are the static pages on your website. or ‘archive should be used as the source for the horizontal and/or vertical menu. Menu Source Define if ‘categories’. ‘Categories’ are arbitrary names you create and use to organize your posts. ‘Archive’ refers to the dated post archives.50 page the horizontal and/or vertical menu. Blogger Export Options Option Show Blogger Navbar Description Use this option to hide or show the blogger Navbar. ‘pages’. artisteer.

1 version supports DNN 4. DotNetNuke Export Options Option DNN Version Description Specify the DNN version you are using. ImageShack Image Hosting.51 page Option Hosting Provider Description You can choose a hosting provider for images: Picasa Web Albums.1 now supports artisteer. or FTP server if you use another image hosting service. DNN 6 will be supported with the next Artisteer update. Using DNN 4. Artisteer 3.com | page 51 .9 skins. Menu Options Along with the custom Artmenu object.9 and DNN 5. Using DNN 5 skins. the Login tab and User tab are automatically added to the menu. Artisteer 3. the Login tab and User tab may be removed from the menu with the help of the Menu Options.

tick the Use DNN Menu box and deselect the appropriate tab. ‘description’. Description Give a short description of the created page. ‘Website or Blog’ Export Options Option Default Page Tags Description You can add a site description. The information will be stored in the appropriate meta tags inside the <head> tag. in the HTML code for this page.com | page 52 . keywords and custom meta tags for more effective SEO.52 page the standard DNN Menu. which can be enabled by selecting the Use DNN Menu option. Your description becomes part of the meta tag. The Show Login Tab in Menu and Show User Tab in Menu options is available for DNN 5 skins. artisteer. The options allow removing the Login Tab and User Tab from the DNN Menu. To remove the Login Tab and/or the User Tab.

e. Create the design and content of your website in Artisteer by using the options in the Home and Edit tabs. and Remote Directory. <meta name="keywords" content="sepkeyword" /> This is important to SEO. Complete these options if you plan to use the Artisteer FTP client to move your static HTML website to a remote server (i.us /> Specify the FTP Protocol. Pick “Website or Blog” on the Artisteer start-up dialog. FTP Server if you are using your own hosting service). User Name. <meta name=”author” content=”Bob Smith” /> <meta name=”contact” content=bsmith@robertsmith. Your hosting service should provide you the details for how to complete this dialog. Custom Meta Tags Use this text box to add the HTML code to define additional meta tags you want included. you do not need to complete this if you are hosting your website on Artisteer. ‘keywords’.net. These are important to the search engine rankings for your page.net.com | page 53 . Note. Host.53 page <meta name="description" content="this is my separator page" /> This is important to SEO. Password. in the HTML code for this page. Website or Blog:Exporting and Publishing an HTML Project Follow this if you want to publish a static HTML website that is NOT hosted on Artisteer. artisteer. Keywords Your keywords become part of the meta tag.

Artisteer does not replace the entire folder content with the files you are exporting. If you want to include your . select Local.54 page To export the website: 1. etc. artisteer. such as your FTP server settings. Optionally. Artisteer provides an FTP client to make it easy to move your website files to a remote host server.artx project contains all of your design and content changes. Note. Click Export to finish the process.com | page 54 .artx project with your project. Adding this to your folder does not affect your HTML website but it is useful if you want to make a backup copy of your Artisteer project. you should remove all of the files in the folder first. select the Include *.ARTX Project option. You can choose to export your website to a folder instead of a single zip file by unchecking the Create ZIP file option. adjust the additional export options. (see The Export Options Dialog section above for more details). Specify the type of export: to export a website (design and content) to a folder on your computer. site icon. when you export your files this way. to export the website to a hosting service. Go to the Quick Access Toolbar and select Publish to local/FTP. 4. 3. Your . or you want to share your project with another Artisteer user. however you can use any FTP client or service you want to move your files. Your hosting service should provide you with instructions on how to configure your FTP client to use their server. 2. Check off the Create ZIP file option and enter the file name and path to the exported file on your computer/server. The folder option is useful if you already have a local or remote server folder. However. select FTP. text direction. To be sure that you do not have any extraneous files from a previous installation. before exporting.

or just press Ctrl + S. Specify the user name and password of an existing Artisteer. 1. The e-mail address must also not be used by anyone else on Artisteer. press Ctrl+E or select Publish to Artisteer. The user name you enter should be unique and contain at least four symbols (lowercase letters (a-z) and/or numbers).artx project with the File menu on the Quick Access Toolbar and select Save. Having designed a website.Net Before publishing your website to Artisteer.net user first.55 page Website or Blog:Publishing a Blog to Artisteer.net on the Quick Access Toolbar.net account or create a new account by entering the desired user name and your e-mail address. To publish a website to Artisteer. artisteer.net you need to be a registered Artisteer.net. 2. remember to save the .net.com | page 55 .

You should also save your project frequently on the desktop because your project file contains both your ‘design’ and your ‘content’.56 page Specify the Title and Domain (site name in the URL) for the new website and click Create.com | page 56 .net to create and manage your content on the web. The domain should be at least four characters long and it must be unique for all domains on Artisteer. You should avoid making changes to your content using both the desktop and Artisteer. artisteer. the content and design on the desktop is synchronized with the content on Artisteer.net at the same time. Whichever way you make changes. or use Artisteer. Please refer to the Artisteer. you can continue to make changes to your design and content on the desktop. every time you publish your website.net so you should republish often to make sure your project on the desktop has the same view of your website as Artisteer. After you have created and published your website.net users manual for more information.net.net.

Adding this to your folder does not affect your Joomla template but it is useful if you want to make a backup copy of your Artisteer project.5 -1. If you want to include your . To be sure that you artisteer. 1. and then enter the name of the template and the export destination. The folder option is useful if you already have a local folder that you use for your templates.artx project with your project. select the Create ZIP File option. Select “Joomla template” on the Quick Access Toolbar or press Ctrl + E to invoke the Export dialog (or FileExport).57 page Joomla Template:Export and Installation Artisteer can create templates for Joomla 1.ARTX Project option.6. or you want to share your project with another Artisteer user.7). Joomla templates can be installed from a zip file or a folder.7. If you choose to use a folder. however when you export your files this way.artx project contains all of your design changes. Follow the steps below to export your design as a Joomla template: 1. Specify the Joomla version (1. unselect the Create ZIP File option.5. Artisteer does not replace the entire folder content with the files you are exporting. 2. and 1.com | page 57 . Your . select the Include *.

(see The Export Options Dialog section above for more details). For additional information about installing and using your Joomla template. you can create them manually following the instructions provided in the Joomla documentation: http://docs. Click Export to finish the process.joomla. you should remove all of the files in the folder first. before exporting. one for the administrator and one for installation.artisteer. etc. Using all three packages is not required. 3. please refer to this link: http://www. Language packages are available for download at: http://joomlacode.artisteer.com | page 58 .com/?p=help_joomla artisteer. such as your text direction.com/?p=wiki Tips and Tricks: Joomla localization Joomla currently supports 50 languages. adjust the additional export options. If there are no packages for your language.org/gf/project/jtranslation/frs/ Joomla uses three language packages: one for the front end. Feel free to download only the necessary packages and customize the language settings to suit your needs. site icon. Optionally.org/How_to_create_a_language_pack How to Use Joomla Menus with Artisteer Please refer to the following link for more information about how to use Joomla menus with Artisteer: http://www.58 page do not have any extraneous files from a previous installation.

7 and higher. and then specify the name of the theme and the export destination. artisteer. unselect the Create ZIP File option. select the Include *. Your .com | page 59 . Check off the Create ZIP file option. Follow these steps to export a design as a WordPress theme that can be installed in your WordPress installation: 1. Adding this to your folder does not affect your Wordpress template but it is useful if you want to make a backup copy of your Artisteer project. Wordpress templates are normally installed from a zip file. to replace the files in an existing installed theme). If you choose to use a folder (e. Select “WordPress Theme” on the Quick Access Toolbar or press Ctrl + E to invoke the Export dialog (or FileExport).g. or you want to share your project with another Artisteer user. When you export your files this way. If you want to include your . To be sure that you do not have any extraneous files from a previous installation.artx project contains all of your design changes. 2.59 page WordPress Theme:Export and Installation Artisteer creates Wordpress themes that are compatible with Wordpress version 2.ARTX Project option. Artisteer does not replace the entire folder content with the files you are exporting.artx project with your project.

This is especially important for Wordpress themes. for example: define ('WPLANG'. or on the WordPress Website at http://codex.wordpress. the German language file is: de_DE. Italian and Spanish translations are exported by Artisteer in the WordPress compliant file naming format: <country>_<lang>.wordpress.php file. before exporting.mo To include a different or additional language in your Worpdress theme. etc.com | page 60 . Optionally. adjust the additional export options.artisteer. Artisteer automatically includes several language files obtained from the WordPress Website at http://codex.org/WordPress_Localization To select a different language than your current WordPress language. site icon. 3. Click Export to finish the process. German.com/?p=wiki Tips and Tricks: WordPress theme localization When exporting themes. 'de_DE') artisteer. French. such as your text direction. please refer to the following link: http://www.mo For example. change the "define" function in the wp-config. You can find the additional language files in your default theme folder "<WordPressFolder>\wp-content\themes\default". (see The Export Options Dialog section above for more details).org/WordPress_Localization Specifically. please find and copy the desired language files into your specific WordPress theme folder.60 page you should remove all of the files in the folder first. For more information about installing and using themes for Wordpress.

select Manage  Localization. Drupal Theme: Export and Installation Artisteer can create templates that are compatible with Drupal 5. the version of the CMS (5-7) and the export destination.org/extend/plugins/codestyling-localization/ Then in WordPress administration. 2.61 page To edit translations for your language please download and install the Codestyling Localization plug-in from http://wordpress. 6.com | page 61 . After the export you will obtain a set of Drupal-specific theme files that can be located in the theme folder on the server and easily applied to Drupal websites. or select Include *. and 7. The path to the theme folder in the Drupal artisteer. *Optional* Tick the Create ZIP file check box to export the website as an archive. Click Options to invoke the Export Options dialog and adjust the additional settings or just click Export to finish the process (see The Export Options Dialog). 3. Follow the steps below to export a design as a Drupal theme: 1. Select “Drupal template” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog (or FileExport). Specify the name of the template. Pick a Drupal theme on Artisteer start-up.ARTX Project to save the Artisteer project and be able to edit it further on.

log into the administration area.com | page 62 . If your theme is exported as a ZIP archive. and underscores in the theme name. check the "Enabled" box as well as the "Default" radio button next to your template and click the "Save configuration" button. If you work with Drupal version 5. Drupal Localization The localization feature is described in the Drupal documentation: http://drupal. navigate to Administer  Site Building  Themes. No special characters. numbers. be sure not to rename your template folder after the export.com or exported to any folder on your computer. some functions will be undeclared and the design will look corrupted. so you need to upload the exported theme files to that folder. For this. you can activate your theme in the Drupal Administration. spaces or hyphens are allowed. After that. extract the archive into the "themes" folder on the server.org/node/133977 Blogger Designs: Publishing and Export Blogger templates may be published from Artisteer directly to Blogger. Otherwise.com: artisteer.62 page system usually looks like DrupalFolder\themes\ThemeName. Tips and tricks: Naming standards Use only letters (preferably lowercase). To publish a template to Blogger.

com | page 63 . then use the ‘Publish’ button to copy your theme to Blogger. home page menu item. Indicate a folder name and path. image hosting etc. and select your blog. Select “Publish template to Blogger. menu source. Enter your username. artisteer.com” at the Quick Access Toolbar or Press Ctrl + E to invoke the Publish dialog (or FileExport). Click Options to adjust the specific export settings. Pick a Blogger template on Artisteer start-up.com.63 page 1. Select Export Template 2. 3. password. 2. such as Blogger navber. Tick the appropriate box if you would like to export the template as an archive or to include the *.ARTX Project. (see The Export Options Dialog) To export the template to a folder: 1.

Choose the export model: to export as a folder or as a ZIP archive. artisteer. Specify the image Location. ASP. DotNetNuke Skin:Export and Installation Pick a DotNetNuke skin on Artisteer start-up. Select “DotNetNuke Skin” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog (or FileExport).NET Project:Exporting a Design Follow these steps to export a design as an ASP. Specify the name of the folder and the export destination.64 page 3. Tick off the box to include the . Click Export or make additional adjustments in the Export Options dialog.NET project that can be opened later in Visual Studio. You can change this setting to ImageShack. or use FTP if you host your images elsewhere.The images present on the Blogger template are automatically published to Picasa Web Albums.com | page 64 . 4.artx project file with your template.

DefaultMenu. Content Page called Default. such as text direction. Click Export to finish the process or select Options to adjust the specific export options. You will see: • • Master Page that defines a site's overall layout and contains a set of content placeholders such as HeaderContentPlaceHolder. (see The Export Options Dialog) When the export is completed. *Optional* Create a a ZIP archive. a new C# project will be created in the specified location. site icon. 2. TitleContentPlaceHolder. footnote. Open it in Visual Studio using File  Open Website option and examine the files created. include the *. watermark. Pick an ASP. website description etc. Specify the name of the project folder and the export destination.com | page 65 . DefaultSidebar1) included into it. This page is generated as an example for you to see how a finished content page may look like. A set of other files necessary for the Visual Studio project. Select “Visual Studio C# Project” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog.NET Application on Artisteer start-up. • • CSS files that define the design of the pages.aspx that has several content blocks and default pages (DefaultHeader. artisteer.65 page 1. SheetContentPlaceHolder etc.ARTX project 3.

Pick a CodeCharge Studio Project on Artisteer start-up. website description etc. site icon.66 page Feel free to modify the project files the way you want and enjoy! CodeCharge Studio Project: Exporting a Design Follow these steps to create a design that can be applied to CodeCharge Studio projects: 1. such as text direction. include the *. (see The Export Options Dialog) When the export is completed.com | page 66 . The following pages will be added to the project: • • • PageTemplate Header Footer artisteer.ARTX project 3. *Optional* Create a a ZIP archive. watermark. Select “CodeCharge Studio Project” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog 2. Specify the name of the project folder and the export destination. a new CodeCharge Studio project will be created in the specified location. Click Export to finish the process or select Options to adjust the specific export options. footnote.

67
page • • Main About

PageTemplate is an essential page that will be used as a basis for creating all the new pages within the CCS project. This functionality is achieved using Project SettingsGeneralNew Page Template option. PageTemplate includes the Header and Footer pages that are used to add page background, sheet, header and menu styles to the pages. Thus all the newly created CCS pages will have a page background, sheet, header and menu styles automatically applied to them. Note, the Artisteer-generated styles cannot be automatically applied to CCS forms, buttons, and other blocks on the page. To add a style to these components, you can consider one of the following solutions: Open CCS Style Builder (Tools  Styles) and add a new style that looks similar to the style generated by Artisteer. Use this new style for CCS forms and controls. Modify a CCS page template to add the Artisteer styles manually. In that case, do not select any style when creating forms and controls in CCS. Switch to HTML mode and modify your page template manually by adding the Artisteer classes and the necessary html tags. A sample html code snippet is provided on the Main page so you can review it and modify CCS page templates accordingly. The sample code below demonstrates how to apply the Artisteer-generated Block and Article styles to a Record form on a CCS page. The unchanged HTML code is shown in black, the removed code lines are crossed out, and the lines added to the code are highlighted in red.

artisteer.com | page 67

68
page

Adding the Artisteer Classes and HTML Tags to a Block

artisteer.com | page 68

69
page

Ideas Tab
The Ideas tab is a great way to quickly envision your Website design right before your eyes.

Creating Your Design
Let Artisteer create the design for you. The Suggest design feature is best used at the beginning. It allows you to see the various designs available and helps you determine which styles and themes you like. You can select the desired style(s) and Artisteer will make suggestions based on the templates for these styles.

Making Adjustments
You are able to make adjustments to many individual components when brainstorming ideas for your Web design. For example, suppose the font doesn’t match the layout of the site, or you don’t like the colors in the Header. By making adjustments to the suggestions, you can get closer to the look that you want to achieve. artisteer.com | page 69

70
page

Home Tab (Website or Blog Only)

The Home Tab appears on the Ribbon bar instead of the Ideas tab if you create a ‘Website or Blog’ project on the Artisteer start-up dialog. The Home tab is used to generate a design based on suggestions in Artisteer, add and remove content (pages and posts), export your project as a static HTML project, or publish your project to Artisteer.net - a free WordPress based hosting service. Artisteer.net provides: • • • Managing content in Artisteer (WYSIWYG), or on Artisteer.net Free wordpress-based CMS & web hosting Administration features for managing your website.

The process of creating a website may be completed in three steps. 1. Creating a ‘Website or Blog’ project  2. Adding and editing content, and adjusting the template design  3.Publishing the website to an Artisteer.net account.

artisteer.com | page 70

71 page The features on the Ribbon bar are arranged in three groups: Design Ideas. The Styles option provides a list of suggested styles. For example. Use this option to narrow the range of options Artisteer will suggest based on the styles you select. can be grouped into thematic styles that are often used in particular websites. Layout.com | page 71 . Website (adding content). Suggest… Adjust the design using the appropriate tabs. Header. Design Ideas The Suggest option may be applied to the whole template or to its individual components. such as Colors. Use Styles option described below. fonts. Background. backgrounds. etc. particular colors you Styles might use in a holiday theme may not be visually acceptable for a corporate website. artisteer. Fonts.You can also set the style criteria for a suggested design. Export /Publish (offline/online) The following section describes each group in more detail. Certain combinations of colors. and Menu.

but there are some key differences: • Normally. etc. and special links in the header and footer of your posts. the Edit tab features on the Ribbon bar should be automatically enabled. You define which links appear using ContentMetadataIcons.com | page 72 New Block . You can type the content and use the preview icons to find the right design and position of the block. • Posts can be grouped and categorized using categories and/or tags that you define and associate with the post. Post articles are similar to pages. child pages.72 page Website (Adding Content) You can add new pages. artisteer. posts. and blocks. Viewers typically navigate your post articles using the ‘blog post’ page. post articles are listed on a special page called the ‘frontpage’. You can rename your new page by selecting the page title in the website New Page map and pressing F2. Posts can also be grouped and navigated using other attributes such as Author. Use the Edit features much like a WYSIWYG editor to change the content on your page. • New Blog Post Viewers typically navigate the pages of your website using the horizontal or vertical menu. and in fact each post article has its own page in your website. and date the post was created. Use this option to add a new post article to your website. A new block appears in the sidebar. This makes it easier for your viewers to find the post articles they are interested in. The website map located at the left side of the preview window will help you visualize the organization of your pages and posts. or ‘blog post’ page where the articles or excerpts of the articles are listed. When you click on any of the content areas in the Preview area. Click the New Page icon to add a page or a child page.

if you make changes frequently on Artisteer. and then synchronized so both the desktop and the web have the same view of your website. css prefixes and styles. You should avoid using the desktop and Artisteer. Before you publish your website to Artisteer. etc. You can export your website to a local folder (or an FTP folder) without publishing it (an FTP folder is just a special folder that you have configured to Publish to Local/FTP automatically move your files). Use this option to publish your website to Artisteer. Every time you publish your project from the desktop the content on the web is compared with the content on the desktop. Click ‘Publish to Local/FTP’ to display the export dialog.net.73 page Export Options Adjust the Export Options: text direction. Artisteer lets you edit the content of your website either on the desktop or on Artisteer. you should save your Artisteer project. default page tags. Every time you publish your project to Artisteer. If this is your first time.net.net at the same time to modify your content.net. Also. watermark. footnote. you should remember to republish your project from the desktop so your content is always in-synch.net. artisteer. description.net copied to the Artisteer server. See the Export Dialog options above for more details. site icon. your project files are Publish to Artisteer.com | page 73 . you will be prompted to create a new website.net.

When you change the settings in the Edit tab. Using the Ribbon bar options under the Edit tab. The Ribbon bar options of the Edit tab are arranged in six groups: Clipboard. size. style. not all of the text in that portion of your page. Paragraph. You can also add hyperlinks. & paste options for embedding text in the content area. any text you add directly to your pages or posts in the Preview area will be in ‘Red’. you can define the appearance of all your content on your pages using the Content tab on the ribbon bar. The ‘paragraph’ options apply to all the text in the content area. For example. quotes and effects to give the text a more professional look. The ‘font’ and ‘paragraph’ options override the same settings you may have defined in your design. Insert and Source. you can create and edit your content visually in WYSIWYG mode.com | page 74 . if you decided that all of your web page text should be ‘Red’ (ContentTextColor’red’). Content. Paragraph options help to adjust bulleted lists. not just to any selected text. and the Preview area of Artisteer. Style and Font. The Clipboard provides standard cut.74 page Edit Tab (Website or Blog Only) The Edit tab appears on the Ribbon bar if you create a ‘Website or Blog’ project on the Artisteer startup dialog. The ‘font’ options apply only to text you select within a content area. That is. Click anywhere on the content in the Preview area to enable the Edit tab options. This means you have all the tools for creating websites from A to Z in one package. Style and Font suggests basic typography settings such as font family. Click the content area to enable the Edit options. indentation and alignment. you override the ‘style’ settings you defined elsewhere. You can override the ‘style’ however by selecting the text in the Preview area and then using the Edit tab to change the color for the selected text (EditText Color’black’) artisteer. copy. tables and buttons as well as edit the source HTML for each content area. images.

If you reduce the number of cells in your layout. the content will reappear.com | page 75 . or divide the content into multiple rows and columns. images and other content. As you select different layouts. If you add back more cells. Click the “+” and “-“ icons to add or remove the rows. You can also customize each row by clicking on the row and selecting one of the artisteer. The content is not deleted.75 page Setting the Content Layout The options of the Content group let you control the layout and design of your text. Artisteer generates some sample content so you can easily see the layout of the page. You can arrange the content of your article in one column. In the opened dialog box. click the ‘down arrow’ icon and choose a row layout. Along with choosing one of the variants suggested in the gallery you can create your own content layout by selecting a Custom Content Layout option located at the bottom of the list. you may see some content disappear. the text and images representing your content will be automatically moved to the new layout. When you create a new project. split it into multiple columns.

such as defining a margin. When you select one of the artisteer. the look) of the table using the Content tab. The first is Basic design. such as adding borders or highlighting areas in color. The ‘basic design’ options are simple graphic layouts with different borders. Note though. or padding within the table cell. this is not the case. The content layout is the physical division of your content area. The ‘One Row’ and ‘All Rows’ groups show how cells will appear filled with a highlight color. A table has its own dimensions. The row at the bottom shows you what a new row will look like if added to your layout. Unless you click on the ‘+’ icon. defining the content layout is not the same as adding a table. etc. The Styling options suggest various designs you can apply to the content. the table will appear with the style you defined (e. The table border is the only style element you can change. The gridlines appear in your Preview area to help you see the organization of your content better. In any given cell. this is not the same as View Gridlines for a table. then use the Current Row option to apply a ‘style’ to just that row.76 page options shown to create or reduce the number of cells in each row and the relative size of each cell. When you add a table to your content with the Edit tab. You can show or remove the gridlines with the Show Gridlines option. The table is part of the content you add to the content cell. You can also change the design of a particular row by selecting the row in the Preview area. like text. you define the style (i. In fact.e. the content in the rest of your rows and columns will be automatically moved to your new layout. images. It can appear within a content cell but it is not related in any way to the style options you can define for the content cell. just like text. red border). you can also add a table and visually it may appear as if you are refining the content layout. Again. They will not appear on your webpages. Like other design elements.com | page 76 . though visually it can be difficult to tell the difference. the row is not added yet.g.

this does not apply. if you want borders around your cells on a page.com | page 77 . you may also find it more convenient to use the Layout artisteer. first select the row or cell in the Preview area. To change an individual row or cell. you are defining how the content row. the border option shows you the thickness of the border that is applied. Hint: to make it visually easier to work with content layous and tables. Where you don’t use borders in your layout. (Hint: You can more easily visualize these options in the Preview area. if you add borders to your cells. You can also override these options using the Row and Cell icons on the Ribbon bar. For example. This only affects your layout if you add borders. or area will appear regardless of the content you may add later. cell. you should turn on gridlines for both (EditStylingShow Gridlines. If you have the Standard edition of Artisteer. The All Pages option shows you what design elements are applied for every page when you select a content layout and ‘styling’. EditInsertTableView Gridlines). and then select the Row or Cell icon on the Ribbon bar.77 page content styling options.

and which cells should have no ‘fill’ color. and style (thickness. or you could choose to artisteer. those without will not have those changes. The larger the ‘spacing’. and color) will only appear if you select a layout style that includes a border. text) within a cell. Similarly. Spacing Use this to adjust the spacing between cells in the same row. Use this with the margin option above to add space between your cells. When you select a ‘styling’. The cell and the content (e. For example. the All Pages options only apply if you select a layout and a layout style that includes the design elements that apply to the options you select. For example. the more space between rows. you might have several pages with different content layouts. the border. you are defining which cells should have a highlight (default) color. you could choose to have all the cells on a row have the same color. color and style. All Pages Option Styling All Pages Option Margin Use this to adjust the spacing between cells in adjacent rows. the more space between cells on the same row. Use this in conjuction with the ‘spacing’ option below to add space between your cells.78 page Options dialog (StylingAll PagesSpacingMore Spacingsselect ‘preview’) so you can visually see your changes as you adjust the options). if you define a border. The larger the margin. Padding Use this to adjust the spacing around your content (e. Border Highlight Color Use this to select the border thickness. type. This sets the default color applied which you can override with the Row and Cell options. The color you want to apply to the background of the content cell. Again.com | page 78 . Those with borders will have the border selection defined in the All Pages options.g.g. text) is reshaped to accommodate the amount of spacing you want to reserve around the content.

artisteer. Red. The Row and Cell options provide additional design. e. If the cell is not highlighted. transparency and borders. customize the margin. Border Use this to select the thickness. modify the width. or select a style (Styling) where none of the cells have a highlight color and then change the Row Fill color to Red. If you want all the cells to be Red. Always remember to select a row or cell in the Preview area you want to change before making a selection. layout and editing potential – you can insert a texture (choose from the gallery or insert the texture from a graphic file). then some cells will be ‘blue’ and some won’t have any color. suppose you choose to have every other cell highlighted and the highlight color is ‘blue’. Texture Use this to select a texture background either from the gallery or from a graphic file. Selecting another color only applies to the cells of the row that have no color. Row Options Row Options Fill If you haven’t changed the color before. style and color of the border around the row.79 page alternate colors for every other cell. These depend on the ‘styling’ option selected and the highlight color described above. For example. insert and delete rows.com | page 79 . change the color. only the cells without any color will be Red. The ‘default color’ is the same as the highlight color if this cell is highlighted. This option defines the default highlight color when the cell is selected to be highlighted (‘styling’ option).g. this is either ‘no fill’ or ‘default color’. separator(s) and columns of the selected rows. Margin Use this to select the spacing between this row and adjacent rows. padding and vertical alignment of the cells. When you apply a Fill color for the row. spacing. then this is ‘no fill’ (or no color applied). then you need to change the individual cells.

Use this to control the separator line between this row and either the separator line above the current row (if it exists). Add a row below the current row.com | page 80 . Other cells on the row are adjusted to accommodate the change.). style and color of the border around the cell. (Hint: this can be hard to visualize if you artisteer. you can elect to include a separator line between rows or columns in your content area. Delete the current row. all of the cells will have four borders. top border. text) in the cell. If you choose a ‘styling’ that uses separators between columns. Vertical Align This aligns the content within the cell (e. In the Styling options (StylingBasic Design). This may change the dimensions of the cell as well as changing the other cells on the row. This defines the thickness.g. some cells will have a left or right border. or centered).g.80 page Spacing Separator Use this to select the spacing between cells within the row. If you choose a ‘styling’ that includes borders. Padding This controls the space around the content (e. You can use this to add. Width This changes the physical width of the cell. etc. and/or the separator line below the current row (if it exists). Cell Options Cell Options Fill This overrides the color that may have been assigned by choosing a ‘styling’ as described above. or change the borders around the cell (i. bottom border. Text Color Border This overrides the text color for the cell.e. Add a row above the current row. top aligned. bottom aligned. Columns Insert Row Before Insert Row After Delete Use this to change the number of cells in the current row. delete.

Then add one or two lines to your selected cell and adjust the aligment with the cell options. Row Options Border Adjust the thickness and style of the top. left and right borders. Selecting the ‘Row Options…” and ‘Cell Options…’ will open dialog boxes for more advanced customization. Margin Spacing Transparency Adjust the spacing between rows in your content area. the content should be oriented from the top of the cell. To better see how this works. add some temporary blank text rows to an adjacent cell so the length of the all the cells on the row are extended. Specify the transparency value of the cell background (fill color) relative to the sheet background. color and transparency against the sheet. With ‘bottom align’. Adjust the spacing between cells on a row. With ‘top align’. artisteer. bottom.81 page already have content in the content cell.com | page 81 . If the row has no Fill color. the content should be oriented to the bottom of the cell. this is the same as 100% transparency. Image or Texture Use this to control the way the texture appears relative to lighting.

%75 means the cell width is ¾ the size of the whole row. bottom.82 page Texture Position Use this to control how the texture is applied to the content background. E. Texture Position Use this to control how the texture is applied to the content background. Image or Texture Use this to control the way the texture appears relative to lighting. artisteer. Cell Options Border Adjust the thickness and style of the top. Padding Adjust the spacing within a cell between the content and the borders of the cell. If the row has no Fill color.g. this is the same as 100% transparency. Transparency Specify the transparency value of the cell background (fill color) relative to the sheet background.com | page 82 . left and right borders. Width Sets the width of the cell relative to the overall size of the row. color and transparency against the sheet.

com | page 83 . Sometimes this may include more than one command group (e. Insert an Image To insert an image object in your content area. The following sections describe each of the command groups. In Left – The image is positioned on the left and the text wraps around the image on the right. The Position options determine how the image appears relative to the text around it. images. In Right – The image is positioned on the right and the text wraps around the image on the left. additional command options may appear at the right side of the Edit tab toolbar. if you select an image within a table).83 page Inserting Media and Links The Insert group on the Ribbon bar allows you to insert hyperlinks. or ClipArt button on the Ribbon bar. artisteer. Use the ‘Options…’ icon to display the options you can control for the placement and appearance of the image. When you select objects in the content area. Position the cursor where you want to add the object. video. position the cursor where you want the image to appear and select the Image. clipart. When prompted. Use the Border Width option to define a border around the image. or select an image from the clipart gallery. and the thickness of the border. tables and buttons in your content area. and then click on the appropriate icon to insert your content.g. • • • In Line with Text – The text does not wrap around the text. either select the image from your local computer.

net and added to your media library. When you add an image. when you publish your website.net. That is. the file is copied to the ‘images’ folder of your website template.84 page Image Options Source filename for the image. or a picture from the gallery.com | page 84 . you should find your image in the ‘images’ folder. You can use these images on your own websites and websites you develop for clients subject to artisteer. Source If you are using Artisteer. when you export your HTML website. the image is copied to Artisteer. either your own file.

‘Alt Text’ is meant to provide a text clue to describe what Alt Text should have appeared at that position. If you change Width the width.com/?p=faq#faq6 When you insert an image. normally you can add space above or below the cells because the adjacent rows can be moved down without artisteer.com | page 85 . and adjacent cells. In Right – The image is positioned on the right and the text wraps around the image on the left. the image is scaled to fit the Scale area of the cell. Note. If you change the scale.g. the dimensions are scaled to fit the content area. If you Height change the height. the image is scaled keeping the same aspect ratio. For example. Border Use this to change the thickness of the border. Layout Options Same as the position option described above. you disabled images in your browser). ‘Height’ changes automatically) so the image keeps the same aspect ratio. if the browser supports it. This is the width of the image in px after insertion in the cell. ‘Alt Text’ is also displayed when you hover the mouse over the image. the browser only displays an empty icon where the picture would appear. • • Position • In Line with Text – The text does not wrap around the text.85 page the following restriction: http://www. the image is scaled (i. When you insert the image in the content cell. the width and height is changed to keep the same aspect ratio. Use these options to add margin space around the image. This is the height of the image in px after insertion in the content cell. the amount Margin of space you can add on each side depends on the size of the content cell.artisteer. when an image cannot be displayed (e. In Left – The image is positioned on the left and the text wraps around the image on the right.e. Also. Normally.

However. opens the link in the current window. the video type and version. Redirects the browser to a new window or tab. Screen Tip Text that appears when you hover the cursor over the image.e. _top – Open in the full body of the window. _parent – Open in the parent frameset.e. This opens a dialog where you need to paste special HTML code to ensure that the video appears embedded in the browser window and your viewers can play the video. position the cursor where you want the video to appear and select the Video button in the Ribbon bar. and the browser you are using. • • • • _blank – Open in a new window or tab.86 page affecting the appearance of the sheet.com | page 86 . clicking on the image redirects the browser to Address this address. if you add space to the left or right.g. other characteristics of the actual video. i. youtube. or the current window or tab. The maximum area you can work with is based on the sheet width. Target Insert a Video To insert a video in the content area. Use this to determine what happens when your viewer clicks on the image: e. Link Options URL address for the image. adjacent cells may have to be shifted and/or resized.com). _self – Open in the same frame as the image. The following section includes examples of embedding video in your pages but it is beyond the scope of this manual to explain everything about embedding media in your website.g. i. artisteer. This is not done automatically by Artisteer because the code you need to embed the video depends on the source of the video (e.

etc.youtube.g the code is added within a tag definition).com | page 87 . the entire HTML source for the content area. Just make sure that you are on a page where the video is embedded in the web page.com. with www. For example. artisteer. if you have poorly formatted code (e. Typically.). or tag.g. depending on the video file source (e. or you can go to the video page and copy the HTML code from the page source. or if you insert the code somewhere on the page where it would invalidate the other HTML code (e. flash version).87 page First find the embed code that you need to insert the video.youtube. For example. Note. you need to careful that the code that you enter is valid for both the snippet of code you are inserting and within the context that the code is inserted (e. and not a page where the video is displayed as a thumbnail image (e. the source site will either have a way of copying the embed code. since you are working directly with the HTML source. you can often right click the mouse on the image and select ‘Copy embed HTML’.com). missing an attribute. or for the whole page).g.g. www.g. you will not get the results you expect.

1473 px Width Supported values 1 -1500 px Height Yes/No – Allow your viewers to display the video in full screen mode vs only within the dimensions you define in the page. position the cursor where you would like the table to appear and select the Table button on the Ribbon bar. Insert a Table To insert a table object in the content area. This option is sometimes turned off because in fullscreen mode. the browser toolbars are not visible Allow Full Screen which can be confusing to beginner users not familiar with viewing videos in fullscreen. deleting & moving columns and rows. artisteer.com | page 88 .88 page Sometimes you may see embed code that uses the “object” tag: … or other times with an ‘embed’ tag: Insert Video Options Supported values 1. adjusting the border width and splitting cells. The basic Table options include: inserting.

89 page The advanced options contain Table (width. margin.com | page 89 . cell padding) and Column (width) settings. artisteer.

any content you have in the table Column Width cells affects how you can set the spacing and dimensions for the table and columns of the table.g. Insert a Hyperlink artisteer. or as a % of the width of the content cell where Table Width the table appears. top aligned. the content should be oriented from the top of the cell.com | page 90 . This aligns the content within the table cell (e. text) within a table cell. or centered). Table Cell Padding Column width of the selected column (where the cursor is) in pixels or as a percentage of the total table width. To better see how this works. the content should be oriented to the bottom of the cell. With ‘top align’. Note.90 page Table Options Width of the table in pixels. With ‘bottom align’. add some temporary blank text rows to Vertical Align an adjacent cell so the length of the all the cells on the row are extended. (Hint: this can be hard to visualize if you already have content in a cell. Margin space around the table within the content cell where the table Table Margin appears. Space around any content (e. bottom aligned.g. Then add one or two lines to your selected cell and adjust the aligment with the table options.

To change hyperlink options. Target (optional). position the cursor where you want the link to occur. and select the Hyperlink button on the Ribbonbar. There is no command area on the Edit tab toolbar for the hyperlink options. artisteer. Specify the link title (Text).com | page 91 .91 page To insert a hyperlink in your content area. Address. and Screen Tip (optional). right-click on the hyperlink and select Hyperlink Options… from the context menu.

e. Use this to determine what happens when your viewer clicks on the hyperlink: e. # redirects the browser to the current page. There is no command area for the button options. Text that appears when you hover the cursor over the hyperlink on the web page. Screen Tip and Access Key.com | page 92 . Address. click on the button in the content area. opens the link in the current window. Redirects the browser to a new window or tab. position the cursor where you want the button to occur and select the Button button in the Ribbon bar.92 page Add or Edit Hyperlink Text This is how your hyperlink will appear on the page. Specify the link title (Text). _self – Open in the same frame as the image. • Target • • • _blank – Open in a new window or tab. Web address of the target link. artisteer. _top – Open in the full body of the window. Address /<page name> redirects the browser to the page on your website. See PagePropertiesname/URL. or the current window or tab. _parent – Open in the parent frameset.g. Target Frame. i. To change options for a button. Screen Tip Insert a Button To insert a button in your content area. then the Button icon on the Ribbon bar.

93 page artisteer.com | page 93 .

e. artisteer. your viewers can type Alt-B as a shortcut to selecting the button.g. refer to www. The target address link of the page directed by the button. Editing the HTML Source The HTML button on the Edit tab toolbar is used to edit the HTML source for the content area you have selected on your page. For more information about this AccessKey attribute. Use this to determine what happens when your viewer clicks on the button: e. _top – Open in the full body of the window. i. see PagePropertiesname/URL). /my-page. Select a content area with the mouse.w3c. For example.com | page 94 . or the current window or tab. then the HTML Source icon on the Ribbon bar. for Chrome. Screen Tip This is the HTML AccessKey attribute for a button. opens the link in the current window. This only displays the HTML source for the content area you selected in the Preview area. this should be specified as a filepath relative to your website (e. If this page is Address within your website.g. Redirects the browser to a new window or tab. Text that appears when you hover the cursor over the button on the web page. • Target Frame • • • _blank – Open in a new window or tab. if you enter ‘B’ here.org. It is designed to associate keys with particular buttons. _self – Open in the same frame as the image. _parent – Open in the parent frameset.94 page Add or Edit Button Text This is how your button appears.

For example.com | page 95 . artisteer.95 page Despite all of the options in Artisteer for designing your website. if you are adding embed code to include a video on your web page. you can only change many of the options controlling the video by changing the code directly. you may often find it useful and necessary to access and change the HTML source directly.

Artisteer will suggest a gallery of Color Themes with preview thumbnails. Dark. artisteer. Contrast. Bright. Orange. The design of each template is based on a Color Theme. Green. Monochrome. All paints in a color theme are selected by professional web designers to complement each other. Pastel. The Color Theme consists of three main colors. Light. Blue. You can choose a Color Theme directly from the gallery or use Filter to select from a specific Color Theme group: New. Colors Click Suggest Colors to see some ready-made color solutions for your template.96 page Colors & Fonts Tab The Color & Fonts tab provides the ability to change the colors and fonts of the template. and Yellow. Red. named paints.com | page 96 .

in the Color Selector dialog (click More Colors) or using the Fill option to adjust the color of a specific layout element in tabs: Background.Header. Buttons (See working with colors) Click Save Theme to preserve the created color Theme.com | page 97 .97 page You may also create a custom theme by adjusting the color in Paints. artisteer. in the Adjust menu. Menu. Content. Sidebar. Vertical Menu. so you can use the color theme in other Artisteer projects. Select Delete Theme to remove the theme from the Artisteer custom gallery. When you save a color theme it is added automatically to the Artisteer Color Themes custom gallery. Sheet.

Artisteer will attempt to create a color theme bases on the prevalent colors in your picture. artisteer.com | page 98 . Select the From Image option and upload the image you would like to use as a basis for a new color theme.98 page Artisteer may help you define and apply the color theme for your website.

Clicking on the “Adjust options…” will open the Colors option dialog where you can customize the settings: • • Luminosity Saturation Enter the values or drag the sliders to the right or left to increase or decrease values. The distribution of colors in the layout elements is unique in every generated template. Normal. softer or with more contrast (Basic. are called paints. making the colors lighter or darker. The Adjust option changes the luminosity and saturation of all paints. the third – for the Menu color. for example the first paint in Artisteer is not always responsible for the color of the Header. Pastel modes).99 page Paints The three main colors. which build a color theme. Paints are not bound to specific layout elements. artisteer.com | page 99 . Contrast. the second paint – for the Background color. You can change the colors by clicking on separate paints and selecting the appropriate color from the Main Color palette or from More Colors in the Color Selector dialog.

Luminosity for any one color will range from pure white though to black. Colors of the design elements. The palette consists of Theme Colors. Custom Colors and More Colors in the Color Selector dialog Color Selector Dialog (More Colors) The Color Selector dialog is displayed when you select the "More Colors…" button in one of the color option dialogs. and determines how vivid it is. Saturation The supported values are from -100% to 100%. Sheet.Where 100% and -100% refer to the highest and lowest of the RGB components.Where 100% means a large amount of the grey. Set the color saturation. Saturation refers to the amount of grey in a color. such as Background. and Menu may be adjusted in the tabs with the help of the Fill Color option.com | page 100 . Luminosity refers to the whiteness or intensity of a color. Luminosity The supported values are from -100% to 100%.100 page Adjust Color Options Set the color luminosity. artisteer.

You can move the tool over any area of your template (e.101 page The Color Selector dialog lets you select the desired color you want and adjust the hue. This is a simple technique you can use to accurately copy one color of your template layout to another area. such as copying the color of your Header to your Sheet.e. With the help of the Color Picker tool you can extract and apply the colors from any part of your template.com | page 101 . eyedropper icon) appears automatically when you move the cursor outside of the Color Selector dialog window. If you already have a color in your Artisteer template that you would like to use. you can select the color directly from the template using the Color Picker tool. instead of finding a match using the Color Selector. and brightness of the color. artisteer. saturation. and select a particular spot and color with the mouse. The Color Picker tool (i.g. the Header).

artisteer. green. This slider lets you increase or decrease the brightness of the color from zero at the bottom to 100 at the top. yellow. These values can also be changed manually by directly entering values in the text boxes. It may be convenient when you copy the exact color value from some other graphic software and want to use it in Artisteer. Both tabs have a color selection area (color palette) where you can move a slider until you are satisfied with the color. On the Luminosity tab there is a special luminosity slider.102 page There are Luminosity and Hue tabs available in the dialog. you can go to the color palette and drag a small circle picker horizontally and vertically to change the hue and saturation of the color respectively. Having the Hue selected. Saturation can vary from 0% (completely unsaturated) to 100% (completely saturated. With the luminosity selected. and blue up to purple allows you to select the desired hue of the color.com | page 102 . Moving it all the way from red (at the bottom) through orange. The Hue tab contains a separate Hue adjustment slider. The values displayed in the right set of boxes will change to indicate the exact color settings. Luminosity ranges from 0 (black) to 100% (white). you may also move a palette color picker from left to right and from top to bottom to additionally set the saturation and luminosity values of the color. pure color).

The "Preview" option makes it possible to see the page with the selected color applied to it.103 page Option Hue Sat Description Hue value of the color ranged from 0° to 360°. Decimal value for blue color. A hexadecimal color code (usually used in HTML code). Lum Luminosity of the color measured in percentage: from 0 (black) to 100% (white).com | page 103 . The Fonts section includes the following functions: • • • Font Sets Typography Font Scale artisteer. Red Green Blue Hex Decimal value for red color. Fonts Select from a wide variety of font themes to match the overall look and content of the site. Saturation of the color ranged from 0% (completely desaturated) to 100% (fully saturated). Decimal value for green color. Ok and Cancel buttons allow you to submit or discard the made changes.

104 page Font Sets allows you to change the text and heading fonts. Just click on the Edit Typography… button in the Typography list. You can choose one of the Artisteer standard font sets or create your own custom font scheme. In the opened Typography dialog you can change any text object by selecting the object and clicking the "Modify" button. The Modify dialog allows adjusting the following Font settings: • • • • • Font Family Font Style Font Size (in pixels) Add or remove Effects Adjust Character Spacing artisteer. The Typography option allows you to select one of our typography styles or create your own custom style design.com | page 104 . Just click on the Edit Font Set… button in the Font Sets list.

Blocks Text. Article Headline Text and Article Header Text you can also modify the Paragraph settings such as: • • • Alignment Indentation Spacing artisteer.105 page For the Footer Text.com | page 105 .

This scales all of the text on your page based on the font size defined for each text item. artisteer.106 page The Font Scale option allows you to change the overall font scale. Typography options Set Font scale for all text. The supported values are from 50% to 200%. you can define a custom font scale. Font Scale 200% is the biggest font scale value. Using the Options… button.com | page 106 .

You can also select the style and Gallery orientation of these elements using the options described below.) The gallery is divided up into several patterns: Basic . Note. or menu conjoined with the sheet. and the Horizontal Menu bar.107 page Layout Tab The layout tab is where you can quickly change the overall positioning of elements on the page. either conjoined or separated from the Sheet.no header and: no menu. (Note.com | page 107 . use the group of Footer options described below. artisteer. the gallery options do not include the Footer. or menu separated from the Sheet. Fixed – header with or without the horizontal menu bar. the Blocks group is replaced by a different set of options for Website or Blog projects: Ribbon Options Design Layout The Layout gallery provides a simplified way of selecting the layout of the Header. If you want to change the Footer area.

The areas like the Sheet. Outside Sheet – the header is displayed separately from the sheet. a menu. Fixed means the width is fixed to a certain size. Menu Inside Header – The menu appears inside the Header area and the Header ‘has’.You can also select one of the following header positions: • • Without Header – the template does not have a header. • Inside Sheet – the header is displayed inside the sheet. This never changes when the window is resized. or the size of the Page. Sheet Width/ Page Width. Transparent – the Header is displayed with 100% transparency with. you can control how they appear when the browser window is resized. which may be either the size of the Sheet. with fluid width. This option regulates the width of the Header. Fixed or Fluid .108 page Outside – The menu and/or the header are separated from the Sheet. Fluid means the width is a percentage of the browser’s window width. Wide – The header and/or the menu are the same width as the page (as opposed to the same width as the Sheet in other options). are resized as the browser window is resized so they always display the same percentage of area in the window. Overlapped – the Sheet is displayed overlapping the Header. or ‘has not’ some margin space at the top. artisteer.When the Menu and Header have the same width as the Sheet. Header Position.com | page 108 . or without. The Header area cannot have a defined width. It can only be the same size as the Page or Sheet. You can regulate the distance between the two by setting different margin values.

this can be used to define the space between the Menu and the Header. The Margin option is also disabled if the page has no Header. the Margin option is disabled because the Margin value needs to be defined for the Sheet. Sheet Width/ Page Width. A negative Margin value respositions the Menu. Select one of the top margin values (positive or negative) or set a custom margin value using More Top Margins (-200 to 200 px). This option regulates the width of the Menu. not the Header. • • Inside Sheet – the Menu is attached to the Sheet. select No Outline. Inside Header – the Menu is embedded in the Header and located at the top. Outside Sheet – the Menu is located above the sheet.109 page Margin. You can also select one of the following Menu positions: • • Without Menu– the template does not have a Menu. The Margin is the space above the horizontal menu. Select one of the top margin values (positive or negative) or set a custom margin value at More Top Margins (-200 to 200 px). Setting the margin to a negative value resizes the header area. or at the bottom of the Header. The Margin is the space above the Header.com | page 109 . To place the header at the top of the page and remove the rounded corners of the outline. which may be set to the size of the Sheet. or the size of the Page Menu Position. You can regulate the distance between the Menu and the Sheet by setting different margin values. otherwise. When the Header is inside the Sheet. Margin. If the menu appears above the Header. this is the space between the top of the Header and the top of the page. which may cause the Menu to appear to overlap artisteer.

If you resize the browser window. It may also cause the Footer to overlap the contents on your page (e. select No Outline.g. select No Outline. To set the margin to 0.110 page the area above it (e.g. The Margin option is also disabled if the page has no Menu. Page Width – The Footer is displayed with the same width as the Page and separated from the Sheet. the width of the Sheet will change so it always artisteer.com | page 110 .100%). A negative margin may resize the Footer so it appears to overlap the Sheet. Sheet Layout Artisteer provides both Fixed and Fluid (absolute and relative) sheet widths ranging from 600 . text) that appears on the Sheet. A fixed Sheet width means the Sheet is always this size. Inside Sheet – The Footer is displayed as part of the Sheet with a margin space reserved below the footer. The Margin is the space reserved above the Footer. Footer Sheet Width – The Footer is displayed attached to the Sheet and with the same width as the Sheet but no margin space is reserved at the bottom of the page. not the Menu. Margin. Select one of the top margin values (positive or negative) or set a custom margin value at More Top Margins (-200 to 200 px). the Header). The Margin option is disabled if the Menu is inside the Sheet since the Margin value must be specified for the Sheet.1000px (60 . A ‘fluid’ sheet width means that the width is a percentage of the browser windows area. To set the margin to 0 and remove the rounded corners of the outline. A custom sheet width may Sheet Width also be specified using the More Sheet Widths option.

Columns Layout Use the Columns option to define the number of columns of content on the Sheet.111 page displays a certain % of the width of the window. so is the column width.com | page 111 .g. etc). text and images). you will not see any changes since the Sheet width does not change in size. If you only have 1 column. Use the Column Width option to change the size of your sidebar columns. etc).g. You can select from 0 to 15 px. the lower the Sheet appears relative to the top of the page. if the Sheet width is fluid. A custom margin may also be specified using the More Top Margins option. Fluid means that the size of the sidebar is set to a % of the total content width within the sheet (Hint: If the Sheet width is fixed. as the Sheet width is resized. the larger the margin. which includes the Header and Menu if they are inside the Sheet. Note. Fixed means the sidebar has a fixed px width. or fluid options.g. menu of links. Padding can be used to create a border of whitespace around your Padding content. One column means a page with no sidebars. if you specify a layout option that places the Header and/or the Menu inside the sheet. You can choose Column width between one of the preset fixed. A custom padding may also be specified using the More Paddings option. You always have at least one column for the content of your Columns page (e. Margin. The only columns are used for the sidebars (e. Padding defines the blank space around the content of the Sheet. or a custom width (‘More Widths…”). if it is artisteer. search. this option is disabled. vertical menu. You can select Margin a margin from 0 to 50 px. any settings you apply to the Sheet also apply to those elements (e. However. Margin defines the space from the top of the page. Padding.

Blocks (Website or Blog only) artisteer. New Block. overlapping the Header or Menu). and Bookmarks. a block. This option is disabled if you only have one column. Vertical Menu.e.112 page also fluid. there are blocks such as Search. New Block – This adds a new generic block to the sidebar. select the block in the Preview area. for Wordpress. click on the first line until the yellow border appears. A Negative Margin may place the columns above the top of the content area Margin (i. then use the Position icon to delete the block or change the position of the block. To remove a block. For example. Blocks Block position assigns blocks to a certain place in your Sheet. Categories. no block position). change the position of . Widgets. In the gallery displayed.com | page 112 . To change the position of a block. select the first thumbnail in the gallery (i. . the suggested block position is highlighted with a blue color on the thumbnails. or add a widget to the sidebar. Use this option to define a style for the sidebars on your page.e. To change the block name. Archive. The first line of text in the new block is the block name which you can change to anything you want. Column Style Margin defines the space above the columns in the content area. Use this option to add a new block to your sidebar. The specific Block selections vary depending on the Content Management Block Position System you are exporting your template to.

net because the functionality of the widget is part of the template you host on Artisteer. Archives. Categories. Search. there are five types of Widgets you can add: Vertical Menu.com | page 113 . and Blogroll. With a ‘new block’. or a list of links. If you are using Artisteer.113 page Below the block name is the block content.net. links.net.net. You can use the options on the Edit tab to add any content you want. or to delete a block. Blocks – Use this to change the position of a block you have added. artisteer. etc. there are several other Widgets you can add to your project but you must add them to your sidebar using Artisteer. you cannot edit the content for a widget block except for the Widget title. Except for Vertical Menu. To change the block content. A Widget is a pre-defined block function. which does not exist for static HTML websites. Blocks that contain Widgets are not very useful unless you use them with Artisteer. click on the content area until the border appears. you can add any content you want. The names of the blocks are the same as the block titles on your page. On the desktop. Widgets – Use this to add or remove a Widget to your sidebar. you could define a block to display an image. For example. You can change the style of the block but you cannot edit the content. such as add/delete/change the text.

this widget is not very useful for static HTML websites (unless you edit the HTML after you export your website).com | page 114 . you would instead see a list of ‘categories’ created for your blog so the block would be very useful for navigating your website. or their actions except to change which ‘pages’ of your website should appear in the menu. the content of your project is synchronized with the content on Artisteer. Advanced Options The Layout tab also contains two dialogs for extra customization.net. You can access either of these by clicking on the Custom Values icon. You cannot edit the block to change the links in the block.net. If you are using Artisteer. artisteer.net however. if you add a ‘Categories’ widget. you can define a menu in Artisteer. so whatever you defined for the Vertical Menu on the web will now appear on the desktop. you were using Artisteer. If you export your project as an HTML website. These are Sheet Options within the Sheet Layout menu and Layout Options within the Columns menu. you cannot define the menu items. If however. what you see in the Preview area in Artisteer is a sample list of ‘categories’ that do not exist. but since the referenced content does not exist. For example.114 page And even with a Vertical Menu. your web page is rendered with this sample list of links. When you republish your website.net and use that menu as the content for the Vertical Menu you see on the desktop.

115 page Sheet Options This dialog is the same as selecting the Custom Values icon under the Sheet tab. Top Margin – This is the space above your content columns (e. Layout Options Group of Options: Columns Description Use the Columns option to adjust the dimensions and alignment of the columns.g. artisteer.com | page 115 . Please refer to the Sheet Tab section below for details about these options.

116
page between the horizontal menu and your content). A negative value will display the columns overlapping the layout element above (e.g. Header). This is disabled if the Header and Menu are outside the Sheet. Top Outline – This adds a radius (curved corners) to the layout element above (e.g. Header) to highlight the separation of the two. If you select ‘No’, no radius is applied and the two sections may appear to be joined. Hint: this may be more visible if you temporarily increase the radius of the Sheet. This is disabled if there is no layout element above the columns in the Sheet. E.g. if the Header is outside the Sheet. Also note, the radius applies to the Sheet, the Header, and the Menu. Applying the radius to one, applies the same to the other even if they are not all on the Sheet. But, the radius may be disabled for the Header and the Menu depending on the position and orientation. E.g. if the Menu and Header are in the Sheet but the Menu is above the Header, the radius option is disabled for the Header because it is sandwiched between the menu and the top of the Sheet on the page background and therefore you cannot display it with rounded corners. The column width options refer to the sidebar, not your content area. That is, you can resize the columns of your sidebar containing blocks, but you cannot resize the column containing your page or post content. Column 1, 2 and 3 depend on the number of columns and orientation of your sidebar. The columns corresponding to the sidebar positions are enabled, while the one column corresponding to the content area is not. E.g. if you choose two columns with the sidebar on the left, then the ‘Column 1 width’ option is enabled, while the ‘Column 2’ and ‘Column 3’ options are disabled. Note, if you make the width of any column too wide, this may cause other artisteer.com | page 116

117
page layout elements or content to wrap around or overlap other areas incorrectly. Transparency Control the transparency of the columns relative to the Sheet. 100% means total transparency. Glare This option is enabled if you have selected a sidebar style (LayoutColumn Style) and added a Glare background. Transparency – Control the transparency of the column and glare to the Sheet. 100% means that the glare is not visible. As you reduce this, the glare should show thru. Scale – Use this to scale the glare background image. E.g. if you choose the particular glare from the gallery with large bubbles, reducing the scale will reduce the size of the bubbles you see in the background. Blend mode Set how the background color of the column and the background glare are blended into each other. Hint: temporarily set the transparency to 0 so you can view the effect better. There are 3 options available: Normal - No effect on the underlying layers. Overlay - Blends the two layers together by changing the opacity, darkness, and lightness of the top layer. Soft Light - This blend mode lightens or darkens the image depending on the color of the top layer. If the top layer's pixel is dark, then the bottom layer's pixel is darkened. If the top layer's pixel is light, then the bottom layer's pixel is lightened.

artisteer.com | page 117

118
page

Content Tab
If you refer to the Preview Area section (described earlier), the Content tab is used to style how your article content will appear on your pages. In the Content tab you can find options to style text and control the space around the text in the content area, as well as options to brighten up your article content with styled images, quotes, and metadata. On the Ribbon bar there are several command groups: Preview Image, Styling, Style and Font, Paragraph, and Metadata.

Shape
In this command group, you can choose the Article Content Shape (Blockless or in-Block), and using the Styling button, change the following style options: • • • • Content Margin Text Padding • • • • • Shape Fill Border Transparency Radius • • Effects (when ‘shape’ is active) Shadow (shadow and glow)

‘In-Block’ means the article appears in a block area of the display with a border. The Shape button can be used to control features listed above to change the appearance of the block. ‘Blockless’ means there is no block area. You can select the margins around the article and the text spacing (padding) around the text in the article, but border features and block features are not available. You choose the type of block by selecting the Styling buttonShapeContent Shape from the Ribbon bar.

artisteer.com | page 118

119
page Please note, the Preview Image in the article is not part of your template. You supply pictures as part of the content you define for the article in your CMS. In Artisteer, you decide if images you add later will have a border, and what the spacing should be between the images and text. The image you see in the Preview is just a placeholder for images you supply later. Artisteer provides this as a visual aid so you can see how your Image effects, such as border, will appear with the text of your article. Advanced Options If the default settings are not enough, you can use the "Articles Options" dialog to customize the settings. To open the Article Options dialog, click on the “More..” button, for example “More Paddings…”, below any list, or select the Custom Values icon.

:

Shape
Specify the Margin of the Article content in pixels. Supported values are: Margin 0 – 50 pixels. The margin is the space around each Article content area. Specify the Padding of the Article in pixels. Supported values: 0 – 50 Padding pixels. The padding is the space around the content (e.g. images and text) within each Article. Specify the Corner Radius (curved corner) of the in-block content in Radius pixels. Supported values: 0 to 40 pixels. This is disabled if the shape type is not ‘in-block’ artisteer.com | page 119

Specify the Offset Distance of the shadow in pixels. 0 corresponds to “Without Border”. Set the transparency of the content block. Clicking on the “More Shadows…” button in the stylingShadow list opens the “Article Options” dialog where you can adjust the shadow options. Supported Border Width values: 0 to 10 pixels. artisteer. Specify the Angle at which the shadow is dropped from the Article Block. Specify the Shadow Opacity of the Article Block. Please note: The Shadow Options are available only if the shape type is ‘in-block’.120 page Specify the Border Width of the in-block content in pixels. Shadow Specify the Shadow Size of the Article block in pixels. where 0 indicates no offset. This is Transparency disabled if the shape type is not ‘in-block’.com | page 120 . This is disabled if the shape type is not ‘in-block’. Supported values: 0 – Size 20 pixels. The supported values are from 0% to 100% where 0% means “without transparency”. Supported values are: 0 to Opacity 100%. Supported values: 0 – Distance 20 pixels.

but you will not see these options unless you pick a content layout and styling that corresponds to these options. Each static page. artisteer. or post article has one content area where you can add text.g. spacing. padding. Refer to the Edit tab section above for a description of these options. these attributes will apply only to those pages with a content layout that includes borders and hightlight colors.com | page 121 . with or without borders. highlighted or not. For example. etc). some without. or they can also be defined with the Content Styling options. images. Content Styling (Website or Blog Only) The Content Styling options help to adjust the margin. The Content tab is used to style how your content will appear on the page. text). The Edit tab is used to actually add content (e. The latter part is defined with the All Pages options under the Edit tab (EditContent StylingAll Pages). etc. These options are only available for ‘webstie or blog’ projects. suppose you have several pages each with their own content layout. Some pages are segmented with borders. border and color of the filled cells. and the Content Layout options under the Edit tab are used to define the organization of your content in the content area and how each part of the layout should appear (e. These options are the same as the All Pages Options under the Edit tab. If you define a border and hightlight with the Content Styling options.g. and some with highlighted panels. These style options apply to any content layout you add to the content area.121 page Angle Supported values: -180º to 180 º.

it will appear with a Red border(s). bullets image. What you see in the Preview area of Artisteer is some sample text and images. That is. table border settings or image border settings to make your Article more unique. If you want this effect. you can create your content with the Edit tab and see your design immediately. For example. you can change them to be Black but you cannot define some pages to have tables with Red borders and other pages with tables that have a Black border.com | page 122 . The selections you make here apply to all the pages and posts on your website. in Artisteer you design how you want your content to look.122 page Style and Font Use this section to control the look of the following article elements: • • • • • • Headings Hyperlink Quote Bullets Image Table You can change the font options. If you are working with a ‘website or blog’ project. when you add a table to your page with the Edit tab. You do not see the full effect of your design until after adding your content and then previewing your website. but you add the content in the CMS. If you are creating a template for one of the supported CMSs. quote style. you will not see the effect of your selections until after you add the content in the CMS. the style you define here applies to the content you add to your website. like Joomla. or Wordpress. For example. you have to restyle the table for each page you want a different color than defined with the artisteer. Note. if your tables have a Red border. if you select all tables to have a Red border.

or style to highlight that section differently from the rest of the text. Headings are HTML headings in your article text. or insert your own custom image. font style and alignment associated with each of these heading styles. You can also choose an Image for the ‘bullet’ that appears next to your list text.g. You can also change the color of the bullet. You can select from a variety of ready-made images. and alignment of any list you insert into your content.123 page Content options. you can add custom HTML code directly in your content area (EditHTML Source). and/or add your own custom CSS style (FileExportExport OptionsCSS Options). font. either with a CMS. all HTML editors support Headings which are special text normally with a different font. H3. If your project is for one of the supported CMSs like Joomla or Wordpress. font. H2. When you create your content. Like other elements. font style. or Artisteer. Artisteer allows you to select the default color. If you are working with a ‘website or blog’ project. artisteer. Headings are normally designated H1. you can define the default color. etc. Bullets are bulleted lists that you might include in your article content. <table border=”2” bordercolor=#336699…). size. When you create your content.com | page 123 . you have to add the table with an HTML encoded style (e. size. and/or also add a custom CSS style. these are the style attributes that will be applied to each element. The rest of this section describes each of the style options you can apply to the content of your pages.

as well as change the color of the Quote image. you can select the default color. You can also decide if the link should appear with an underline or not. Hovered Link – appearance of the link when the cursor is moved over the link on the page. and alignment of your quoted text. and border color for tables you insert in your article content. the Quote settings let you define a distance around the quotation (padding). font. size.124 page Quote elements refer to quotations you might add to your article content. Visited Link – appearance of the link after the link has been selected once. unselected appearance on the page. Hyperlink elements refer to HTML hyperlinks that you might include in your article content. and Quote) will open the Article Content Option dialog window where you can adjust the Font. you can select the color. You can define these features for each of the states of the hyperlink. put the quote inside a filled block with borders. Apart from standard text settings. or insert your own custom image. Link – normal.com | page 124 . size. You can also choose an Image from a variety of ready-made images. You can select the default border width. font styling. font. Like other elements. and/or select a quote image. and Paragraph formatting (for Headings and Quote) settings. border style. Hyperlink. and font styling applied to the hyperlink text. Table elements refer to HTML tables that you might include in your article content. Like the other text elements. artisteer. Advanced Options Clicking on the “Font Options…” button in any of the submenus (Headings. change the color of the block the quote appears in.

You can find a list of ‘web-safe fonts’ from many sources on the web.125 page The list of fonts you see in Artisteer are based on the installed fonts for your system.com | page 125 . Bullets Specify the indent between the Bullet and the List Text. Supported values: 0 artisteer. Web-safe fonts are an industry recognized set of fonts that are most commonly available on most computer systems. These options are disabled if you have not selected a bullet image. Clicking on the “Bullet Options…” button in the BulletsImage submenu will open the Article Option Dialog where you can change the Offset and Recoloring option of the Bullets. Artisteer does not support embedded fonts so you should pick fonts that are most likely to be on a wide range of systems.

If this option is set to No. You can change the color of the bullet image Recoloring with BulletsImageColor. Normally. which also has a color option) are displayed in a default color. Specify whether the bullets should be re-colored. bullets (not the List Text. otherwise. the bullet image appears in the color you selected. artisteer.com | page 126 . Clicking on the Custom Values icon will open the Article Options Dialog box where you can change the Icon Offset and Padding options of the Quote.126 page Offset – 20 pixels. the bullet image appears in the default color.

Hint: when you are designing the style for quotes. Paragraph Use this to change the Text format options like: • • • • • • Margin Left Margin Right Line Spacing Character Spacing Font Options Text Alignment artisteer. Supported values: 0 – 20 pixels. or use a fill color.com | page 127 . this is easier to see if you add a border around the quote block.127 page Quote Offset This is the indentation between the quote image (e.g. “) and the quote text. Supported values: 0 Padding – 50 pixels. This is the space around the text within the quote block.

Note: You can also modify the Paragraph settings including: • • • Alignment Indentation Spacing artisteer.com | page 128 . • • • • • Font Family Font Style Font Size (in pixels) Text Effects Character Spacing You can also access the advanced options in the Article Content-Text dialog box. by selecting “More Options…” in any of the Style and Font lists.128 page Advanced Options Use the “Font Options…” button opens the Article Content-Text option dialog box where you can adjust the following Font Settings.

If you are working with a CMS template. To understand Metadata. There are two types of pages. The first type is a static page. Don’t worry. or HTML). Menu. except if you are creating a ‘website or blog’. footer and icons of your articles. it is important to understand the pages of your website. header. Both types of pages share the Header. and sidebars in your design. artisteer. regardless of which type of project you are creating (e. you can create either of these pages in Artisteer. Joomla. A static page has a headline. you can visualize these pages more easily by switching your template type temporarily to ‘Website or Blog’ (FileChange Template). otherwise. you can always switch back to your template later without losing any of your work.g. like Joomla. which you can hide using the Hide Article Title icon.129 page Metadata Use these options to customize the headline.com | page 129 . you create these pages using the CMS you are using.

Viewers (normally) navigate the static pages on your website using the horizontal or vertical menu. They look very similar to a static page. Unless you create one yourself. A static page has a title (or ‘headline’). there are always two static pages created automatically. or metadata links to related content. • A special page called the ‘frontend page’. you create static pages using the CMS backend. Every post page is a separate page on your site. These are sample pages which you need to delete or customize before publishing your website. or references to the posts are listed on the same page. Your viewers can navigate to the post articles by clicking on the post header that appears on the Blog Post page. which are metadata. This is because the headline is a short synopsis of the post. Post pages are common to all blog websites. The second type of page on your website is a post page. or more posts are listed on the same page. Static pages only have a headline. which is often used when two. or ‘blog post’ page is used to list the post articles on your website. artisteer. • A post page has a headline.com | page 130 . but you cannot hide the text. Posts also have a header and footer. but differ in many different respects.130 page When you create a new ‘Website or Blog’ project in Artisteer. If you are creating a CMS template. there is no special page created to list the static pages on your site. and some content but there are no links to other parts of your website unless you add them to the content yourself.

Comments.) are placed inside a block (i. select an icon from the gallery or insert custom icons from a file. date).131 page • Post articles have metadata associated with the post content. and date the article was written is useful information about the post since then you viewers know who wrote the article. Date. Open the Icons menu and select the appropriate metadata icon from the list – Author. Tags. date. Category.g. It is considered that with the content you add to a static page. blog post page) since the headline is impressed as a hyperlink so viewers can navigate to a specific post article. the options you can set in the Metadata group apply to post articles. such as ‘Hovered’ and ‘Visited’ only apply to the post articles listed on the frontend page (i. display or not display an icon with the metadata.g. Use the Icons option to enable or disable the display of certain metadata (the Show…option). Edit. The Text option refers to any metadata included in the header or footer (e. it is not important to know who authored the page. The exception is the Headline options. not static pages. Metadata refers to information about the post article that is pertinent to the article while not necessarily related to the content of the article. and add an icon to appear next to the article headline. Comments. these options are not available. artisteer. author. Author.e. You can use these to style the headline text. find articles written by the same author. etc). The image below demonstrates adding a ‘date’ icon.e. The link options however. Without a block. The Header Header Layout and Footer Footer Layout options let you select whether or not the header/footer headline and metadata (e. etc. For example. The location inside the block allows controlling the border and color of the block. when the page was created. change the color of icons (Color). the author. or otherwise categorize the page. and determine how ‘fresh’ the content is.com | page 131 .g. Static pages have no metadata. panel). The Link options refer to any metadata links to related content (e. Considering the differences then between a static page and post page.

This removes the Author link. unselect ‘Show Author’. the comment text is saved with the post text. and viewers will not be able to navigate to the articles written by the same Author. For example.com | page 132 . then the comment text becomes part of your post page. For example. but just not displayed in the header or footer. If you. you can elect to allow comments on the post by your viewers. It is important to note that the metadata is still there. they are still part of the post. or another administrator. if you do not want the Author of the post to appear in the header. if you are hosting your website in Wordpress. viewers can navigate to the comments by using the link but if you omit the link. Each time a new comment is added. unselect the ‘Show …’ option. reviews and publishes the comment.132 page . Normally if you include a ‘comments’ link in the footer. Advanced Options artisteer. If you do not want a particular type of metadata to appear with the post. the comments are not deleted.

com | page 133 . This option is not available if you have selected a Layout for the header or footer that does not include a block. 100% means complete transparency. artisteer.133 page Use the advanced options for metadata to control the transparency of the filled-in metadata blocks relative to the Sheet.

or pick up a color from any spot on the template and add it to your custom color palette (color Fill Color picker). Your color selection can be enhanced with a gradient. and they are often decorated with effects and images. The gallery offers different gradients arranged according to the position. Backgrounds are usually filled with colors. direction and character of Gradient the color transition. Background. You can adjust the extent of the transition and the color contrast using the ‘Gradient Options…’ selection. These options provide a great deal of flexibility in designing your background.134 page Background Tab The Background Tab manages the design of the area outside the active content of the web page (the Sheet). Each group has an additional dialog box for advanced customization. custom colors.com | page 134 . Gradient produces smooth color transitions. Ribbon Options Background You can apply theme colors. and Light Effect. Texture or Image. The Background Toolbar in Artisteer consists of four groups: Ideas. artisteer. texture or light effect.

Before pasting the image. In the gallery. From File… Use this option to select different color effects for the textured background. if you select the ‘palm trees’ in the Horizontal Floral group. recolor. grayscale If you are using a non-colored texture. specify the image position and Blend Mode (explained below). These are displayed in different shades of blue. For example. Texture or Image Gallery Texture refers to a special graphic that represents a type of design. If you are using a colored image.135 page Texture or Image The Texture and Image Gallery offers different design patterns based on the style. when the texture is applied. For example. if your background is Red. tint. Colorless textures acquire the color of the background fill color. some are designs and some are picture images.g. you can apply a color effect to change or offset the pattern of colors in the image: e. there are many textures you can select from that are ‘colorless’. there are also several images and textures in color. theme and position of images and textures. you may or may not be able to change the color effects. as much as changing which shade of artisteer. Effects The effects you can apply depend on the texture or image. material.com | page 135 . the design will also appear in Red with the same saturation as the original thumbnail in the gallery. Use this option to insert custom images or textures. In the gallery. you can invert the colors in the texture (you are not really inverting the colors. The color weight and saturation for colored images and textures may be modified in the Page Background Options (using the custom value dialog icon ).

com | page 136 . The first color is the ‘fill’ color for the background. and the second color is the one you select with the Color option from the ‘effects’ menu.g. E. or you choose a two color layout. See the Page Background Options below for an explanation of these selections. you cannot invert colors for this texture. With non-colored textures. But if you choose the second horizontal bottom texture in the gallery. Options… artisteer. Select this to further customize the Texture Options.136 page color should be assigned to each area). if you select the first Flowers texture. the ‘effects’ option is disabled. you can invert the colors. you can choose what color the flowers should be and what color the background should be.

use a lighter color. and set the transparency to 0 for the background and glare. Use this to insert a custom light effect from a file. You can further customize the Light Effect by selecting ‘Options’ (see Glare in the Page Background Options below). which may be useful if you want to overlay From File… another image on the page background. See Glare in the Page Background Options below. Options… Advanced Options The Page Background customization options may be entered from the Options button and from the Custom Values icon. Hint: the light effect may also be an image.137 page Light Effect The Light Effect Gallery offers various glares you can use to enhance your design.com | page 137 . artisteer. Hint: you Light Effect Gallery can visualize this better if you select no gradient and texture for the background.

This option is not available if “No Glare” is selected in the Light Effect gallery.138 page General Set whether a background image is fixed or scrolls with the rest of the page. Fixed – When you resize the browser window. and Right. the Sheet appears to move over a fixed background. The supported values are 0% to 100% where 0% means "without transparency". Glare Aligns the glare (lighter areas of the glare texture).com | page 138 . mostly on the left. Increase or reduce the size of the light effect. or mostly on the right). \ artisteer. Scale simply reduces the size of the graphic relative to the page background. This Transparency option is not available if “No Glare” is selected in the Light Effect gallery. Hint: you can visualize this better if you pick a glare with a light source on one side or the other of the image (e. Scrolling Scroll . or scroll the window. Set the glare transparency relative to the Page background. the Sheet and the background texture appear to move together. Center.When you resize the browser window. or light reflected from a surface. This option is not available if "No Glare" is selected Align in the Light Effect gallery. Available options are Left. or scroll the window.g. Scale A ‘glare’ is a special type of texture pattern that emulates a lighting effect like the rays of the sun.

If the top layer's pixel is dark. and lightness of the top layer. darkness. The supported values are from 0 to 100%. If the top layer's pixel is light.com | page 139 . This option is not available if “No Texture” is selected in the "Texture or Image" gallery.No effect on the underlying layers.139 page Texture Options Set how the background color and background texture/ image layers are blended into each other. then the bottom layer's pixel is lightened. Overlay .Blends the two layers together by changing the opacity. then the bottom layer's pixel is darkened. where 0% means “without transparency”. This Transparency option is not available if “No Texture” is selected in the “Texture or Image” gallery artisteer. Soft Light . Blend Mode Normal .This blend mode lightens or darkens the image depending on the color of the top layer. Set the texture transparency relative to the background.

140 page Recolor the image or texture so that it assumes the fill color for the background. For example. If you select one of non-color textures. whatever color saturation the balloons currently have is blended with ‘Red’. When you increase the color weight. then it would be pure Red). This is only available for textures that have color. where the balloons are in various colors. Color Weight The weight determines what percentage the background fill color should have when blended with the texture color. That is. the Color Weight option is disabled. if pure Green.e. Most of the textures in the texture gallery have no color (i. the balloons will acquire more and more of a reddish shade. These textures automatically take on the color of the background.g. suppose your color background is Red. the balloons are all some sort of reddish shade. How Red they appears depends on the original color saturation of the image (e. artisteer.com | page 140 . At 100%. and you choose the ‘balloons’ texture from the New Color Holiday group in the texture gallery. the textures that are shaded in blue). and how much ‘Red’ makes up the final color depends on the color weight.

one of the textures from the artisteer.g. the balloons will appear more red). then no Red is added to the image.e. Make the lighter areas of the image/texture lighter and the darker areas. therefore how saturated the ‘Red’ fill color is doesn’t matter.e. For example. suppose your color background is Red. If you select one of non-color textures. darker. These textures automatically take on the color of the background. the balloons are gray). the Color Saturation option is disabled. The color saturation determines how saturated the fill color should be when blended. i. Most of the textures in the texture gallery have no color (i. Use this with the color Color Saturation weight option above. while reducing the color saturation will gradually remove the color until the color is gray (i. you set the color weight to 100%. This setting only affects the ‘fill’ color when it is blended with the image. The color weight determines what percentage the background fill color should have when blended with the texture color. Hint: this effect is more visible if you select a texture where the contrasts are more pronounced (e. thus increasing the contrast of the image/texture and making it Contrast more visible.com | page 141 Large group in the texture gallery). The final appearance depends on the color saturation and luminosity of the colors in the original image. When you increase the color saturation.e. %100 percent means that all of the gray has been removed. Hint: set the color weight to %100.141 page Use this to control how saturated the background ‘fill’ color should be when blended with the colors in the texture. and you choose the ‘balloons’ texture from the New Color Holiday group in the texture gallery. . the Red color will become more saturated (i. the textures that are shaded in blue).e. If the color weight is 0. how much gray is in the color. 0% means all of the color has been replaced. This is only available for textures that have color.

Rotate the image/texture 90 degrees clockwise (CW) or counterclockwise (CCW).The background image will be repeated vertically and horizontally until it fills the entire background area. When the image is set to more than 100%. This option is not available when”No Texture” is selected in Position “Image or Texture” gallery.The background-image will be displayed only once. Horizontally (Default) . Reduce or enlarge the image/texture on the background. Use this if your custom texture or image is not the same size Texture Repeat as the background.The background image will be repeated vertically until it fills the length of the background area. No repeat . artisteer.142 page Texture Position Use this to set how your custom background texture or image will be repeated. the image is stretched beyond its Scale original size. Create a mirror reflection of the image/texture in vertical or horizontal directions. Use this to set the starting position of your custom background texture or image. Vertically . This option is not available when”No Texture” is selected in Flip “Image or Texture” gallery. This option is not available when”No Texture” is selected in “Image or Texture” gallery. Fill .com | page 142 . This option is not available when”No Texture” is selected in the “Image or Texture” gallery.The background image will be repeated horizontally until it fills the width of the background area. This option is not available when”No Texture” Rotate is selected in “Image or Texture” gallery.

is fairly rapid and only covers a small area. Contrast The smaller the value. A large value means the transition extends over a longer area of the background. A small value means the transition. Conversely.com | page 143 . Increase or decrease the luminosity of the initial and final colors of the gradient. starting from the top.143 page Gradient Set the height for the selected gradient. the less contrast between the top and bottom of the transition. the larger the value. The supported values are from 1 to 1200 pixels. This option is not available if "No Gradient" Height has been selected from the Gradient gallery. artisteer. The height determines the extent of the transition relative to the background of the page. the greater the contrast. This option is not available if “No Gradient” has been selected in the Gradient gallery.

artisteer. padding. color. For example. it can be difficult to distinguish between the thumbnail depictions of the settings. radius. You can choose between a fixed or fluid Sheet width. shadow. or the color of the sheet. The group includes a Gallery with quick style templates and options to manage width. Just move the cursor over one of the gallery settings and wait. or change the background transparency. margin. Ribbon Options The Ribbon options are arranged into one group called Sheet. The Preview area will show you what the Sheet will look like if you select that option. Or you may want to move the sheet down a bit from the top of the page. Fluid means the sheet width is a percentage of the display area in the browser. Hint: If you use the gallery.com | page 144 . transparency and border. or change the width of the borders. you might prefer a sheet with rounded edges instead of square edges.144 page Sheet Tab Use the Sheet tab to change the overall positioning and look of the Sheet area on the page. add a shadow effect.

Also. Use the "Sheet Options" dialog to edit the design of the sheet. Change the Layout. you can set custom transparency values for the sheet background.145 page Advanced Options The sheet options can be customized by clicking on the appropriate button in the option list. angle and opacity of the shadow as well as its distance from the sheet borders.com | page 145 . artisteer. and Shadow parameters to achieve the desired result. Style. and the corner radius values (curved corners). Layout and Style parameters include the width of the sheet and its borders. if you want to change the Padding value click on the More Paddings… button. there are additional settings: Minimum Width and Maximum Width (explained below). the padding within the sheet. Enter the values or drag the sliders to the left or right to decrease or increase the option values. If you use a fluid Sheet width. For example. Shadow parameters control the size.

com | page 146 . the content within the sheet might also be resized. To avoid this problem. the sheet is resized to maintain the same percentage of area. When you resize the window. then pick a number that is wider than the original fluid width. Supported values: 800 . select a % width first. the values are inconsistent since you are not likely to have a Sheet that is both 800px wide and also occupies 20% of the window. When the window is resized. or 20% (the minimum width) –1500px. the fluid % and the minimum width should be set consistently. or a percent of the screen width. To prevent this.800 px Minimum Width A fluid sheet width maintains a certain percentage of the browser (Fluid Sheet width only) window’s width. then using the Preview area as a guide to select a minimum width that is narrower than the original fluid width. For example.146 page Layout Set the Sheet width in pixels.1920 px Maximum Width See also Minimum Width above. If you need to select a Maximum Width. When the Sheet is resized. if you set the width to 20% but you set the minimum width to 800 px. (Fluid Sheet width only) artisteer. the Sheet area is truncated. Supported values: 300 . the Sheet will only be resized to this miniumum amount and then afterwards. or 100% (the Width maximum sheet width). This may change the orientation of the content in undesirable ways. Use this to set the maximum width that a fluid sheet can be resized. Supported values: 200px. Note. Use this to set the minimum width that a fluid sheet can be resized. you may not get the results you expected. otherwise. you can set the minimum width that the Sheet can be resized.

When the Top Margin is 0. Top Outline rounds off the top corners (i. Set the border width for the sheet in pixels. Supported values are: 0% to 100%. Note. where 0 px means no padding. Supported values: 0 px – 200 px. text and images) and the edges of the Sheet.e. the Menu.g. Header or Menu that is Top Margin outside the Sheet – see Layout options). the top edges will always be squared no matter what you set the radius to. Supported values are: 0 px – 20 px.g. Changing the radius for one. When joined. the Sheet transparency also affects the Transparency border and shadow (even though you may set the shadow transparency to ‘none’) artisteer. using a radius to round the corners helps differentiate and highlight where the Sheet top is located.com | page 147 . or the bottom of the layout element above it (e. Header or Menu). Padding is the space between the Padding content (e. Supported values: 0 px to 50 px. does not apply Top Outline the radius). where 0% is equivalent to “No transparency”. the corners are squared (i. but the bottom corners will be curved. Note. Radius If there is no margin above the Sheet (SheetMarginNo Outline). When turned. Header. Border Width Set the sheet transparency. Set the padding for the sheet content in pixels.e. When turned off. Style Set the shape of the corners of the sheet (corner radius) in pixels. and Sheet all share the same Radius value (i. where 0 px is equivalent to “No Radius”.147 page Margin defines the distance of the sheet to the top of the page.e. corner type). applies the radius). where 0 px is equivalent to “No Border”. changes it for all. or the layout element above it (e.g. the Sheet appears to be joined to the top of the page.

where 0 px means “without shadow”. Distance Set the shadow’s offset direction. if the shadow is completely Opacity transparent. Size Set the opacity for the sheet’s shadow. Supported values range from 0% (fully transparent) to 100% (fully opaque). Angle The supported values are from -180° to 180°. where 0 means "no offset". you won’t see it no matter what you choose for the other settings. Supported values are from 0 px to 50 px.148 page Shadow Set the shadow size for the sheet’s shadow in pixels. Supported values: 0 px – 60 px. Note. artisteer. Set the shadow offset in pixels.com | page 148 .

Foreground photo or image. you have to use the style options under the Header tab (HeaderTitleHeadline. and the location of the text block on the Header. To apply a style (e. but the text is still part of the Header.149 page Header Tab The Header is a layout object displayed at the top of every page of your site. artisteer. Header. font) though. Header design: coloring. HeaderTitleSlogan). Flash. which help to control the position of the Header on the page. Foreground Photo. You cannot do this from the Edit tab. The Header Tab controls all aspects of the Header. Header Layout This command group includes features.com | page 149 . and Title Style. • • • • • Headline and Slogan text. Background image. The Header has several layers which are combined to create one image. Flash animation or video. The Header options for Website or Blog projects do not include the Headline and Slogan text fields. texture.g. Title. Background Image. gradients and glares. transparency. the size of the Header. TheHeader options are divided into the following groups: Layout.

and Margin the menu is below the Header. Height This option enables or disables the Text Block. without Header (i. or the size of the Page (Page Width).150 page Ribbon Options Layout Assign the position of the Header: outside Sheet. You can align the block on the left or right side of the Header area.e. inside Sheet. or from the bottom of the Menu (if it is above the Header). A Custom Height is available if you select More Heights… (see Advanced Options). adjust the space above the Header using the Sheet margin instead. this option is disabled. Set the height of the header from 100 to 300 px. Advanced Options Custom layout options can be configured for the Header using the General tab on the "Header Options" dialog artisteer. Length Define the distance of the Header from the top of the page.com | page 150 . the page has no header) Position Set the Header width to either the size of the Sheet (Sheet Width). The Text Block Text Block area has a different and independent color and transparency setting than the rest of the Header. If the Header is inside the Sheet. The Text Block is a reserved area of the Header used to highlight the text in the header.

Text Block Top Margin Reserve a block area of the Header for the header text.e. This option is only available when the Header is positioned outside the Sheet since otherwise the Header is part of the Sheet and therefore you need to configure this with the Sheet options. this is independent of the position of the Header relative to the menu.e. Using Top Outline and a radius to round the corners helps differentiate the Header from the rest of the Page. the Header appears to be joined to the top of the page.151 page General Height Set the height (length) of the Header as it appears on the page. See Margin above.com | page 151 . Note. the corners are squared (i. or bottom of the menu (if it exists). does not apply the radius). When the Top Margin is 0. or page.e. sheet. artisteer. Top Outline rounds off the top corners (i. A negative margin will display the Header overlapping top of the page (i. truncates the top of the Header). When turned off. Top Outline When turned on. This is the space between the Header and the top of the page. applies the radius).

you cannot specify one type of rounded corners for the Sheet. Effects The Effects option is used to adjust the basic design: Note. i. however there may be situations where an option is disabled for one but not the other (e. ‘headline’ and ‘slogan text’). and the foreground photo are not affected by this setting.g.Set the shape of the corners of the Radius (corner radius) in pixels. if the Header is positioned outside the Sheet.e. The transparency rate ranges from 0 to 100%. In most cases.152 page Header Ribbon Options Header Fill Color This option provides a choice of colors for the background. Header). and a different type of corners for the Header. or add your own custom color with More Colors. Similarly.e. Radius . or relative to the Sheet. Transparency You can add transparency to the header by selecting a value from the list or adjusting the transparency in the Transparency options. artisteer. if specified are shared between the Sheet. if the Sheet has no Shadow. this option is disabled. pick a color from the custom palette. if the Header and Menu are both inside the sheet but the Header is sandwiched between the Menu and the top of the Sheet. if the Header is positioned inside. You can select a color theme. but not Sheet). the radius is disabled for Header. Header. changing the setting for one (e. Sheet). the radius and the shadow.g. The transparency effect is relative to the background. also changes it for the others (e.g.com | page 152 . The header text (i. and Menu regardless of their position and orientation.

com | page 153 . artisteer. Sheet and Menu. Background Image The Background Image features help you find a suitable background image. Gradient – Add a light transition effect to the Header. Ribbon Options Background Image Use this option to select a background image for the Header. Wind Glass.153 page Shadow – Change the shadow effect for the Header. This option is disabled if the Sheet does not have a shadow. locate it on the Header. The gallery has various themes and styles to choose from: Abstract. and enhance it with various design effects. See Background Glare options above for more details about glare effects. Color Abstract. Glare – Add a glare effect to the Header. Hint: You can use any type of graphic file for a Texture. Texture – Select a texture or insert a texture from a file. See Background Texture options above for more details about textures. See Background Gradient options above for more details about gradients.

Similarly. i. Landscape.e. however the sides of the Header are filled in where the Page area is wider than the image. When you first insert your image. and Clouds. if you make the Sheet width fluid again. it must be within a minimum and maximum width (500-1500 px). either shrink or enlarge the Header. The width of the image is unchanged.com | page 154 Nature. For example. When the Header width is resized to the width of the image. and a minimum and maximum height (50-500 px). but then filled in on both sides to cover the areas of the Header where the image doesn’t appear (100px on each side). but the Page is resized until it is 1000px. it also changes the Sheet width. suppose the width of the image is 800px. If the Header width is the same as the Page width. and what portion of the image is displayed in the Header: “Resize header to image” – This will resize the width and height of the Header so it has the same dimensions as the image. the image is now “resized to fit the Header” (see below). this option is disabled. When you resize the Header to the image. When you insert a background image from a file. i. City. The Header does not have its own width setting. The Header width is either the same width as the Sheet or the Page. you can see the effect of the option you select if you make the selection and then wait a moment for the artisteer. When any image is outside that range. you cannot resize the Header to fit the image. the height of the image is cropped to fit the height of the Header. you have 3 options that determine how. if the Sheet width was fluid before. . the Sheet is changed to a fixed size.e.154 page Background Image You can also add your own background image from a file. the header area acquires a new dimension. After you have added the image. The image will be centered over the Header. When you add a custom image. Color Textile.

the image is cropped by width. or both. If you add a 600x400 image.155 page Preview area to be updated. width. If you want to see the image displayed with the Header before the Header was resized. For example. and now the Header is the same size as the image. but cropped by height. suppose the Header is 800px wide by 300px high. the image is centered by width. you may not be able to return to a previous design unless you step thru undoing each of your changes. Use this tool to reorient the background image with the Header. Position What you see in the position tool is the original image. since the image will scale as the Header becomes larger or smaller. the options using the Position tool may not work the same as when you first inserted the image. “Resize image to Header” – The image is scaled and cropped to fit the dimensions of the Header. If you add a 600x150 image. whether the image is larger by height. “Use Original size” – If the image is smaller. If you accept your changes then use the Position tool and select ‘Use original size’ you will not see any changes in the Preview area. the image is centered on the Header. suppose you enlarge your Header to fit the image. This can be useful if you are using a fluid sheet width. either by height. you need to undo your change (or resize the Header) to start over. the image is cropped to fit the dimension of the Header. Where the image is larger. That is. or width. or both. but centered by height. If you accept the changes however. the image is centered in the middle of the Header. For example. with an overlay that shows you what part of the image will be displayed in the Header. In the example below. This is because the change to the Header size has already been made. the image is larger than the header so what you see in the center of the artisteer.com | page 155 . If you add a 900x150 image.

suppose you want to remove some of the the ‘blue sky’ in the image above.com | page 156 . For instance.156 page window is that portion of the image that will be displayed. The image below was also inserted using ‘Use original size’ but now the original image dimensions are smaller than the Header area. You cannot do this with the Position tool. Hint: you can’t move the overlay beyond the borders of the image. artisteer. but you can use the tool as a guide to cropping the image in another tool. You can drag&drop the overlay area over different portions of the image until the portion of the image you want is in the header. such as Micosoft’s Paint.

The alignment slider to the right of the image can be used to scale the Header overlay and align the Header with the image to display whatever portion of the image you want to display.com | page 157 . For example.157 page Since the image is smaller than the Header. if we use the first example above and use the slider to scale the size of the overlay area like this: artisteer. the Position tool shows the entire image since the image will fit entirely in the Header area.

From File… Use the effects option to recolor the image. this would be equivalent to the ‘use original size’ option. but Artisteer crops and scales more of the image that appears in the Header. The options you select from are where a different color weight and color saturation are applied to the ‘fill’ color before blending with the image.158 page The Header area appears to get larger but not actually. You could use the slider to scale the size to the same size as the image.com | page 158 . Use this option to insert custom background files. and then scaled the Header overlay to as small as it could appear. artisteer. which would be equivalent to inserting the image with the ‘resize image to header’ option. Conversely. Effects Recolor: The ‘fill’ color for the Header is blended with the colors of the image. or add a ‘blur’ effect. if you originally inserted the image with ‘resize image’. The Header dimensions stay the same.

159 page • • No Effect – No color weight or color saturation is applied to the image. artisteer. if the fill color is Red. • Greyscale – The color saturation is 0. if the fill color is Red. For example.com | page 159 . For example.e. Advanced Options The background parameters can be manually adjusted in the second tab of the "Header Options" dialog. the image now appears in gray with different levels of brightness). then the choices of the gallery are different images with more and more reddish ‘tint’. then the choices of the gallery are images where all the colors have been replaced by Red but the saturation (amount of gray) is different. • Recolor – Choose from options where the color weight is %100 but the saturation is different. All of color in the image has been replaced by gray (i. Tint – Choose from options where color weight is increased for the Header ‘fill’ color but the saturation is the same.

com | page 160 .160 page Define the Basic Settings of the Header Background. That is. Use this to adjest the color saturation (amount of gray in the color) of the Header fill color (HeaderFill Color) when it is blended with the rest of the Header. The Blur effect averages all Blur pixels within the specified radius. Set the blur radius ranging from 0 to 30 pixels. when the image is blurred the other layout elements. Hint: The blur effect is useful if you want to add a depth of field to your Header. Depending on the selected image. like artisteer. See color weight Color Weight for Texture options above for more information about color weight. Color Saturation See color saturation for Texture options above for more information about color saturation. some background options may be disabled. a larger radius leads to more blurring. Background Use this to adjust the percentage of color the Header fill color (HeaderFill Color) will have when blended with the rest of the Header.

artisteer. or may not affect the performance of your website. For example. but a larger size also means it takes longer to render and return your web page. JPEG Quality. Better image quality results in a larger file size. If performance is critical. Overlay – Increases the light effect of the image by increasing the contrast between the lighter and darker areas. This may. are not so they attract more focus. This option is enabled only for background images with no color. Supported values are: Softlight – Decreases the light effect of the image by decreasing the contrast between the lighter and darker areas. The range goes from 0 to 100%. sets a quality level for JPEG compression. When you export your website or template. Choose between JPEG or PNG formats for the exported image. foreground image. etc. Default. you need to adjust these options to select an appropriate trade-off between size and image quality. the second control. this determines the image format Image Format and JPEG Quality for the file created..161 page text.com | page 161 . Use this to control how the ‘fill’ color of the Header is blended with the Blend Mode background image. such as 'Abstract' backgrounds in the gallery.

Education. To move the object within the Header. or if you select the “100%” button. Teens. Music. select the photo with the mouse and then drag and Position drop the photo within the box area. You can choose from the gallery of professional photos with many different types of subjects. Communication.162 page Foreground Photo Use this option group to add a photo to complement your Header. Ribbon Options Foreground Photo Use this option to select a professional photo from a gallery grouped by subject: Business. However. You can resize the image using the slider bar to the right of the header box. it is usually displayed inset within the Header because they are scaled down. Hint: when you insert one of the photo images. Travel etc. artisteer. the image will be resized to its original dimensions. the photo is resized to fit within the area of the header. or you can insert your own custom photo. When you add a foreground photo to the header. most of the Artisteer photos are much larger than the header so when you select %100 they often then get redisplayed grossly enlarged.com | page 162 . Gallery Use this option to move the foreground object within the Header.

163
page Use this option to insert a custom foreground image from a file. From File…. Use this option to add special effects to the foreground photo. The available effects (recolor, glow and flip) help to blend or enhance the object with the Effects background. Note, any image you use for the foreground can have a glow effect. • • Recolor - leaves the original color or converts the object to grayscale (0 color saturation). Glow – adds a lighting effect around the image. i.e. it adds a light transition (from bright to dim) simulating a glow effect. The smaller the size of the glow, the smaller the area for the transition, the effect becomes more pronounced. The greater the size of the glow, the more the greater the transition area so the glow effect blends more into the background. Hint: to visualize the effect better, select a dark color, like black for the header fill color, set the glow opacity to %100 in the advanced options and adjust the glows size using the smaller end of the scale. • Flip - creates a mirror reflection of the object.

artisteer.com | page 163

164
page

Advanced Options The Foreground Photo options may be manually adjusted on the second tab of the "Header Options" dialog.

Foreground Photo
The glow effect stretches from the edges of the foreground object. The Glow Size effect is most visible on a dark background. The Opacity option specifies the Glow intensity. Supported values: 0% (fully Glow Opacity transparent, invisible) – 100% (solid, opaque glow).

Flash
Flash animations can make your web pages more appealing by visually enhancing the page. Transparent Flash is light, unobtrusive and produces an extraordinary Web 2.0 effect. Ribbon Options

Flash
Use this option to select a Flash video from a gallery of ready-made videos, or insert your own custom Flash file. Gallery

artisteer.com | page 164

165
page Use this option to: Resize the Header area to the size of your Flash video, resize the Flash video area to the size of your Header area, or use the Position original Flash video size. You can also regulate the Flash size with the slider located at the right side of the dialog box. Custom .swf files may be inserted to the Header. From File… These advanced options give more control over the Flash animation. Options… Advanced Options Advanced Options help to manage the play mode, visual mode, speed, and quality of Flash videos. You can also use custom parameters to manually modify the Flash video.

artisteer.com | page 165

166
page Some properties may be disabled depending on the Flash realization.

Flash
Select “yes” to have the image played automatically and “no” to enable another play mode Auto-play Select “yes” to loop the Flash or “no” to let it play once Repeat Select one of three modes: Transparent, Opaque or Window. In Transparent mode, the background of the HTML page shows through all transparent portions of the movie. This option can slow animation performance. In Mode Opaque mode, the movie hides everything on the page behind it. In Window mode, the movie plays in its own rectangular window on a web page Specify the transparency of the Flash movie from 0 to 100% Transparency Specify the speed of the Flash movie with a slider from 50 to 150% Speed Select the quality type: best, high, medium, low Quality Enter custom parameters to modify how the Flash file is played. Parameters

artisteer.com | page 166

but the text is still part of the Header.e. If you want to modify the text. or in Drupal 7. AdministrationConfigurationSystemSite Information).net in the general settings (General SettingsSite Title. The Header options for Website or Blog projects do not include the Headline and Slogan text fields. select the text area in the Preview and make your changes using Artisteer’s built in visual editor. if you are using Joomla. But. you have to use the style options under the Header tab (HeaderTitleHeadline. HeaderTitleSlogan). etc.com | page 167 .167 page Title Ribbon Options Use this command group to change the Headline Text and the Slogan Text of your design.). General SettingsTagline).net. font. if you publish to Artisteer. you must define the text in the CMS settings (Template ManagerBasic options.g. Headline and Slogan text are common to many blogs but depending on the project you create. but the text can also be changed on Artisteer. the text you see in the Preview area is just for designing your Header in Artisteer. what you enter in the Preview area will appear on your website. artisteer. For example. You cannot do this from the Edit tab. color. To apply a style (e. font) though. but the actual text you see in the Preview area will not appear on your website. What you see in the Preview area will not appear on your website. You can define the style of the text in Artisteer (i.

Artisteer does not support embedded fonts so you should pick fonts that are most likely to be on a wide range of systems. The Title Style group includes the following functions: position. size. Web-safe fonts are an industry recognized set of fonts that are most commonly available on most computer systems. Effects.168 page Advanced Options Clicking the “Font Options…” button opens the Header Logo Name/Slogan dialog where you can adjust the Font Settings such as the Font Family. Title Style Use this to position the text within the header. and Character Spacing. Title Style Use this option group to change the Title Style settings to complete your Title. Font Style. The list of fonts you see in Artisteer are based on the installed fonts for your system. Hint: it may artisteer.com | page 168 . You can find a list of ‘web-safe fonts’ from many sources on the web. Select the text with the mouse and simply drag the bounded box wherever you want the text to Position appear. and align. This is a gallery of simple design options you can select from instead of individually setting the options for the Headline and Slogan. Font Size (in pixels).

artisteer. Note. for ‘website or blog’ projects this option is grouped under the ‘Position’ option. for ‘website or blog’ projects this option is grouped under the ‘Position’ option. This is a gallery of simple alignment options you can select from instead of individually setting the options for the Headline and Slogan.169 page Size be difficult to see the difference in designs from the thumbnail. Align Note.com | page 169 . but as you move the mouse over each selection. the Preview area is updated automatically so you can visualize how the Headline and Slogan text change.

By default in this type of project. gradient. Note: Artisteer supports only one horizontal menu. tabbed and buttons. and transparency.0 menu styles: classical (with separators).170 page Menu Tab The Menu tab is used to control the position and design of the horizontal menu. As always. You can regulate the margins and text alignment as well as add effects such as texture. using the customization options on the Ribbon bar. length and top margin. The tab also includes tools for managing the design of menu items and subitems. Artisteer supports three of the most popular Web 2. The Menu options for ‘website or blog’ projects include an extra option: Show In Menu Pages. or manually. you select the appropriate level of customization using either the fully automated suggested design. Menu Layout The Menu Layout helps to find the appropriate position. Ribbon Options Layout artisteer. and adding more menu items than can fit across the page will have unpredictable results.com | page 170 . the for the horizontal menu bar are the top-level pages of your website but you can change which pages appear in the menu using the ‘Show In Menu Pages’ option.

Here you can also disable the horizontal menu.com | page 171 . Length Use this option to set the distance from the top element. Select Sheet Width or Page Width to make the menu fit the sheet or the page. Note that the Layout advanced options are located in the first selection of the Menu Options dialog box. Positive top margin values range from 0 to 50 px. Use the advanced options to regulate the distance between the menu items (Item Distance). the range of Top Margin values. which enables or disables the rounded menu corners of the menu. Advanced Options The advanced options include Horizontal and Vertical Margin settings.171 page This option suggests two position types: Inside Sheet and Outside Sheet. icon in the Menu Styles artisteer. You can also open these options by selecting the Custom Values command group on the Ribbon bar. you can also select a negative Margin margin of either –20 or -10 px value. as well as the Top Outline feature. The menu located inside the Sheet may be placed above and below the Position Header.

distance. and shadow. i. this option is disabled. Ribbon Options Menu Styles The gallery contains ready-made menus for fast and easy styling. if the Sheet has no Shadow. as well as the fill/transparency effect. Similarly.172 page Menu Styles Change the overall style of the menu buttons including the shape. alignment. coloring. border color/weight.e. Coloring Menu bar Refine the horizontal menu bar further by choosing the texture. you cannot specify one type of rounded corners for the Sheet. gradient. Note. and a different type of corners for the Header. Gallery Use this option to change elements of the menu style such as shape. It contains more elements Styling than settings.com | page 172 . the radius and the shadow. artisteer. Use this option to select a color scheme for the menu bar. radius. if specified are shared between the Sheet and the Header. and the colors of the active and passive menu items. separator. margin. borders and spacing between the items. You can choose a menu from the gallery. or compose a custom menu using the Styling options.

weight and width. This option provides a choice of colors you can select from for the menu bar background. or add your own color with More Colors. “Texture Options”. Texture options are also located within the Menu Bar Texture and Menu Bar Texture Position tabs of the Menu Options dialog. Transparency settings range from 0 to 100% and can be disabled. or Fill pick a color from the custom palette. or select the Custom Values icon. This option controls the border color. You can select a color theme. This option may be disabled depending on the styling (shape) you have selected for the menu bar. For advanced adjustments select More Borders (see below). artisteer. as well as transparency settings.com | page 173 . click the “Gradient Options…”. Border and Transparency. or by selecting the Custom Values icon. You may access the advanced gradient settings in the Menu Options dialog by selecting Gradient Options in the gradient list. Use this option to control the border at the bottom of the menu bar. You can choose one of the suggested textures or insert a custom Menu Bar texture. The “Menu Options” dialog allows you to adjust Gradient. “Transparency Options” or “More Borders…” button in the appropriate list.173 page Ribbon Options Menu Bar Use this option to select a texture and/or gradient for the menu bar background. To open this dialog. Border width ranges from 1 to 4 Border px.

Transparency.com | page 174 . Color weight. The “Menu Bar Texture” tab regulates color effects while “Menu Bar Texture Position” tab controls the manner of texture placement. Some options may be disabled depending on the existing menu style. Color saturation. You can find a description of these options in the Background section of this guide.174 page The advance texture settings come in two tabs. artisteer. The options you can set for the Menu Bar Texture are similar to the same options you can select for the page background. The Menu Bar Texture tab contains adjustment options such as Blend Mode. and Smart Invert. Contrast.

Radius. You can find a description of these options in the Background section of this guide. Adjust Border weight and color.com | page 175 . Change color and text parameters. Texture and Gradient values for the menu Items. Item Ribbon Options Within the item area on the ribbon you can: • • • Set the Size.175 page The options you can set for the Menu Bar Texture Position are similar to the same options you can select for the page background. artisteer.

Supported values: 0 Radius 100%. Specify the Width of the Menu Item Borders. Supported values: 0 – Vertical padding 50 pixels. Supported values: -100 (solid color) to 100% (the most contrast Gradient contrast gradient). Specify the top and bottom padding of the Menu Items. Specify the contrast between the starting and ending colors in the item gradient. Border width This option is disabled when the Menu Items have no borders. artisteer. Supported values: 0 – 5 pixels. Item Specify the horizontal distance between the Item Text and Item Borders.com | page 176 . use the "Menu Options" dialog to adjust the option settings. Specify the Corner Radius (shape) of the Menu Item. Horizontal padding Supported values: 0 – 50 pixels.176 page Advanced Options If the default settings don't meet your needs.

The Item Texture options you select are the same options you can select for the page background. Passive – state of the item when not selected. Ribbon Options You can adjust the following options: • • • • • • Enable or disable Multi-level menu (Levels option) Add a Gradient to the subitem background (Gradient option) Change the Size of subitem boxes (Size option) Fill subitem background with color Change the size of the subitem border Apply a style to the subitem Text artisteer. open the Item Texture section/tab in the Advanced Options dialog box. Transparency Active – state of the item when selected. refer to the Background section of this guide. Subitem This section provides the ability to control the appearance of items in the submenus that appear when you select a menu from the menu bar. For a description of these options.com | page 177 . Enhance your design with transparency effect.177 page To enable select any Gradient from the Menu  Item  Item  Gradient list. To adjust the texture of menu items. Hovered – state of the item when the mouse cursor is hovering over the item.

Specify the top and bottom distance of the Menu Subitems. Specify the width of the Subitem Borders.178 page Advanced Options If the default settings don't meet your needs. This option is disabled if you have not selected a gradient for the subitem.com | page 178 . Border width Specify the contrast between the starting and ending colors in the Subitem Gradient. Supported Height values: 0 – 50 pixels. Supported values: 0 – 5 pixels. Please note: The options are disabled if “No Submenus” is selected in the Subitem list  Level. Supported values: -100 (solid color) to 100% (the most contrast Gradient contrast gradient). Subitem Specify the horizontal distance in the Subitem drop-down list. artisteer. in pixels. Width Supported values: 0 – 50 pixels. Also please note that the Gradient contrast option is disabled if “No gradient” is selected in the Subitem list  Gradient. use the "Menu Options" dialog to adjust the option settings.

The options of the Blocks tab are united in three groups: Block Ideas. In Artisteer you can select from a range of block styles. block spacing and distance (Styling). manage and style the block background. artisteer. and the overall postings of the page. arrange.179 page Blocks Tab Blocks present additional content that is usually located around the main content area. header and content. Blocks and Vertical menu build the sidebar – a vertical strip at the right or lift side from the main content. Block Styles and Block Content. Let us look at them in more detail.com | page 179 . The block style applies to all blocks on your website. adjust the radius. search fields. Things located in the blocks include links. bookmarks.

or make the blocks more rounded by changing the radius value.180 page Block Styles Block Styles You can choose a block style from the gallery. texture and/or gradient. Content Styling The Styling option provides the ability to change block spacing. fill the block content background with color. There are three major groups. fill the block header background with color. With Header and Without Header. add transparency. gradient and shadow. adjust the border. add an icon. Select a px value from the list or set your custom value at Styling More Spacings Distance is the space between the block header and block content. alter the distance between blocks. adjust the color. The thumbnails give a basic idea of the block design. which separates blocks and the main content. artisteer. add transparency. texture and/or gradient. Gallery Simple. adjust the border. Select a px value from the list or set your custom value at More Distances. Adjust the text padding. border weight/color and Background transparency of the background.com | page 180 . Radius – specify how round the corners of blocks should be (select a px value from the list or set your custom value at More radiuses) Block Spacing is the space around the block. Header Style the text. add texture/insert from file. Specify the Inner padding value.

com | page 181 . artisteer.181 page Clicking on the “More….” buttons in Styling lists will open the Block Option dialog where you can adjust the layout options.

Specify the Spacing around blocks in pixels. Supported values: 0 – 40 pixels. This option is not available if you have selected a block style that has no border. as well as add different Effects to your blocks. Clicking on the “More……” buttons will open a Block options dialog: artisteer. background color. You can change the inner padding. border and transparency of the blocks.182 page Layout Specify the Radius of Block Corners (shape). Block spacing Specify the vertical distance between the Header and Body sections of the Distance Block.com | page 182 . Supported values: 0 to 40 Radius pixels. This option is not available if you have selected a block style without borders around one or more sidebar items in a sidebar with a border. Background The Background option is active if the block style selected includes a border around the entire sidebar.

Specify how the Texture blends with the underlying layer of the block.com | page 183 . Supported values: -100 (solid color) to 100% (the most contrast gradient). Gradient contrast This option is not available if you have not selected a gradient (Blocks  Block Styles  Background  Gradient). Specify the Transparency of the Background Texture. Supported values: 0 Transparency (fully opaque) – 100% (fully invisible). Specify the luminance difference between the starting and ending colors of the gradient. Options: Blend mode artisteer. This option is not available if you have not selected a block style. Specify the Block Border width. This option Border width is not available if you have not selected a block style. Supported values: 0 – 10 pixels. Supported values: 0 – 50 pixels.183 page Background Specify the space between the outer borders of the Block and the content Padding area within the Block.

· Soft Light . artisteer.184 page · Normal .Blends the layers together by changing the opacity. The values range from 0 (completely desaturated.No effect on the underlying layers. the Shadow option will provide the ability to change size. The Base Color for the header is selected under Background  Effects  Color.Lightens or darkens the image depending on the color of the Texture Image. and lightness of the Texture Image. full color intensity). · Overlay .com | page 184 . Set the amount of the Base Color applied to the header image. angle and opacity of the block shadow as well as indicate the distance between the shadow and the block borders. Color Weight Supported values are from 0% to 100%. Specify the Base Color Intensity. Just click on the “More Shadow…” button in the Background  Effects  Shadow list. darkness. Supported values are from 0% to 100%. Color Saturation If you select a template with a shadow effect. grey) to 100% (completely saturated.

Supported Angle Header and Content Using the Ribbon options allows you to adjust the font. You can also enhance the design by adding a texture and a gradient. Specify the Shadow Opacity. or by inserting a custom texture or a custom icon image. Specify the Shadow Angle starting from the edges of the block. The Ribbon options for content are similar to those for the Header. Specify the Shadow Offset in pixels.185 page Specify the shadow options. The unique feature of Block Content is control over text padding. Size Distance . Supported values: 0 – 20 pixels. The options are disabled for no-block styles selected in the "Block Styles" list. icon.com | page 185 values: -180° to 180°. Supported values: 0 – 20 pixels. Shadow Specify the Shadow size. Supported values: 0 (fully transparent) – 100% Opacity (fully opaque). artisteer. You can adjust the design of the content shape and add visual effects. and shape of the Block Headers.

Block Header and Content Specify the value of the Width of the Block Header Border (0 – 10 px). Scale (10 – 130%). This section contains the following settings: Flip (vertical/horizontal).186 page Clicking on the “Texture Options…” or “Gradient Options…” in the appropriate list will open the Block Option dialog where you can adjust the settings. Rotate Header Texture Position (CW 90/CCW 90). Texture Repeat (fill/horizontally/vertically). and Position (top left / center left/bottom left). the Vertical Padding (0 -25 px).com | page 186 . artisteer. the Gradient Contrast (-100 – 100 %) and Header Transparency (0 – 100%).

Gradient Contrast (-100 (solid color) to 100%).com | page 187 . Contrast. and Header Texture Smart Invert. Specify the Offset value (0-20 px). normal). Color Saturation. Border Width (0 -10 px). softlight. Blend Mode. Bullets Block Content Ribbon Options Within the Ribbon you can apply the following font options: • • • • • • • Margin Left Margin Right Line Spacing Character Spacing Font Options Link Options Bullets artisteer. Color Weight. Blend Mode (overlay. Color Saturation. Icon The available options are: Offset (0-20 px) and Recoloring. Content Transparency (0 (fully opaque) to 100% (fully transparent)).187 page Within this section you can adjust the Transparency (0-100%). The advanced options for Block Content include Padding (0 – 50 px). Color Weight.

and text alignment: You can also use the standard font settings to design how hyperlinks appear and create variants for visited and hovered links: The Image settings allow you to adjust the margin around the image. font family. artisteer.com | page 188 . font size.188 page • Image Options The Font settings allow you to modify the font color. and design the appearance of the image border. font style.

189 page Advanced Options Clicking on the “Font Options…” button will open the Article Content-Text options dialog where you can adjust such Font Settings as: • • • • • Font Family Font Style Font Size (in pixels) Effects Character Spacing And the Paragraph settings like: • • • Alignment Indentation Spacing artisteer.com | page 189 .

which are arranged on the Ribbon bar in four groups: Layout and Styles. artisteer. Vertical Menus are usually located at the top of the right. and Subitem. Open the Position list to choose the appropriate place for your Vertical Menu and look through the Styles gallery to find the type of Vertical Menu you prefer. Layout and Styles Ribbon Options The options of this section provide the ability to select the position of the Vertical Menu in the general layout of the page as well as to select one of the most popular vertical menu styles. Artisteer provides many settings. Menu Bar.190 page Vertical Menu Tab Both Vertical and Horizontal Menus are the elements of navigation and design. Designing Vertical Menus is a creative task. Item.com | page 190 . or left sidebar (column).

transparency) and add visual effects (texture. transparency) and add visual effects (texture. Menu Bar Contains menu block layouts. border. add such effects as texture. Shape (color. gradient and shadow. gradient. you can adjust the color and shape of the Menu Bar. Without Header. Content artisteer. transparency) and add visual effects (texture. icon). shadow). gradient). The layouts are arranged into three groups: Simple. gradient). border. With header.191 page Menu Bar Ribbon Options Using the Menu Bar options. Menu Bar Adjust the Inner Padding. The layout you select determines Menu Block which other options are available to style the menu. Shape (color. border. Header Adjust the Content (text padding). Shape (color. Background Adjust the Content (text.com | page 191 . and manage the design of the vertical menu Header and Content. Radius and/or Distance. Select the appropriate Margin.

Icons and separators add zest to your design while standard Fill. and you can select a Coloring scheme.com | page 192 . artisteer. passive and hovered items in the menu. Item Ribbon Options Menu Item options let you adjust the design of the menu item’s shape (shape. height. Border and Text options are for adding finishing touches. shadow). Header.192 page Advanced Options The advanced options for Background. You can access the advanced options by clicking on the Custom Values icon. distance. The item options also include visual effects (texture. that helps highlight the difference between active. which enhance the menu appearance. For a detailed description of the advanced options see the previous section on Sidebar and Block Styles. separator). radius) and content (icon. gradient. and Content are similar to those you can specify for other blocks in the sidebar.

193 page Advanced Options artisteer.com | page 193 .

There are settings for adjusting the shape (vertical offset. artisteer. “Navigate by Click” (clicking a parent item opens up a list with subitems and loads the parent item page). You can adjust the dynamics of subitems by opening Levels and selecting one of the following options: “One Level” (subitems are not displayed). “Expand by Click” (clicking a parent item opens up a list with subitems but does not load the parent item page). content (icon. “Expand by Hover” (hovering a parent item opens up a list with subitems but does not load the parent item page). “Popup by Hover” (a subitem list expands to the right of a parent item on hovering a parent item) or “All Open” (all subitems are shown in the menu). One of the most important design options for subitems is the way they are opened. separator) and effects (gradient).194 page Subitem Ribbon Options The Ribbon bar options for Subitems are very similar to that for Items. height.com | page 194 . and distance).

distance (distance between subitems.195 page Advanced Options The advanced options for Subitems include settings for • • • • • • height (height of the submenu. from 0 . artisteer. top offset (distance of the subitems and the rest of the menu. from 0 – 50 px). from 16 .com | page 195 .50 px).50 px). contrast (available only if you have selected a gradient). You can access the advanced options by clicking on the Custom Values icon. border width (around selected subitem. 0 – 5 px). and icon offset (distance between the image and the subitem text).

You can choose buttons with more rounded corners. The Button section allows you to change the following options: • • • • • • • • Shape Texture Gradient Shadow Border Fill Color Border Color Text artisteer. or completely rectangular in shape.196 page Buttons Tab Ribbon Options Use the Buttons tab to change the shape and style of Buttons on your page. Select from a wide variety of button styles. something in between.com | page 196 .

Supported values: 0 – 50 pixels. Specify the Width Type (auto or fixed) and/or Width Size (when fixed width Width type). Radius Specify the Button Corners. Also. Artisteer has a number of advanced options you can use to customize your buttons. (You can also open this dialog by selecting the Custom Values icon). if you click on Shape“Shape Options…”. Vertical padding Supported values: 0 – 50 pixels. Width Size values range from 0 to 200 px. Button Specify the horizontal distance between the Button Caption and Button Horizontal padding Borders.com | page 197 . Supported values: 0 – 100%.197 page Advanced Options Artisteer provides a wide variety of Button shape templates. artisteer. Specify the vertical distance between the Button Caption and Button Borders. Specify the Width of the Button Borders. Supported values: 0 – 10 pixels.

This option is not available unless you have selected a button Gradient contrast gradient. If you add a Shadow Effect to your Buttons. Supported values: 0 (fully transparent) to 100% Opacity (fully opaque). Distance Specify the Angle at which the shadow is cast from the button. Supported values: 0 – 20 pixels. you have the possibility to make custom changes to the shadow effect in the Button Options dialog. Supported values: 0 – 20 pixels.198 page Border width Specify the Contrast between the starting and ending colors in the button gradient. Shadow Specify the Blur Size of the shadow. Supported values: -100 (solid color) to 100% (the most contrast gradient). Supported Angle values: -180° to 180°. Size Specify the Shadow Opacity. Specify the Shadow Offset in pixels. passive and hovered buttons separately. You can adjust the transparency of active. The advanced texture options are very similar to the same settings artisteer.com | page 198 . There are also Transparency and Texture settings.

adjust Font settings. The Text option allows you to change the color of Buttons and Hovered Buttons.199 page you can select for the page Background. as well as. artisteer.com | page 199 . or change the Text settings. see the description in the Background section described above. To finish the Button design you can change the overall Fill of the Buttons. For more information about these options.

Layout Layout Length and Position Select on of the suggested footer layouts: Inside Sheet. and manage the texture options (see Footer > Advanced Options) Gradient Align Text Padding Text font Hyperlink Apply a gradient for a web 2.com | page 200 . insert it from file. Margin Select No Outline.centered.visited links and hovered links artisteer. Sheet Width.0 footer style Align the footer text (right side. or assign a positive/negative margin value. The options are arranged in two groups: Layout and Footer Styles. left side) Select a value that reflects the space around the footer text Adjust the text font style Define the font style for the active/passive links. Let us look at each group in more detail. Footer Styles Ribbon Options: Shadow Fill Texture Fill the footer with color and specify the transparency rate (if needed) Select a texture from the list. and Page Width.200 page Footer Tab The Footer tab is used to specify the style of the footer at the bottom of the page.

Choose More options to adjust the offset and alignment of the icon. The Footer Options Footer The Footer options have the following settings: Top margin (.50 px). and RSS Offset (0 – 100 px). Texture. line spacing and character spacing. such as right margin. artisteer.200 – 200 px). icon. Text (HTML editor) Change the footer text in the opened HTML Editor dialog Footnote Image Text Select a color for the footer text and footer link Adjust the image border and margin Specify the text and paragraph style settings. Transparency (0 – 100%). RSS and Image options. Adjust the bullets icon and style. Gradient Contrast.201 page RSS Select an RSS icon or insert it from file. Advanced Options You can access the advanced options for the footer by clicking on the Custom Values advanced options include Footer. Bullets. Padding (0 . Top Outline.com | page 201 . RSS Align (left/right). left margin.

For detailed information on Texture settings see the subsections for Texture Options and Texture Position under the Background section described above. artisteer.com | page 202 . With enabled recolor option the grayscale bullets gain color that fits the footer style.options (see Footer > Advanced Options) Bullets If your footer text contains bulleted list.202 page Texture The Texture settings are very similar to the same options you can set for the page background. you can assign an offset to bullets as well as enable/disable the recolor option. RSS Image Align the rss icon left or right and/or assign an offset (0 – 100 px) Set border width (0-10 px) and margin (0-40 px) values.

203
page

CMS-Specific Features
Theme options for WordPress themes
Theme options are the extra settings designed for additional customization of the the installed Artisteer 3.0+ WordPress themes.The options are embedded in the Appearance bar and help to adjust the header, navigation menu, posts, featured image, excerpt, pages, comments, sidebars, footer, advertisement and headings(SEO). These options override any similar Export options (e.g. Show Home Item) you set on the desktop before you exported your theme. These options are also shared among all the Artisteer themes you install so even if you delete the theme in Wordpress, when you reinstall the theme, these options still override any Export options in your theme. See ‘Wordpress Export Options’ above for more details.

artisteer.com | page 203

204
page

Theme Options
Header Enable or disable the display of Headline and/or Slogan by ticking the checkbox. Home menu item: Enable or disable the display of the Home menu item and/or edit the caption of the Home menu item. Categories: enable or disable the highlight of active categories. Long menu items: trim the long menu items and subitems by specifying the Navigation Menu maximum number of characters that can be displayed. If the whole word cannot be displayed, it will be automatically replaced with dots.The default character limit of menu items is 45, and for subitems this value is 40 characters. You can edit the character limit by typing custom values.If the saved options appeared to be inappropriate, you can always return to the deault settings by clicking the Reset to Default button. Default menu source: select either pages or categories as a menu source. The Post options allow you to display the navigation links at the top or at the bottom Posts of the post pages and single posts. You can also trim the long navigation links by specifying the limit of characters. You can use a featured image as thumbnail and specify its appropriate width and Featured Image height parameters. The auto thumbnail option is also available (thumbnails are generated by using the first image from the post gallery). You can choose auto post excerpts (when neither more-tag nor post excerpt is used) or manually specify the excerpt length (number of words) and the Excerpt balance. The default number of words, which make up auto excepts, is 40. Excerpt The Except Balance helps to avoid the undesired split of short posts that are slightly beyond the Except size. The default except balance value is 5 words, and you can change it to a custom value. The Except Tag Filter blocks the display of certain tags that you don’t want to see artisteer.com | page 204

205
page on your posts pages. The default list of allowed tags does not include the <img> tag, so the images are not displayed in posts on the posts pages. Edit the list of allowed tags to expand or reduce the tag filter. The Pages options help to configure the 404 page (Page is not found). If a visitor Pages tried to open a link, and the post was deleted, you can enable the “Show random posts on 404 page” or “Show tags on 404 page” option, type the title of posts/tags and suggest the visitors other ways to view the blog. Comments You can enable or disable the display of the “Leave a comment” link and you can also block the use of smilies in comments. You can apply a block style, a post style or a simple text style to sidebars. Separate Sidebars styles can be assigned to primary sidebar, secondary sidebar, top sidebars, bottom sidebars and footer sidebars. You can edit the Footer HTML content. The following ShortTags are available: Footer [year], [top], [rss], [login-link], [blog-title], [xhtml], [css]. Advertisement Use the [ad] short code to insert 1- 5 ads into posts, text widgets or footer. Example:[ad code=4 align=center] The heading types of the headline, slogan, article and widgets on the posts page Headings for the posts page are arranged by default as <H1>, <H2>, <H2>, and <H3> tags. You can customize each heading by assigning <H1-H6> tags or a <div> tag. <H1 – H6> tags are generally used for high rank headings and the <div> tag will be analyzed by SEO agents as plain content. Headings for the single post or page You can customize each heading (headline, slogan, article and widgets tags) by assigning <H1-H6> tags or a <div> tag.

artisteer.com | page 205

206
page

Glossary
CMS
A Content Management System (CMS) is a software application designed to create, edit, publish and manage Website content using a simple browser-based interface. The content may include text, photos, electronic documents, music, video and other type of computer files. CMSs usually provide a number of ready-made solutions and standard templates for most common applications. The main advantage of a CMS is that it requires almost no technical skills or knowledge to create the website and manage its content.

Blog
A blog (short for "Web log") is a special type of Web site with a series of entries usually posted to a single page in reverse-chronological order. Blogs are often maintained by an individual and represent the personality of the author, provide diarytype commentary, links to articles on other Web sites, descriptions of different events and social issues, or include other material such as graphics or video.

WordPress
WordPress is an open source blog publishing application, an advanced blogging tool with a focus on aesthetics, web standards, and usability. The official WordPress website is http://wordpress.org.

Joomla
Joomla is a free open source content management system written in PHP. It is used for publishing and managing content on the web and intranets and allows you to build powerful online applications. The official Joomla website is http://www.joomla.org. artisteer.com | page 206

and text supplemented with interactive forms. style. artisteer. headings. which provides a set of markup symbols or codes to specify the structure of documents for retrieval across the Internet using Web browser programs.mspx. HTML HyperText Markup Language (HTML) is the predominant markup language for Web pages. The official website is http://www. and other objects. CSS controls the overall layout. text size. The official Drupal website is http://drupal. surrounded by angle brackets. embedded images. CodeCharge Studio CodeCharge Studio (CCS) is a Rapid Web Application Development Tool from YesSoftware. The official company website is http://www. CCS can be used to visually create dynamic database-driven Web applications.com.microsoft.207 page Drupal Drupal is a free software package that allows an individual or a community of users to easily publish. The document can contain links.yessoftware. paragraphs.org. formatting and other design properties to let developers separate content from design. It is an open-source project written in PHP and distributed under the GPL. HTML is written in the form of tags. lists. CSS Cascading Style Sheets (CSS) is a style language that defines the presentation of a document written in a markup language. manage and organize a wide variety of content on a website.com | page 207 .com/visualstudio/en-us/default. Visual Studio Visual Studio is an integrated development environment (IDE) from Microsoft.

HSL is considered a more intuitive way of dealing with color than RGB. The combination of these colors in different proportions produces any color in the visible spectrum. artisteer. and Lightness. Hue corresponds to the actual color. RGB system is used for representing colors on computer display. HSL HSL stands for Hue. Green. Saturation.Red. It is a method for describing colors as they are perceived by a human eye. saturation corresponds to the intensity. and luminosity corresponds to lightness of the color. Silent Installation Silent (or quiet) installation is one which does not display any indication of its progress and does not require user interaction.com | page 208 .208 page RGB RGB stands for the three primary colors of light . and Blue.

Sign up to vote on this title
UsefulNot useful