The Configure Appearance setup screen is where the public pages of your system are configured using html code and CSS (cascading style sheet) to match your overall website design. It also is where images can be stored to be used on the public pages design, in system messages, and in email marketing.
NOTE: This area is intended for people who have a good understanding of basic website design concepts and methods. If you don't have such a person available, we are happy to set up your graphics to look like the rest of your website. We do this original configuration for you as part of your initial setup. In the future if your design needs altering your web designer can do this themselves, or have us do it for you for a reasonable fee.
We allow you a very large degree of creative control of the public pages of your account. To understand how this works, let's take a look at how the system generates pages. As you may have noticed, there are no separate URLs for the system; everything runs from the arts-people.com URL. The system is completely database-generated, so the page is a single design, with content changing from screen to screen during a transaction.
The HTML Public Page configuration consists of 4 parts
1. HTML header (, <meta>, etc). This area is not necessary for the pages to function. In many cases we leave the header blank. We generally advise that these elements belong on your own website instead of the public pages, since they are used for things like web searches in which case you want your patrons to find YOUR website, not the public pages.</p> <p>2. What we call the "Top section", although it may include images and HTML which appears on the left side of the screen as well. Think of this as the masthead on the top of all your pages. It is typically the top of the public pages design, above the dynamic content. This area using begins with a div tag, and then a table tag. We generally use and recommend table structure as it works best with the system.</p> <p>3. The Content area - this resides BETWEEN the Top section and the Footer. In the html code we will typically leave an open cell (td tag) at the bottom of the Top section code box, and close the cell (/td tag) in the beginning of the footer code box below. The content will then display in this cell between the top section and the footer. </p> <p>4. The Footer, which may include images and HTML to appear on the right. This is typically the bottom of the public pages appearing below the dynamic content. Note that we <strong>REQUIRE</strong> the footer of your public pages to include your organization name (typically created as a link back to your main website), text of "Ticketing inquiries please call our box office: (your box office phone number)", and text of "Ticketing system provided by Arts People (where Arts People is a link to our website)". This section then will typically end by closing the table tag, and closing the div tag, which were both started in the Top Section area in #1 above.<br><br></p> <p><strong>NOTE: Do not attempt to include information in the Header, Top Section or Footer fields that links to elements outside of the system, such as externally stored images, etc. The system operates inside a secure socket layer and external links can break the security and give your patrons security errors which could drive them way from purchasing</strong>. </p> <p><strong>Java and Flash: Our policy is no Java or Flash script on public pages, as it exposes us to the possibility of being classified as an "unsafe" site by various security companies, search engines, and browers.</strong></p> <p><strong>Please see our article on tracking conversions for information on Google analytics. The article can be accessed <a href="https://artspeople.zendesk.com/hc/en-us/articles/217058627">here</a>.<br></strong></p> <p>You have complete control of parts 1, 2, and 4. From the Configure Appearance screen, enter the HTML you want to use and press Save. Then you can then view the public pages to see how things look. Not that this will not be the finished look until you implement your CSS (cascasding style sheet). See below.</p> <p><span class="Apple-style-span" style="font-size: 19px; font-weight: bold; line-height: normal;"> </span></p> <p><span class="Apple-style-span" style="font-size: 19px; font-weight: bold; line-height: normal;">Including Images</span></p> <p>Use the lower part of the Configure Appearance screen to upload images to appear on the site (as well as in the ticket design and in HTML emails). These images are stored on our server. There are two formats to use when referencing them from your pages. For our examples, we'll use an image called logo.jpg<br><br></p> <p>1. To reference an image stored on the Configure appearance screen in a table cell in the fields above, it is common to use our image tag - [*image/logo.jpg*] (where logo.jpg is your own uploaded file name. (note that file names should include letters and numbers and possibly the - or _ characters. No spaces or other characters should be used.)</p> <p>Additional parameters may be included in the tag, such as [*image/logo.jpg width=150 height=100*]</p> <p><br>2. There may be times you need to use HTML directly, such as including stored images in your css as background images, etc]. In this case, you can call the full URL of the image by right clicking and open it in a new window and copy the image url, or you can reference it in your css file with the following format:<br>background-image: URL(logo.jpg);</p> <p><span class="Apple-style-span" style="font-size: 19px; font-weight: bold; line-height: normal;"> </span></p> <p><span class="Apple-style-span" style="font-size: 19px; font-weight: bold; line-height: normal;">Customizing the Style Sheets</span></p> <p>You control the appearance of the Content table by uploading a CSS (cascading style sheet). (There is an additional css specifically for the Calendar public page and the Subscription Shopping Cart pages).</p> <p>Start by downloading the sample style sheet(s) to use as a template (there are links on the Configure Appearance page). These are example style sheets which contain explanations of how to use the various elements. NOTE that you cannot simply upload your own CSS from your website, as there are elements in the public pages that need to be configured that you will not have in your own CSS.</p> <p>If your public pages were already configured, you can download the current css to make modifications by viewing a public page, view the source in your web browser, then finding the URL to the css to view it and copy and past to a document to edit on your computer.<br><br></p> <p>We won't attempt to fully explain CSS (Cascading Style Sheets) in this help file. Take a close look at the template sheets and let us know if you have questions. It's easy enough to change colors and fonts. If you want to do more advanced styling, talk to us or look up css information on the internet or in books on the subject.<br><br></p> <p>NOTE: to view changes after uploading a style sheet, visit your Public Pages, then force your browser to reload the page. Hold down the Shift key while pressing Reload in your browser -- this works in most browsers.</p> <p><span class="Apple-style-span" style="font-size: 19px; font-weight: bold; line-height: normal;"> </span></p> <p><span class="Apple-style-span" style="font-size: 19px; font-weight: bold; line-height: normal;">Uploading Your Bullet Image</span></p> <p>Various pages in the system display a bullet point. So the system requires that one must be uploaded. Upload your bullet image on the Configure Appearance page. It will need to be presized and should be fairly small. Often 25 to 35 pixels wide or tall should be about right.</p>