https://github.com/evermade/support-ukraine-banner
Zero setup banner for websites to show support for Ukrainians.
https://github.com/evermade/support-ukraine-banner
charity donations standwithukraine support ukraine ukraine-invasion ukrainewar ukrainewillstand
Last synced: 5 months ago
JSON representation
Zero setup banner for websites to show support for Ukrainians.
- Host: GitHub
- URL: https://github.com/evermade/support-ukraine-banner
- Owner: evermade
- License: gpl-2.0
- Created: 2022-03-05T07:39:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-05T12:16:06.000Z (over 4 years ago)
- Last Synced: 2025-05-22T11:36:20.060Z (about 1 year ago)
- Topics: charity, donations, standwithukraine, support, ukraine, ukraine-invasion, ukrainewar, ukrainewillstand
- Homepage:
- Size: 415 KB
- Stars: 16
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Support: support-banner-screenshot.png
Awesome Lists containing this project
README
# Zero setup banner for websites to show support for Ukrainians
Use this snippet to show your support for Ukrainians on the top of your website. Installing it takes minutes.
1. [About](#about)
1. [Installation](#installation)
1. [Multilingual version](#multilingual-version)
1. [Reporting issues](#reporting-issues)
## About
This 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.
Even though the banner has been tested on multiple websites it has some issues for example on sites with sticky navigation.
## Installation
Installation is dead simple. Just copy this code to your template right after the opening `` tag.
```
body {
margin-top: 35px;
}
.support-ukraine, .support-ukraine:visited {
position: absolute;
left: 0;
top: 0;
right: 0;
background: rgb(0,0,0);
display: flex;
justify-content: center;
padding-top: 5px;
padding-bottom: 5px;
z-index: 10000;
text-decoration: none;
font-family: arial;
}
.support-ukraine:hover, .support-ukraine:active {
background: black;
display: flex;
background: rgb(80,80,80);
text-decoration: none;
}
.support-ukraine__flag {
height: 25px;
margin-right: 10px;
}
.support-ukraine__flag__blue {
width: 40px;
height: 12.5px;
background: #005BBB;
}
.support-ukraine__flag__yellow {
width: 40px;
height: 12.5px;
background: #FFD500;
}
.support-ukraine__label {
color: white;
font-size: 12px;
line-height: 25px;
}
Donate to support Ukraine's independence.
```
## Installation via Google Tag Manager
You can also easily install the banner with GTM.
1. Log into Tag Manager
1. Go to Tags view
1. Click New to add new tag
1. Set tag type to Custom HTML
1. Paste the snippet above to HTML field
1. Add All Pages trigger
1. Publish your changes
## Multilingual version
In 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.
```
body {
margin-top: 35px;
}
.support-ukraine, .support-ukraine:visited {
position: absolute;
left: 0;
top: 0;
right: 0;
background: rgb(0,0,0);
display: flex;
justify-content: center;
padding-top: 5px;
padding-bottom: 5px;
z-index: 10000;
text-decoration: none;
font-family: arial;
}
.support-ukraine:hover, .support-ukraine:active {
background: black;
display: flex;
background: rgb(80,80,80);
text-decoration: none;
}
.support-ukraine__flag {
height: 25px;
margin-right: 10px;
}
.support-ukraine__flag__blue {
width: 40px;
height: 12.5px;
background: #005BBB;
}
.support-ukraine__flag__yellow {
width: 40px;
height: 12.5px;
background: #FFD500;
}
.support-ukraine__label {
color: white;
font-size: 12px;
line-height: 25px;
}
.support-ukraine__label--fi {
display: none;
}
body[lang="en"] .support-ukraine__label--en {
display: block;
}
body[lang="en"] .support-ukraine__label--fi {
display: none;
}
body[lang="fi"] .support-ukraine__label--fi {
display: block;
}
body[lang="fi"] .support-ukraine__label--en {
display: none;
}
Donate to support Ukraine's independence.
Tue Ukrainan itsenäisyyttä lahjoittamalla.
```
## Reporting issues
We are open for any feedback. Use GitHub [issue tracker](https://github.com/evermade/support-ukraine-banner/issues) to report issues.