#css sharing buttons
Explore tagged Tumblr posts
codeajaymargam Ā· 2 years ago
Text
Tumblr media
Read @Learn and Create Social Sharing Buttons Now...
0 notes
sesamestreetkid Ā· 3 months ago
Text
index (I hope to follow this tag system lol)
#blinkies #stamps #gifs #favicons
edit: thx for the love on this post. im going to try and continually update this!
ā‡© ā €websites that are FULL of other web graphics below ā‡© ā‡© (+ some html tools!) ā‡©
Graphics: blinkie maker : make your own blinkies! DOLLZ REVIVAL : a revival of pixel dolls where you can create and share your own. very cute! GlowTxt : create glowing transparent text gifs that say whatever u want HOARDER'S PILE : contains blinkies, buttons, stamps, and teddies plasticdino.neocities.org : blinkies Glitter Graphics : contains gifs, blinkies, dividers, and just sooo many web graphics Cute Kawaii Resources : contains gifs, blinkies, stamps, favicons, dividers, buttons, fonts, literally everything you need. its an insane resource Adrian's blinkie collection : collection of blinkies, stamps, and buttons ā˜† (supplies.ju.mp) : blinkies, stamps, buttons, & favicons twigbranch.carrd.co : blinkies lallys.carrd.co : blinkies, stamps, dividers, and other resources Bugleeblinkie.carrd.co : blinkies, and 3 very special gifs at the end ;) unshinesblinkies.carrd.co : blinkies The 88x31 GIF Collection : buttons. there are 5 parts! huge collection! Bonnibel's Graphic Collection : blinkies WELCOME TO GIFCITY : blinkies, dividers, favicons, stamps cass-tastrophe.carrd.co : blinkies, stamps kotatsuOS : blinkies Cute web graphics : blinkies, stamps, dividers, and a LOT of other graphics, all very cute
HTMLS/neocities Stuff: MDN (mozilla.org) : if you're just starting out like me this is super helpful HTML Tutorial (w3schools.com): same here! (offers other programming languages as well!) Accessibility Checker(Free Scan) : a site you can use to check accessibility/ADA compliance when making your website! it will point out what needs to be changed. it is free, but they also offer paid services if you need more help imagecolorpicker.com : hex code picker. i use this one because you can upload an image, paste clipboard, OR type in the website and it'll grab a screenshot for you! something simple that was made really well. cssgradient.io : helps you make css gradients for backgrounds or whatever else you need them for smartgb.com : a free guestbook service FC2 Counter! : free "site visits" and "online now" counters. fully customizable Unclosed Tag Checker by Alicia Ramirez : does as it says, checks for unclosed tags (although I recommend using a program that does this as you write anyways. I use Visual Studio Code. Status Cafe : an updateable and embeddable status that you can stick anywhere on your site! it is mostly customizable with CSS but I have noticed a few small quirks with it
e10's web (neocities.org) <- shameless site plug. show it some love :P
280 notes Ā· View notes
izicodes Ā· 9 months ago
Text
Convert HTML to Image: A Step-by-Step Guide āœØ
Tumblr media
Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?
Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discoveredĀ the solution~!
This is an old tutorial I made šŸ¼
Tumblr media
šŸ’› Set your environment
Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:
Tumblr media
We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of theĀ body elementĀ is where we'll add the functionality for the conversion.
Your page should resemble the following:
Tumblr media
As you can see, the "Click me" button will handle the conversion. We aim to convert everything within theĀ div.info-divĀ into an image.
šŸ’› Using the html2canvas JavaScript Library
The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:
The steps to put the library in your project:
Visit theĀ html2canvas websiteĀ for more information.
Copy the CDN link fromĀ here
Tumblr media
and include it in a script tag in your project's head tag in the HTML file:
Tumblr media
That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.
šŸ’› JavaScript Functionality
Here's the JavaScript code to handle the conversion:
Tumblr media
In this code, I want to turn the wholeĀ div.info-divĀ into an image, I put it into a variable inĀ const div = document.querySelector(".info-div");.
I also put the button into a variable inĀ const button = document.querySelector("button");
I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!
You can find similar code like this inĀ the documentationĀ of the html2canvas library:
Tumblr media
What is happening here is:
We add the div (or what the element we want to take an image of) into theĀ html2canvas([element]).then((canvas)
Added the image file type url to a variable =Ā const imageDataURL = canvas.toDataURL("image/png");Ā - You can replace theĀ pngĀ to other image file types such asĀ jpg,Ā jpegĀ etc
Created an anchor/link tag, added theĀ hrefĀ attribute toĀ imageDataURL
TheĀ downloadĀ attribute is where we will give the default name to the image file, I addedĀ "dog.png"
Perform theĀ click()Ā function to the anchor tag so it starts to download the image we created
And that's it!
šŸ’› The End
And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.
Tumblr media
If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! šŸ’–šŸ¼
Tumblr media
140 notes Ā· View notes
blackoutsys Ā· 6 days ago
Text
ā˜½ āœ¦ Welcome āœ¦ ā˜¾
Tumblr media
Helloo. We're the Blackout System.
ā˜‰ You may call us Astra
ā˜‰ Collectively we use They/Them pronouns.
ā˜‰ Bodily 19
ā˜‰ Black, AuDHD
ā˜‰ Generally we identify with Alterhumanity, though some of us may not.
ā˜‰ We're fine with interacting with others, and accept DMs and Asks about things. However, if you are under 16-17, we will likely block you if you attempt to befriend us, interacting with anyone below that makes us very uncomfortable. Otherwise we don't care if you interact with our posts, and it's a 50/50 on if we block you from following.
Tumblr media
BYF...
āœ¦ We don't participate in syscourse. We're not here to get into arguments, and would rather just share our own experiences.
āœ¦ We don't follow back/like posts. This blog is a sideblog to our main, which we'd like to keep mostly private. We'll occasionally reblog posts here, however.
āœ¦ We liberally use our block button. Most of the time it's not because someone did something "problematic", and is generally just us not vibing with their energy or thinking someone is generally unpleasant. Though we do block people who are genuinely problematic, we're just not gonna say shit about it here lmao.
āœ¦ We may use terms we've coined ourselves to describe our own system online.
āœ¦ We will not share our headmates if they're not the one posting. Do not ask, you won't receive a headcount nor names. All names are replaced with an emoji and a letter, at most, if they feel like signing off.
āœ¦ Do not ask for our Simply Plural/Octocon, or any other social medias.
āœ¦ We are pre-diagnosis, if that is an issue for you. While we're not seeking to get it on our medical records, we are also in the beginning stages of working with a trauma specialist to hopefully get a second opinion. This also might not be possible for many years as we live in an incredibly conservative state with few mental health opportunities.
Tumblr media
INTERESTS AND HOBBIES...
ā˜„ HOBBIES ā˜„
Digital Art, Animation, Webdev [HTML/CSS/Javascript], Gamedev [Godot], Embroidery/Sewing, Music Transcription, Tarot
ā˜„ GAMES ā˜„
Secret Histories [Cultist Simulator/Book Of Hours/The Lady Afterwards], Who's Lila, Warframe, FFXIV, Fields of Mistria, Risk of Rain 2, Splatoon 3, Hollow Knight, Rain World, VTM: Bloodhunt, Valheim, Terraria, Minecraft, Don't Starve Together
ā˜„ DIGITAL MEDIA ā˜„
Chainmail Chasers, Vita Carnis, Midwest Angelica, Interloper ARG, Emesis Blue
ā˜„ MOVIES/SHOWS ā˜„
Arcane [Only seen 1st season], The Owl House, Spiderverse, Delicious In Dungeon
ā˜„ BOOKS ā˜„
Blood Debts/Blood Justice, The Poisons We Drink
Tumblr media
21 notes Ā· View notes
tozettastone Ā· 8 months ago
Text
How to get rid of the muted users banner on AO3 in one minute or less
Tumblr media
You want to make this thing go away? Here's what you do.
1. Log in to AO3. From your dashboard view, click "Skins".
2. Create a new site skin (the button that says "create site skin") or edit your existing one.
3. Add the following to the CSS field:
p.notice.muted { display: none; }
4. Submit or save your skin.
5. Go back to your site skins and select "Use," for the one you just made.
6. Profit!
Tumblr media
You can do a lot of cool stuff with site skins (like hiding things you don't want to see, such as your own kudos or hit counter, etc). The site is intended to be highly customisable for users!
There are tutorials for these posted to AO3. You can find many of them in the AO3 Site Skin tag (specific) or the AO3 Tutorial tag (which is more general). But you can also find people sharing their site skin hacks in places like Reddit or tumblr if you go looking. :3
72 notes Ā· View notes
changes Ā· 2 years ago
Text
Friday, February 24th, 2023
šŸŒŸ New
On web, weā€™re continuing to tidy up the navigation drawer in the mobile layout of the site. The most recent addition is the Account submenu, which is where youā€™ll now find the items for Likes, Following, and Help, as well as a ā€œWhatā€™s newā€ button which opens this very blog.
Blogs will now receive celebratory birthday items in their activity feed! Previously these were only sent via email.
We were experimenting with serving GIFs as video files in some cases, to save bandwidth and to optimize the experience, but weā€™ve been unable to find a way to make it look and feel good enough. Weā€™ve rolled back all of these experiments.
Weā€™ve added support for starting timestamps when inserting a YouTube URL into your post.
In the post editor on the web, using Tab to navigate the text color options will now properly display a focus outline. Similarly, Tab support for audio and video blockā€™s play/pause button has been added. These changes also come with better screenreader support.
šŸ›  Fixed
On blog themes, images in posts created using the Neue Post Format will now display at a higher quality, and the cap on their ā€œnaturalā€ width (their width before any CSS is applied to them) has been raised from 540 pixels wide to 1280 pixels wide.
Fixed a bug that could cause people to be sent to the wrong language version of our Help docs when tapping on links to them on Tumblr.
Fixed a bug in the post editor on the web that was preventing the text blockā€™s ā€œchatā€ subtype placeholder from being translated properly to non-English languages.
Fixed a bug that was breaking the undo/redo history in the post editor on web when inserting an audio or video block.
Fixed a number of small bugs with the password strength indicator on the web, which is shown when starting a new account or changing your existing password.
On web, the inline Follow buttons in reblog trails were a bit too far off to the right for a brief time today, but thatā€™s been fixed.
šŸš§ Ongoing
Nothing to report here today.
šŸŒ± Upcoming
Nothing to report here today.
Experiencing an issue? File a Support Request and weā€™ll get back to you as soon as we can!
Want to share your feedback about something? Check out our Work in Progress blog and start a discussion with the community.
465 notes Ā· View notes
crownmemes Ā· 4 months ago
Text
Tumblr media
Advice; Where to Make Rules and About Pages
If you've read my advice post about the difference between about and rules pages and why they're both important, you may not be wondering the best way to make them. The good news is, there are plenty of options!
Tumblr
The simplest choice. In the past, people would make custom pages on their theme. However, since dash view has become popular (and you can't view custom pages via it, nor can you view them on mobile), most people simply post their about/rules page as a normal text post, and link to it in their pinned post. If you have a custom theme, make sure to link the pages in the navigation bar too!
Using a plain Tumblr post increases your page's readability, but reduces the amount of formatting you can do. If you make your pages elsewhere, you will be able to customise them a lot more.
Carrd
A free website maker. You can make a small site with a free account, and the prices are pretty reasonable if you need to make a bigger site. Carrd has a minimalist aesthetic, and it will also adjust what you make to fit a mobile browser (though this may break your formatting if you have designed something complicated).
Carrd is easy to use, but it is best used for simple designs. If you want to do something more complicated than a basic Carrd layout, you're going to spend a lot of time trying to make the formatting work. If you want multiple pages for your site, you're also going to spend a lot of time formatting as you can't clone pages, therefore have to recreate each one every time instead.
It uses markdown for formatting text. If you're familiar with it, this can speed up writing, but it may slow you down if you've never used it before.
One of the benefits of Carrd is that there are lots of free templates available within the rpc! Here are resources I found with a quick Google search, but there are plenty more out there if you look for them: [x] [x] [x]
Weebly
Another free website maker. You can make more for free here than you can on Carrd. Weebly sites should adapt to work on a mobile browser.
I've never seen anybody use Weebly for about/rules pages, but I do recommend it! It's very easy to use, and, unlike Carrd, you can copy and paste entire pages. This makes it ideal if you have lots of muses that you want to make individual about pages for.
It uses a more typical text editor than Carrd. Instead of markdown, it's more like Microsoft Word - where you highlight text and click buttons to add formatting. You also have HTML/CSS options.
Weebly does offer some free templates, but you're likely to want to edit them to suit your needs more. This is okay! It isn't difficult to do!
Google Docs
A popular, completely free option. As with Carrd, there are plenty of templates and resources within the rpc (here are three examples: [x] [x] [x]). These pages will be viewable on a mobile browser, but the theme may not translate well. Keep readability in mind if you use this option.
If you use this option, also make sure the link you share is viewer only and doesn't have editor permissions!
Other Options (WordPress, Self-Hosting, etc)
Don't feel you have to follow the crowd. If you like to use WordPress, use WordPress. You could also use Neocities, or any other website builder!
Personally, I already own a web domain because I have websites for other online activities, so I use about pages that I've coded from scratch and host them myself. For my rules page, I just use a Tumblr text post that's linked in my pinned post. In the past, I've used Carrd and Tumblr pages for about pages.
If you want to write your site using HTML, some free website hosters will allow you to do this (Neocities, for example). If you're interested in coding, I do recommend this! It allows you to have full customisability, and coding can be a really useful skill. However, one downside of this is it can make your pages hard to read on a mobile browser. It's up to you to decide how important this is.
If you're interested in learning HTML (as well as CSS, JavaScript, and other coding languages), this site is a great resource!
33 notes Ā· View notes
not-the-conversation-starter Ā· 2 months ago
Text
The Death Of A Website.
tl;dr click source to see an AU of my blog.
As many of you may not have heard, Cohost has gone read only. The website infamous for "Zero Discoverability" and its users "Not Being Funny." Servers will close down at the end of 2024, if not earlier, being backed up on the Internet Archive before that. Since their user counts were still low after 2 years (about half of all sign ups ever were from people evacuating twitter, which then didn't know how to use the site so most left almost immediately. Kind of hilarious) they didn't feel like anymore money bleeding OR the fact that a staff of only four people being on call 24/7 was worth it anymore.
However,
the people who DID use the site loved it. And they did some genuinely cool things on it, far cooler than anything I ever saw even in the glory days of Tumblr. You know, like Finn and Jake hi-fiving between 2 posts. Stuff like a playable maze, or a fully navigable 3d room you move around in with your mouse entirely within a post. They really did some cool stuff.
There were also a ton of really talented people, people like the composer Lena Raine(Celeste/Minecraft) who loved the site because you could just. Actually talk to people on it! Without an algorithm to boost their posts, the only people who saw it were genuinely looking for it.
Also some of them were just good posters, we did get Pikmin 18 billion and eleven from Cohost after all.
The point is, I think if anyone outside of Cohost actually knew what was being done on Cohost, it would of succeeded. There would of been enough active users for them to invest more. If I knew about all of this I would of been there way more!
But rather than just you blindly believing me, I decided to spend (almost) every hour I would of on Tumblr, on Cohost instead. Clicking that link, or the source, or the link on the source above in the tl;dr, will take you to my Cohost blog. At least while it's still read-only.
You should check it out. I reblogged a lot, but the first page or 2 (every 20 posts, I kept trying to stop but I got sentimental and reblogged more) is pretty much just people's last posts. I'd say give it 3 pages to see if you're interested or not in exploring more of what the website has to offer.
If you've ever wondered what people would post on a dying website,
If you ever wondered what some of the best posts people were making on Cohost that got shared again in its last dying moments were,
If you want some reference for what inside jokes would look like to an outsider,
If you're just bored and need something to scroll through,
if you ever wondered what I would of reblogged on that website if I remembered my password easily enough to log back in easily...
You could think of my blog as a small encapsulation of a small website. There's only 60 pages, including the ones from before the announcement from me just rarely using the site!
I reblogged all kinds of posts. Goodbyes, sarcastic hellos, mourning, long speeches about the spirit of Cohost set to sad music, nothing burgers, inside jokes I didn't understand, The New Garfield, posts I flat out didn't read past the title because they were too long and I just wanted to move on really there's a lot of posts to archive, CSS crimes, stuff I found funny, "Where to find me" and webrings and website posts for people I never knew, Love Honk, reviews for movies and games I never intend to play or watch, 88x31 buttons, music recommendations and history, entire games, signing up for RSS feeds, asks and answers related to other stuff I didn't share on accident, regular memes, Intern Secretary Eggbug, a post that's just an image hosted off-site so it'll update even after readonly, and so on.
(Nothing overtly NSFW. Tag search still works if you want that)
One that I, personally, am sad is gone. That I'm glad I got to see at least in its dying days. That I genuinely hope someone makes another attempt at creating.
31 notes Ā· View notes
codingquill Ā· 1 month ago
Text
Tumblr media
Hey guys! šŸ‘©šŸ»ā€šŸ’» Iā€™m excited to announce that Iā€™m officially starting the 100 Days CSS Challenge! Over the next few months, Iā€™ll tackle a new CSS challenge each day to finally check it off my to-do list (itā€™s been there for a while, but I never had the chance to dive in, even though itā€™s something I find fun and easy). And of course, Iā€™ll be sharing every step of the journey with you!
What is the 100 Days CSS Challenge?
The 100 Days CSS Challenge offers a fresh CSS task daily, ranging from creating simple buttons to designing complex animations.
What to Expect: For each challenge, Iā€™ll be posting a detailed blog entry where Iā€™ll:
Walk you through the steps I took to complete the task.
Highlight the key CSS features and concepts you can pick up along the way.
Stay Tuned: Whether you're learning CSS alongside me or just curious about front-end development, I hope these posts spark your interest! Letā€™s make these 100 days count. šŸ’»āœØ
Catch me every day at 8 p.m. CEST (GMT+2)!
6 notes Ā· View notes
skittlespizza Ā· 5 months ago
Note
hey my bro (mutual) how did you . learn html . like is there a specific guide that helped the most or was it just whatever you could find
HAII OKAY SO these are all my useful site links but sadgrl.online & eggramen.neocities.org will be your best friend!!! Eggramen has a shit ton of templates to choose from & sadgrl.online has a bunch of really useful tutorials!
^ SUPER USEFUL FOR CSS!!! This makes a lot of your css code automatic.
Live coding of html css, i always use this thang...
Also just googling "how to ____ html css" is VERY useful lol. So eggramen and sadgrl to start... LET ME KNOW IF YOU HAVE SPECIFIC QUESTIONS!!! i can also share some of my code if you'd like!!!
12 notes Ā· View notes
captainhoers Ā· 2 years ago
Text
Good day new Tumblr blogs!
I have noticed many people making blogs in the last couple of months. The reasons are unimportant. Today I want to talk about:
āœØ Tumblr Themes - A Public Service Announcement āœØ
A standout feature of Tumblr that it looks like theyā€™re trying to sweep under the rug is the ability to make your blog look like almost anything you want. The ā€œdefaultā€ Tumblr theme is, apparently, designed to look as much like Twitter as possible. You pick some colours, you pick a header, itā€™s dull, itā€™s drab, itā€™s boring. It looks like this.
Tumblr media
You can make it look like this!
Tumblr media
Or this!
Tumblr media
Or this, or literally infinite other things!
Tumblr media
Because thereā€™s a world of themes out there that you can install off the shelf, or if you feel like it you can input CSS and do all the fun things that HTML and CSS let you do! All you have to do is go here..
Tumblr media
And enable this little checkbox. The ā€œEdit Themeā€ button will appear and a world of possibilities will open.
Tumblr media
Enjoy having the design freedom of a custom webpage built into the architecture of an existing social network!
If you found this enlightening, please share it! Reblog, etc - Iā€™m think a lot of newer tumblr users genuinely donā€™t know about this feature, or donā€™t know how to turn it on!
140 notes Ā· View notes
codeajaymargam Ā· 2 years ago
Text
50+ Best CSS Social Share Buttons Examples 2023
Tumblr media
50+ BestĀ CSS Social Share Buttons Examples from hundreds of the CSS Social Share Buttons reviews in the market (Codepen.io) as drawn from Codeaj Commerce Ranking which is using Codeaj Commerce scores, rating reviews, search results, social data. The bellow reviews were picked manually by Codeaj Commerce experts, if your CSS Social Share Buttons does not include in the list, feel free to contact us. The best CSS Social Share Buttons css collection is ranked and result in April 24, 2023. You can find free CSS Social Share Buttons examples or options to CSS Social Share Buttons also.
Read More ...
0 notes
lensdeer Ā· 1 year ago
Text
Tumblr media Tumblr media Tumblr media Tumblr media
I finished my website's arcade highscores page! I'm not great at old arcade games, but I love improving the shitty highscores I get in my self-built arcade cabinet, and I thought sharing them publicly would help with motivation and/or to fill in the void of not having a good local arcade to go to.
I'm super proud of this layout! It looks cool on PC, with an entire arcade cabinet with functional buttons and a screen with a CRT filter done exclusively in pure CSS and HTML, but I also made it resize dynamically to stay functional when viewed on phones and screens as small as 200x200px! Because with modern CSS there's no excuse not to make websites mobile-accessible, even with fancy complex designs like this.
I also drew two stickers to put on the screen. They're half-ripped because of fucking course you'd try (and fail) to remove the stickers some asshole put on an arcade cabinet's screen lmfao
I made the CSS as readable as possible, in case anyone wants to use it in their own projects.
Enjoy!
20 notes Ā· View notes
izicodes Ā· 2 years ago
Text
Coding A Simple Firefox Extension
Tumblr media
Hiya! Today I want to share my experience creating a simple Firefox extension. I was a bit intimidated by the idea of creating an extension, but I was determined to give it a try! Been on my 'projects to-do' list for a long time! šŸ˜…
I found that the process was actually quite straightforward, and with some guidance from a couple of YouTube videos, I was able to create a working (temporary) extension in just an hour. My hope is that this post will serve as a helpful guide for anyone who is interested in creating their own Firefox extension~!
Tumblr media
What exactly are we making?
Tumblr media Tumblr media
We will be making a simple temporary extension - an extension that only you have access to e.g. end-users will not be able to use the extension. This is a way to test if your extension works and find issues. I might make another post on how to actually upload it for other people to use, but for now, this method is for you to use the extension.
This is the link to the official Mozilla Firefox 'Temporary installation' Guide' for extenisions - LINK
Now, for the steps into making the extension:
Setting up the development environment
Creating a manifest file
Adding a pop-up window
Attaching JavaScript functionality to a button
Load your extension in Firefox
Let's get started~!
Tumblr media
Step 1 - Setting up the development environment
Tumblr media Tumblr media
Obviously, you will need to have Firefox installed on your computer. You will also need a code editor, such as Visual Studio Code or Sublime Text, to write your code. I'm going to use VS Code.
In your code editor, create a new folder where you will store your extension files. You can name this folder whatever you like. For this example, I will call it 'Firefox Extension'. I also recommend adding the following files in the folder:
index.html (or in this case popup.html file)
icon image in .png or .jpg or similar formats
manifest.json - talked about in the next step
script.js
Step 2 - Creating a manifest file
Tumblr media
The most important file I believe when creating an extension is the manifest JSON file. This file will contain metadata about your extension, including its name, version, and permissions. In your new folder, create a new file called "manifest.json".
This is the general structure of the file. The icon size you need to have is 48x48 pixel size image and then you can have others to be responsive to screensizes, I just added one extra. The 'browser_action' part includes the default icon image that will display an icon in the Firefox toolbar and the popup html file. In 'scripts', that is where we will add the JavaScript code to run.
Step 3 - Adding a pop-up window
Tumblr media
The code simply displays the text "Hello World" and a button in the center of the window. I assume you're good at your HTML and CSS so I won't go into too much detail here but the CSS is in the style tags within the head tags and what we can see also is what is between the body tags - the 'Hello World' and the 'Click me!' button.
Don't forget to include the script tag at the end of the body tag so it'll link to the script.js file in your folder AND include "scripts": ["script.js"] in the manifest.json for the javascript code.
Step 4 - Attaching JavaScript functionality to a button
Tumblr media
Again, I hope you very basic JavaScript. This code basically adds an event listener to the button with the ID "myBtn" (which is the button with 'Click me!' on it). When the button is clicked, it changes the heading 1 text from 'Hello World' to 'The button was clicked!'.
And that it! Done with all the coding part and now to upload it for you to use~!
Step 5 - Load your extension in Firefox
Tumblr media
Open Firefox and type "about:debugging" in the address bar. This will open the Firefox Developer Tools page. Click the "This Firefox" section to the left of the page, then click "Load Temporary Add-on". Navigate to your extension folder and select the manifest.json file.
The extension is now loaded in Firefox! Click the icon in the toolbar to see your pop-up window!
Tumblr media
Whenever you make changes to the extension, back on the Firefox Developer Tools page, click the 'Reload' button on your extension section and changes should show up!
Tumblr media
I hope that this post has been helpful to you and that it has inspired you to create your own Firefox extension! šŸ‘©šŸ¾ā€šŸ’»šŸ’— Remember, the most important thing is to have fun and experiment with different ideas - play with the colours or sizes or the javascript code! Don't be afraid to try new things and explore!!
Extra links that helped me learn:
How to build an extension for Firefox in less than 5 minutes [video]
Temporary installation in Firefox [webpage]
Thanks for reading šŸ„°šŸ’—
168 notes Ā· View notes
klebald Ā· 24 days ago
Note
Got inspired by your website and am attempting to make myself one since my old spacehey got terminated. However Iā€™m having the hardest time figuring out how to link a second page and more importantly how to make containers for text. Very much struggling. An hour of effort and all I have is a background and a header. Iā€™ll figure it out eventually Iā€™m sure, but if I get desperate enough I may end up asking you for a couple codes here and there.
Do you have class today? Iā€™m in my earth science class right now. Really excited cause my math course on Friday is optional, so I get to sleep in a little later than usual.
Little old me, inspiration? No way, not a single bit true. The reason that I made one myself is because my Spacehey got terminated as-well. Every single social media known to man hates the Columbine shooters, I suppose. I wish you the best of luck on the hell that is HTML/CSS. If you are still yet to figure out a way to link to a second page, or to make containers, I have a couple of ways. I will happily share the page linking right now, actually, at the bottom of this, for when you do eventually discover how to code a container. You might want to try a table, tables are fun to work with, just a little more linear and confined feeling. I dislike using them for that reason. I do have class, I was in French last period, and I just got out of lunch. I am in Algebra right now. Being a junior, my schedule is the same every day aside from Thursday and Friday, where I have home room squished into the middle of the day very annoyingly. I wish my math course were optional, although, it's considerably easier to get through than some of my other classes. Earth science also does sound a lot nicer, know that I want to take your place. I have Chemistry next semester for what will be my science class, Sociology for history credits and Algebra right now until January. The order of Chemistry, and Creative Writing, which is my second core class for the next semester, being together makes zero sense to me. I hope that class is easy on you today, seeing that next period I have a FUCKING PRESENTATION. I can brag that I got to leave early Monday! If you want the new page to be linked using a button with text inside of it, the way my diary button appears on my main page, for example, the way I did it was this. (Albeit removing the slash in the first "a href", it won't embed if I don't break the code). <\a href="whatever page, you have to make a new html index page to have another page show up clickably. Tedious, I know" class="new-page-button">WHATEVER TEXT YOU WANT INSIDE OF THE BUTTON</a> And, the matching CSS that you need for it to.. Look like anything, that you should keep seperate, towards the top of the page is where I put mine, is this. .new-page-button { display: inline-block; padding: 15px 30px; {You can change ALL of these values by their pixels, try using codepen.io to preview how it looks live while you input things.} margin: 20px 0; font-size: 20px; font-weight: bold; text-shadow: 2px 2px 4px rgba(128, 128, 128, 1.5); color: #fff; text-decoration: none; background-image: url('WHATEVER BACKGROUND IMAGE YOU WANT FOR INSIDE THE BOX); background-size: cover; background-position: center; border: 0.8px solid #b0b0b0; border-top: 2.2px solid #b0b0b0; border-bottom: 2.2px solid #b0b0b0; border-radius: 0; letter-spacing: 2px; } If you want it to be an image of some kind, the HTML is this (same rule as before) <\div class="BUTTON"> <\a href="your page link(the new html one)" style="cursor: pointer;"> <\img src="image that you want to be what you click on to get to the page" alt="alttextforit" style="width: 60px; height: auto;"> </a> {All of this is alterable, like I said, customization.} And, of course, the CSS: .back-button-container { margin-top: 160px; text-align: center; } Let me know if any of this is of help to you at all, I hope that my very late explanation was useful.
6 notes Ā· View notes
diwayaps Ā· 2 months ago
Text
sidequests! with diwa
Tumblr media
sidequests! with diwa was the first attempt at executing the ideology i made this sideblog for.
Tumblr media
born from an inspired 1-month stint at learning old school webmastery, i obsessed over html and css to code my first blog semi from scratch. it's hosted on github and i have no intentions of taking it down (at least anytime soon).
it was quite fun and the skills i picked up has, in the most part, positively affected how i go about my existence on the internet.
Tumblr media
the contact page is my favourite page of the whole site. in fact, this blog links to it as my online guestbook.
Tumblr media Tumblr media
the landing page for the "blog" section is pretty neat too! i intended to make special 88x31 buttons for the "read the latest" iframe to advertise new blog posts. i only ever made one ā€“ the button i intended for the whole site itself, made for the introductory blog post.
Tumblr media
i thought about editing the about section when i made this sideblog but it was a cute time capsule of the time i made the site. i'm thinking of keeping it as such. i figure it might be fun to return to in a decade and see how much i've changed or how far i've come.
Tumblr media
the obvious question then is why i made this blog when i had already poured so much effort into coding my own. the very simple answer is that it became too intimidating to maintain.
to be clear, it would not have been difficult to just keep using it. i had already prepared templates of pages for regular use. copying and pasting wasn't what daunted me.
i grew up on the internet after the dot com bubble popped. the social internet was the internet i came of age in. sidequests! with diwa was simply out of my regular commute.
i experimented with medium, blew the dust off my wordpress, almost settled on substack, but i was raised on this dashboard ā€“ between the discourse and the discord.
time and time again i return to tumblr. so tumblr it is "to house my hobbies, interests, and thoughts." to continue quoting the about page on sidequests! with diwa, "i'm hoping that i can use this to share my experiences, opinions, and creations to the worldwide web in a way that feels genuinely me (and uniquely mine)."
3 notes Ā· View notes