Articles on: Bee Day

How can I change the appearance of the birthday widget

How to Customize the Post Checkout Widget with Custom CSS


The post checkout widget used to collect birthdays in the Bee Day app allows you to style it with custom CSS. Follow these steps to personalize your widget:


Step 1: Open the Settings


Open the Bee Day app and navigate to the settings via the side menu:


navigate to settings


Step 2: Access Post Checkout Widget Settings


Next, open the Post Checkout Widget Settings:


Post Checkout Widget Settings


Step 3: Navigate to Custom CSS Section


In the settings, scroll down to the section titled Custom CSS. Here, you can insert your custom CSS to style the widget. You can target different elements within the widget using the following CSS IDs:


  • #birthday-form
  • #birthday-form-title
  • #birthday-form-description
  • #birthday-form-thank-you-message
  • #birthday-form-fields
  • #birthday-form-fields-day > input
  • #birthday-form-fields-month > input
  • #birthday-form-fields-year > input
  • #birthday-form-fields-button > button


Example: Changing the Button Color


To change the button color to blue, you can insert the following CSS into the Custom CSS field. Make sure to click Save Changes to apply your customizations.


#birthday-form-fields-button button {
background-color: #46AEEE !important;
}


Custom CSS Example


By following these steps, you can easily style the post checkout widget to match your brand or desired appearance. Enjoy customizing your widget!


If you need additional assistance, please reach out to our support team. We are happy to help you with any questions or issues you may have.

Updated on: 01/07/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!