Better document configuration option

On the custom badges page or somewhere easily reachable, there should be examples for the options. Especially for style [flat, flat-square, plastic, for-the-badge, social] I'd like to directly see the options without having to try them. The example also shows that named colors are supported and uses blue. I'd like to see what the other named colors are. The color produced by a blue badge is not the same color as using the CSS color name blue, so it would be interesting to see.

Of course it would also be interesting to have examples of icons etc., but the above things are more relevant I think.

Some points I have brainstorming this:

I understand this is more relevant there but IMO we should consider the option of making some of these a site wide change as all options mentioned here (style, color & logo) are available as an override option for all badges (see also optional parameters).
On the other hand, info is clearly provided as is, and is elegant and compact.
Color states clearly Hex, rgb, rgba, hsl, hsla and css named colors may be used. both in the static badge documentation and later in the parameters options, which are site wide as well.
logos option is mentioned site wide and links to simple-icons where the user can see all icons and pick them.
And while styles seems less informative here, the user can easily try out the styles in the preview, which there are not too many of.
We do have another place we could use, the documentation page, we can add pages and link to them to create something less compact that shows more examples, idea I prefer.

So with all that in mind, i propose the follows:

We add one example for each specific to the static badge page.
We make a more detailed and visual instructions in documentations
We link to the above at the site wide docs without examples.
We mention said links in the end of the static badge documentation.

Please let me know what you think about this and what changes we might benefit here.
Also, something you said that interests me is:

The color produced by a blue badge is not the same color as using the CSS color name blue, so it would be interesting to see.

This goes against docs, and you seem to be right.
namedColors as can be seen in badge-maker uses per-defined values that differ from CSS values:
Mentioned and examples are at readme
can be seen at color.js

export const namedColors = {
  brightgreen: '#4c1',
  green: '#97ca00',
  yellow: '#dfb317',
  yellowgreen: '#a4a61d',
  orange: '#fe7d37',
  red: '#e05d44',
  blue: '#007ec6',
  grey: '#555',
  lightgrey: '#9f9f9f',
}

So another task would be to update our docs.

The things you propose sound good to me.

I like the badge-maker readme page. It is quite informational; maybe we can use some information from there.

For tracking of progress here is a list of out application tasks

Add one example for style, color & logo to the static badge page
Make a more detailed and visual instructions in documentations
Link to the above at the site wide docs without examples
Mention said links in the end of the static badge documentation
Fix note about color, regarding named colors

docs: enhance static badge documentation with examples for style, col…

Navigation Menu

Repository navigation

Better document configuration option #11261

Some points I have brainstorming this:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Better document configuration option #11261

Description

Activity

jNullj commented on Aug 5, 2025

Some points I have brainstorming this:

Kamik423 commented on Aug 6, 2025

jNullj commented on Aug 6, 2025

heliocarlitos commented on Feb 15, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions