You are here

Home › Web Page Documentation › Branding web sales to make it look like the main web site

Changing Page Design

Subscribe to Syndicate
The web pages for the ticketing site:
  • are located in a folder on the Web Listener computer (for those clients who self host) -or-
  • are located in a git repository (for clients using Artsman Cloud Hosting).

The web page file structure consists of a WebPagesEN folder containing only those pages previously customized. A full set of the default pages are can be download from

https://gitlab.artsman.com/_public/tmresponsivewebpages.

When making edits to existing pages the latest default page should be downloaded and copied to the corresponding page within the local folder.

The ticketing site uses Bootstrap 3 for the design and layout of the pages. A list of free themes available for the pages can be found on the Bootswatch site.

 

Editing the Theme

The fastest way to alter the look of the web pages is to change the theme. This can be done in minutes using a customization tool like Bootstrap Live Customizer.
 
  1. Choose a Predefined Theme from the buttons on the left to get started, hover over items throughout the page and click Related Variables to alter the design.
  2. Once satisfied with the edits click the Download button at the top and save the bootstrap.min.css file. You may wish to save the variables.less and theme.less as they can be loaded back into the Bootstrap Live Customizer page for future editing.
  3. Place the bootstrap.min.css in the /WebPagesEN/tmScripts folder on the Web Listener computer.
  4. Update the /WebPagesEN/tmScripts/themeLocal.html and /WebPagesEN/tmScripts/themeCDN.html pages:
    • Comment out the current style reference and
    • add the following link to the bottom of the page to use your personalized style sheets:

      <link href="tmScripts/bootstrap.min.css" rel="stylesheet" />

  5. After putting the new theme in place, clear the web listener cache and your web pages should display the new design.

 

If your web pages are hosted on Artsman Cloud and you do not have access to the git repository, please send the customized bootstrap.min.css file to support and we'll put the customized .css file in place for you.

 

Updating the Logo

The logo at the top of the ticketing site in the navigation bar is a company logo. The quickest way to update the image would be to create a tmCompanyLogo.gif file and place it in the /WebPagesEN/tmGifs folder. This will replace the default image.

Alternatively an image can be added to the /WebPagesEN/tmGifs folder and the tmnavButtons.html page (located in the /WebPagesEN/TMtemplages folder) can be updated with the image name.

 

Additional Edits

Other commonly edited web pages are:

WebPageEN/tmEvent

  • tmEventAdDefault.html - the ad at the bottom of the print at home ticket
  • tmEventBannerDefault.html - the banner at the top of the print at home ticket

WebPageEN/TMtemplates

  • tmContactHours.html - to include the hours that the box office is typically open
  • tmnavButtons.html - add or remove buttons in the navigation bar to reflect the kind of items you sell online
  • tmSocialMedia.html - to provide the complete URL's of your venue's social media links

WebPageEN/tmGifs

  • favicon.ico - to provide a customized icon for your venue in the browser URL bar.