When you look at a page on your website all you see is, well... one page, however, Actinic uses a number of different 'layouts' to create that page. For example, there will be an 'outer layout', an 'inner layout', a layout for your product image etc etc. A layout is just a page of HTML code and Actinic variables. When Actinic generates the web pages of your store, it pulls all the layouts it needs together, and creates a page design.
What does it all mean?
Basically, it means that if you want to make a change that would affect all pages on your website, you only need to make the change to one layout (as long as your site uses the same layout throughout) rather than to every page on the site.
All Actinic pages are made up of two main layouts - the 'outer' layout (also known as the 'Overall' layout) and the 'inner' layout.
The Outer Layout
The 'outer' part of the page controls the branding and navigation elements that largely stay the same as you go from page to page. They are the elements that usually go across the top and down the side(s) of each page. It also contains the opening and closing <html> tags, <body> tags and the <head> section. This is the 'top' layout of each page - which every other layout is inserted within, including the inner part. It will always contain a layout placeholder called INNERLAYOUT.
When it comes to editing the 'outer' layout, there are certain elements on the page that you should not remove or you may find that you have problems online:
Note that sites that have been upgraded from older versions may have the code from this layout actually in the outer layout itself.
What Do Actinic Layouts Contain?
As well as HTML code, you'll also see some tags that are specific to Actinic layouts.
The blue text are variables. When you preview or publish the site, these get replaced by text from the Actinic database. It is possible to create your own variables.
The pink text are 'layout placeholders'. These show you where another layout is going to be inserted into the design.
The green block tags are 'conditions'. They show and hide bits of HTML code based on settings in Actinic. For example, when a product is out of stock, an 'Out of Stock' message appears automatically. It is conditions that control when this code appears. Note that conditions can not be used for creating dynamic content online. They are used when the site is generated before the upload occurs.
Take a look a the 'Block' tutorials on how to use conditions effectively.
What does it all mean?
Basically, it means that if you want to make a change that would affect all pages on your website, you only need to make the change to one layout (as long as your site uses the same layout throughout) rather than to every page on the site.
All Actinic pages are made up of two main layouts - the 'outer' layout (also known as the 'Overall' layout) and the 'inner' layout.
The Outer Layout
The 'outer' part of the page controls the branding and navigation elements that largely stay the same as you go from page to page. They are the elements that usually go across the top and down the side(s) of each page. It also contains the opening and closing <html> tags, <body> tags and the <head> section. This is the 'top' layout of each page - which every other layout is inserted within, including the inner part. It will always contain a layout placeholder called INNERLAYOUT.
When it comes to editing the 'outer' layout, there are certain elements on the page that you should not remove or you may find that you have problems online:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
First line on the page and is used to declare the DOCTYPE which is essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla and Internet Explorer. Removing this line may stop your design from looking right in the browsers.
This variable opens a layout that contains the 'Base HREF', which is the URL containing the online store pages. If this is removed then images and stylesheets will not be found on pages that are run via the perl scripts, e.g. view basket, checkout, search results etc. Note that sites that have been upgraded from older versions may have the code from this layout actually in the outer layout itself.
This layout contains references to javascript files (actiniccore.js and actinicextras.js) that contain certain functions that your store requires to work, for example, the cart summary function, pop up window function etc.
Another javascript function in this layout ensures that the customer is automatically bounced over to to a Payment Service Provider and should not be removed is:
Note that sites that have been upgraded from older versions may have the code from this layout actually in the outer layout itself.
The 'onload' function here is also used for the automatic bounce over to payment service providers so should be left in the layout too.
This layout variable is required to display the main content of each page on the site - so if it's a section page it will be the section links and products, and if it's a checkout page it will be the checkout fields etc.
What Do Actinic Layouts Contain?
As well as HTML code, you'll also see some tags that are specific to Actinic layouts.
The blue text are variables. When you preview or publish the site, these get replaced by text from the Actinic database. It is possible to create your own variables.
The pink text are 'layout placeholders'. These show you where another layout is going to be inserted into the design.
The green block tags are 'conditions'. They show and hide bits of HTML code based on settings in Actinic. For example, when a product is out of stock, an 'Out of Stock' message appears automatically. It is conditions that control when this code appears. Note that conditions can not be used for creating dynamic content online. They are used when the site is generated before the upload occurs.
Take a look a the 'Block' tutorials on how to use conditions effectively.