Share your repls and programming experiences

← Back to all posts
Badges
h
CoolCoderSJ (507)

Have you ever wanted to add a tiny badge to your website? Or perhaps wanted to add a copyright symbol telling users who made the website without a full blown sticky footer? Now you can!

Introducing Badges

Very innovative name, I know.

Just add this piece of code to your website and you're all set! Just make sure to replace YOUR TEXT HERE with your text.
Also make sure to replace the link in line 2 of the following codeblock with your own link.

<link rel="stylesheet" href="https://badge.coolcodersj.repl.co/style.css">
<a class="badge" href="https://repl.it/@USER" target="_blank">
<img src="https://CoolCoderSJ.repl.co/replit-logo.svg" alt="replit" />YOUR TEXT HERE</a>

The badge is a small sticky badge in the bottom right corner. Example repl linked.

Multiple badges

Badges has support for up to 4 badges total. To add a badge, copy the same code, but change the class in line 2 to one of these classes -
badge This class is the bottom-most badge
badge2 This class is the second bottom-most badge
badge2 This class is the second topmost badge
badge4 This class is the topmost badge

Animations

When you hover over a badge, the replit logo spins. To prevent this, or if you're putting in your own image, add the class no-animate. An example of this is the Github badge (last badge on example). The replit logo spins, but the Github logo does not.

Edit: Thanks for trending guys!

Comments
hotnewtop
johnnyfrancis (20)

And don't forget to chance the link. Otherwise it will bring you to:
https://coolcodersj.repl.co/
DID YOU JUST TRY TO GET FREE ADVERTISING?!?!?!?!

CoolCoderSJ (507)

@johnnyfrancis that is an example repl. The above code says "https://replit.com/@user", where user is your username. I needed to put a valid url for it to work.

CoolCoderSJ (507)

@johnnyfrancis I have never and will never self-advertise on replit. I may put my content in a post, but will never try to advertise.

nbbcsf (3)

@CoolCoderSJ how did you make a single subdomain for your site? Usually it's https://<replname>.<username>.repl.co but yours is just https://<username>.repl.co ??

CoolCoderSJ (507)

@nbbcsf Name the repl your exact username. For example, that repl is named "CoolCoderSJ"

idontknoiw (0)

@nbbcsf If you create a repl named "nbbcsf", the URI will be something like "nbbcsf.repl.co" (assuming you using something that needs a site).

RohilPatel (1534)

If u go to freenom.com u can get like even more of a custom domain! @nbbcsf

novaflippers (62)

@RohilPatel freenom is a scam. sure they give you free domains, at the cost of your personal info exposed on the dark web, and the peace of mind that if your website is underated or overrated they will deregister it, and the fact that they have redirected people's registered domains to adult sites. get a free domain from the github student developer pack or buy one.

RohilPatel (1534)

Well, that's what people may say. Now show me evidence that any of what you are claiming is true @novaflippers

Whippingdot (567)

Luv tis, tho we should be able to customize the CSS and the icon, but in an easy way...

catchacoled (22)

You probably could change the image on it if you changed the name of the source for that image and it could possible change the image on is and the @Whippingdot

CoolCoderSJ (507)

@Whippingdot the image is customizable, just change the image source

as for the css, you can override it by using the badge CSS class

RohilPatel (1534)

If you want I could make something that does that @Whippingdot

CoolCoderSJ (507)

@RohilPatel if you know decent web dev customization is pretty easy as is.

RohilPatel (1534)

Best and cleanest if you just make an api smh @CoolCoderSJ

CoolCoderSJ (507)

@RohilPatel again- The code is literally 3 lines. If you know almost any html and/or css, you can customize it. The code is made for people who know html and/or css, I don't see any other way you could implement it without knowing any html at all.

Whippingdot (567)

fine i will customize it myself 😒😭 im lazy @CoolCoderSJ

ch1ck3n (1624)
.badge:hover{
  background-color: rgb(26, 43, 63) !important;
}
.badge{
  transition: 0.2s !important;
}
.badge img:hover, .badge:hover > img, .badge2 img:hover, .badge2:hover > img, .badge3 img:hover, .badge3:hover > img, .badge4 img:hover, .badge4:hover > img{
  animation-name: spin !important;
  animation-duration: 2s !important;
  animation-timing-function: cubic-bezier(0.80, 0, 0.20, 1) !important;
  animation-iteration-count: infinite !important;
}
@keyframes spin{
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1) rotate(90); }
  50% { transform: scale(1) rotate(180); }
  75% { transform: scale(1) rotate(270); }
  100% { transform: scale(1) rotate(360deg);}
}

add this to your css

CoolCoderSJ (507)

@ch1ck3n not sure what most of it is just by skimming, but it made things a lot better by adding transition: 0.2s !important;, thanks.

johnnyfrancis (20)

WAIT WHAT?!?!?!? Instead it brought me here:https://replit.com/@user?tab=comments

CoolCoderSJ (507)

@johnnyfrancis Sorry if it wasn't clear enough, but you have to change the link in the code in line 2 of the codeblock above. I have edited the post to make it clearer now.

noway15 (79)

POG

I want to get into webpage design someday, but I have no clue where to start. This is better than anything I could make

noway15 (79)

thx @CoolCoderSJ looks like I'll learn HTML and then once I have that down I gotta take up Java bcuz I want to make my own mobile app one day

PyraxisYT (0)

@noway15 codecademy is another great option for you

noway15 (79)

@CoolCoderSJ how do I upload an image to HTML?

CoolCoderSJ (507)

@noway15 do you mean a repl? If you mean a repl, click the three dots on the top right corner of the files bar, click upload file

To use an image in html, do

<img src="IMAGE URL HERE" alt="ALT TEXT HERE" />
noway15 (79)

@CoolCoderSJ yeah but like how do I find the image URL

CoolCoderSJ (507)

@noway15 right click on image > Copy Image Link

the text may vary between browsers

DSAJagat20 (1)

@noway15 HTML is the best language for webpages

noway15 (79)

ik @DSAJagat20 but my ultimate goal is to create mobile apps

DSAJagat20 (1)

@noway15 oh. mobile apps? I suggest python or JavaScript for that

CoolCoderSJ (507)

@noway15 Mobile apps are not made with HTML. To make a mobile app, you need one of the following languages -

  • Swift - iOS and macOS apps
  • Python - Desktop apps
  • Kotlin or Java - Android Apps

You can most certainly turn a website into a desktop app, but your goal is mobile.

IMightBeMe (30)

You could also use unity and build for iOS/android. It uses C# which is really similar to Java @DSAJagat20

noway15 (79)

ik @CoolCoderSJ which is why I want to make webpages first, then apps

IMightBeMe (30)

What do you mean? C# is similar to Java. The syntax is basically the same and C# was built off of Java. @mollthecoder

noway15 (79)

@IMightBeMe I have no clue what this argument is about but please don't use this comment thread to argue. Just make a post saying that

"C# and Java are almost the same."

settle your differences there.

CoolCoderSJ (507)

@noway15 @IMightBeMe I prefer you guys open a new repl and use multiplayer chat or threads as I get notifications for each message sent on this post.

tussiez (1513)

@noway15 @CoolCoderSJ Uhh, a lot of apps on the App Store are now just web apps (e.g Amazon).

Glitterpoop (17)

@noway15 two main ways:
if the image is online, and you're using chrome, right-
click>copy image address (provided that the website you're
copying from, did not use a local link from their local
computer)

now, if the image is offline:
1) if the image is 'example.jpeg' and it is located
locally on your pc, then in your code, you can just call
it 'example.jpeg'
2) if the image is 'example.jpeg' , and its located
locally on your disk, then open its file location, in file
explorer(windows). Right-click it > open with > google
chrome (or any other browser). Now, once browser pops up
with the image, copy the url from the url bar. it will be
something like c:/user/folder/subfolder/example.jpeg

LiamBerube (2)

@noway15 There is also mimo on mobile

hg0428 (192)

When I hover it gets a little bigger, then if I hover one more second it gets even bigger. Could you make the size change smother and remove the second size change?

thrkturner (5)

@FlaminHotValdez Wow! Your site looks really cool! Thanks for sharing it with us!

firefish (1004)

@FlaminHotValdez That's an amazing website! I wish I could make websites with CSS that good!

RayhanADev (1986)


Congrats, your post is the basis for my new ReplFans extension :)

CoolCoderSJ (507)

@RayhanADev awesome :D

Your injection looks nice...

RayhanADev (1986)

@CoolCoderSJ yeah I'm working on polishing it a bit, but so far so good :D

DepthStrider (10)

damn how did you get the https://coolcoderSJ.repl.co domain??? omg i neeeeeeeed it

tussiez (1513)

@DepthStrider Make a repl with your username: e.g tussiez.tussiez.repl.co == tussiez.repl.co

RohilPatel (1534)

Why not try and get a custom domain for free? @DepthStrider

DepthStrider (10)

@RohilPatel actually i do know how to do that and I actually do use one on a repl of mine (repl here). however the domain suffixes are stupid and have no relation to the project. The ones you can get for free are ones like .tk, .gq, etc, (those you can get from https://www.freenom.com) You can't get "premium" url suffixes for free that actually make sense and aren't meant for other countries** (like .bot, for instance, would be a sensible one. I make discord bots so that would be a sensible url suffix)

** What I mean by "from other countries": .tk is for Tokelau, a territory of New Zealand

DepthStrider (10)

I promise that none of the links in the above comment are rick rolls. just to be clear ;)

RohilPatel (1534)

Hee hee, but u gotta say, ml sounds somewhat professional. But yeah, ur right @DepthStrider

CoolCoderSJ (507)

@nameless12321 There are very clear instructions in the post. Please read it through carefully. If you do not know web dev, then you cannot use this.

ZarmDev (0)

transition: 0.5s;
It looks cleaner

JDOG787 (430)

looks good, maybe add a transition so its smoother?

CoolCoderSJ (507)

@JDOG787 added, looks much better now! Mind upvoting if you liked it?

FrancescoScotto (1)

@CoolCoderSJ I am recruiting devs for my team, I need someone who knows basic Node.js, and python. Do you wanna join?

LiamBerube (2)

@FrancescoScotto I know some basic python and am willing to help because I have nothing to code

FrancescoScotto (1)

@thrkturner Hey sorry for the 3 day late response (lol). Sure, you can join.

IntellectualGuy (689)

Hey for the GitHub logo I found a cool animation that someone made here, maybe you could implement it here?

CoolCoderSJ (507)

@IntellectualGuy I certainly could, but its highly customizable. You can change the URL of the image.

arbee (0)

Cool, buuuuuut DOWN WITH COPYRIGHT

  • This comment under a CC BY license
firefish (1004)

Yay! Something that looks better than shields!

jahands (0)

This is so cool!! Added it to my site https://uuid.rocks/ :D

RayhanADev (1986)

WOW, that's just beautiful! I love seeing these kewl little Replit things for Replit :D
Now if ReplAuth had beautful CSS like this...

JoeyLent (20)

@CoolCoderSJ Wow, I really like how this looks! I also like your other work! With a bit of tweaking, this could definitely prove useful in future projects.

I made my own fork and took a different approach. Using JavaScript, I was able to create custom HTML tags in replacement of classes. I elaborated a bit using comments in the code.

Happy coding!

CoolCoderSJ (507)

@JoeyLent your fork looks great! However, I prefer to stick with pure css because it is highly customizable by the client. If the user wishes, they can change the background color, font, etc. (Documentation coming soon) on their own. Your fork seems great, but it is a fixed setting.

PikachuB2005 (8)

@CoolCoderSJ So, I can't add multiple badges because they overlap... is there a way to change this without rewriting all of the code you have for it?

PikachuB2005 (8)

@CoolCoderSJ When you hover over the button it goes back down to the original position of the first badge.

PikachuB2005 (8)

Thanks. Just wanted to let you know.

Wilke000 (626)

This should be in templates

CoolCoderSJ (507)

@Wilke000 It could be

But i felt like sharing something that I had made

IMightBeMe (30)

How would I link this css file to my flask webpage?
Edit: NVM I can do the normal HTML for it.

novaflippers (62)

Bro this is amazing I can edit it a little bit to act like github

CoolCoderSJ (507)

@novaflippers what do you mean by "act like github"?

novaflippers (62)

@CoolCoderSJ Saying like a github widget that represents a github repository lmao

CoolCoderSJ (507)

@novaflippers done, look at the bottom-most badge on the example.

CoolCoderSJ (507)

@novaflippers If you want to copy the code for it, go to the example repl and copy lines 10-13, don't change image url, and customize as fits.

novaflippers (62)

@CoolCoderSJ Coolz nice, I want to add it to my personal website

Ravost (0)

I changed the cursor hover to context-menu and it also looks cool!
cursor: context-menu;