The Configure Appearance setup screen is where the Public Pages of your system are configured using HTML code and CSS (cascading style sheets) to match youoverall 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 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 - 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.
2. What we call the "Top Section", although it may include images and HTML which appear 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 begins with a div tag.
3. The Content area - this resides BETWEEN the Top section and the Footer. In the HTML code we will typically leave an open cell (div) at the bottom of the Top section code box, and close the cell (/div) at the beginning of the footer code box below. The content will then display in this cell between the top section and the footer.
4. The Footer, which may include images and HTML. This is typically the bottom of the Public Pages appearing below the dynamic content. Note that we REQUIRE the footer of your Public Pages to include the text: "Ticketing System provided by Arts People (where Arts People is a link to our website)". This section then will typically end by closing the div tag, which was started in the Top Section area in #2 above.
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 away from purchasing.
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 browsers.
Please see our article on tracking conversions for information on Google Analytics. The article can be accessed here.
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. Please see below.
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
1. To reference an image stored on the Configure Appearance screen in the fields above, it is common to use the image tag - <img src="/uploads/####/logo.jpg"> (where #### is your Org Number, found in the upper left corner of your screen, and 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.))
Additional parameters may be included in the tag, such as <img src="/uploads/####/logo.jpg" style="height: 150px; width: 150px;">.
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 opening it in a new window and copying the image URL, or you can reference it in your CSS file with the following format: background-image: URL(logo.jpg);
Customizing the Style Sheets
You control the appearance of the Content table by uploading a CSS. (There is an additional CSS specifically for the Calendar Public Page and the Subscription Shopping Cart Pages).
Start by downloading the sample stylesheet(s) to use as a template (there are links on the Configure Appearance page). These are example stylesheets that 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.
If your Public Pages were already configured, you can download the current CSS to make modifications by viewing a Public Page, right-clicking to View the Page Source in your web browser, then finding the URL to the CSS to view it and copy and paste to an HTML Editor to edit on your computer.
We won't attempt to fully explain CSS in this Help article. 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 research CSS information on the internet or in books on the subject.
NOTE: to view changes after uploading a style sheet, visit your Public Pages, then force your browser to hard-reload the page. Hold down the Shift key while pressing Reload in your browser (or pressing CTRL-f5 or Command-f5) -- this works in most browsers.
Uploading Your Bullet Image
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 screen. It will need to be pre-sized and should be fairly small. Often 8px X 8px should be about right.