Template Layouts

Sun Dec 22, 2019 6:22 pm

Greetings! I took it upon myself to create a thread for base template designs, which will be dropped here on the occasions I decide to cook something new up.

And yes feel free to use these layouts to your own liking, they are for that purpose after all and only require tinkering with the code to personalize them for your PC. Enjoy and have fun friends!

Not sure how to code something? It's not hard to tinker and figure it out, especially if you visit https://www.w3schools.com/css/css_link.asp here! I've spent years gradually learning to code, and this website has helped me immensely.

Sun Dec 22, 2019 6:33 pm

Thread Title

Time Stamp

Now here is a layout that's sleek and simple, with a image to the side of the layout as well! Googlefont's always has wonderful font styles you can look up, which in my opinion always gives a more personal touch to the character the template is made for. The images within these templates can either be placed left or right with the {Float=} code, and the best dimensions I've found are normally images that are fitted 200x280.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Proin efficitur tortor sed magna volutpat condimentum. Duis quis semper est, sed gravida orci. Integer felis lorem, ultrices in purus quis, viverra egestas purus. Nam lobortis tortor sed porttitor hendrerit. Aliquam a nunc vel risus luctus venenatis eget sed massa. Phasellus ut massa vitae turpis pulvinar tempus id sit amet lacus. Vivamus viverra enim at dui tempor placerat. Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas.

"And it came to me then, that every plan, is a tiny prayer to father time."

Code: Select all

[style=width: 700px; margin: 0px auto; padding: 20px; background: #000000; color:#FFFFFF; line-height:1.25em; font-size:1.05em;]
[googlefont=Dancing Script][size=165][color=#FFFFAC]Thread Title [float=right]Time Stamp[/float][/color][/size][/googlefont]
[googlefont=PT Serif][style2=width:100%;marigin:30px auto 20px auto; padding:30px 0px; border-top:1px solid #605543; border-bottom:1px solid #605543;"][float=right][[img]https://i.imgur.com/yPrmn1M.png[/img][/float][googlefont=Dancing Script][color=#FFFFAC][size=150]L[/size][/color][/googlefont]orem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Proin efficitur tortor sed magna volutpat condimentum. Duis quis semper est, sed gravida orci. Integer felis lorem, ultrices in purus quis, viverra egestas purus. Nam lobortis tortor sed porttitor hendrerit. Aliquam a nunc vel risus luctus venenatis eget sed massa. Phasellus ut massa vitae turpis pulvinar tempus id sit amet lacus. Vivamus viverra enim at dui tempor placerat. Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. 


[/style2][googlefont=Dancing Script][size=165][color=#FFFFAC][align=center]"Quote"[/align][/color][/size][/googlefont][/googlefont][/style]

Sun Dec 22, 2019 6:43 pm

Thread Title

Time Stamp

Here we have a template with the same sort of style as the previous, except this time the image linked is made in the form of a header instead. Normally I like to make header images 600x300 but you can limit the height to 350 if necessary. Customization is of course limited only by imagination and the amount of coding you tinker with, which is why it never hurts to mess around with code until you produce some satisfactory results. Yaaaaay code.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. Proin efficitur tortor sed magna volutpat condimentum. Duis quis semper est, sed gravida orci. Integer felis lorem, ultrices in purus quis, viverra egestas purus. Nam lobortis tortor sed porttitor hendrerit. Aliquam a nunc vel risus luctus venenatis eget sed massa. Phasellus ut massa vitae turpis pulvinar tempus id sit amet lacus. Vivamus viverra enim at dui tempor placerat.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Code: Select all

[style=width: 700px; border: 1px solid #1B1600; margin: auto; padding-top: 8px; background-color: #000000; box-shadow: 1px 10px 10px #000000;][googlefont=Dancing Script][size=165][color=#FFFFAC][indent=20]Thread Title [float=right]Time Stamp[/float][/color][/size][/googlefont]
[center][img]https://i.imgur.com/gD2XMEa.png[/img][/center]
[googlefont=PT Serif][style2=margin-top: 8px; padding: 0px 30px 25px 30px; color: #FFFFFF;][googlefont=Dancing Script][color=#FFFFAC][size=150]L[/size][/color][/googlefont]orem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. Proin efficitur tortor sed magna volutpat condimentum. Duis quis semper est, sed gravida orci. Integer felis lorem, ultrices in purus quis, viverra egestas purus. Nam lobortis tortor sed porttitor hendrerit. Aliquam a nunc vel risus luctus venenatis eget sed massa. Phasellus ut massa vitae turpis pulvinar tempus id sit amet lacus. Vivamus viverra enim at dui tempor placerat.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. Proin efficitur tortor sed magna volutpat condimentum. Duis quis semper est, sed gravida orci. Integer felis lorem, ultrices in purus quis, viverra egestas purus. Nam lobortis tortor sed porttitor hendrerit. Aliquam a nunc vel risus luctus venenatis eget sed massa. Phasellus ut massa vitae turpis pulvinar tempus id sit amet lacus. Vivamus viverra enim at dui tempor placerat.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.


[/style2][/googlefont][/style]

Sun Dec 22, 2019 6:53 pm

TimeStamp

Here we have another variation of the side image, except it's more larger, as this design normally came from the use of scrollboxes. I've tinkered with some but getting the dimensions right takes a while, for these I normally go for a solid 350x700 for my image frame. Though there's not a lot of customization found within the base template itself, it's pretty easy to add more into it's design with just a bit more tempering of the code.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Code: Select all

[style=width: 700px; border: 1px solid #2D303F; background-color: #000000; color: #FFFFFF; margin: auto; border-radius:10px; box-shadow: 1px 10px 10px #000000;][float=left][img]https://i.imgur.com/dgFuI1n.png[/img][/float][googlefont=PT Serif][style2=margin-top: 12px; padding: 0px 30px 25px 30px;][size=150]TimeStamp Here[/size]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

[/style2][/googlefont][/style]

Sun Dec 22, 2019 7:03 pm

TimeStamp

These are the more traditional style boxcode layouts for me, their design consists of a image atop the template layout; with the rest of the template body to hold the content of the post you're writing. The dimensions I typically shoot for with these images are normally 700x350, but you can sometimes work with smaller ones if necessary. 600x300 or 350 is fine as well, the highest I ever go is normally the first preset I mentioned.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Code: Select all

[style=width: 700px; border: 1px solid #2D303F; background-color: #000000; color: #FFFFFF; margin: auto; box-shadow: 1px 10px 10px #000000;][center][img]https://i.imgur.com/vjKYYRD.png[/img][/center][googlefont=PT Serif][style2=margin-top: -12px; padding: 0px 30px 25px 30px;][size=150]TimeStamp[/size]

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 
[/style2][/googlefont][/style]

Sun Dec 22, 2019 7:15 pm

TimeStamp

Now here is a fun and cool design with many possibilities! The template consists of a background image (1000x625) in it's first style, followed with a second image designed as a frame over the first style (Normal 700x350 dimensions). The important thing to note is how you link the background image in particular, as you will find most image links look like this:

"_https://ransera.com/app.php/gallery/image/26/medium_" which is the quicklink provided upon copying them. However for background images to function properly in this layout, you need to change the last part of the link. Edit the word "medium" to "source" instead, and the original image will fit inside the template instead of the medium format already set in place. These ones took awhile for me to put together, but their designs allow for really amazing aesthetics when you work on them.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque.

Code: Select all

[style=width: 700px; border: 1px solid #2D303F; background-image: url(https://i.imgur.com/58kgjYW.png); background-attachment: fixed; margin: auto; box-shadow: 1px 10px 10px #000000;][center][img]https://i.imgur.com/E2Uz7bJ.png[/img][/center][googlefont=PT Serif][style2=margin-top: -8px; padding: 0px 30px 25px 30px; background-color: #000000; color: #FFFFFF;]
[size=150]TimeStamp[/size]

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 

Nullam semper iaculis dolor elementum finibus. In non venenatis turpis, nec molestie nulla. Sed iaculis nisl et nisi finibus, non bibendum lectus egestas. Vestibulum fringilla tortor eu turpis tincidunt accumsan. Phasellus maximus ante et est eleifend ultrices. Donec congue sem nibh, quis hendrerit erat auctor et. Vestibulum vel placerat nunc. Aliquam pellentesque ac turpis vel congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien a justo ultrices blandit eu et ipsum. Sed eget mollis felis. Pellentesque faucibus faucibus dui, vel elementum dui rutrum nec. Proin fermentum varius tincidunt. Quisque ornare ligula id tempor euismod. Nulla non erat non urna porta pellentesque. 
[/style2][/googlefont][/style]