Buy Button & Widget Styling in Bold Memberships

Bold Memberships offers styling settings within the in-app admin that allow you to change the storefront styling of buy buttons and membership widgets created from within the app.

This article outlines the different style settings that are available within Bold Memberships.

Widget Styling

1. Plan Title Font Styling

For steps on adjusting the plan title font for all widgets, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Page Signup Styling, make your desired styling changes from the following options that impact the membership plan name for all widgets:

   • Plan Font Size This setting allows you to adjust the font size of the plan name. Increasing the pixel size makes the plan font size bigger, while decreasing the pixel size makes the plan font size smaller.

   • Plan Font Style - This setting allows you to adjust the style of the plan name font by adding Italics or an Underline to the plan name.

   • Plan Font Color - This setting allows you to adjust the font color of the plan name. You can use a custom hex color or select a color from the color window.

   • Plan Font Weight - This setting allows you to set how thick or thin characters in the plan title text should be displayed.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

2. Plan Description Font Styling

For steps on adjusting the plan description font for all widgets, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Page Signup Styling, make your desired styling changes from the following options that impact the plan description font for all widgets:

   • Description Font Size - This setting allows you to change the size of the description font. Increasing the pixel size makes the description font size bigger, while decreasing the pixel size makes the description font size smaller.

   • Description Font Style - This setting allows you to adjust the description font style by adding Italics or an Underline to the description text.

   • Description Font Color - This setting allows you to adjust the font color of the description text. You can use a custom hex color or select a color from the color window.

   • Description Font Weight - This setting allows you to set how thick or thin characters in the description text should be displayed.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

3. Label Font Styling

For steps on adjusting each label font for all widgets, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Page Signup Styling, make your desired styling changes from the following options that impacts the labels for all widgets:

   • Label Font Size - This setting allows you to change the size of all labels. Increasing the pixel size makes each label font size bigger, while decreasing the pixel size makes each label font size smaller.

   • Label Width - This setting allows you to adjust the width of the labels. Increasing the label width allows the label text to align on the same line, while decreasing the width allows each word in labels to be on separate lines.

   • Label Alignment - This allows you to change the alignment of all labels to amend either above the input boxes or to the left of each input box.

   • Label Font Style - This setting allows you to adjust the label font style by adding Italics or an Underline to all labels.

   • Label Font Weight - This setting allows you to set how thick or thin characters in the label text should be displayed.

   • Label Font Color - This setting allows you to adjust the font color of all label texts. You can use a custom hex color or select a color from the color window.

   • Label Padding - This setting allows you to create extra space within the label text area. You can add extra space or reduce space above, below, on the left or right of all labels by increasing or decreasing the pixel size for each padding direction.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

4. Input, Registration & Interval Styling

For steps on adjusting the styling for the input fields, registration fields and the interval dropdown field for all widgets, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Page Signup Styling, make your desired styling changes from the following options that impact the input, registration and interval fields for all widgets:

   • Input Padding - This setting allows you to create extra space within the input fields. You can add extra space or reduce space above, below, on the left or right of all input fields by increasing or decreasing the pixel size for each padding direction.

   • Input Width - This setting allows you to adjust the size of the input, registration and interval fields for all widgets. Increasing the input width increases the width size of each field, while decreasing the width shrinks the input fields.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

Widget Container Styling

For steps on adjusting the overall widget style, such as the size of the widget, margins and padding, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Page Signup Styling, make your desired styling changes from the following options that impacts the widget dimensions:

   • Container Size - This setting allows you to change the overall size of the widget. Increasing or decreasing this setting adjusts both the length and width of the widget.

   • Container Margin - This setting allows you to create space outside of the widget border in all directions.

   • Container Padding - This setting allows you to create space inside of the widget border in all directions.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

Custom CSS Styling

After customizing the widget, you may find that the font colors, as well as the text within the widget may not match your theme's colors and styles.

Please see each section below for more information on how to make some common changes in the widget:

CSS requires three properties for the desired styling to apply correctly:

• A Class or ID selector - The most common ones regarding the membership widget are at the bottom of this section.
• The initial declaration - The type of change you want to apply to the class or ID (ex: background-color, color, and text-decoration, are all types of initial declarations).
• The final declaration - The style of the change you want to apply to the class or ID (ex: grey, blue, and underline are all types of final declarations).

div#member-1_membership_container {
   background-color: grey;
}

Below we've created a diagram to showcase some of the most common class selectors used to style the membership widget:

1. #"tagname"_name - Targets the title. Replace "tagname" with the tag you used in the membership plan.
2. #"tagname"_desc - Targets the description. Replace "tagname" with the tag you used in the membership plan.
3. .bold-form-group label - Targets the title of each registration field.
4. .bold-form-group input - Targets the input fields for each registration field.
5. .bold-form-group select - Targets the billing option dropdown.
6. #"tagname"_membership_button_stripe - Targets the Stripe payment button. Replace "tagname" with the tag you used in the membership plan.
7. #"tagname"_membership_button - Targets the PayPal payment button. Replace "tagname" with the tag you used in the membership plan.
8. #"tagname"_membership_button_free - Targets the free button. Replace "tagname" with the tag you used in the membership plan. 

You can find much more detailed information on CSS and its styling rules at W3 Schools - CSS.

Buy Button Styling

1. Plan Title Font Styling

For steps on adjusting the plan title font in all buy button modals, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the membership plan name for all buy buttons:

   • Plan Font Size - This setting allows you to adjust the font size of the plan name. Increasing the pixel size makes the plan font size bigger, while decreasing the pixel size makes the plan font size smaller.

   • Plan Font Style - This setting allows you to adjust the style of the plan name font by adding Italics or an Underline to the plan name.

   • Plan Font Color - This setting allows you to adjust the font color of the plan name. You can use a custom hex color or select a color from the color window.

   • Plan Font Weight - This setting allows you to set how thick or thin characters in the plan title text should be displayed.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

2. Plan Description Font Styling

For steps on adjusting the plan description font for all buy buttons, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the plan description font for all buy buttons:

   • Description Font Size - This setting allows you to change the size of the description font. Increasing the pixel size makes the description font size bigger, while decreasing the pixel size makes the description font size smaller.

   • Description Font Style - This setting allows you to adjust the description font style by adding Italics or an Underline to the description text.

   • Description Font Color - This setting allows you to adjust the font color of the description text. You can use a custom hex color or select a color from the color window.

   • Description Font Weight - This setting allows you to set how thick or thin characters in the description text should be displayed.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

3. Label Font Styling

For steps on adjusting each label font for all buy buttons, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the labels for all buy buttons:

   • Label Font Size - This setting allows you to change the size of all labels. Increasing the pixel size makes each label font size bigger, while decreasing the pixel size makes each label font size smaller.

   • Label Width - This setting allows you to adjust the width of the labels. Increasing the label width allows the label text to align on the same line, while decreasing the width allows each word in labels to be on separate lines.

   • Label Alignment - This allows you to change the alignment of all labels to amend either above the input boxes or to the left of each input box.

   • Label Font Style - This setting allows you to adjust the label font style by adding Italics or an Underline to all labels.

   • Label Font Weight - This setting allows you to set how thick or thin characters in the label text should be displayed.

   • Label Font Color - This setting allows you to adjust the font color of all label texts. You can use a custom hex color or select a color from the color window.

   • Label Padding - This setting allows you to create extra space within the label text area. You can add extra space or reduce space above, below, on the left or right of all labels by increasing or decreasing the pixel size for each padding direction.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

4. Input & Registration Styling

For steps on adjusting the styling for the input fields and registration fields for all buy buttons, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the input, registration and interval fields for all buy buttons:

   • Input Padding - This setting allows you to create extra space within the input fields. You can add extra space or reduce space above, below, on the left or right of all input fields by increasing or decreasing the pixel size for each padding direction.

   • Input Width - This setting allows you to adjust the size of the input, registration and interval fields for all widgets. Increasing the input width increases the width size of each field, while decreasing the width shrinks the input fields.

3. Optional: Select Preview to view your styling changes.

4. Select Save.

Buy Button Container Styling

For steps on adjusting the overall buy button style, such as the size of the widget, margins and padding, please follow these steps:

1. From the Bold Memberships admin, select Styling.

2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the buy button modal dimensions:

   • Container Size - This setting allows you to change the overall size of the buy button modal. Increasing or decreasing this setting adjusts both the length and width of the modal.

   • Container Margin - This setting allows you to create space outside of the buy button border in all directions.

   • Container Padding - This setting allows you to create space inside of the buy button border in all directions.

3. Optional Select Preview to view your styling changes.

4. Select Save.

Custom CSS Styling

After customizing the widget, you may find that the font colors, as well as the text within the widget may not match your theme's colors and styles.

Please see each section below for more information on how to make some common changes in the widget:

CSS requires three properties for the desired styling to apply correctly:

• A Class or ID selector - The most common ones regarding the membership widget are at the bottom of this section.
• The initial declaration - The type of change you want to apply to the class or ID (ex: background-color, color, and text-decoration, are all types of initial declarations).
• The final declaration - The style of the change you want to apply to the class or ID (ex: grey, blue, and underline are all types of final declarations).

.modal-body {
   background-color: grey;
}

Below we've created a diagram to showcase some of the most common class selectors used to style the membership widget:

1. #modalPlanName - Targets the title.
2. .bold-mem-createaccount-intro - Targets the description.
3. .bold-form-group-modal label - Targets all of the registration field titles.
4. .bold-form-group-modal input - Targets the input fields for each registration field.
5. .btn-bold-secondary - Targets the cancel button.
6. .btn-bold-main - Targets the available payment buttons (Stripe, PayPal, free).

You can find much more detailed information on CSS and its styling rules at W3 Schools - CSS.