Creating a Check in Theme

These are the high level steps for creating a new check-in theme.

Using this Photoshop PSD as a guide (skip to step 2 if you don't have Photoshop)...
1. Change the background to an image of your choosing. It should be retina sized images (2696 x 2048).
2. Change the colors on the assets (buttons, headers, etc.) to suite your needs and compliment your background colors.
3. Hide the assets layer and save the background to your desktop as [email protected].
4. Re-size the file to 50% and save this to your desktop as background.jpg.
Go to RockWeb\Themes\ folder
1. Make a copy of the existing CheckinPark\ theme folder (along with its subfolders) and call it <YOUR_THEME_NAME>
2. Overwrite the two background images in the <YOUR_THEME_NAME>\Assets\Images\ folder with the ones you created earlier.
3. Edit the <YOUR_THEME_NAME>\CSS\checkin-theme.less and change the fonts and colors of the named assets (the things you colored in the PSD) found in the "Variables" section of the file.
4. If any additional styling is desired, put your changes in the "Custom Overrides" section of the file.
Applying your theme
1. you can first test by appending ?theme=<YOUR_THEME_NAME> to the URL while in the check-in pages.

@checkinHeaderColor - This is the color that's used in the main heading text for each check-in page.
@checkinHeaderFontFamily - This is the font for that main heading text.
@checkinSubHeadingColor - This will be used as the color for any sub heading text on each page.
@checkinSubHeaderFontFamily - And this is the corresponding font used for that text.
@checkinBodyColor:- TBD
@checkinButtonColor - This will be used as the text color on any non-primary buttons (such as the Cancel button, etc.).
@checkinButtonBackground - This will be the background color on those buttons.
@checkinButtonFontFamily - This will be the font used on those buttons.
@checkinButtonSubtitleFontFamily - This will be used as the font for any sub-title text in those buttons.
@checkinButtonBorderColor - And this will be the border color for those buttons.
@checkinPrimaryButtonColor - This will be used as the text color on any primary buttons (the main buttons the user should probably press).
@checkinPrimaryButtonBackground - This will be the background color for those buttons.
@checkinPrimaryButtonBorderColor- And this will be the border color for those buttons.

Creating Custom Check-in Labels

TBD