# View Source

For Designers that want to look under the hood, this screen is helpful by displaying the underlying HTML page* that is created by the Style Designer*, and optionally append HTML code to the <head></head> tag.

## Additional Head Content

Although the Source needs to remain unaltered for the system to work well, System Page Styles can be expanded with additional functionality by placing code in the <head></head> tag of the Page Style. This is ideal if you need to add third-party widgets, javascript functions and libraries, or including CSS files to override all or part of the active System Theme's CSS.

You can enter any valid HTML into the Additional Head Content area. Click 'Save & Preview' to update the Source and view your changes in the Sourve window. Click 'Save & Return' to add your head content and return to the System Page Style. Click 'Cancel' to abort you most recent 'Save' operation.

The {path} tag can be inserted anywhere in your HTML and is replaced automatically with the absolute URL to the location where your system software was installed. You should always use the {path} tag if you need to reference any uploaded files within your HTML. This makes your links portable, so if you ever need to move the software system to another directory within your web server, your hand-coded links will still work.
Let's look at a typical example.

Say you want to link to a CSS file (example.css) that you uploaded through the Design Files within the Control Panel. However, you want to be sure that the link is portable because your web server administrator originally installed the system software into a temporary directory that looked something like this: http://192.168.0.1/~example/software and will need to move the system software to http://www.example.com/software once you have setup your domain and are ready to launch the site.

So if you hard-code your link to example.png file like this:
http://192.168.0.1/~example/software/files/example.css or
/files/example.css
Then when the system software is moved later to another directory, this link would no longer work. So instead, be sure to link to the file using the {path} tag:
{path}files/example.css

The {path} tag is only necessary within your custom HTML such as Custom Page Styles, Editable Head Content in System Page Styles, Designer Regions, and within custom CSS files. The {path} tag is not necessary when adding links through the Rich-text Editor. These links will be converted automatically for you when the content region is saved.

NOTE: If you are the web server administrator and move the system to another directory off of your webroot after installation, be sure to update your .htaccess file per the system's installation / update instructions.

## Source (read-only)

The Source is a read-only copy the currently saved System Page Style. This HTML code has been designed to work specifically with the active Theme (CSS file generated by the Theme Designer) and to be as compact as possible, and render well on all popular browsers and web devices.

TIP: View Source makes it even easier to create special function Custom Page Styles within your website, even if the rest of your site is using System Page Styles and the active Theme. Paste the entire Source into a new Custom Page Style, add your own additional HTML code to it, and create specialized pages within your site that still inherit their design from your active Theme!

TIP: The System Page Style Name and Page Style Layout is added to the <body></body> tag of all System Page Styles to provide more flexibility and control over styling. Couple this with the ability to add your own CSS advanced styling within the Theme Designer and you can code some highly custom designs using only System Page Styles and System Themes!

* It may be important to know that not all HTML code is displayed within View Source. Additional javascript snippets are included when a Page is rendered if any of the built-in features including Who's Online, Chat, Social Networking, or Google Analytics are enabled. These code snippets are completely invisible and will not alter content or design in any way. These code snippets are NOT included when Pages are e-mailed through the E-mail Campaign feature. See Site Settings for more information. In addition, the JQuery javascript library is also included if any animated Menu Regions or Ad Regions are found in the Page Style.