HP Bar Generator

Label Position:
Bold Font?
White Font?
Label:
Font Name:

Note: unless your font is common, it may not show up for all people! If you want to pick a neat custom font, you can import one.

To add a Google Fonts font:

Go to Google Fonts.
Find or search for the font of your choice.
Put the font name in the Font Name box above.
Back on Google Fonts, hit the "Quick-use" icon on the bottom-right of the font. It's an arrow in a box pointing to the right.
Scroll to part 3 of the page that shows up. Click over from "Standard" to "@import" and copy-paste the @import code in the box below.

Don't want to use Google Fonts? Any font with an @import URL will work!

Font Import

To use a flat background color, go to this site and find the code for the color you want, or type in a hexadecimal color code of your own.

To use a gradient background, go to this site and generate some code, then copy the result into the Color CSS text box.

When you're done, paste the text above at the place in your theme where you want the bar to appear, and paste the text below underneath any "meta" tags in your theme code. You'll be able to change it like any other aspect of your theme.

You can optionally include a recovery code in case you want to edit your bar later.