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
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.
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:
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.
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.