From 68586486661720b18c03f22ff874829753db16dd Mon Sep 17 00:00:00 2001 From: Inter Date: Sun, 24 Dec 2023 18:21:33 +0000 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Redid=20customisation=20do?= =?UTF-8?q?cumentation=20(#110)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- * 🛠️ fixed in 1. not showing up (it wasn't in a code block) * ♻️ changed the .svg part as it was completely wrong * ✨ replaced it with a new part about hexadecimal colors (1a.) * 📝 expanded on splitting the text (see 2a.) * 🛠️ fixed inaccurate code in the splitting the text part (2a.) * 🛠️ fixed inaccurate code in the logo (3.) part * ✨ added a new part about supported icons/logos (3a.) * 🔧 general minor improvements... --- --- CUSTOMISING.md | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/CUSTOMISING.md b/CUSTOMISING.md index 5ec3862..f64fb74 100644 --- a/CUSTOMISING.md +++ b/CUSTOMISING.md @@ -15,28 +15,40 @@ When using Shield.io badges in Markdown, you can modify various aspects such as badge color, text, logos, and styles. ### 1. Changing Badge Color -You can change the badge color by replacing with your desired hexadecimal color code in the badge URL. +You can change the badge color by replacing `` with your desired hexadecimal color code in the badge URL. For Example: `![Custom Badge](https://img.shields.io/badge/Custom%20Badge-blue?style=flat&logo=github)` Result: ![Custom Badge](https://img.shields.io/badge/Custom%20Badge-blue?style=flat&logo=github) -#### Replace `blue` with your desired color. Alternitavely, use .svg's, as seen in [markdown-badges](https://github.com/Ileriayo/markdown-badges.). +Replace `blue` with your desired color. + +### 1a. Using hexadecimal colors + +Alternatively, you can use hexadecimal colors to get a specific shade of a color that shield.io may not have built in. + +For Example: `![Custom Badge](https://img.shields.io/badge/Custom%20Badge-02354b?style=flat&logo=github)` + +Result: ![Custom Badge](https://img.shields.io/badge/Custom%20Badge-02354b?style=flat&logo=github) + --- ### 2. Modifying Text + Change the text displayed on the badge by altering the text after the badge name in the URL (in this case, its **Some%20Placeholder%20Text**). For Example: `![Modified Text Badge](https://img.shields.io/badge/Some%20Placeholder%20Text-blue?style=flat&logo=github)` Result: ![Modified Text Badge](https://img.shields.io/badge/Some%20Placeholder%20Text-blue?style=flat&logo=github) -> [!TIP] Want to split the text? Do this ⬇️: +### 2a. Splitting text -`![Modified Text Badge](https://img.shields.io/badge/That's%-Placeholder%20Text-blue?style=flat&logo=github)` +Want to split the text to have 2 different sections? You can do this by adding a `-` between the words. -Result: ![Modified Text Badge](https://img.shields.io/badge/This%20Was%20Made%20In-Markdown-blue?style=flat&logo=github) +For Example: `![Modified Text Badge](https://img.shields.io/badge/Made%20In-Markdown-blue?style=flat&logo=github)` + +Result: ![Modified Text Badge](https://img.shields.io/badge/Made%20In-Markdown-blue?style=flat&logo=github) --- ### 3. Adding Logos @@ -46,6 +58,10 @@ For Example (using the Docker logo): `![Logo Badge](https://img.shields.io/badge Result: ![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-black?style=flat&logo=docker) -Another Example (using the Sass logo): `![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-purple?style=flat&logo=Twitch)` +Another Example (using the Sass logo): `![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-pink?style=flat&logo=Sass)` -Result: ![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-pink?style=flat&logo=Sass) \ No newline at end of file +Result: ![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-pink?style=flat&logo=Sass) + +### 3a. Supported icons/logos + +Shield.io uses [Simple Icons](https://github.com/simple-icons/simple-icons) and a small sub-set of it's own icons/logos. If you can find your icon/logo on https://simpleicons.org, it will work with your badge. Shield.io also has its own few custom badges that you can find [here](https://github.com/badges/shields/tree/6e803367e0f3c8e0cc4196a700af37fac1629f4d/logo). \ No newline at end of file