You are here

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

Bootstrap Live Customizer

Subscribe to Syndicate
The Bootstrap Live Customizer is the recommended tool for creating a customized ticketing site theme. The steps below outline how to
  • use the bootstrap live customizer page,
  • download the customized theme/CSS files, -and-
  • how to implement the changes.

 

Choose a Starting Theme

  1. Open the Bootstrap Live Customizer web site.
  2. In the top right corner, click Select predefined theme.
  3. Select a predefined theme and click Load
  4. Click the Close button in the lower right hand corner of the popup window to confirm the theme.

 

Customize the Theme

  1. Click Colors in the right column.
  2. Enter the RBG or HEX value color for each of the default Brands.
  3. In the body of the page Hover over a Button/Tables/Forms/Alerts/etc. and click the related variables button pop up to the right side of the window.
  4. Update the colors for the related variables in the fields on the right of the page.

 

Download Customizations

  1. Click Download at the top right of the page.
  2. Select bootstrap.min.css.
  3. The bootstrap.min.css file will download to the designated browser downloads folder.

The Download button can also be used to save the variables.less file, which can be used in the future to further change the theme in the Bootstrap Live Customizer

 

Placing the Customized Theme

  1. Create a new folder at /WebPagesEN/tmScripts/theme
  2. Create a new folder at /WebPagesEN/tmScripts/theme/css
  3. Copy the fonts folder at /WebPagesEN/tmVendor/bootstrap-3.4.1/fonts in the default web page templates to /WebPagesEN/tmScripts/theme/fonts in your customized web page templates
  4. Place the theme.min.css in the /WebPagesEN/tmScripts/theme/css folder on the Web Listener computer.
  5. Place the variables.less in the /WebPagesEN/tmScripts/theme/css folder on the Web Listener computer. (To save for future customization changes)
  6. 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/theme/css/theme.min.css" rel="stylesheet" />

  7. 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 and variables.less file to support and we'll put the customized theme in place for you.