Allow for easier style customization of Peer-to-peer#19
As an admin, I want to easily customize the peer-to-peer section of my website by adding custom styles.
(Migrated from featureOS: https://givewp.featureos.app/p/allow-for-easier-style-customization-of-peer-to-peer)
Peer-to-Peer now uses the blocks builder for campaign pages, and each section has a CSS field to add your own customization. Please update your Peer-to-Peer add-on to version 2.1.0 and create a new campaign to check it out!
Desiree Morgenstern via Priority Support
Givology Webmaster via Priority Support
David Hauptschein via Priority Support
Jerry Stevens via Priority Support
AHC Communications via Priority Support
My ideas, based on my experience of using two of the best platforms for fundraising.
Credit to ChatGPT for formatting me and putting things in order.
I don’t think anyone would’ve understood my instructions … lol
Peer-to-Peer Campaigns Functionality Specification
- Campaign Creation and Management
• Target Setting: Each campaign can set an overall target amount.
• Individual Fundraiser Registration: People can register to raise funds for a specific campaign. Ideally if we can integrate Facebook and Google for quick registration.
• Individual Target Setting: Each fundraiser sets a personal target, contributing to the overall campaign target.
- Branding and Customisation
• Default Branding: Provide a standard template matching the campaign’s theme and branding.
• Customisation Options: Allow fundraisers to personalize their page with custom branding and text.
- Fundraiser Page Layout
• Banner: A prominent banner at the top of the page.
• Profile Picture: Positioned in the bottom left corner of the banner.
• Fundraiser Title: Chosen by the individual fundraiser.
• Subtitle: Linked to the overall campaign.
• Fundraising Metrics: Display the amount raised, the number of supporters, and progress towards the individual’s target.
• Action Buttons: Prominent “Donate Now” and “Share” buttons for easy access.
- Story Section
• Default Campaign Story: Option to use the story provided by the campaign.
• Custom Story: Allow fundraisers to write their own story to connect with donors.
- Updates from Fundraisers
• Posting Updates: Enable fundraisers to post updates on their fundraising activities and progress.
- Display of Supporters
• Donor List: Show a list of donors who have contributed to the campaign, along with the donated amounts.
• Privacy Options: Include options for donors to choose if they want their names and donation amounts to be displayed publicly.
- Integration with Main Campaign
• Aggregation of Individual Targets: Ensure individual targets sum up to contribute to the main campaign target.
• Real-time Updates: The main campaign page should reflect real-time progress from all individual fundraisers.
- Social Media Integration
• Easy Sharing: Options for fundraisers to share their individual pages on social media.
• Social Media Widgets: Incorporate widgets to display social media activities related to the campaign.
- Analytics for Individual Fundraisers
• Personal Dashboard: Provide a dashboard for individual fundraisers to track their progress, donations received, and supporter engagement.
- Reference Websites
Sallie Tan via Priority Support(1) button styling (add gap between buttons, and remove orange border)
Christopher Hudson via Customer SuccessAlso, is there a way to change the wording in the code “top teams and top fundraisers” to something of my choice.
Hi Jonathan Shyman! Thank you for taking the time to clearly share your thoughts. I wanted to take a moment to share in kind. When building P2P we had the goal of getting the basic features out to our customers as quickly as possible. Minimal Viable Products (MVPs) are hard things to define as the line must be drawn somewhere, otherwise the project never gets out! From our research, we found that most people just needed the functionality and basic customization (images, colors, and so forth), so that’s what we went for. Now! That’s not where we intend on staying. We are going to continue to use the Shadow DOM to isolate our components as to avoid the thousands of theme/plugin styling conflicts we otherwise run into. We will, however, make use of Parts to allow for explicit CSS changes, as well as provide more non-code customizations. Lastly, our plan is to break up the various components into Blocks so users can lay out the Campaign pages as they’d like. While I cannot give a time for all of this, I can assure you that improving Peer-to-Peer is high on our list of priorities. And as more folks vote on things such as this, that will urge us to push it to the front of the line. Thanks again for sharing. I hope this clears how we’ve gotten here and where we intend to go. 😃
Jonathan Shyman via Priority SupportHi, On this page: https://www.israel365.com/campaign/donate-your-birthday-to-israel/?kinsta-cache-cleared=true we dont want the teams function and I tried to hide it like this: /* P2P / .rankingheader 3ru3D, .loadingIndicator 3daS7 {display:none !important} / END P2P */ but that doesnt seem to be working. The naming convention on the classes and everything on P2P also seems very unusual. How do I edit this? Jonathan
Matheus Martins: Was this customer just trying to hide the loading indicator? I wonder if that’s a setting we could add.
Yeka Girls via Priority SupportA) Is it possible to accomplish the following, internally. Trying to avoid CSS here if possible. If CSS is the only way, please let me know if the classes are unique to each campaign. I’d like for the styles applied to take affect across all campaigns. 1. Remove “Start Fundraising” button and restyle to be less prominent and place it below the list of fundraisers
Taylor Drayson via Priority SupportThe only issue we have now is the spacing and styling on the stats container https://globalangels.org/campaign/test-campaign/
See Jason’s comment for more context. please vote and comment here!