All Collections
Advanced FAQs
Advanced eCard Envelope Styling: A Complete Guide to Re-Theming with CSS
Advanced eCard Envelope Styling: A Complete Guide to Re-Theming with CSS

Unlock Full Design Control: Replace and Re-Theme Your eCard Envelopes

Tim Badolato avatar
Written by Tim Badolato
Updated over a week ago

Overview

While our platform offers predefined hue, contrast, and saturation settings for color customization, we understand the importance of having the exact look and feel for your envelopes. This article guides you on how to further personalize envelope colors by using custom CSS to replace our default envelope images with your own designs.

Step-by-Step Guide

  1. Access Widget Editor

    • Navigate to the Widget Editor by selecting the "Customize" tab. This is where you'll apply custom CSS for your envelope designs.

  2. Prepare Your Custom Images

    • Before starting with the CSS, ensure you have your custom images ready. These images will replace the default ones used for envelope flaps and bodies. If you need a starting point, you can download and modify our default images:

  3. Custom CSS Implementation

    • With your custom images hosted online, you're ready to implement the custom CSS. Here is the template you will use, replacing the URL placeholders with your own:

.flap_back { 
content: url('ENVELOPE_FLAP_BACK_URL') !important;
}
.flap_front {
content: url('ENVELOPE_FLAP_FRONT_URL') !important;
}
.body_back {
content: url('ENVELOPE_BODY_BACK_PATTERN_URL') !important;
}
.body_front {
content: url('ENVELOPE_BODY_FRONT_URL') !important;
}

Replace ENVELOPE_FLAP_BACK_URL, ENVELOPE_FLAP_FRONT_URL, ENVELOPE_BODY_BACK_PATTERN_URL, and ENVELOPE_BODY_FRONT_URL with the direct links to your uploaded images.

  1. Apply and Save Changes

    • After replacing the placeholders with your image URLs, paste the custom CSS into the designated area in the Widget Editor. Save your changes to apply the new envelope designs.

Additional Support

If you encounter any difficulties or need further customization beyond what you're comfortable handling, we offer CSS development services on a contractual basis. Reach out to our support team for more information on how we can assist with your specific needs.

Conclusion

Personalizing your eCardWidget envelopes with custom images allows for a unique brand expression and enhances the recipient's experience. Follow this guide to make your eCards stand out with custom envelope designs.

Did this answer your question?