Formatting Template Thread

General Chat
1

Forum formatting can be hard
So, hopefully this little thread can help people to pick and choose between an expanding list of “templates” that have been created and shared.

Ideally, a base formatted post should be shown with “Title, header” etc on it, or it can just be copy pasted from one of your own posts. Maybe you can explain parts of your format too. The most important thing is that the text is copied into a text document and uploaded onto the same post, this way people can either use the format as is, or create their own based on it, learning from each post.
It’s possible that this thread can be used as a “tips and tricks” thing with example code.

I’m certainly not very good at this, which is why I reuse the same base I made over and over. However, seeing as automation designs have improved so much, I think it’s time that the forum game stepped up a little too. Cries looking at Titleguys posts

Here is an example of a formatted post.

Title
Header / Slogan
Second Header
Sub Header Area
Text / Images
Text / Images
Drop Down

Text / Images

Signature?

Download: Forum Template1.txt (893 Bytes)

There is also another useful forum post which explains most of the very basic stuff, although it’s quite old now.

13 Likes
2

Oooh, I have a bit of experiments in that regard stored in messages to myself. I can add them here later.

3

Judging Template

Header

Subtext

Creator/Car Name

Text
Picture

Creator/Car Name

Text
Picture

Creator/Car Name

Text
Picture

End Text


Judging Template.txt (665 Bytes)

Car Sharing Template

Header

Subtext

Text

Images

Gallery

Images

End Text


Car Sharing Template.txt (616 Bytes)

Try to make it look not exactly like this.

This is just as an example.

5 Likes
4

This thread is an absolute life saver, thank you so much :sweat_smile:

3 Likes
5
idk yuri's styles i don't have a name for these

Manhattan Pizzeria Simple.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis augue fermentum, porta massa suscipit, sollicitudin nulla. Cras in lobortis neque, et cursus sem. Fusce in ornare enim.

Heading One
Donec euismod laoreet ligula in dictum. Etiam molestie sem ex, vel pellentesque nibh fermentum non. Sed condimentum diam sit amet magna iaculis pretium. Vivamus orci massa, varius sed dolor id, posuere blandit magna.
Donec euismod laoreet ligula in dictum. Etiam molestie sem ex, vel pellentesque nibh fermentum non. Sed condimentum diam sit amet magna iaculis pretium. Vivamus orci massa, varius sed dolor id, posuere blandit magna.
Heading Two

Heading Three
Donec euismod laoreet ligula in dictum. Etiam molestie sem ex, vel pellentesque nibh fermentum non. Sed condimentum diam sit amet magna iaculis pretium. Vivamus orci massa, varius sed dolor id, posuere blandit magna.
Donec euismod laoreet ligula in dictum. Etiam molestie sem ex, vel pellentesque nibh fermentum non. Sed condimentum diam sit amet magna iaculis pretium. Vivamus orci massa, varius sed dolor id, posuere blandit magna.
Heading Five

Heading Six
Donec euismod laoreet ligula in dictum. Etiam molestie sem ex, vel pellentesque nibh fermentum non. Sed condimentum diam sit amet magna iaculis pretium. Vivamus orci massa, varius sed dolor id, posuere blandit magna.










Donec euismod laoreet ligula in dictum. Etiam molestie sem ex, vel pellentesque nibh fermentum non. Sed condimentum diam sit amet magna iaculis pretium. Vivamus orci massa, varius sed dolor id, posuere blandit magna.
Heading Seven


Manhattan-Pizzeria-Simple.txt (4.0 KB)

Colours, fonts, and images can be changed around for different looks.
Divs can also be added or removed depending on content.
8 Likes
6

Thank you very much for this thread. Maybe I can finally make threads that does not look like if I have puked them out if I take my time to learn this now. I guess that if I was programming my Commodore 128 just after some reading the of manual when I was 9 I have no excuse not to learn how this works…

:roll_eyes:

5 Likes
7

thanks

2 Likes
8

Ok, so, my random assortment of various formatting bits (I didn’t put it into a .txt as for me this way is more convenient - tell me if I should change it). Some divs are “signed” in < and > just for easier recognition when editing the post - with some formatting it can get pretty hard to discern what is what at first glance.

Fancy text

< div style=“font-size:27px;
background: -webkit-linear-gradient(#ffffff, #786800 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px red;
text-shadow: 2px 2px 5px black;
letter-spacing: 9px”>
Fancy text
< /div>

Delete the spaces after “<”. It has all the funky effects I know of and are working here, except for the most basic ones like bold, italic etc.


Border styling, also gradient background

This is a border styling example:

<BORDER STYLING>
<div style=“border-width: 2px;
border-style: dashed;
border-color: #666;
border-radius: 15px;
background-color: #343032;
background: linear-gradient(0deg, #605550, #303034);
padding: 50px;”>
CONTENT
</div><border styling>


Code below. This text field adjusts its size to the text it contains, even if it's long enough to span more than one line, as well as short enough to not need the whole image width. Image, text field and all margins work perfectly both on desktop and mobile (note that text on mobile is larger).
Code (the order of those divs is key!)

<PICTURE> This below is my standard image container which allows me to position the image wherever I want and still have it displayed correctly on any device and keep the margins on both sides, unlike using the default method, which just pushes the image to the side - this also scales it correctly.
<div style="background-color:#0f0f0f00;
background-image:url(‘http://d3hrnetf5izp16.cloudfront.net/original/4X/f/6/9/f69ded960c98a18b3c087b57ae4b17088d0f390e.jpg’);
position: relative; ← don’t ask, tried various modes until it worked
margin: 5%;
padding-top: 56.25%; ← this keeps the aspect ratio of the image, this value is for the default 16:9; just divide the height by the width
background-size: contain;
background-repeat: no-repeat;
background-position: center; ← these 3 lines fit the image to fill the container while not stretching the image
align=“center”>

<TEXT IN A PICTURE>
<div style=“background-color:#20202070;
position: absolute; ← don’t ask, tried various modes until it worked
bottom: 8%;
right: 3%;
float: right; ← the side to which the text field aligns itself
margin-left: 3%;
padding-left: 3%;
padding-right: 3%;
padding-top: 1%;
padding-bottom: 1%;
color: #ffffff;
font-size: 15px;
font-family: century gothic, sans serif;” align=“right”>
TEXT CONTENT GIMME PIZZA AND JUST WRITE HERE WHATEVER YOU LIKE
</div><text in a picture>
</div><picture>


Modular
2000-2007
Lineup
2003-2011
Gallery
2002-2008
Forms a grid on desktop & mobile
2000-2007
Can be expanded...
2003-2011
...and freely rescaled for different column number (as you see, has issues when there are different amounts of text lines on modules)
2002-2008
Code for one module, just paste them one after the other and they will automatically fall into a grid

<div style=“background: #222222;
padding-top: 2%;
padding-bottom: 2%;
width: 33%; ← this determines how many columns there are; for a perfect effect with three change it to 34% for the middle modules (or make them all 33.33%, should work I guess)
float: left; ← keeps the modules ordered from the left
color: #ffffff;
font-family: times new roman, sans serif;”
align=“center”>
<div style="background-image:url(‘http://d3hrnetf5izp16.cloudfront.net/original/4X/f/6/9/f69ded960c98a18b3c087b57ae4b17088d0f390e.jpg’);
margin: 2%;
padding-top: 56.3%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
align=“center”> ← all this is my standard image container, see the example with the image and the text on it
</div>
model 1
2000-2007
</div>


And finally, some a bit wacky stuff that I'm not sure is ready for use, but I've experimented with it before

Both disabled, as they would float around the whole post or even thread I think.

Prompt recommending landscape mode on mobile devices… sorta works. See the comment. On my phone (6" QHD screen) it showed fine, on the old phone (4,7" FHD) too, but was misplaced on a 4" iPhone IIRC. Sorta misplaced, but readable on the tablet (9" 2048x1536). All mobiles in portrait mode of course. Invisible (out of the screen) on PC, on two very different monitors (28" 4K and 20" 1680x1050) - as intended. Might be possible to make it work properly, but I ditched the idea in favour of making all the formatting as mobile-friendly as possible.

<PORTAIT PROMPT>
<div style=“background-color:#ffff00;
position: fixed;
bottom: 30%;
left: 140%; ← this and on above is to move it out of the screen
margin-left: -565px; ← and this and one below to move it back in if the screen is small enough - fiddle with those values
margin-bottom: -200px;
padding: 5px;
color: #222222;
z-index: 100; ← this is to keep it in a layer above all other possible site elements, value from experiments
font-size: 22px;
font-family: century gothic, sans serif;” align=“right”>
Landscape on mobile recommended</div>
<on small screens shows a bit too low and too much to the left>

Side menu, might be useful in brand threads with some general links (related brands, museum threads, engine threads etc.). Stays in one position, and that can sometimes obstruct the view. IIRC works equally ok on both desktop and mobile.

<SIDE FLOATER>
<div style=“background-color:#992222;
position: fixed; ← stays in one point on the screen
bottom: 30%;
padding: 10px;
color: #eeeeee;
z-index: 100; ← same as above, to keep it in the top layer of visibility
font-size: 12px;
font-family: century gothic, sans serif;” align=“right”>
Line 1
Line 2‎
Line 3</div>
4 Likes
9

A simple, versatile and elegant model for a challenge post!

Example Post

simplepost.txt (995 Bytes)

1 Like
10

Another post that might be useful, although it relies pretty heavily on images and is a bit more complex!

Text
Text
STATS

has engine
car runs
vroom

somewhatsimple.txt (1.3 KB)

11

Also, a useful piece of CSS or two everyone should know:

Text

Text

Text

Text
To get different heading sizes as seen above, you can use <h1 all the way through <h6. H1 is the biggest, H6 the smallest. To end the header, use </h1, </h2, etc depending on the header type.

To use an image as the background for a post:

background:url(image link);

To change the text justify location: <div align=center

(In case it's unclear: You have to add on the > to the other side of anything I posted with a < to get them to work and hide)

I know this isn’t much and is probably old news to most, but I haven’t seen these things explicitly mentioned anywhere in either this CSS thread or the basic tutorial, so here they are!

2 Likes
12

How do you make spoilers? Dumb question, I know.

Example:

[hide=Summary] j [/hide]

[spoiler] j [/spoiler]

[details=“Summary”] j
[/details]

13

image
image1015×330 15.9 KB

Use this one specifically, the top one doesn’t work.

3 Likes
14

Thanks! Much Appreciated!

1 Like
15

I was wondering if a thread like this existed, Good stuff for sure!!

2 Likes
16
stupid dum dum flavor text for links and stuff (this wont be shown in the post itself, but will be visible in discord embeds) also funni sex words cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum cum

^ The div above this is the first background, and the primary border. The background doesn’t move due to the “background-attachment: fixed” tag. The background loops vertically if your image is short or your device is tall enough, so this allows for patterns (see: portalkat’s AGC20)

Feel free to change the image to whatever suits your fancy.

^ The div above this is the second background, and secondary border. it also defines the text color and font family.

The 2002 Apex TriStar

The Devil only rides in luxury

^ Idk floats are basically black magic, just mess around until you find something that looks good.

Replace the “image:url()” url with the image you want in that section, DIRECT UPLOADS WILL NOT WORK. I recommend uploading to discourse and using the url that shows up.

Changing the “margin” tag value will change the spacing between your images.

Change the “padding-top” value to match the ratio (h/w) of your image. 56.3% is for 16x9. 2x1 would be 50%, 3x2 would be 66.7%

a

^ this is so that the borders properly match up with the images. if this wasnt there the images would go haywire past the end of the borders


HTML code with notes

3 Likes
17

fyi. majority of the .txt downloads give this error:

18

That’s probably because they are too old now. I can re-upload some

3 Likes
19

adding to this list of formatting things here on the forum. I’ve gone through and found a large number of fonts that work with the formatting restrictions here. They may not all work on apple or linux PCs or mobile, but they do work for windows. Each is listed with the appropriate name to be put in the font-family section of the div block at the top of the posts.

This is a font test: Agency FB

This is a font test: Arial black

This is a font test: Arial

This is a font test: Arial narrow

This is a font test: Book Antiqua

This is a font test: Bookman Old Style

This is a font test: Broadway

This is a font test: Calibri

This is a font test: Cambria

This is a font test: Candara

This is a font test: Century

This is a font test: Century Gothic

This is a font test: Chiller

This is a font test: Consolas

This is a font test: Constantia

This is a font test: Copperplate

This is a font test: Corbel

This is a font test: Courier New

This is a font test: Curlz MT

This is a font test: Cursive

This is a font test: Engravers MT

This is a font test: Fantasy

This is a font test: Fixedsys

This is a font test: Franklin Gothic Medium

This is a font test: Gabriola

This is a font test: Garamond

This is a font test: Garton

This is a font test: High Tower Text

This is a font test: Lucida console

This is a font test: Lucida Sans Unicode

This is a font test: Matura MT Script Capitals

This is a font test: Microsoft Sans Serif

This is a font test: Mistral

This is a font test: monospace

This is a font test: Monotype corsiva

This is a font test: Old English Text MT

This is a font test: Palatino Linotype

This is a font test: Papyrus

This is a font test: Parchment

This is a font test: Stencil

This is a font test: System

This is a font test: Webdings

7 Likes
20

Fun. Yesterday I was struggling with that too… and while some fonts worked both on Windows and iOS, only THREE worked on Android, that being sans serif (looks like Arial, is sth else but very similar, the default), serif (same story but with Times New Roman) and Courier (classic monospace), with other fonts just defaulting to them. Now I see two more working, so to me those tests look like that: Courier, Cursive and Monospace show correctly I guess, Fantasy shows as a default serif font, and all the rest are default sans serif.

Meanwhile on iOS: Arial, Copperplate, Courier, Cursive, Fantasy, Monospace and Papyrus work, all the rest look like Times New Roman.

3 Likes