File Name: TabbedBrochureTemplate40Documentation.pdf
File Size: 240.39 KB
File Type: Application/pdf
Last Modified: 6 years
Status: Available
Last checked: 2 days ago!
This Document Has Been Certified by a Professional
100% customizable
Language: English
We recommend downloading this file onto your computer
Tabbed Brochure Template Version4.0 DocumentationPLEASE NOTE: This solution requires the use of javascript in the text interface. The use of scriptsin the text interface is neither tested nor supported functionality in the so ware. This meansthat the Terra Dotta support team will not be able to provide assistance in the implementationor troubleshooting of this script, and although this functions in the current version of theso ware, there is no guarantee that a script will continue to function as expected in futureversions. Additional support could result in professional service fees
For complete information regarding the use of javascript to make adjustments to the interface,the following webinar will provide details about the security, implementation, and maintenanceof scripts in the text interface:https://tdsupport.force.com/support/articles/General/WEBINAR-A-Fistful-of-JavascriptOverviewThis documentation shows how to implement a tabbed interface on the program brochure pageusing javascript and CSS to manipulate the content of the brochure. This is done by having oneor more pre-built templates in the site’s document center that can be fetched through theprogram builder by selecting it from a drop-down menu. This template has the proper markupand attributes that a script on the public brochure page will transform into tabbed sections. Thepublic brochure page also will have an embedded style tag that determines the appearance ofthe tabs
In the WYSIWYG Editor on the ‘Brochure’ tab of the program builder, the content is displayed insections based on a template deployed to the WYSIWYG Editor by a button. When this content isviewed on the public website, the contents of each of the sections are turned into tabs that canbe clicked on by the user to switch between them
Implementation of this involves the following steps: Adding the script/CSS tags to the public brochure page interfaceCreating the template with the desired tab names and placeholder contentUploading that template to the document centerUploading the template importing script to the document centerAdding the script for importing the template into the program builder’s text interfaceOnce this has been done, the new options will be available in the program builder and can beused to import the template. When importing a template, existing brochure content that is notin the ‘tabbed’ format will be put into the first tab of the template
What’s new in version 4.0 Brochure content conversion from 3.0 > 4.0 button Responsive design drop-down menu for smaller screens Change from div to section tags for content areas to address issues with listsCode filesThere are five code files that are used to implement this tabbed brochure template. These filesare zipped together and are stored alongside these instructions in the “Knowledge” area of theTerra Dotta support portal. The files are:TabbedBrochureScriptCSS.html - The style and script embedded on the public brochure pageTabbedBrochureTemplate.html - The html that is put into the document center as the templateTabbedBrochureTemplateBuilder.html - A standalone html page that can be used to generatethe html of a brochure templateTabbedBrochureTemplateImport.html - The sc ript that loads the template func tions and buildsthe interface in the program builderTabbedBrochureTemplateImportScript.js - The javasc ript with all the func tions that theinterfaces use to manage the templatesTab styles Tab stylesBefore implementing the script, you may edit the style of the tabs that will be displayed
The appearance of the tabs on the public brochure pages can be adjusted by manipulating the‘style’ tag of the code file ‘TabbedBrochureScriptCSS.html’. To edit the style, open the file‘TabbedBrochureScriptCSS.html’ in a plain text editor and use the information below to makechanges as you see fit
You can also use the ‘TabbedBrochureTemplateBuilder.html’ to manipulate the CSS and see thechanges in real time. It is a standalone web page that has an editable style block that is used todisplay the template tabs being created
This directive affects the margin and padding around the tabs: #brochure-tabs-navigation ul { list-style: none; padding: 0px; margin: 1px 0px 15px 0px; }This directive affects all the tabs and sets the base style of them: .section-tab { border-style: solid; border-width: 0px 2px 2px 2px; display: inline; padding: 3px 10px; margin: 5px; border-radius: 0px 0px 10px 10px; font-family: Arial; font-weight: bold; background-color: #FFFFFF; color: black; border-color: black; cursor: pointer; }This directive affects the style of a tab when the user is hovering the mouse cursor over it: .section-tab:hover { box-shadow: 0px 1px 10px -1px #000000; background-color: orangered; } This directive affects the tab which is the currently displayed tab: .selected-section-tab { box-shadow: 0px 1px 10px -1px #000000; background-color: powderblue; }Implementing the script/CSSOnce the desired changes have been made to the style directives in‘TabbedBrochureScriptCSS.html’, it is ready to be appended to text interface field# 3 (programbrochure page tips text)
This can be done before the template is built and implemented. The script and style tags willonly impact the page if there is a valid template in the contents of brochure so putting it in placeas soon as the tab styles are done is fine. It will not adjust pre-existing brochure page content
Creating the templatesThe templates are HTML that will be put into document center WYSIWYG objects. This HTMLmarkup will be fetched and inserted into the WYSIWYG Editor of the program builder’s brochureeditor so that a valid template with the necessary markup and attributes can be easily deployed
Before creating templates, the following will need to be decided: 1. How many templates will you have and what will you call them 2. What will the tabbed sections be called in each template 3. What order should the tabs appear in 4. What placeholder text should be in each section in the templateThere are two ways to create the template. The easier way is to open the file‘TabbedBrochureTemplateBuilder.html’ in your browser. This is a standalone webpage that canbe used to build a template that will auto-generate the html you can use as a template
Alternatively, you can manually build templates yourself. The file‘TabbedBrochureTemplate.html’ has a valid template with three tabs called ‘Tab1’, ‘Tab2’, and ‘Tab3’. To make changes to this template before you implement it, open the file‘TabbedBrochureTemplate.html’ in a plain text editor. You will see the same code that you seehere. You can edit the template based on the information below, as you see fit
To change one of the tabs, the content wrapped in ‘h1’ tags of the first ‘div’ and the ‘id’ of thenext ‘section’ should be edited as you see fit. The text between the ‘h1’ tags is the Header thatwill appear in the WYSIWYG Editor of the program builder when that brochure is being edited sothat the admin will know which tab’s content they are editing. The ‘id’ is the name of the tab. Inother words the ‘id’ is the word that will appear on the tab itself
NOTE: The name of the tab (‘id’ in the section) cannot contain spaces
The ‘Lorem ipsum’ in the second div can be adjusted to whatever is desired as placeholdercontent
Example - to change the first tab in the template to ‘General’, you would change:
If a tab doesn’t need to be used for a program, the template can be imported into the WYSIWYGEditor and then the placeholder text and header deleted from it. Then, that tab won’t appear onthe public brochure page
If a tab needs to be renamed/added for a specific program, there are buttons that can be used todo that in the program builder
Once the template’s tabs have been configured, the HTML file should be saved, and it is ready forimplementation
Implementing the templates To implement templates on a site, you first need to upload the file‘TabbedBrochureTemplateImportScript.js’ to your document center as a script. This script hasthe functions needed by the program builder’s interfaces to implement the templates
To do this, following these steps: Go to Website Admin -> Document Center Click on ‘New Document’ Under ‘Option 2’ click the browse button and select ‘TabbedBrochureTemplateImportScript.js’ off your local drive Give the document a name (the title doesn’t matter) Click the ‘Save’ buttonNOTE: It is possible that your site is not configured to allow .js files to be uploaded to thedocument center. If you have access to Maintenance > Environment Settings, you cantemporarily allow that file extension to be uploaded. Alternatively, you can rename the file sothat it has a .txt file extension rather than .js. This will still work in the program builder
Next, the templates need to be uploaded to the document center as a WYSIWYG Objects. To dothis: Go to Website Admin -> Document Center Click on ‘New Document’ Enter a title for the template for ‘Document Title’ (the title doesn’t matter) Click on the ‘Source’ button in the WYSIWYG Editor Copy/Paste the HTML of the template into the WYSIWYG Editor Click ‘Save’ buttonA er saving the templates to the document center, it is necessary to get the ‘File_ID’ of eachtemplate. You can find these number by clicking on the ‘view’ link of the templates and lookingin the URL of the resulting page
These numbers will be used to create hidden input tags in the script in the file‘TabbedBrochureTemplateImport.html’ that identifies what the template should be called in thedrop-down menu around line 24: /> For each template, there will need to be an input tag using that format to identify what to call
So, for example, if I had two templates to implement; one that was the standard and another forprovider programs, the resulting block of html might look like this: In addition to the input tags, it is necessary to put in the document center URL to the importinterface’s script into the {URL OF TEMPLATE SCRIPT IN DOCUMENT CENTER} placeholder. The‘http:’ or ‘https:’ of the URL should be removed to avoid cross-protocol issues. So, for example, ifmy site’s domain were http://studyabroad.terradotta.com and the file ID# of the script was 33,the resulting code would look like this: This script should be appended to the text interface field #4400. This will create the button in theprogram builder that fetches the brochure template from the document center. It will also addbuttons for adding new tabs in the brochure and deleting existing tabs in the brochure
Once this has been done (and the file ‘TabbedBrochureScriptCSS.html’ has been implemented) ,the template can be used by anyone by selecting the desired template in the drop-down menu and then modifying the placeholder text in the WYSIWYG Editor. Each section will be turned intoa separate tab when viewed on the public website
Adding tabs to a brochureNOTE: While the import of a template will take the current content of the brochure and put itinto the first tab of the template. It is recommended to make a backup of brochure content youare converting over to the tabbed-brochure content. Create a copy of your original brochuresource in a plain text file. By following these steps
1. Navigate to the brochure tab of the program builder for the program you wish to edit
2. Enter ‘source’ mode in the WYSIWYG editor
3. Select all of the code in the WYSIWYG editor and copy it
4. Paste the code into a plain text editor document. Save the document with a name that indicated the program from which it came
You may also want to take a screen capture or print a copy of the brochure you are about to edit
Now you are ready to create a brochure page with tabs. On the brochure tab of the program youwish to edit, select the brochure template from the drop-down menu and confirm you want toimport the template. If the current content of the WYSIWYG Editor is ‘non-tabbed brochure’content, it will put that content in the first tab of your template. You can now edit the brochurewithin the WYSIWYG editor in WYSIWYG mode. Edit each section. You can edit the header of eachsection as well as the body text. You can also insert images, and you should be able to use all ofthe functions available in the WYSIWYG. When you update the brochure, your changes will besaved immediately and you can preview your page by navigating to the public interface
There are also additional buttons that can be used to add and remove tabs from the brochureyou are currently editing
Finally, if you used a Version 3.0 tabbed brochure template previously for tabbed brochurecontent, the structure of the templates changed a little bit in this version to address issues withlists breaking the tab markup. There is a convert button that can be used to update the currentcontents of the WYSIWYG Editor from the 3.0 template markup to the 4.0 template markup
Upgrading from Version 3.0 to 4.0 To update the Version 3.0 implementation of the tabbed brochure to Version 4.0, the followingmust be done
1. Update the existing brochure templates in the document center 2. Update the TabbedBrochureTemplateImport.html content in the program builder 3. Update the TabbedBrochureTemplateImportScript.js script in the document center 4. Update the TabbedBrochureScriptCSS.html content on the program brochure page 5. Update program brochure content using the conversion buttonUpdate the existing brochure templates in the documentcenterThe markup of the brochure templates has a minor change between 3.0 and 4.0. Instead of usinga ‘div’ tag for each of the content sections, a ‘section’ tag is used. This improves the semanticnature of the template, but more importantly, it solves a few issues that had been reported withthe WYSIWYG Editor when trying to include ordered and unordered lists within the brochurepages
To update your templates, you just need to change the content sections of your template thatlook like this …
Update the TabbedBrochureTemplateImport.html contentin the program builder The markup that has been embedded into the program builder’s text interface to allowimporting the templates (TabbedBrochureTemplateImport.html) has been updated and willrequire you to update the code
First, go to Maintenance > Text interface and make a copy of the contents of text interface field#4400 - save this content locally in a text file
Next, open the new 4.0 version of the file TabbedBrochureTemplateImport.html in a text editor
Replace this line of the new version with the input tags that you used in the 3.0 version … />Then, replace this line of the new version with the URL that you used in the 3.0 version … $.getScript('{URL OF TEMPLATE SCRIPT IN DOCUMENT CENTER}', function () {This updated version of the file should replace the old version of the markup in text interfacefield #4400
Update the TabbedBrochureTemplateImportScript.jsscript in the document centerThere is no need to make any updates to the new version of the file. It should just replace theexisting TabbedBrochureTemplateImportScript.js script you have in your document center. Youshould be able to just go to Site > Document Center and click the edit pencil for the script. Thenew version can be uploaded in its place
Update the TabbedBrochureScriptCSS.html content onthe program brochure pageWhile your current brochure tabs will work with the Version 3.0 script and style block that is intext interface field #3, if you want to implement the responsive version of the tabs, you will needto update the content
First, go to Maintenance > Text interface and make a copy of the contents of text interface field#3 - save this content locally in a text file. Add the following directive to the contents of the styleblock … .tab-float-clear { display: none !important; }Next, open the new 4.0 version of the file TabbedBrochureScriptCSS.html in a text editor. Copythe contents of the style block from your old version of the file into the style block of the 4.0version of the file
This updated version of the markup should replace the old version of the markup in textinterface field #3
Update program brochure content using the conversionbuttonFinally, the last step is to go to the ‘brochure’ tab in the program builder for all your programsthat were using the Version 3.0 template and click on the ‘Convert template’ button. This willupdate the content of the brochure to make it work with the Version 4.0 scripts on the brochurepage (changing the ‘div’ tags of your content sections to ‘section’ tags)
Technical detailsThe tabbed brochure template uses the ability to embed scripts and styles in the text interfaceto manipulate the contents of the public program brochures
There are five files involved to implement this system on a site:TabbedBrochureTemplate.htmlThis is an example template that can be turned into a site’s template. It is where the names ofthe tabs are determined and the order in which they are going to be displayed
It makes the brochures more easily edited in the program builder and display in printed versions more cleanly. That div should not be changed. For each template, there will need to be an input tag using that format to identify what to call. So, for example, if I had two templates to implement; one that was the standard and another for
Simply pick the style you like and start customizing. Trifold and bi fold pamphlets are both easy to make. Canva’s trifold brochure templates will perfectly arrange your content so that everything is in the right place. Simply drop in your text and images and you’re good to go. Other styles include the accordion fold brochure template.
Canva’s trifold brochure templates will perfectly arrange your content so that everything is in the right place. Simply drop in your text and images and you’re good to go. Other styles include the accordion fold brochure template. This type of brochure is made by folding a sheet of paper printed on both sides three times in a zig-zag pattern.
There’s also plenty of brochure templates for food and catering services. Just take a look through the designs and pick one that’s right for you. Once you're done designing, printing your brochures is just as easy. Simply click on the print button to send your design to Canva Print. We'll deliver them right to your doorsteps in just a few days!
This type of brochure is made by folding a sheet of paper printed on both sides three times in a zig-zag pattern. Brochures are suited for many different uses.