Skip to main content

The Knowledgebase

Study Abroad: Advanced Layout Editor

Important Note: This classic feature only appears on sandbox sites and is not available in production. For the most current functionality available, see the Site Builder for Terra Dotta Study Abroad article. 

 

The Advanced Layout Editor, which appears only on sandbox sites as "Edit Stock Layout (Advanced)", offers sophisticated customization options for your Terra Dotta site. With this feature, an admin can upload files, such as custom stylesheets (CSS), and view how such files will impact a site in a test environment. After uploading files to your sandbox site, it is possible to request that these be transferred to your production site by opening a Support request. 

This article covers the following topics:

 

Advanced Layout Editor Functionality

The Advanced Layout Editor is the go-to tool for clients desiring more customization than can be accomplished through the Site Builder and standard Layout Editor. It is best used by someone with at least a basic HTML/web design knowledge.

Important Note: It is not recommended to link to external images located on HTTP (instead of HTTPS) servers in your custom headers/footers/CSS.

The Advanced Layout Editor tool allows the following file types to be uploaded:

  • Custom HTML files for the header and footer areas.
  • Javascript file.
  • Custom CSS file.
  • Image assets to be used in the header and footer.
  • Font assets to be referenced in the custom CSS file.

The Advanced Layout Editor is enabled on your sandbox site only where an admin can test and approve configurations before requesting that the layout be transferred to a production site. 

After a final layout design is reached on your test site, you can proceed with the layout transfer process.

 

Layout Transfer: From Sandbox to Production

Terra Dotta clients approach the use of the Advanced Site Layout Editor and layout transfer process in the following ways:

1) During the Implementation Period. It is common for clients to have a design-savvy member of their functional office configure their Advanced Site Layout in their sandbox site during the implementation period. After the work has been completed, the Implementation Specialist can facilitate the transfer of the layout to your production site.

2) After the Implementation Period. If you decide to create or edit an advanced layout as a live client after your implementation period, then you must submit a Support request for the layout be transferred from your sandbox site to production. See the How to Open a Support Case Knowledgebase (KB) article for steps on how to open a case.

Important Note: Terra Dotta will put your files through our code review process and then transfer them to your production site  When the code is reviewed before the layout transfer, the focus is solely to ensure that the code meets our security standards. Terra Dotta will not review the layout design for any visual attributes of the changes made. Each client who uses the Advanced Layout Editor is responsible for the design features included in the transferred files.

3) Layout Assistance with Professional Services. Looking for other options? Terra Dotta's team of experienced designers offer Layout Assistance using the Advanced Layout Editor as a professional service. Get started by writing to services@terradotta.com to request a cost estimate for a Layout Assistance custom project.

 

Using the Advanced Layout Editor

As noted above, the Advanced Layout Editor is enabled on your sandbox site and can be accessed by navigating to Site > Site Builder > Edit Stock Layout (Advanced). Here you'll see more options for uploading files than offered in the standard layout editor:

 

site_builder_15.JPG

site_builder_16.JPG

 

Responsive Public Pages
This feature functions in the same way as it does in the standard layout editor. To enable responsive design on your public website, change this setting to "Yes" and then click "Update". If you have a custom layout, changing this setting will replace your custom look on the public pages with the new responsive interface look and feel. You can switch back and forth between your site's legacy public page style and the new responsive style as often as necessary using this setting. 

Header HTML
The Advanced Layout Editor allows you to upload an HTML or txt file that will be included in all responsive pages at the top of the page's markup. The file will be used to format the header on all logged in pages, and, if the responsive layout setting is set to "Yes", it will also be used for public site pages. The uploaded file should NOT be a full HTML document with HTML, head, and body tags - it should include only standard HTML tags. The file's contents will be inserted into the header tag of the page. Any custom CSS can target this header by the ID, "pageheader" in their selectors. The maximum file size permitted for this file is 1 MB.

Footer HTML
The Advanced Layout Editor allows you to upload an HTML or txt file that will be included in all responsive pages at the bottom of the page's markup. The file uploaded should not be a full HTML document with HTML, head, and body tags. The file's contents will be inserted into the footer tag of the page. Any custom CSS can target the footer by the ID, "pagefooter" in their selectors. The maximum file size permitted for this file is 1 MB.

JavaScript
If your header or footer (or other site content) requires the use of JavaScript to function, you can upload a single JavaScript file that will be included in the head tag of the page. Please note, Terra Dotta already loads a number of public JavaScript libraries (like jQuery). Loading duplicate libraries (especially different versions) could result in issue in your site's functionality. The maximum file size permitted for this file is 1 MB.

Custom Stylesheet
If you wish to customize and alter the styles of your header and footer, you can upload a CSS file that will be included in the head tag of the page. This custom stylesheet can also be used to customize the styling of the entire user interface of your site. Clicking on the "Download template" button will provide a starting point that you can use to override the responsive user interface elements, such as font size, width constraints/breakpoints, and form element colors. The maximum file size permitted for this file is 1 MB.

Image Assets
If you will be using custom images in your header or footer's markup, it is recommended to upload those assets through this editor rather than using links to the Terra Dotta image library. Once uploaded, the thumbnail displayed in the editor will provide you with the URL that you can use in your custom HTML's img tags. The maximum file size permitted for this file is 1 MB.

Font Assets
If you wish for your site to use a non-standard font or would like to have one available, you can upload the font file to this editor and then use a custom stylesheet to declare the font-face for your site's pages. The maximum file size permitted for this file is 1 MB.

Functional Site Links
This functions identically to the way the setting functions in the standard layout editor. Select which functional site links you'd like to have appear on your public site and in the "home icon" sub menu.

 

Instructions for Installed Clients

Installed clients on Terra Dotta 16 or a later version can access the Advanced Layout Editor code on the "Code Distribution" by submitting a Support request. We highly recommend that you install the Advanced Layout Editor on a sandbox site first rather than in a live production environment. This will allow you to work on your custom layout while preventing issues in your production environment should an incompatible file be uploaded via the editor.

After work is complete in your sandbox site and you've confirmed that the files are compatible, transfer the files to your production site. Uploading an incompatible file to the production environment can cause site accessibility issues requiring the intervention of your database administrator.

 

Google Analytics

If you have a custom layout that includes Google Analytics, switching your public pages to the responsive layout will remove the Google Analytics code from your site.

If you wish to add Google Analytics to your Terra Dotta production site, you have two options:

1) Submit a Support request. You will need to provide us with the Google Analytics code in your case.
2) Add the Google Analytics code to the layout files in your sandbox site and then open a Support case. For example, add the code to your sandbox site's header HTML file, via the Advanced Layout Editor. Once the header file is ready, along with any other updated files, submit a Support request to have the updated file(s) transferred to your production site.

 

This also applies with Google Tag Manager as well.