Info
Art
Socials
Stalk Me
Get Stuff
Webrings
Etc.
Contact
bluesky
twitter
neocities
email
Get Your Own Random Quote BoxPut a Random Quote Box on your site!
It's guaranteed to work on free Neocities or GitHub sites. It will probably also work on other static site hosts like Nekoweb.
You can fully customize the box size, colors, attribution text, and of course, the quotes themselves!
> Customize your QuoteBox and fix common problems here.
Here's an example:
Alright, here's how you do it!
You'll need to copy and paste three things into three separate places:
- Ths Script: Make a new file somewhere in your site folders called quote.js. You can call it whatever you want, as long as it's unique and end with '.js'. Paste the script into this file.
- The Style: Copy and paste the style elements in your style.css file, or whevever else you keep your page style info.
- The HTML: Copy the HTML for the box itself and paste it wherever you want the box to appear.
| The Script: | |
| The Style: | |
| The HTML: |
Please keep the credit link visible. You can shorten the link text to just 'source' or 'credit' but please do not completely remove it. :)
You can customize the QuoteBox (colors, size etc) using the Style portion. More info on how to do that below. I personally like to make the size a percentage rather than fixed pixel dimensions, so it adjusts to window resizing.
Fixing Common Problems
My child, it's time to learn how to make your site more mobile-compatible. Do not be afraid. I will guide you. Open your stylesheet (/style.css) and size Now, add this to the bottom of your stylesheet: You now have a section in your stylesheet that modifies how certain Yes, I know phone pixel widths these days are a lot more than 600px --look up the difference between actual dimensions and viewport dimensions. I wrote the QuoteBox copy-and-paste code above with For very wide or narrow containers, you can change this percentage to anything you think looks best. My homepage, for example, has a very narrow center column, so my QuoteBox is set to 80% width. I recommend against using the format > Check out the previous troubleshoot thingy for information on making your QB look good in any size window including mobile view! Please make sure your Javascript file is referenced by the correct, exact name in the box HTML. If the .js file is in a folder, make sure it's referenced with the full path, such as: Open the .js file and copy an entire row from Paste this on a new line. Change the number within the brackets of You should have a neat column of increasing numbers, starting from ZERO. Should look like: At the bottom of the .js file you'll see a phrase like Every time you add a quote entry, you must update this number. It must always be one more than the final, highest entry number on the list. Let's say you have 20 quotes, and you want to delete quote[12]. You can't really 'just delete' that row. At time of writing this, the best way to remove an unwanted quote (other than the very last one, which is easily deleted), is to replace the quote text with something else. Duplicate the one before it if you can't think of a good one on the spot. When it comes to computers, if you have a list like this: 0, 1, 2, 3 --what you really have is a list of four numbers. Long story short, it's because the list starts with 0, and the Math at the bottom of the script goes by how many entries there are. A list from 0 to 6 is 7 numbers.The box looks too small on mobile, and if I make it bigger, it's too big on desktop!
#quotebox to look how you want it to appear on desktop.class and id elements appear on any viewport smaller than 600px wide (i.e. mobile view). Yay!!! Start copying more of your element tags in this area and play around with their sizes on mobile!The box is too small / too big / weird dimensions!
width:40%;, which has automatic height based on quote length, and a box width that stays 40% of whatever container you pasted it in.width: ???px and height: ???px.Quote not appearing!
/foldername/quote.js.How do I add more quotes?
quote[?] all the way to the semicolon ;.quote[?] to be one more than the previous one.quote[0], quote[1], quote[2]... and so on.Math.floor(4*Math.random()).How do I remove quotes?
Why does the 'Math' number have to always be one higher than the last quote's number?
