Included Below

About chameleon™ Design Options

chameleon™ is available in three distinct page layouts, which are referred to as User Experience #1 (UX1), User Experience #2 (UX2) and User Experience #3 (UX3).

Some design elements in each of the three UX designs can be customized, while some design elements are global and cannot be customized.

b4checkin controls the design of chameleon™ and does not accept externally created CSS files, and cannot enable external management of CSS content.

b4checkin will normally obtain your branding elements directly from your website. To apply alternate design adjustments, you must provide a mock-up, including color codes and licensed fonts.

Selecting Your User Experience (UX)

You can choose from the three available page lay-out designs or User Experience options (UX's), in the following steps.

1. Log into the b4checkin Admin Site
   
   
2. Select the property logo in the left end of the page header panel.
   
   
3. Select "Manage Your Properties".
   
   
4. Select the pencil icon to Edit the property.
   
   
5. In the drop-down called "Design Template", select the desired UX version.
   
   
6. Select the Submit button at the bottom of the screen.
   
   
7. Load chameleon™ and refresh your browser to check that the change took effect.
   
   

Preview Links

UX1 (User Experience #1)

UX2 (User Experience #2)

UX3 (User Experience #3)

Design Options in User Experience #1 (UX1)

Preview

1. Page background can be changed to a solid color.
   
   
2. Menu bar color can be changed to a solid color or a color gradient.
   
   
3. Menu bar button color can be changed.
   
   
4. Container color for “YOUR BOOKING DETAILS” can be changed.
   
   
5. Modify” button color can be changed.
   
   
6. Message panel background color (and text) can be changed.
   
   
   
   
7. The calendar background color cannot be changed. 
   
   

8. Colors of the Calendar Legend (Available, Checkout Only, Unavailable, Selected) can be changed. 
   
   

9. The color of the Calendar Buttons can be changed. 
   
   
   
   

10. Text color can be changed
    
    

11. Room Group tab color can be changed. 
    
    

12. The LOWEST-HIGHEST selector cannot be changed.
    
    

13. The vertical step labels (SELECT A ROOM/ENHANCE YOUR STAY/BOOK) cannot be changed.
    
    
    
    

14. The color of the price breakdown box can be changed and the color of the total amount can be changed. 
    
    
    
    

15. Elements on successive pages (enhance your stay, guest information and confirmation page, etc.) must match color changes made on this front page.
    
    
    
    

Design Options in User Experience #2 (UX2)

Preview

1. Keep in mind when selecting a button color that all buttons must feature the same color. 
   
   
2. The header nav panel and button color can be changed. 
   
   
3. Message strip background color (and text) can be changed.
   
   
4. The page body background color can be changed.
   
   
   
   

5. The left panel background color can be change.
   
   

6. You cannot change or remove the Your Details header, the white lines or the calendar icon.
   
   
   
   

7. Section heading text color can be changed, but the turquoise arrow cannot be changed or removed.
   
   
   
   

8. All Room Type listing background colors can be changed.
   
   

   
   
   

9. The color of all calendar elements can change, except the arrows.
   
   
   
   
   

10. Elements on successive pages (enhance your stay, guest information and confirmation page, etc.) must match color changes made on this front page.
    
    

Design Options in User Experience #3 (UX3)

Preview 

1. Keep in mind when selecting a button color that all buttons must feature the same color. 
   
   
2. Page background can be a specified color and an image can float behind the page.
   
   
3. The navigation header bar color can be changed.
   
   
4. The color of the step numbers (1 through 4), the CHECK AVAILABILITY AND RATES title, and the head Rate Plan, Adults, Children, Maximum child age: 18, can be changed.
   
   
   
   
5. Tab colors can change.
   
   
6. "Select category" text color and alignment (centering or left alignment) can change. 
   
   
   
   
7. The colors in the calendar panel can change. Keep in mind that the colors you select for this panel will apply to all other panels.
   
   
   
   
8. In “Step 2: Select a room”, you can change the color of room type background, the selected room type border, background and price color.
   
   
9. You cannot change the small arrow under the price. 
   
   
   
   
10. In “Step 3: Summary”, the white background color and the color of the button can be adjusted. Button color affects all buttons. 
    
    
    
    
11. Elements on successive pages (enhance your stay, guest information and confirmation page, etc.) must match color changes made on this front page.