{"id":25531963,"url":"https://github.com/evermade/support-ukraine-banner","last_synced_at":"2026-01-26T21:09:10.060Z","repository":{"id":135997178,"uuid":"466384638","full_name":"evermade/support-ukraine-banner","owner":"evermade","description":"Zero setup banner for websites to show support for Ukrainians.","archived":false,"fork":false,"pushed_at":"2022-03-05T12:16:06.000Z","size":425,"stargazers_count":16,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-22T11:36:20.060Z","etag":null,"topics":["charity","donations","standwithukraine","support","ukraine","ukraine-invasion","ukrainewar","ukrainewillstand"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evermade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"support-banner-screenshot.png","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-03-05T07:39:09.000Z","updated_at":"2025-04-06T10:24:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"6de87005-6500-4ebf-9c0a-5a7761ee67e5","html_url":"https://github.com/evermade/support-ukraine-banner","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/evermade/support-ukraine-banner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermade%2Fsupport-ukraine-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermade%2Fsupport-ukraine-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermade%2Fsupport-ukraine-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermade%2Fsupport-ukraine-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evermade","download_url":"https://codeload.github.com/evermade/support-ukraine-banner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermade%2Fsupport-ukraine-banner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28788182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:02:48.137Z","status":"ssl_error","status_checked_at":"2026-01-26T21:01:13.039Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charity","donations","standwithukraine","support","ukraine","ukraine-invasion","ukrainewar","ukrainewillstand"],"created_at":"2025-02-20T01:42:33.122Z","updated_at":"2026-01-26T21:09:10.052Z","avatar_url":"https://github.com/evermade.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zero setup banner for websites to show support for Ukrainians\n\nUse this snippet to show your support for Ukrainians on the top of your website. Installing it takes minutes.\n\n1. [About](#about)\n1. [Installation](#installation)\n1. [Multilingual version](#multilingual-version)\n1. [Reporting issues](#reporting-issues)\n\n## About\n\nThis code adds a small black banner on top of your website with Ukrainian flag and support message. It links to Unicef's donation site but you can change the link to point to a support channel of your choice.\n\nEven though the banner has been tested on multiple websites it has some issues for example on sites with sticky navigation.\n\n![Example of the banner](support-banner-screenshot.png \"Example of the banner\")\n\n## Installation\n\nInstallation is dead simple. Just copy this code to your template right after the opening `\u003cbody\u003e` tag.\n\n```\n\u003cstyle\u003e\nbody {\n\tmargin-top: 35px;\n}\n.support-ukraine, .support-ukraine:visited {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tright: 0;\n\tbackground: rgb(0,0,0);\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding-top: 5px;\n\tpadding-bottom: 5px;\n\tz-index: 10000;\n\ttext-decoration: none;\n\tfont-family: arial;\n}\n.support-ukraine:hover, .support-ukraine:active {\n\tbackground: black;\n\tdisplay: flex;\n\tbackground: rgb(80,80,80);\n\ttext-decoration: none;\n}\n.support-ukraine__flag {\n\theight: 25px;\n\tmargin-right: 10px;\n}\n.support-ukraine__flag__blue {\n\twidth: 40px;\n\theight: 12.5px;\n\tbackground: #005BBB;\n}\n.support-ukraine__flag__yellow {\n\twidth: 40px;\n\theight: 12.5px;\n\tbackground: #FFD500;\n}\n.support-ukraine__label {\n\tcolor: white;\n\tfont-size: 12px;\n\tline-height: 25px;\n}\n\u003c/style\u003e\n\u003ca class=\"support-ukraine\" href=\"https://help.unicef.org/ukraine-emergency\" target=\"_blank\" rel=\"nofollow noopener\" title=\"Donate to support Ukraine's independence.\"\u003e\n\t\u003cdiv class=\"support-ukraine__flag\" role=\"img\" aria-label=\"Flag of Ukraine\"\u003e\n\t\t\u003cdiv class=\"support-ukraine__flag__blue\"\u003e\u003c/div\u003e\n\t\t\u003cdiv class=\"support-ukraine__flag__yellow\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv class=\"support-ukraine__label\"\u003e\n\t\tDonate to support Ukraine's independence.\n\t\u003c/div\u003e\n\u003c/a\u003e\n```\n\n## Installation via Google Tag Manager\n\nYou can also easily install the banner with GTM.\n\n1. Log into Tag Manager\n1. Go to Tags view\n1. Click New to add new tag\n1. Set tag type to Custom HTML\n1. Paste the snippet above to HTML field\n1. Add All Pages trigger\n1. Publish your changes\n\n![Add snippet as Custom HTML](tag-manager.png \"Add snippet as Custom HTML\")\n\n## Multilingual version\n\nIn case you want to add multiple language use this version. It checks document body for `lang` attribute and displays the label in website's language.\n\n```\n\u003cstyle\u003e\nbody {\n\tmargin-top: 35px;\n}\n.support-ukraine, .support-ukraine:visited {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tright: 0;\n\tbackground: rgb(0,0,0);\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding-top: 5px;\n\tpadding-bottom: 5px;\n\tz-index: 10000;\n\ttext-decoration: none;\n  font-family: arial;\n}\n.support-ukraine:hover, .support-ukraine:active {\n\tbackground: black;\n\tdisplay: flex;\n\tbackground: rgb(80,80,80);\n\ttext-decoration: none;\n}\n.support-ukraine__flag {\n\theight: 25px;\n\tmargin-right: 10px;\n}\n.support-ukraine__flag__blue {\n\twidth: 40px;\n\theight: 12.5px;\n\tbackground: #005BBB;\n}\n.support-ukraine__flag__yellow {\n\twidth: 40px;\n\theight: 12.5px;\n\tbackground: #FFD500;\n}\n.support-ukraine__label {\n\tcolor: white;\n\tfont-size: 12px;\n\tline-height: 25px;\n}\n\n.support-ukraine__label--fi {\n  display: none;\n}\n\nbody[lang=\"en\"] .support-ukraine__label--en {\n  display: block;\n}\n\nbody[lang=\"en\"] .support-ukraine__label--fi {\n  display: none;\n}\n\nbody[lang=\"fi\"] .support-ukraine__label--fi {\n  display: block;\n}\n\nbody[lang=\"fi\"] .support-ukraine__label--en {\n  display: none;\n}\n\u003c/style\u003e\n\u003ca class=\"support-ukraine\" href=\"https://help.unicef.org/ukraine-emergency\" target=\"_blank\" rel=\"nofollow noopener\" title=\"Donate to support Ukraine's independence.\"\u003e\n\t\u003cdiv class=\"support-ukraine__flag\" role=\"img\" aria-label=\"Flag of Ukraine\"\u003e\n\t\t\u003cdiv class=\"support-ukraine__flag__blue\"\u003e\u003c/div\u003e\n\t\t\u003cdiv class=\"support-ukraine__flag__yellow\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv class=\"support-ukraine__label support-ukraine__label--en\"\u003eDonate to support Ukraine's independence.\u003c/div\u003e\n\t\u003cdiv class=\"support-ukraine__label support-ukraine__label--fi\"\u003eTue Ukrainan itsenäisyyttä lahjoittamalla.\u003c/div\u003e\n\u003c/a\u003e\n```\n\n## Reporting issues\n\nWe are open for any feedback. Use GitHub [issue tracker](https://github.com/evermade/support-ukraine-banner/issues) to report issues.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevermade%2Fsupport-ukraine-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevermade%2Fsupport-ukraine-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevermade%2Fsupport-ukraine-banner/lists"}