Online Table Resources List
Bath Bomb Connoisseur

Age: 31 | Height: | Race: Accepted | Nationality: Natural | Citizenship: Hollowed Grounds
Level: - Strg: - Dext: - Endr: - Luck: - Int:
Played by: lancydulac Offline
Change author:
Posts: 485 | Total: 8,707
MP: 509
#1
Hello everyone!

Recently a lot of people on the site have been trying their hand at making tables and I myself have been brushing up on my css/html/javascript skills and knowledge; I figured I'd try and give everyone a list of resources that I use that might help out.

This is a collection of general resources for basics, more complicated things, fun bits and bobs. One thing: If you can't get something linked here to work for you, please don't come and ask me about it - I probably don't know why it isn't working. I'm not an expert.

Remember: The best way to learn CSS (or really any kind of code) is to just fake it til you make it, piss about and learn by failing!

If you really can't work something out, there is the #coding-help channel in the COTF discord server, however please try to use this only if you've really tried to fix something yourself first! You'll be better at CSS for the time spent trying to improve it (and you'll feel like a rock star if you solve it).

1. BASICS AND GENERAL RESOURCES

HTML COLOUR WHEEL - Self explanatory. For Hex colour codes (eg. #000000).

Google Fonts - Great selection of fonts that will work in most internet browsers. To import a font to your table, click 'choose this style' on any fonts page, copy the url given into the top of your code, then put the name of the code in the 'font-family' of the text you'd like to change.

CSS Drive (Thanks to Time for suggestion!) - Allows you to upload an image and see colour palettes made from it; gives hex codes as well.

Sky's base codes - If you don't feel confident writing your own code, it's good to build off a base. Skys are clean and easy to use! This post also contains a section explaining what each bit of code does and how to edit it, which I strongly suggest you read before beginning. (There's also a base code guide from Neo here).

w3schools - Fantastic website full of tutorials for both HTML and CSS (and Javascript if you want to be fancy). Has a page on basically anything you can do, explains it plainly and gives you examples. If you're struggling with anything, search it on here.

CSS Reference - On this site you can search for anything you're having trouble with with ctrl+f and find out more about it!

Also, this might sound sarcastic, but it isn't: if you're struggling with something in particular, try and google your problem as specifically as you can. I've often found solutions from obscure forum posts I found on google.

2. GIFS/IMAGES

Pixlr X - A simple but capable image editor for cropping images, resizing them, with plenty of filters too. (NOTE: If you want to put a gradient on a table image, eg like in this table, you need to use an image editing software, eg Photoshop or GIMP, if you're not made of money :-P).

Giphy - With a Giphy account, you can make gifs from youtube videos! You'll need an account, but then you can just click 'create', put in the URL, and off you go. Great for characters with less popular face claims. If you don't need to edit the gif after making, giphy also hosts the gif, so you can use the URL in the table.

Ezgif - Good online gif editor! Lets you crop, speed up, slow down, resize, add text to, etc etc...gifs! Will not host them afterwards though, so you'll need to download the gif then upload it to an image hosting service (for gifs, I'd recommend Giphy).

Imgur - Image hosting site good for putting your edited images up onto. Would advise you use this for PNGs, JPEGs, but not GIFs.

Pexels / Unsplash / Pixabay - Various free stock image sites, good for table background images, like the succulent picture in the back of this table.

Tips for finding gifs/images:
  • this might not work if your FC is uncommon, but searching 'FC name gif hunt' often brings up tumblr posts with hundreds of collected gifs. eg. here's a Domhnall Gleeson one.
  • if you're looking for nice still images, try 'FC name photoshoot'. Also good for this is fansites for that specific celebrity, if they have any, because these often keep archives of past photoshoots.
  • On google images, if you click 'tools' beneath the search, you can filter images by size and colour. Useful if you need gifs of a certain mood or size for your table!

3. FUN

This is just a collection of fun bits and bobs to try out when you're a little more practiced. Will update this section as I find things. Some of these things will be obnoxious when overused or used together, so please be sensible about what you use and how much of it.

Gradient text - I used this in this table. Transitions the font from one colour to another throughout the post. However, you cannot use the 'say' colour change macro with this!

Glitch text - Lets you make creepy ģ̸̝̞̬̈̈̆ľ̵̝̔̅͋̍̎̄i̸͍̖͖͎̠̼̓̉͘͘t̵̨̡̻̰̮̫͛̈́̉̇̚c̷̡̙̟̩̲͋̊͋ḩ̶͓̹͔̲̟͈̌̊͠ ̴̤̼́̀̒́̀̕ṱ̶̻̗͔̮̺́͂͑̒͜ę̴͎̺̣͇̣̒̐̋͝͝͝x̸͔̼̏͒̚ţ̴̠̠̲̰̟̟͌̆̅͘. Good for little weird bits on quotes and so on, though I recommend you use this sparingly.

I hope this is useful for all y'all as you embark into table adventures! I look forward to seeing your resulting masterpieces!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)


RPG-D