CSS Customization Guide

This article provides step-by-step instructions for customizing your own CSS to personalize your iFrame appearance. 

Getting Started with Customization

Before customizing the CSS, you should understand the structure of CSS files and how to customize them.

Prerequisites:

• Basic knowledge of CSS
• Text editor or CSS editing software

What You Can Customize:

• Colors (backgrounds, text, borders)
• Fonts and typography
• Layout and spacing
• Button styles and hover effects
• Form field appearance
• Mobile responsive behavior

Step-by-Step Customization Process

Step 1: Download the Base CSS File

1. Copy the complete CSS code, which can be accessed at https://s3.amazonaws.com/punchhstatic/whitelabel_csses/iframe-style.css 
2. Save it as a new file in a text editor, such as VS Code, Sublime Text, or Notepad++

Step 2: Identify Elements to Customize

Identify which elements you want to change and customize. Refer to the Implementation Notes section for Key Customization Areas. Common customization targets include:

Brand Colors

Primary brand color for buttons:

/* Primary brand color for buttons */
.iframe-container .btn-primary {
    background-color: #YOUR_BRAND_COLOR;
    border-color: #YOUR_BRAND_COLOR;
}

Background colors:

/* Background colors */
.iframe-container{
    background-color: #YOUR_BACKGROUND_COLOR;
}

Typography

Change the font family:

/* Change font family */
.iframe-container {
    font-family: 'Your Brand Font', Arial, sans-serif;
}

Change the text colors:

/* Text colors */
.iframe-container {
    color: #YOUR_TEXT_COLOR;
}

Form Elements

Change the input field styling:

/* Input field styling */
.iframe-container .form-control {
    border-color: #YOUR_BORDER_COLOR;
    border-radius: 8px; /* Rounded corners */
}
.iframe-container .form-control:focus {
    border-color: #YOUR_FOCUS_COLOR;
    box-shadow: 0 0 0 3px rgba(YOUR_RGB_VALUES, 0.1);
}

Step 3: Create Your Custom CSS File

There are three methods for customizing a CSS file: modifying an existing style, adding a new style, or overriding the existing classes.

Method 1: Modify Existing Styles

Change the existing CSS file to match your brand's styling.

Example: Changing Button Colors

Find the .iframe-container .btn-primary rule to change button colors and hover colors:

/* Find this existing rule and modify it */
.iframe-container .btn-primary {
    color: #fff;
    background-color: #e74c3c; /* Change from default #337ab7 to red */
    border-color: #c0392b;
}
.iframe-container .btn-primary:hover {
    background-color: #c0392b;
    border-color: #a93226;
}

Method 2: Add New Custom Styles

Add unique elements and styles that are unique to your brand. Custom brand elements should be added at the end of the CSS file.

Example: Adding Custom Brand Elements

Use .iframe-container .brand-header to add a custom header:

/* Add at the end of your CSS file */
/* Custom brand header */
.iframe-container .brand-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

Use .iframe-container .custom-form to add custom form styling:

/* Add at the end of your CSS file */
/* Custom form styling */
.iframe-container .custom-form {
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Method 3: Override Specific Classes

Create new designs for specific classes in your CSS file. This requires more knowledge and experience with CSS files.

Example: Complete Button Redesign

Find .iframe-container .btn and override all button styles:

/* Override all button styles */
.iframe-container .btn {
    background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
    border: none;
    border-radius: 25px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.iframe-container .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Step 4: Test Your Customizations

Test your CSS file to ensure that everything is being displayed as expected. There are two ways to test your CSS file: local testing and URL testing.

Method 1: Local Testing (Recommended)

1. Create a test HTML file that contains your CSS file:

   <!DOCTYPE html>
   <html>
   <head>
       <link rel="stylesheet" href="your-custom-iframe-style.css">
   </head>
   <body>
       <div class="iframe-container">
           <div class="login-form">
               <form>
                   <div class="form-group">
                       <input type="email" class="form-control" placeholder="Email">
                   </div>
                   <div class="form-group">
                       <input type="password" class="form-control" placeholder="Password">
                   </div>
                   <button type="submit" class="btn btn-primary">Login</button>
               </form>
           </div>
       </div>
   </body>
   </html>
   

   html

2. Open the HTML file in your browser to preview changes

3. Make adjustments in your CSS file as needed and refresh to see updates

Method 2: Testing with URL Method (Advanced)

Using this method will require support from your Punchh representative to add the CSS URL to your iFrame. Reach out to your Punchh representative to get assistance with this testing.

1. Upload your CSS file to a publicly accessible location (your website, cloud storage, etc.)
2. Provide the CSS file's URL to your Punchh representative, who will add the CSS to your iFrame
3. Access your iFrame to view the CSS file in action, make adjustments to your CSS file as needed
   1. Reach out to your Punchh representative for help accessing your iFrame

Implementation Notes

CSS Loading Order

1. Google Fonts import (Oswald font family)
2. Base body and typography styles
3. Layout and container styles
4. Form elements and inputs
5. Button styles and states
6. Navigation and header components
7. Compliance sections
8. Social media integration
9. Responsive breakpoints
10. Utility classes

Key Customization Areas

• Colors: Easily customizable through CSS variables
• Typography: Oswald font can be replaced with custom fonts
• Layout: Container widths and spacing are adjustable
• Compliance: New compliance sections are fully customizable
• Buttons: All button styles support color and sizing changes
• Mobile: Responsive breakpoints can be modified

Best Practices

Performance Optimization

• Minimize CSS file size: Remove unused styles and comments
• Combine styles: Merge multiple customizations into one file
• Use efficient selectors: Avoid overly complex CSS selectors

Maintainability

• Document your changes: Add /*comments*/ explaining custom modifications

/* Custom brand colors - Updated March 2024 */
.iframe-container .btn-primary {
    background-color: #e74c3c; /* Brand red */
}

• Keep a backup: Save original and modified versions

• Test thoroughly: Verify all iFrame functionalities work after customization

Design Consistency

• Follow brand guidelines: Ensure colors and fonts match your brand
• Maintain usability: Don't sacrifice functionality for appearance
• Consider accessibility: Ensure your design works for all users

Version Control

• Track changes: Keep notes of what was modified and when
• Test before deploying: Always test in a staging environment first
• Have a rollback plan: Keep the previous working version accessible

Troubleshooting Common Issues

CSS Not Loading

Styles Not Applying

.iframe-container .btn-primary {
    background-color: #your-color !important;
}

Mobile Display Issues

@media (max-width: 768px) {
    .iframe-container .your-custom-class {
        font-size: 14px;
        padding: 10px;
    }
}

Color Contrast Problems

CSS Class Categories

You can see how the different classes and components impact the design of the iFrame by inspecting the page. To do this, right click on the iFrame page and select "Inspect".

Below are some of the most commonly changed components in the CSS. Additional classes and components can be found by inspecting the iFrame pages or exploring the base CSS provided in Step 1.

Primary Containers

Layout Utilities

Padding Classes

Form Elements

Input Fields

Form Containers

Select Elements

Button Classes

Primary Buttons

Social Authentication

Navigation and Header

Header Components

Navigation Stats

Authentication and Login

Login Components

Password and Recovery

Basic and Advanced Authentication

Login/Signup Components

Shared Layout Classes (for Override)

User Dashboard

Dashboard Layout

Dashboard Forms

Dashboard Elements

Compliance and Marketing

Compliance Sections

Compliance Form Elements

Compliance Labels and Links

Marketing Email Subscription

Social Media Integration

Facebook Integration

Social Buttons Hover States

Responsive Design

Mobile Styles

The CSS includes responsive design rules for mobile devices with screen width max 480px:

Typography and Colors

Text Styling

Color Variables

Utility Classes

Display and Positioning

Form Utilities

Special Elements

eCRM Widget Classes

eCRM Registration