Badges
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 badgebadge2 This class is the second bottom-most badgebadge2 This class is the second topmost badgebadge4 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!
Luv tis, tho we should be able to customize the CSS and the icon, but in an easy way...
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
@Whippingdot the image is customizable, just change the image source
as for the css, you can override it by using the badge CSS class
If you want I could make something that does that @Whippingdot
@RohilPatel if you know decent web dev customization is pretty easy as is.
make it pease @RohilPatel
Best and cleanest if you just make an api smh @CoolCoderSJ
@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.
Using a link bruh @CoolCoderSJ
fine i will customize it myself 😒😭 im lazy @CoolCoderSJ
.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
@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.
WAIT WHAT?!?!?!? Instead it brought me here:https://replit.com/@user?tab=comments
@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.
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 https://w3schools.com/ is always a great place to start :)
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
@noway15 codecademy is another great option for you
too late @PixelblockYT
@CoolCoderSJ how do I upload an image to HTML?
@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" />@CoolCoderSJ yeah but like how do I find the image URL
@noway15 right click on image > Copy Image Link
the text may vary between browsers
@noway15 HTML is the best language for webpages
ik @DSAJagat20 but my ultimate goal is to create mobile apps
@noway15 oh. mobile apps? I suggest python or JavaScript for that
@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.
You could also use unity and build for iOS/android. It uses C# which is really similar to Java @DSAJagat20
@IMightBeMe Not really
ik @CoolCoderSJ which is why I want to make webpages first, then apps
What do you mean? C# is similar to Java. The syntax is basically the same and C# was built off of Java. @mollthecoder
@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.
@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.
Yea sorry about that. @CoolCoderSJ
@noway15 @CoolCoderSJ Uhh, a lot of apps on the App Store are now just web apps (e.g Amazon).
@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
@noway15 There is also mimo on mobile
ok then @Glitterpoop
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?
that is kewl
I added myself - https://replit.com/@LingWu1/badge#index.html
SO COOL! I added it to my site
@FlaminHotValdez Wow! Your site looks really cool! Thanks for sharing it with us!
@thrkturner :D thanks
@FlaminHotValdez Your Welcome!
@FlaminHotValdez That's an amazing website! I wish I could make websites with CSS that good!
@firefish Thanks!
Congrats, your post is the basis for my new ReplFans extension :)
@RayhanADev awesome :D
Your injection looks nice...
@CoolCoderSJ yeah I'm working on polishing it a bit, but so far so good :D
damn how did you get the https://coolcoderSJ.repl.co domain??? omg i neeeeeeeed it
@DepthStrider Make a repl with your username: e.g tussiez.tussiez.repl.co == tussiez.repl.co
@tussiez Thanks! :D
@DepthStrider No problem :)
Why not try and get a custom domain for free? @DepthStrider
@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
I promise that none of the links in the above comment are rick rolls. just to be clear ;)
Hee hee, but u gotta say, ml sounds somewhat professional. But yeah, ur right @DepthStrider
Wait what do I do?
@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.
transition: 0.5s;
It looks cleaner
@ZarmDev added, thanks
looks good, maybe add a transition so its smoother?
@JDOG787 added, looks much better now! Mind upvoting if you liked it?
@CoolCoderSJ noice! and sure
@CoolCoderSJ I am recruiting devs for my team, I need someone who knows basic Node.js, and python. Do you wanna join?
@FrancescoScotto no thanks :)
@CoolCoderSJ Ok thats cool
@FrancescoScotto I know some basic python and am willing to help because I have nothing to code
@FrancescoScotto I know python, can I join?
@thrkturner Hey sorry for the 3 day late response (lol). Sure, you can join.
@FrancescoScotto joined!
Hey for the GitHub logo I found a cool animation that someone made here, maybe you could implement it here?
@IntellectualGuy I certainly could, but its highly customizable. You can change the URL of the image.
Cool, buuuuuut DOWN WITH COPYRIGHT
- This comment under a CC BY license
Yay! Something that looks better than shields!
cool
@lilykhan thanks
This is so cool!! Added it to my site https://uuid.rocks/ :D
@CoolCoderSJ Thanks! Also congrats on your project being tweeted by Replit! https://twitter.com/replit/status/1377360311901069313
@jahands oh nice thats cool...!
WOW, that's just beautiful! I love seeing these kewl little Replit things for Replit :DNow if ReplAuth had beautful CSS like this...
@RayhanADev thanks!
lmao
@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!
@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.
@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 yep, working on that with https://replit.com/@CoolCoderSJ/badge-beta
@PikachuB2005 done, check updated post
@CoolCoderSJ thanks.
@CoolCoderSJ When you hover over the button it goes back down to the original position of the first badge.
Thanks. Just wanted to let you know.
This should be in templates
@Wilke000 It could be
But i felt like sharing something that I had made
How would I link this css file to my flask webpage?
Edit: NVM I can do the normal HTML for it.
Bro this is amazing I can edit it a little bit to act like github
@novaflippers what do you mean by "act like github"?
@CoolCoderSJ Saying like a github widget that represents a github repository lmao
@novaflippers done, look at the bottom-most badge on the example.
@CoolCoderSJ POG IT LOOKS SO GOOOD
@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.
@CoolCoderSJ Coolz nice, I want to add it to my personal website
very pog
@JWZ6 yep :D
I changed the cursor hover to context-menu and it also looks cool!
cursor: context-menu;
@Ravost nice!
IM USIN IT
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?!?!?!?!
@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.
@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.
@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 ??
@nbbcsf Name the repl your exact username. For example, that repl is named "CoolCoderSJ"
@CoolCoderSJ k i understand
@CoolCoderSJ cool thanks!
@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).
If u go to freenom.com u can get like even more of a custom domain! @nbbcsf
@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.
Well, that's what people may say. Now show me evidence that any of what you are claiming is true @novaflippers