[manual] Build a custom header in Harmony

DownPW

Thanks dude

<baris>

For those using this widget area, I made a small change in harmony here https://github.com/NodeBB/nodebb-theme-harmony/commit/dd3eda3a16b0eb9114814b4422d1a61a1aba36fe so the widget fills the whole available space. If you are using this widget area to display icons and still want them to be aligned to the right just add a justify-content-end class to your container.

brazzerstop

Maybe this will look better?

Vote button (blue heart)

<svg width="150" height="28" viewBox="0 0 150 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.1457 9.926L39.8177 19H37.6077L34.2797 9.926H36.2297L38.7257 17.141L41.2087 9.926H43.1457ZM47.4348 19.117C46.7415 19.117 46.1175 18.9653 45.5628 18.662C45.0082 18.35 44.5705 17.9123 44.2498 17.349C43.9378 16.7857 43.7818 16.1357 43.7818 15.399C43.7818 14.6623 43.9422 14.0123 44.2628 13.449C44.5922 12.8857 45.0385 12.4523 45.6018 12.149C46.1652 11.837 46.7935 11.681 47.4868 11.681C48.1802 11.681 48.8085 11.837 49.3718 12.149C49.9352 12.4523 50.3772 12.8857 50.6978 13.449C51.0272 14.0123 51.1918 14.6623 51.1918 15.399C51.1918 16.1357 51.0228 16.7857 50.6848 17.349C50.3555 17.9123 49.9048 18.35 49.3328 18.662C48.7695 18.9653 48.1368 19.117 47.4348 19.117ZM47.4348 17.531C47.7642 17.531 48.0718 17.453 48.3578 17.297C48.6525 17.1323 48.8865 16.8897 49.0598 16.569C49.2332 16.2483 49.3198 15.8583 49.3198 15.399C49.3198 14.7143 49.1378 14.19 48.7738 13.826C48.4185 13.4533 47.9808 13.267 47.4608 13.267C46.9408 13.267 46.5032 13.4533 46.1478 13.826C45.8012 14.19 45.6278 14.7143 45.6278 15.399C45.6278 16.0837 45.7968 16.6123 46.1348 16.985C46.4815 17.349 46.9148 17.531 47.4348 17.531ZM54.6459 13.293V16.777C54.6459 17.0197 54.7022 17.1973 54.8149 17.31C54.9362 17.414 55.1355 17.466 55.4129 17.466H56.2579V19H55.1139C53.5799 19 52.8129 18.2547 52.8129 16.764V13.293H51.9549V11.798H52.8129V10.017H54.6459V11.798H56.2579V13.293H54.6459ZM64.2619 15.243C64.2619 15.503 64.2446 15.737 64.2099 15.945H58.9449C58.9883 16.465 59.1703 16.8723 59.4909 17.167C59.8116 17.4617 60.2059 17.609 60.6739 17.609C61.3499 17.609 61.8309 17.3187 62.1169 16.738H64.0799C63.8719 17.4313 63.4733 18.0033 62.8839 18.454C62.2946 18.896 61.5709 19.117 60.7129 19.117C60.0196 19.117 59.3956 18.9653 58.8409 18.662C58.2949 18.35 57.8659 17.9123 57.5539 17.349C57.2506 16.7857 57.0989 16.1357 57.0989 15.399C57.0989 14.6537 57.2506 13.9993 57.5539 13.436C57.8573 12.8727 58.2819 12.4393 58.8279 12.136C59.3739 11.8327 60.0023 11.681 60.7129 11.681C61.3976 11.681 62.0086 11.8283 62.5459 12.123C63.0919 12.4177 63.5123 12.838 63.8069 13.384C64.1103 13.9213 64.2619 14.541 64.2619 15.243ZM62.3769 14.723C62.3683 14.255 62.1993 13.8823 61.8699 13.605C61.5406 13.319 61.1376 13.176 60.6609 13.176C60.2103 13.176 59.8289 13.3147 59.5169 13.592C59.2136 13.8607 59.0273 14.2377 58.9579 14.723H62.3769ZM71.99 13.293H70.729V19H68.883V13.293H68.064V11.798H68.883V11.434C68.883 10.55 69.1343 9.9 69.637 9.484C70.1397 9.068 70.898 8.873 71.912 8.899V10.433C71.47 10.4243 71.1623 10.498 70.989 10.654C70.8157 10.81 70.729 11.0917 70.729 11.499V11.798H71.99V13.293ZM76.3675 19.117C75.6741 19.117 75.0501 18.9653 74.4955 18.662C73.9408 18.35 73.5031 17.9123 73.1825 17.349C72.8705 16.7857 72.7145 16.1357 72.7145 15.399C72.7145 14.6623 72.8748 14.0123 73.1955 13.449C73.5248 12.8857 73.9711 12.4523 74.5345 12.149C75.0978 11.837 75.7261 11.681 76.4195 11.681C77.1128 11.681 77.7411 11.837 78.3045 12.149C78.8678 12.4523 79.3098 12.8857 79.6305 13.449C79.9598 14.0123 80.1245 14.6623 80.1245 15.399C80.1245 16.1357 79.9555 16.7857 79.6175 17.349C79.2881 17.9123 78.8375 18.35 78.2655 18.662C77.7021 18.9653 77.0695 19.117 76.3675 19.117ZM76.3675 17.531C76.6968 17.531 77.0045 17.453 77.2905 17.297C77.5851 17.1323 77.8191 16.8897 77.9925 16.569C78.1658 16.2483 78.2525 15.8583 78.2525 15.399C78.2525 14.7143 78.0705 14.19 77.7065 13.826C77.3511 13.4533 76.9135 13.267 76.3935 13.267C75.8735 13.267 75.4358 13.4533 75.0805 13.826C74.7338 14.19 74.5605 14.7143 74.5605 15.399C74.5605 16.0837 74.7295 16.6123 75.0675 16.985C75.4141 17.349 75.8475 17.531 76.3675 17.531ZM83.2795 12.916C83.5135 12.5347 83.8168 12.2357 84.1895 12.019C84.5708 11.8023 85.0042 11.694 85.4895 11.694V13.605H85.0085C84.4365 13.605 84.0032 13.7393 83.7085 14.008C83.4225 14.2767 83.2795 14.7447 83.2795 15.412V19H81.4595V11.798H83.2795V12.916ZM97.574 19H95.754L91.633 12.773V19H89.813V9.913H91.633L95.754 16.153V9.913H97.574V19ZM102.571 19.117C101.877 19.117 101.253 18.9653 100.699 18.662C100.144 18.35 99.7063 17.9123 99.3856 17.349C99.0736 16.7857 98.9176 16.1357 98.9176 15.399C98.9176 14.6623 99.0779 14.0123 99.3986 13.449C99.7279 12.8857 100.174 12.4523 100.738 12.149C101.301 11.837 101.929 11.681 102.623 11.681C103.316 11.681 103.944 11.837 104.508 12.149C105.071 12.4523 105.513 12.8857 105.834 13.449C106.163 14.0123 106.328 14.6623 106.328 15.399C106.328 16.1357 106.159 16.7857 105.821 17.349C105.491 17.9123 105.041 18.35 104.469 18.662C103.905 18.9653 103.273 19.117 102.571 19.117ZM102.571 17.531C102.9 17.531 103.208 17.453 103.494 17.297C103.788 17.1323 104.022 16.8897 104.196 16.569C104.369 16.2483 104.456 15.8583 104.456 15.399C104.456 14.7143 104.274 14.19 103.91 13.826C103.554 13.4533 103.117 13.267 102.597 13.267C102.077 13.267 101.639 13.4533 101.284 13.826C100.937 14.19 100.764 14.7143 100.764 15.399C100.764 16.0837 100.933 16.6123 101.271 16.985C101.617 17.349 102.051 17.531 102.571 17.531ZM107.195 15.373C107.195 14.645 107.338 13.9993 107.624 13.436C107.918 12.8727 108.317 12.4393 108.82 12.136C109.322 11.8327 109.881 11.681 110.497 11.681C110.965 11.681 111.411 11.785 111.836 11.993C112.26 12.1923 112.598 12.461 112.85 12.799V9.38H114.696V19H112.85V17.934C112.624 18.2893 112.308 18.5753 111.901 18.792C111.493 19.0087 111.021 19.117 110.484 19.117C109.877 19.117 109.322 18.961 108.82 18.649C108.317 18.337 107.918 17.8993 107.624 17.336C107.338 16.764 107.195 16.1097 107.195 15.373ZM112.863 15.399C112.863 14.957 112.776 14.58 112.603 14.268C112.429 13.9473 112.195 13.7047 111.901 13.54C111.606 13.3667 111.29 13.28 110.952 13.28C110.614 13.28 110.302 13.3623 110.016 13.527C109.73 13.6917 109.496 13.9343 109.314 14.255C109.14 14.567 109.054 14.9397 109.054 15.373C109.054 15.8063 109.14 16.1877 109.314 16.517C109.496 16.8377 109.73 17.0847 110.016 17.258C110.31 17.4313 110.622 17.518 110.952 17.518C111.29 17.518 111.606 17.4357 111.901 17.271C112.195 17.0977 112.429 16.855 112.603 16.543C112.776 16.2223 112.863 15.841 112.863 15.399ZM123.168 15.243C123.168 15.503 123.151 15.737 123.116 15.945H117.851C117.895 16.465 118.077 16.8723 118.397 17.167C118.718 17.4617 119.112 17.609 119.58 17.609C120.256 17.609 120.737 17.3187 121.023 16.738H122.986C122.778 17.4313 122.38 18.0033 121.79 18.454C121.201 18.896 120.477 19.117 119.619 19.117C118.926 19.117 118.302 18.9653 117.747 18.662C117.201 18.35 116.772 17.9123 116.46 17.349C116.157 16.7857 116.005 16.1357 116.005 15.399C116.005 14.6537 116.157 13.9993 116.46 13.436C116.764 12.8727 117.188 12.4393 117.734 12.136C118.28 11.8327 118.909 11.681 119.619 11.681C120.304 11.681 120.915 11.8283 121.452 12.123C121.998 12.4177 122.419 12.838 122.713 13.384C123.017 13.9213 123.168 14.541 123.168 15.243ZM121.283 14.723C121.275 14.255 121.106 13.8823 120.776 13.605C120.447 13.319 120.044 13.176 119.567 13.176C119.117 13.176 118.735 13.3147 118.423 13.592C118.12 13.8607 117.934 14.2377 117.864 14.723H121.283ZM129.645 14.346C130.156 14.4413 130.576 14.697 130.906 15.113C131.235 15.529 131.4 16.0057 131.4 16.543C131.4 17.0283 131.278 17.4573 131.036 17.83C130.802 18.194 130.459 18.48 130.009 18.688C129.558 18.896 129.025 19 128.41 19H124.497V9.926H128.241C128.856 9.926 129.385 10.0257 129.827 10.225C130.277 10.4243 130.615 10.7017 130.841 11.057C131.075 11.4123 131.192 11.8153 131.192 12.266C131.192 12.7947 131.049 13.2367 130.763 13.592C130.485 13.9473 130.113 14.1987 129.645 14.346ZM126.317 13.67H127.981C128.414 13.67 128.748 13.5747 128.982 13.384C129.216 13.1847 129.333 12.903 129.333 12.539C129.333 12.175 129.216 11.8933 128.982 11.694C128.748 11.4947 128.414 11.395 127.981 11.395H126.317V13.67ZM128.15 17.518C128.592 17.518 128.934 17.414 129.177 17.206C129.428 16.998 129.554 16.7033 129.554 16.322C129.554 15.932 129.424 15.6287 129.164 15.412C128.904 15.1867 128.553 15.074 128.111 15.074H126.317V17.518H128.15ZM137.998 14.346C138.509 14.4413 138.93 14.697 139.259 15.113C139.588 15.529 139.753 16.0057 139.753 16.543C139.753 17.0283 139.632 17.4573 139.389 17.83C139.155 18.194 138.813 18.48 138.362 18.688C137.911 18.896 137.378 19 136.763 19H132.85V9.926H136.594C137.209 9.926 137.738 10.0257 138.18 10.225C138.631 10.4243 138.969 10.7017 139.194 11.057C139.428 11.4123 139.545 11.8153 139.545 12.266C139.545 12.7947 139.402 13.2367 139.116 13.592C138.839 13.9473 138.466 14.1987 137.998 14.346ZM134.67 13.67H136.334C136.767 13.67 137.101 13.5747 137.335 13.384C137.569 13.1847 137.686 12.903 137.686 12.539C137.686 12.175 137.569 11.8933 137.335 11.694C137.101 11.4947 136.767 11.395 136.334 11.395H134.67V13.67ZM136.503 17.518C136.945 17.518 137.287 17.414 137.53 17.206C137.781 16.998 137.907 16.7033 137.907 16.322C137.907 15.932 137.777 15.6287 137.517 15.412C137.257 15.1867 136.906 15.074 136.464 15.074H134.67V17.518H136.503ZM143.557 9.77L143.349 16.049H141.815L141.594 9.77H143.557ZM142.621 19.091C142.291 19.091 142.018 18.9913 141.802 18.792C141.594 18.584 141.49 18.3283 141.49 18.025C141.49 17.7217 141.594 17.4703 141.802 17.271C142.018 17.063 142.291 16.959 142.621 16.959C142.941 16.959 143.206 17.063 143.414 17.271C143.622 17.4703 143.726 17.7217 143.726 18.025C143.726 18.3283 143.622 18.584 143.414 18.792C143.206 18.9913 142.941 19.091 142.621 19.091Z" fill="#212529"/>
<path d="M6.95234 15.3211L14.3639 22.2405C14.6715 22.5276 15.0775 22.6875 15.5 22.6875C15.9225 22.6875 16.3285 22.5276 16.6361 22.2405L24.0477 15.3211C25.2945 14.1604 26 12.5321 26 10.8299V10.592C26 7.72504 23.9287 5.28051 21.1027 4.80883C19.2324 4.49711 17.3293 5.10824 15.9922 6.44535L15.5 6.93754L15.0078 6.44535C13.6707 5.10824 11.7676 4.49711 9.89727 4.80883C7.07129 5.28051 5 7.72504 5 10.592V10.8299C5 12.5321 5.70547 14.1604 6.95234 15.3211Z" fill="url(#paint0_linear_202_13)"/>
<defs>
<linearGradient id="paint0_linear_202_13" x1="5" y1="4.90914" x2="26" y2="4.90914" gradientUnits="userSpaceOnUse">
<stop stop-color="#0D6EFD"/>
<stop offset="1" stop-color="#061DED"/>
</linearGradient>
</defs>
</svg>

Vote button (red heart)

<svg width="150" height="28" viewBox="0 0 150 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.1457 9.926L39.8177 19H37.6077L34.2797 9.926H36.2297L38.7257 17.141L41.2087 9.926H43.1457ZM47.4348 19.117C46.7415 19.117 46.1175 18.9653 45.5628 18.662C45.0082 18.35 44.5705 17.9123 44.2498 17.349C43.9378 16.7857 43.7818 16.1357 43.7818 15.399C43.7818 14.6623 43.9422 14.0123 44.2628 13.449C44.5922 12.8857 45.0385 12.4523 45.6018 12.149C46.1652 11.837 46.7935 11.681 47.4868 11.681C48.1802 11.681 48.8085 11.837 49.3718 12.149C49.9352 12.4523 50.3772 12.8857 50.6978 13.449C51.0272 14.0123 51.1918 14.6623 51.1918 15.399C51.1918 16.1357 51.0228 16.7857 50.6848 17.349C50.3555 17.9123 49.9048 18.35 49.3328 18.662C48.7695 18.9653 48.1368 19.117 47.4348 19.117ZM47.4348 17.531C47.7642 17.531 48.0718 17.453 48.3578 17.297C48.6525 17.1323 48.8865 16.8897 49.0598 16.569C49.2332 16.2483 49.3198 15.8583 49.3198 15.399C49.3198 14.7143 49.1378 14.19 48.7738 13.826C48.4185 13.4533 47.9808 13.267 47.4608 13.267C46.9408 13.267 46.5032 13.4533 46.1478 13.826C45.8012 14.19 45.6278 14.7143 45.6278 15.399C45.6278 16.0837 45.7968 16.6123 46.1348 16.985C46.4815 17.349 46.9148 17.531 47.4348 17.531ZM54.6459 13.293V16.777C54.6459 17.0197 54.7022 17.1973 54.8149 17.31C54.9362 17.414 55.1355 17.466 55.4129 17.466H56.2579V19H55.1139C53.5799 19 52.8129 18.2547 52.8129 16.764V13.293H51.9549V11.798H52.8129V10.017H54.6459V11.798H56.2579V13.293H54.6459ZM64.2619 15.243C64.2619 15.503 64.2446 15.737 64.2099 15.945H58.9449C58.9883 16.465 59.1703 16.8723 59.4909 17.167C59.8116 17.4617 60.2059 17.609 60.6739 17.609C61.3499 17.609 61.8309 17.3187 62.1169 16.738H64.0799C63.8719 17.4313 63.4733 18.0033 62.8839 18.454C62.2946 18.896 61.5709 19.117 60.7129 19.117C60.0196 19.117 59.3956 18.9653 58.8409 18.662C58.2949 18.35 57.8659 17.9123 57.5539 17.349C57.2506 16.7857 57.0989 16.1357 57.0989 15.399C57.0989 14.6537 57.2506 13.9993 57.5539 13.436C57.8573 12.8727 58.2819 12.4393 58.8279 12.136C59.3739 11.8327 60.0023 11.681 60.7129 11.681C61.3976 11.681 62.0086 11.8283 62.5459 12.123C63.0919 12.4177 63.5123 12.838 63.8069 13.384C64.1103 13.9213 64.2619 14.541 64.2619 15.243ZM62.3769 14.723C62.3683 14.255 62.1993 13.8823 61.8699 13.605C61.5406 13.319 61.1376 13.176 60.6609 13.176C60.2103 13.176 59.8289 13.3147 59.5169 13.592C59.2136 13.8607 59.0273 14.2377 58.9579 14.723H62.3769ZM71.99 13.293H70.729V19H68.883V13.293H68.064V11.798H68.883V11.434C68.883 10.55 69.1343 9.9 69.637 9.484C70.1397 9.068 70.898 8.873 71.912 8.899V10.433C71.47 10.4243 71.1623 10.498 70.989 10.654C70.8157 10.81 70.729 11.0917 70.729 11.499V11.798H71.99V13.293ZM76.3675 19.117C75.6741 19.117 75.0501 18.9653 74.4955 18.662C73.9408 18.35 73.5031 17.9123 73.1825 17.349C72.8705 16.7857 72.7145 16.1357 72.7145 15.399C72.7145 14.6623 72.8748 14.0123 73.1955 13.449C73.5248 12.8857 73.9711 12.4523 74.5345 12.149C75.0978 11.837 75.7261 11.681 76.4195 11.681C77.1128 11.681 77.7411 11.837 78.3045 12.149C78.8678 12.4523 79.3098 12.8857 79.6305 13.449C79.9598 14.0123 80.1245 14.6623 80.1245 15.399C80.1245 16.1357 79.9555 16.7857 79.6175 17.349C79.2881 17.9123 78.8375 18.35 78.2655 18.662C77.7021 18.9653 77.0695 19.117 76.3675 19.117ZM76.3675 17.531C76.6968 17.531 77.0045 17.453 77.2905 17.297C77.5851 17.1323 77.8191 16.8897 77.9925 16.569C78.1658 16.2483 78.2525 15.8583 78.2525 15.399C78.2525 14.7143 78.0705 14.19 77.7065 13.826C77.3511 13.4533 76.9135 13.267 76.3935 13.267C75.8735 13.267 75.4358 13.4533 75.0805 13.826C74.7338 14.19 74.5605 14.7143 74.5605 15.399C74.5605 16.0837 74.7295 16.6123 75.0675 16.985C75.4141 17.349 75.8475 17.531 76.3675 17.531ZM83.2795 12.916C83.5135 12.5347 83.8168 12.2357 84.1895 12.019C84.5708 11.8023 85.0042 11.694 85.4895 11.694V13.605H85.0085C84.4365 13.605 84.0032 13.7393 83.7085 14.008C83.4225 14.2767 83.2795 14.7447 83.2795 15.412V19H81.4595V11.798H83.2795V12.916ZM97.574 19H95.754L91.633 12.773V19H89.813V9.913H91.633L95.754 16.153V9.913H97.574V19ZM102.571 19.117C101.877 19.117 101.253 18.9653 100.699 18.662C100.144 18.35 99.7063 17.9123 99.3856 17.349C99.0736 16.7857 98.9176 16.1357 98.9176 15.399C98.9176 14.6623 99.0779 14.0123 99.3986 13.449C99.7279 12.8857 100.174 12.4523 100.738 12.149C101.301 11.837 101.929 11.681 102.623 11.681C103.316 11.681 103.944 11.837 104.508 12.149C105.071 12.4523 105.513 12.8857 105.834 13.449C106.163 14.0123 106.328 14.6623 106.328 15.399C106.328 16.1357 106.159 16.7857 105.821 17.349C105.491 17.9123 105.041 18.35 104.469 18.662C103.905 18.9653 103.273 19.117 102.571 19.117ZM102.571 17.531C102.9 17.531 103.208 17.453 103.494 17.297C103.788 17.1323 104.022 16.8897 104.196 16.569C104.369 16.2483 104.456 15.8583 104.456 15.399C104.456 14.7143 104.274 14.19 103.91 13.826C103.554 13.4533 103.117 13.267 102.597 13.267C102.077 13.267 101.639 13.4533 101.284 13.826C100.937 14.19 100.764 14.7143 100.764 15.399C100.764 16.0837 100.933 16.6123 101.271 16.985C101.617 17.349 102.051 17.531 102.571 17.531ZM107.195 15.373C107.195 14.645 107.338 13.9993 107.624 13.436C107.918 12.8727 108.317 12.4393 108.82 12.136C109.322 11.8327 109.881 11.681 110.497 11.681C110.965 11.681 111.411 11.785 111.836 11.993C112.26 12.1923 112.598 12.461 112.85 12.799V9.38H114.696V19H112.85V17.934C112.624 18.2893 112.308 18.5753 111.901 18.792C111.493 19.0087 111.021 19.117 110.484 19.117C109.877 19.117 109.322 18.961 108.82 18.649C108.317 18.337 107.918 17.8993 107.624 17.336C107.338 16.764 107.195 16.1097 107.195 15.373ZM112.863 15.399C112.863 14.957 112.776 14.58 112.603 14.268C112.429 13.9473 112.195 13.7047 111.901 13.54C111.606 13.3667 111.29 13.28 110.952 13.28C110.614 13.28 110.302 13.3623 110.016 13.527C109.73 13.6917 109.496 13.9343 109.314 14.255C109.14 14.567 109.054 14.9397 109.054 15.373C109.054 15.8063 109.14 16.1877 109.314 16.517C109.496 16.8377 109.73 17.0847 110.016 17.258C110.31 17.4313 110.622 17.518 110.952 17.518C111.29 17.518 111.606 17.4357 111.901 17.271C112.195 17.0977 112.429 16.855 112.603 16.543C112.776 16.2223 112.863 15.841 112.863 15.399ZM123.168 15.243C123.168 15.503 123.151 15.737 123.116 15.945H117.851C117.895 16.465 118.077 16.8723 118.397 17.167C118.718 17.4617 119.112 17.609 119.58 17.609C120.256 17.609 120.737 17.3187 121.023 16.738H122.986C122.778 17.4313 122.38 18.0033 121.79 18.454C121.201 18.896 120.477 19.117 119.619 19.117C118.926 19.117 118.302 18.9653 117.747 18.662C117.201 18.35 116.772 17.9123 116.46 17.349C116.157 16.7857 116.005 16.1357 116.005 15.399C116.005 14.6537 116.157 13.9993 116.46 13.436C116.764 12.8727 117.188 12.4393 117.734 12.136C118.28 11.8327 118.909 11.681 119.619 11.681C120.304 11.681 120.915 11.8283 121.452 12.123C121.998 12.4177 122.419 12.838 122.713 13.384C123.017 13.9213 123.168 14.541 123.168 15.243ZM121.283 14.723C121.275 14.255 121.106 13.8823 120.776 13.605C120.447 13.319 120.044 13.176 119.567 13.176C119.117 13.176 118.735 13.3147 118.423 13.592C118.12 13.8607 117.934 14.2377 117.864 14.723H121.283ZM129.645 14.346C130.156 14.4413 130.576 14.697 130.906 15.113C131.235 15.529 131.4 16.0057 131.4 16.543C131.4 17.0283 131.278 17.4573 131.036 17.83C130.802 18.194 130.459 18.48 130.009 18.688C129.558 18.896 129.025 19 128.41 19H124.497V9.926H128.241C128.856 9.926 129.385 10.0257 129.827 10.225C130.277 10.4243 130.615 10.7017 130.841 11.057C131.075 11.4123 131.192 11.8153 131.192 12.266C131.192 12.7947 131.049 13.2367 130.763 13.592C130.485 13.9473 130.113 14.1987 129.645 14.346ZM126.317 13.67H127.981C128.414 13.67 128.748 13.5747 128.982 13.384C129.216 13.1847 129.333 12.903 129.333 12.539C129.333 12.175 129.216 11.8933 128.982 11.694C128.748 11.4947 128.414 11.395 127.981 11.395H126.317V13.67ZM128.15 17.518C128.592 17.518 128.934 17.414 129.177 17.206C129.428 16.998 129.554 16.7033 129.554 16.322C129.554 15.932 129.424 15.6287 129.164 15.412C128.904 15.1867 128.553 15.074 128.111 15.074H126.317V17.518H128.15ZM137.998 14.346C138.509 14.4413 138.93 14.697 139.259 15.113C139.588 15.529 139.753 16.0057 139.753 16.543C139.753 17.0283 139.632 17.4573 139.389 17.83C139.155 18.194 138.813 18.48 138.362 18.688C137.911 18.896 137.378 19 136.763 19H132.85V9.926H136.594C137.209 9.926 137.738 10.0257 138.18 10.225C138.631 10.4243 138.969 10.7017 139.194 11.057C139.428 11.4123 139.545 11.8153 139.545 12.266C139.545 12.7947 139.402 13.2367 139.116 13.592C138.839 13.9473 138.466 14.1987 137.998 14.346ZM134.67 13.67H136.334C136.767 13.67 137.101 13.5747 137.335 13.384C137.569 13.1847 137.686 12.903 137.686 12.539C137.686 12.175 137.569 11.8933 137.335 11.694C137.101 11.4947 136.767 11.395 136.334 11.395H134.67V13.67ZM136.503 17.518C136.945 17.518 137.287 17.414 137.53 17.206C137.781 16.998 137.907 16.7033 137.907 16.322C137.907 15.932 137.777 15.6287 137.517 15.412C137.257 15.1867 136.906 15.074 136.464 15.074H134.67V17.518H136.503ZM143.557 9.77L143.349 16.049H141.815L141.594 9.77H143.557ZM142.621 19.091C142.291 19.091 142.018 18.9913 141.802 18.792C141.594 18.584 141.49 18.3283 141.49 18.025C141.49 17.7217 141.594 17.4703 141.802 17.271C142.018 17.063 142.291 16.959 142.621 16.959C142.941 16.959 143.206 17.063 143.414 17.271C143.622 17.4703 143.726 17.7217 143.726 18.025C143.726 18.3283 143.622 18.584 143.414 18.792C143.206 18.9913 142.941 19.091 142.621 19.091Z" fill="#212529"/>
<path d="M6.95234 15.3211L14.3639 22.2405C14.6715 22.5276 15.0775 22.6875 15.5 22.6875C15.9225 22.6875 16.3285 22.5276 16.6361 22.2405L24.0477 15.3211C25.2945 14.1604 26 12.5321 26 10.8299V10.592C26 7.72504 23.9287 5.28051 21.1027 4.80883C19.2324 4.49711 17.3293 5.10824 15.9922 6.44535L15.5 6.93754L15.0078 6.44535C13.6707 5.10824 11.7676 4.49711 9.89727 4.80883C7.07129 5.28051 5 7.72504 5 10.592V10.8299C5 12.5321 5.70547 14.1604 6.95234 15.3211Z" fill="url(#paint0_linear_202_13)"/>
<defs>
<linearGradient id="paint0_linear_202_13" x1="5" y1="4.90914" x2="26" y2="4.90914" gradientUnits="userSpaceOnUse">
<stop stop-color="#FD0D0D"/>
<stop offset="1" stop-color="#ED5906"/>
</linearGradient>
</defs>
</svg>

Mastodon button

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_202_48)">
<rect width="28" height="28" rx="3" fill="url(#paint0_linear_202_48)"/>
<path d="M23.5871 16.2056C23.308 17.6418 21.0868 19.2136 18.5357 19.5183C17.2055 19.677 15.8958 19.8229 14.4991 19.7588C12.2151 19.6542 10.4128 19.2136 10.4128 19.2136C10.4128 19.436 10.4265 19.6477 10.454 19.8457C10.7509 22.0998 12.6891 22.2348 14.525 22.2978C16.3781 22.3612 18.0281 21.8409 18.0281 21.8409L18.1042 23.5161C18.1042 23.5161 16.8081 24.2122 14.4991 24.3402C13.2259 24.4102 11.645 24.3081 9.80369 23.8208C5.81018 22.7638 5.12339 18.5069 5.01831 14.1876C4.98627 12.9052 5.00602 11.6959 5.00602 10.6845C5.00602 6.26781 7.89985 4.9732 7.89985 4.9732C9.35899 4.30308 11.8628 4.02128 14.4657 4H14.5296C17.1325 4.02128 19.6379 4.30308 21.097 4.9732C21.097 4.9732 23.9907 6.26781 23.9907 10.6845C23.9907 10.6845 24.027 13.9432 23.5871 16.2056Z" fill="white"/>
<path d="M20.5774 11.0272V16.375H18.4586V11.1843C18.4586 10.0901 17.9982 9.53477 17.0774 9.53477C16.0592 9.53477 15.5489 10.1936 15.5489 11.4963V14.3375H13.4427V11.4963C13.4427 10.1936 12.9323 9.53477 11.9141 9.53477C10.9932 9.53477 10.5328 10.0901 10.5328 11.1843V16.375H8.41409V11.0272C8.41409 9.93416 8.69239 9.06561 9.25138 8.42302C9.82782 7.78044 10.5827 7.45103 11.5198 7.45103C12.6041 7.45103 13.4251 7.86775 13.968 8.70132L14.4957 9.586L15.0236 8.70132C15.5663 7.86775 16.3874 7.45103 17.4717 7.45103C18.4087 7.45103 19.1636 7.78044 19.7402 8.42302C20.2991 9.06561 20.5774 9.93416 20.5774 11.0272Z" fill="#5865F2"/>
</g>
<defs>
<linearGradient id="paint0_linear_202_48" x1="14" y1="0" x2="14" y2="28" gradientUnits="userSpaceOnUse">
<stop stop-color="#6364FF"/>
<stop offset="1" stop-color="#563BCD"/>
</linearGradient>
<clipPath id="clip0_202_48">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>

phenomlab

@baris said in [manual] Build a custom header in Harmony:

justify-content-end

Worth noting that if anyone wants the specific CSS for this, it's below

[data-widget-area="brand-header"] {
    justify-content: end;
    display: flex;
}

omega

@baris Of course this is a good idea, it's brilliant and great to see it implemented too.

If you remember I suggested last year to put widget areas in the columns, perhaps consider that too?

Also, what about a widget area in the sticky navbar!

So many widget areas to play in.

I always liked the simplicity of widget system and I think it get's forgotten about, or underutilised (or maybe that's just me), but widgets have a different and maybe greater potential in Harmony theme or was being considered in the time of early dev, but as you can see now is the time!

erkki70

This is remarkable and so useful, thanks a lot for for sharing!

@baris Is it ok to use the code below (I mean is it permitted?) in custom html and javascript to enable the tooltips on the icons as implemented here?
Thanks in advance!
Html

<a class="btn-ghost p-2" href="#" rel="noreferrer noopener" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Twitter" data-bs-original-title="Twitter"><i style="color: #1DA1F2;" class="fa fa-2x fa-twitter-square"></i></a>

Javascript

if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', prepareFooter);
    } else {
        prepareFooter();
    }

    function prepareFooter() {
        
        $('[data-widget-area="brand-header"] [data-bs-toggle="tooltip"]').tooltip({
    trigger: 'hover'
});
        

        $(document).ready(function () {
            app.coldLoad();
        });
    }

brazzerstop

@erkki70 you can try this method to show tooltip without JS
https://community.nodebb.org/topic/17213/manual-build-a-dock-panel/3?_=1691498624448

erkki70

@brazzerstop Thank you for the pointer, I'll check it out!
And thank you for your awesome and very useful contributions, easy and comprehensive, well done!

<baris>

@erkki70 sure these are standard bootstrap tooltips. Feel free to use it.

erkki70

@baris Awesome, thank you!