Court of the Fallen - Table Resources/Requests

Dew's Table Experiments [Open]

Mon, 09 Sep 2024 17:57:58 -0600

Lena

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut faucibus ex. Nulla ut dapibus neque.

"Vivamus mauris nulla, pharetra quis consectetur quis, dignissim vel nunc."

Vestibulum consectetur imperdiet ligula, vel varius turpis finibus sed. Nulla ut tincidunt risus, facilisis auctor felis. Quisque eu nibh semper, tincidunt eros eu, dictum arcu. Donec molestie pellentesque ligula, nec imperdiet nulla vulputate et. Morbi cursus sollicitudin elit, vel euismod neque molestie et. Proin eu lectus nisi. Duis iaculis elit quis enim euismod, quis mollis ligula scelerisque. Morbi et interdum nibh.

Fusce vehicula est at tellus ultrices fringilla. Nulla tincidunt ut diam nec volutpat. Quisque erat eros, dignissim nec imperdiet vel, ullamcorper nec dolor. Proin eu velit mauris. Proin auctor augue at magna vulputate malesuada. Suspendisse ac pretium ex. Vestibulum viverra nibh ut orci pretium, vel luctus massa ornare. Suspendisse dictum elit nec nibh ultrices, vel pellentesque enim iaculis.

QUOTE LINE ONE
QUOTE LINE TWO

Speech: d5419f

Header:

Code:

Lena

Footer: 
Code:

QUOTE LINE ONE
QUOTE LINE TWO

Rayo's Tables | Open

Tue, 30 May 2023 19:50:32 -0600

Octavius

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum arcu nec metus blandit, et iaculis elit fermentum. Donec vel viverra erat. Ut quis tortor mauris. Ut aliquet nec elit in vulputate. In vel eros venenatis, aliquam metus sed, consequat augue. Etiam consequat porttitor aliquet. Sed auctor nisl ipsum, eu luctus neque cursus sed. Aenean ullamcorper egestas rhoncus. Ut ultrices nulla ante, at vulputate diam tempus eget. Donec id risus a turpis tincidunt pellentesque. Duis at sodales quam. Morbi posuere ipsum non est porta, in ultricies elit interdum.

Donec hendrerit ultricies eros non iaculis. Fusce hendrerit lorem sed placerat facilisis. In interdum dui imperdiet, hendrerit arcu et, molestie neque. Suspendisse maximus a orci sed laoreet. Integer eget enim vulputate, egestas risus a, lobortis quam. Ut orci odio, condimentum at turpis eu, pellentesque condimentum est. Phasellus lobortis accumsan mattis. Phasellus quis est felis. Suspendisse et massa vel augue auctor tincidunt. Praesent sit amet consequat erat. Aenean lacinia lorem eget tempus consectetur. Donec convallis, sem quis euismod luctus, massa enim rhoncus sem, tincidunt sollicitudin justo tortor sed dui. Sed in viverra ante, ut maximus tortor. Etiam convallis rhoncus nunc sed varius. Curabitur efficitur commodo lectus, non fringilla velit tempor nec. Interdum et malesuada fames ac ante ipsum primis in faucibus.

quote quote quote quote quote quote quote quote

Speech: #2f3d43

Top:

Code:
Octavius


Bottom:
Code:
quote quote quote quote quote quote quote quote

Brit's Table Tragedies - Open!

Sat, 01 Jan 2022 16:50:30 -0700

This thread is for both table requests and completed request pick ups! Happy to do any manner of table, or specific requests if it's within my power such as desired placement of the photo (top, bottom, side) and photomanipulation for eye color and more.

The thread will say open/closed in the title to denote whether requests can be submitted.

So let's get this going!

Camilla

singular quote line goes right here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut faucibus ex. Nulla ut dapibus neque. "Vivamus mauris nulla, pharetra quis consectetur quis, dignissim vel nunc." Vestibulum consectetur imperdiet ligula, vel varius turpis finibus sed. Nulla ut tincidunt risus, facilisis auctor felis. Quisque eu nibh semper, tincidunt eros eu, dictum arcu. Donec molestie pellentesque ligula, nec imperdiet nulla vulputate et. Morbi cursus sollicitudin elit, vel euismod neque molestie et. Proin eu lectus nisi. Duis iaculis elit quis enim euismod, quis mollis ligula scelerisque. Morbi et interdum nibh.

Fusce vehicula est at tellus ultrices fringilla. Nulla tincidunt ut diam nec volutpat. Quisque erat eros, dignissim nec imperdiet vel, ullamcorper nec dolor. Proin eu velit mauris. Proin auctor augue at magna vulputate malesuada. Suspendisse ac pretium ex. "Vestibulum viverra nibh ut orci pretium, vel luctus massa ornare." Suspendisse dictum elit nec nibh ultrices, vel pellentesque enim iaculis.

Speech: #908981

Top:

Code:

Camilla

singular quote line goes right here

Bottom:
Code:

it's the third grade [time's tables get it]

Wed, 14 Apr 2021 07:56:49 -0600

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque fermentum dui faucibus in. Condimentum lacinia quis vel eros donec ac odio tempor orci. In eu mi bibendum neque egestas congue quisque egestas diam. Convallis posuere morbi leo urna molestie at elementum. Massa placerat duis ultricies lacus sed turpis tincidunt id. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim. Malesuada proin libero nunc consequat interdum varius sit amet. Venenatis lectus magna fringilla urna porttitor rhoncus. At imperdiet dui accumsan sit amet nulla facilisi. Lectus arcu bibendum at varius. Semper quis lectus nulla at volutpat diam.

Quis auctor elit sed vulputate mi sit. Elementum nisi quis eleifend quam adipiscing vitae proin. Eget sit amet tellus cras adipiscing. Leo urna molestie at elementum eu facilisis sed odio morbi. Eget egestas purus viverra accumsan in nisl nisi. Lacinia quis vel eros donec ac odio tempor. Ridiculus mus mauris vitae ultricies leo integer malesuada. Hac habitasse platea dictumst quisque sagittis. Nibh cras pulvinar mattis nunc sed blandit libero. Volutpat commodo sed egestas egestas fringilla phasellus.

Est ullamcorper eget nulla facilisi etiam. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Cras semper auctor neque vitae tempus. Ultrices dui sapien eget mi proin. Fermentum leo vel orci porta non pulvinar neque laoreet. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Viverra tellus in hac habitasse. Fermentum et sollicitudin ac orci. Gravida arcu ac tortor dignissim convallis. Dignissim suspendisse in est ante in nibh mauris.

Elliot Young

line oneeeeeeeee
line twwwwwwooo

Speech color: 7f211f

Top:

Code:



 


Bottom:

Code:



Elliot Young

line oneeeeeeeee
line twwwwwwooo

Online Table Resources List

Fri, 03 Apr 2020 10:45:00 -0600

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 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 ģ̸̝̞̬̈̈̆ľ̵̝̔̅͋̍̎̄i̸͍̖͖͎̠̼̓̉͘͘t̵̨̡̻̰̮̫͛̈́̉̇̚c̷̡̙̟̩̲͋̊͋ḩ̶͓̹͔̲̟͈̌̊͠ ̴̤̼́̀̒́̀̕ṱ̶̻̗͔̮̺́͂͑̒͜ę̴͎̺̣͇̣̒̐̋͝͝͝x̸͔̼̏͒̚ţ̴̠̠̲̰̟̟͌̆̅͘. 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!

Table Base Templates

Wed, 01 Apr 2020 15:20:59 -0600

Gonna start adding some of the templates I use in here with explanations and what not for you all to fiddle with <3 part of coding is breaking things to figure out what they do ;) don't be afraid!

Below you'll see how you can go about changing each part and what each section sort of does! A lot of this is repeated and does the same thing, so just fiddle with it and see where you end up liking things!

Changing Fonts

Full Background

Code:

Width: Make it larger to make it wider, smaller to make it thinner.
Background: linear-gradient, makes the background a gradient. You can make this either linear or radial! When you're using an image, this part will change to a url in which you'll just pop the url link in there and change the background color beside it to match where the background fades! Fading the image you choose will have to be done in some sort of editing software, however, so keep that in mind!
Border-left, Border-right: borders for the full table. Can change to solid, double, dashed, etc. 
Box-shadow: Shadow around the entire table.
Border-radius: Top left, top right, bottom left, bottom right. 0px is no curve, 300px is half circle curve.
Padding: this changes how much of an indent on the top/bottom/sides there are.
Text-Align: for the body text.
Font-family: usually I use Libra Baskerville!
Color: body font color.
Letter-Spacing: how far apart the letters are.
Line-height: how far apart the height between the letters are.

Gif/Image Section

Quote Sections

Text box background

Simple table code

Sun, 10 Mar 2019 07:52:37 -0600

Hiya, everyone. This is my simple table code that is the base of pretty much every table I make. It's short and sweet and easy to adapt from picture-at-top to picture-at-bottom, you can add styling, etc. I'm using a bastardized version of the table Skylark made me to demonstrate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut faucibus ex. Nulla ut dapibus neque. Vivamus mauris nulla, pharetra quis consectetur quis, dignissim vel nunc. Vestibulum consectetur imperdiet ligula, vel varius turpis finibus sed. Nulla ut tincidunt risus, facilisis auctor felis. Quisque eu nibh semper, tincidunt eros eu, dictum arcu. Donec molestie pellentesque ligula, nec imperdiet nulla vulputate et. Morbi cursus sollicitudin elit, vel euismod neque molestie et. Proin eu lectus nisi. Duis iaculis elit quis enim euismod, quis mollis ligula scelerisque. Morbi et interdum nibh.

Fusce vehicula est at tellus ultrices fringilla. Nulla tincidunt ut diam nec volutpat. Quisque erat eros, dignissim nec imperdiet vel, ullamcorper nec dolor. Proin eu velit mauris. Proin auctor augue at magna vulputate malesuada. Suspendisse ac pretium ex. Vestibulum viverra nibh ut orci pretium, vel luctus massa ornare. Suspendisse dictum elit nec nibh ultrices, vel pellentesque enim iaculis.

Code:

my post here

div: a div is just a "division", a section of a piece of HTML code. Divs are flexible and actually very easy to use, and everyone should convert from using <*table> tags immediately. :P Table tags are intended to be used only to display tabular data, and they load slower, as each table needs to be rendered before it loads the next piece of data. Using divs instead of tables also makes Cirago's life easier, as they won't interrupt the loading of the page.

In this case, we only have one div. This div is the parent element, only, it has no children. If you need to add specific styling to another element (such as adding a quote), that div will become a child to the parent. If you want to add things like borders, border-radius, box-shadow, in most cases you want to add it to the parent element.

box-sizing: usually when you make a div, the width of it does not include padding and borders. This means that if you have a 500px wide div and add 25px padding on either side, you'll have a 550px wide div in reality, and it'll not look as you want it to. I use border-box because that puts the padding/border on the "inside" of the 500px, meaning my div is still 500px wide but it indents content from the sides. For borders, though, you might want to increase the base width of the div to account for them, otherwise the borders will actually cover part of the image.

margin: I use the margin solely to center the div in the middle of the posting space. 0 means 0 margin top/bottom and auto means it centers left/right. Margin is otherwise a way to affect the distance of the element from another. For example, if you use margin-top: 100px; it will push the div down by a 100px. If you use margin-top: -100px; it will pull it up 100px, covering whatever's above it (unless you meddle with z-index). The shorthand for margin is top right bottom left, margin: 0 0 0 0.

width: The width of the div. I usually just go with the width of the image I'm using, but if you have borders, you might want to increase the width to account for the borders (if you're using border-box).

background: This is written in short-hand, going background-image, background-position, background-repeat, background-color. If you want the picture at the bottom instead, use "center bottom" instead of "center top". No-repeat means that it's not a repeating background, so it'll only show up once.

padding: In this case, padding becomes the sort of "indentation" of the text. It goes top right bottom left. So in this case it's offset by 550px from the top, and that's why the text starts "low". If this table had the image at the bottom instead, I would've put something like 25px 50px 550px 50px instead, so the huge chunk of blank space would've been in the bottom position instead.

text-align: Just the align of the text. I prefer justify, but left is scientifically considered easier to read. But I love justify.

font-family: Just whichever font family you wish to use. Remember to keep it readable! My go-to is times.

font-size: Again, remember to keep it readable. The industry standard for web pages is considered 16px, and I recommend not using anything below 14px. Small font sizes can be very hard to read for some people.

color: The font color. Remember to have enough contrast so that it's readable. :)

I hope this posting table base will be of help for someone!

Collapsing table code for profiles

Fri, 08 Mar 2019 10:14:20 -0700

This is the code to create collapsable fields in your profiles, like this:

See below for Neo wizardry.

Profile Styling

Thu, 07 Mar 2019 18:54:01 -0700

>> CLICK HERE IF YOU JUST WANT THE CODE <<

Hello, friends! Some of you have noticed the profile of Nathaniel over here and asked me what I did to it, so I put together a quick tutorial on how to style them! This involves embedding a stylesheet, which is purely CSS — no html here! That goes in the other profile fields.

So, what does that mean? Basically, you're writing some new rules for the page to follow, and putting them in this field:

You will need to know a little about CSS to follow this quick tutorial. You are welcome to dm me with any questions!

Let's take a look at Seiji's profile:

Right now, it matches the rest of the boards. But, if we know the names of the different elements, we can embed our own stylesheet, and change it to look however we want! Note: I don't recommend moving things around or otherwise altering the layout drastically. You could, but you probably want your profile to match the style of the rest of the site! That helps keep it all cohesive and avoids breaking things.

Following is a list of the elements you will probably want to mess with (NOTE: you must include the style type html tag at the top and close the style tag at the bottom; any google font styles you want to use can go above the style type tag):

Code:

A couple notes:

Comments that look /* like this */ are invisible and do not need to be removed. They won't show up on your profile! I have added them to help you identify which elements you are dealing with.
Strings that look like, for example, 2px 2px # need a color code at the end (such as 000000; ) I just left the # there already so you know where to put it.
Styling information for each element must be contained within brackets { } and must adhere to css rules, or it won't work.
I have not included absolutely every element here. If you can't figure out how to change something you want to change, you can ask, or you can look it up yourself using your browser's inspect tools.

NOW A QUICK EXAMPLE:

I want to change up the text on Seiji's header menu. I want to use the google font "Righteous", want the letters to be white, and want the background aqua/blue. I find the elements that control this portion of the page and insert the styling I want:

And.....

BEAUTIFUL! :D I'm off to a great start.

Sky's table ventures! [open]

Tue, 04 Dec 2018 18:30:04 -0700

Tables for others! Just send me a picture and a quote you think would fit and I can put something together for you! c:

Here's your first one charkie <3 Not sure if you use the posting tables but if you do;

Z E R O

quotey quote can start up here!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut faucibus ex. Nulla ut dapibus neque. "Vivamus mauris nulla, pharetra quis consectetur quis, dignissim vel nunc." Vestibulum consectetur imperdiet ligula, vel varius turpis finibus sed. Nulla ut tincidunt risus, facilisis auctor felis. Quisque eu nibh semper, tincidunt eros eu, dictum arcu. Donec molestie pellentesque ligula, nec imperdiet nulla vulputate et. Morbi cursus sollicitudin elit, vel euismod neque molestie et. Proin eu lectus nisi. Duis iaculis elit quis enim euismod, quis mollis ligula scelerisque. Morbi et interdum nibh.

Fusce vehicula est at tellus ultrices fringilla. Nulla tincidunt ut diam nec volutpat. Quisque erat eros, dignissim nec imperdiet vel, ullamcorper nec dolor. Proin eu velit mauris. Proin auctor augue at magna vulputate malesuada. Suspendisse ac pretium ex. Vestibulum viverra nibh ut orci pretium, vel luctus massa ornare. Suspendisse dictum elit nec nibh ultrices, vel pellentesque enim iaculis.

and end down here!

Speech: ffffff

Top:

Code:

Z E R O

quotey quote can start up here!

Bottom:

Code:

and end down here!

Shortcodes

Tue, 06 Nov 2018 15:28:45 -0700

Thanks to Neo, we name have shortcodes for the site!

This is an easier way of linking.

In order to link a profile, instead of linking the URL, simply place their name inside of square brackets:

Code:
[Name], e.g. [Rory]

To make a quick link to a thread, you can use the thread ID (shown in thread links, showthread.php?tid=NUMERIC ID HERE).

Code:
[thread=###], e.g. [thread=284]

Odds tables [closed 4ever]

Sun, 04 Nov 2018 16:42:58 -0700

I basically only make tables for Honey.