RossBurns

Site URL: https://www.gerafoundation.com

Dear Forum

Our website is a non-profit aimed at fundraising toward astronomy projects. We have set projects with set funding goals and are already making progress with fundraising. I would like to be able to show a progress bar of which shows the target, and current fundraising progress. We take donations directly thought the SquareSpace platform so if this can be updated automatically using info from my SquareSpace site that would be a bonus.

Then we also take donations directly from partnerships which do not go through the website. 

My ideal would be a progress bar which shows the donations through the Squarespace website in one colour (lets say orange) which updates automatically, and then manually add on to that the donations we get from other sources in another colour (lets say green). 

If the ideal progress bar is possible it would be wonderful but if such an idea is possible I will be happy with something less sophisticated too.

Regardless of the design, I would need a separate progress bar for each project:

https://www.gerafoundation.com/kilimanjaro-millimeter-telescope

https://www.gerafoundation.com/university-of-nigeria

https://www.gerafoundation.com/nobeyama-observations

This adds a complexity in that any automated updating progress bar would need to be able to track the donations made to each of the individual projects. Im wondering if this can be done by tracking which of the project pages' donate buttons were pressed.

Thanks in advance to anyone reading this and considering any ideas or advice on any of the above. Any help is deeply appreciated.

Kind regards
Ross

@tuanphan You met all my needs, thank you sincerely for your time

On 9/24/2021 at 11:37 AM, tuanphan said:

If you need to add 2 buttons on multiple pages, we can conver it to Code Block, then you just copy-paste, no need to edit any code. What do you think?

I need to add it to three pages, and only those three:

https://www.gerafoundation.com/gordon

https://www.gerafoundation.com/james

https://www.gerafoundation.com/ross

What would you suggest is best? Id like to understand the basics of CCS / Code Block to do it myself so that I dont have to keep bothering you :] I really appreciate your help and the time you've given to respond

6 hours ago, tuanphan said:

/* James page mobile buttons side by side */

The code worked a charm. Could you explain the logic in the code? Ive tried replicating your solution for another page: https://www.gerafoundation.com/ross in where I edited the following line

6 hours ago, tuanphan said:

yui_3_17_2_1_1632108358222_2371

changing it to:

yui_3_17_2_1_1632106842580_2916

But no good.

Site URL: https://www.gerafoundation.com

Hi, I'd like to align two buttons side by side in the mobile view of my website. Ive seen my question asked several times before on here where a CSS code is the recommended solution. I'd like to apply this affect to specific pages on my website and not the entire website. I cant figure out which part of the CSS code targets the specific page. Can someone help me with this? I'd like to have the "prev" and "next" buttons side by side, however they currently become above and below only in the mobile version, example https://www.gerafoundation.com/james