Proposals in PitchPerfect are simply a collection of html files, CSS and images. Once uploaded, a theme can be used in proposals, and authors are able to change the content, add pages and so on.
Getting Started
When coding your first theme, the best thing to do is to download the default theme from the Design section. Once you do, unzip it and you’ll see the documents that make up a theme.
- HTML documents must sit in the root folder and contain only lowercase letters and underscores, ending in .html - these are actual templates that authors can load as their page template.
- Embedded HTML - eg: _footer.html and _styles.html - these are pages you can include in your HTML page and they do not show up as templates authors can load. This is typically used for elements that get repeated across every page, such as header text. PitchPerfect will automatically recognize any file that begins with an underscore as an embedded template. (editable content is now allowed in embedded templates)
- CSS - Your style sheets which you can edit the same as any website. (Note - Javascript and PHP are not allowed in any themes).
- Images - a folder containing the images you want within your theme.
When you want to test your theme, simply upload it along with a screenshot, start a proposal and re-upload as needed until your proposal theme is just right.
Tag Pairs
Content Pricing
{pp:content:pricing add_to_total="yes"}name of table{\pp:content:pricing}
When rendered, this will generate a special pricing table, which can be styled in CSS using the class .priceTable. The parameter add_to_total="yes" will combine the values of all table rows with the total budget amount shown in the proposal snapshot view. This is useful for budget tables you don't want to calculate to the total amount, such as additional recommendations.
Editable Content
{pp:content:edit}<p>default text</p>{/pp:content:edit}
On any given template, you can wrap the {pp:content:edit} tag pair around any HTML you want to become editable by authors. When rendered, HTML with this tag will show an Edit button for authors which when clicked will open a content editor.
Must be single line default text only, however authors can enter multi-line text.
Embed Tag
{pp:layout:embed}header{/pp:layout:embed}
Wrap around an included embed file, such as headers and footers. Do not include the underscore _ within the embed tags. For example, if you want to include the file '_footer.html' in a template, write the following: {pp:layout:embed}footer{/pp:layout:embed}
Template Name
{pp:template:name}Cover Page{/pp:template:name}
Add this tag pair to your template and put a name within the pair. This becomes the name of the template when authors are choosing a template for their proposal page.
Single Variables
Company Name
{pp:company:name /}
Outputs the company name that the author enters within the proposal creation page. Can be used in embedded files, useful for things like including on a cover page: "{pp:company:name /}"
Page Number
{pp:proposal:page_number /}
Outputs the page number for a given page. Can be used in embedded files, useful for things like including in the footer: "Page # {pp:proposal:page_number /}" will show on page 23 of a proposal as "Page # 23".
Page Title
{pp:proposal:page_title /}
Authors can assign a title to each page. This tag will output a page title within a template. For example, if the author created a page and called it "Company Info" - that could be output like this: <h1>{pp:proposal:page_title /}</h1>
Price Grand Total
{pp:price:grand_total /}
A single number which is a collection of all rows from all budget tables in a proposal that are assied to show total. If all your budget tables in a proposal total to $5,950 - that number can be outputted anywhere in a template using the variable <p>{pp:price:grand_total /}</p>
Proposal Name
{pp:proposal:name /}
Outputs the proposal name that the author enters within the proposal creation page. Can be used in embedded files, useful for things like including in a header: {pp:proposal:name /} could be outputted as "Website Re-Design"
Table of Contents
{pp:content:toc /}
Outputs a full list of pages along with their respective page numbers (only pages that authors assign “include in table of contents” will be output on this tag.
Theme Path
{pp:theme:path /}
Adds a link to your theme folder, mostly used in linking to external CSS. Eg: <link rel="stylesheet" href="{pp:theme:path /}/css/screen.css" />
Sales Lead
{pp:proposal:sales_lead /}
Outputs the sales lead for a given proposal directly in the template. Can be used in embedded files, useful for things like including in a footer: "Proposal submited by {pp:proposal:sales_lead /}"
Support
Support, Questions, and Problems can be shared here.