Home | Wiki | Discord | Dev Stream | YouTube | Archived Forums | Contact

Formatting Template Thread

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.

7 Likes

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

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.

4 Likes

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

3 Likes
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

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:

4 Likes

thanks

2 Likes

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>

3 Likes

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

Example Post


Specs

Car

Gallery

Photos go here


simplepost.txt (995 Bytes)

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)

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