Jump to content


Photo

Badge


  • Please log in to reply
4 replies to this topic

#1 Bailey

Bailey

    Rank VIII Member

  • Web Developer
  • 755 posts
  • Gender:Male
  • Location:United Kingdom
  • Interests:Coding, duh..

Posted 26 December 2017 - 07:52 PM

Hello everyone,
 
I have created a nice looking badge that you can configure and include on your website:
 
Image looks similar to, but not exactly like:
 
 heliohost.org Please use .svg not .png or .jpg
 
Direct link:
https://img.shields....//heliohost.org
 
You can include this in HTML and define the height. I recommend only defining height OR width not both.

<a href="https://heliohost.org">
<img alt="Powered By HelioHost" style="height:100%" src="https://img.shields.io/badge/Powered By-HelioHost-F39433.svg?style=for-the-badge&link=https://bailey.guru&link=https://heliohost.org" />
</a>
Append &colorB=[HEX Colour] (for example &colorB=BD5D38) to the end of the URL to change the background colour behind "Heliohost" 
For example ...//heliohost.org&colorB=BD5D38

I've been on HelioHost for a little while now and have developed some of the web services. I use PHP, JavaScript, CSS, HTML, Python & more to develop my websites and apps over at Bailey.guru.
I maintain the wiki, GitHub and the Discord server along with other projects located on GitHub.


#2 miwilc

miwilc

    Rank III Member

  • Web Developer
  • 184 posts
  • Gender:Male
  • Location:London, GB
  • Interests:Sysadmin(-ing?)

Posted 26 December 2017 - 08:44 PM

Can the size be reduced to the default?, like the badge sizes on shields.io
Michael Wilcox,
Probably a bored Linux sysadmin.
You can contact me on Mastodon and Keybase

#3 Bailey

Bailey

    Rank VIII Member

  • Web Developer
  • 755 posts
  • Gender:Male
  • Location:United Kingdom
  • Interests:Coding, duh..

Posted 26 December 2017 - 08:46 PM

That is the default for that style but you can change the height using CSS

I've been on HelioHost for a little while now and have developed some of the web services. I use PHP, JavaScript, CSS, HTML, Python & more to develop my websites and apps over at Bailey.guru.
I maintain the wiki, GitHub and the Discord server along with other projects located on GitHub.


#4 maicol07

maicol07

    Rank III Member

  • Members
  • PipPipPip
  • 181 posts
  • Gender:Male
  • Location:Italy
  • Interests:Python, Android, Windows, HTML, PHP, JS, WordPress

Posted 29 December 2017 - 10:56 AM

Great badge @Bailey!

But there are two syntax errors:

So the correct code is:

<a href="https://heliohost.org">
<img alt="Powered By HelioHost" style="height:100%" src="https://img.shields.io/badge/Powered By-HelioHost-F39433.svg?style=for-the-badge&link=https://bailey.guru&link=https://heliohost.org">
</a>

Python, Android and web developer.

Check me out:

My website
My apps website

My GPlay Developer Page

Blog


#5 Bailey

Bailey

    Rank VIII Member

  • Web Developer
  • 755 posts
  • Gender:Male
  • Location:United Kingdom
  • Interests:Coding, duh..

Posted 29 December 2017 - 10:59 AM

Thanks, I corrected this on my own website but forgot to correct here.

Edit: Corrected thanks to maicol07

I've been on HelioHost for a little while now and have developed some of the web services. I use PHP, JavaScript, CSS, HTML, Python & more to develop my websites and apps over at Bailey.guru.
I maintain the wiki, GitHub and the Discord server along with other projects located on GitHub.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users