Legend of Ransera

Code: Select all

[style=max-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]Timestamp, 123rd Year, A.o.S.[/float][/color][/size][/googlefont]
[googlefont=Gotu][style2=marigin:30px auto 20px auto; padding:30px 0px; border-top:1px solid #605543; border-bottom:1px solid #605543;"][float=left][img]https://legendofransera.com/app.php/gallery/image/2544/medium[/img][/float][googlefont=Dancing Script][color=#FFFFAC][size=150]N[/size][/color][/googlefont]ow here is a layout that's sleek and simple, with a image to the side of the layout as well! [url=https://fonts.google.com/]Googlefont's[/url] 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.

It's also possible to rearrange the layout a little, as you can either set the image to the left or the right. 

[color=#FFFFAC]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/color] 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][googlefont=Dancing Script][size=165][color=#FFFFAC][align=center]"Quote"[/align][/color][/size][/googlefont][/style]

Code: Select all

[style=max-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]Timestamp, 123rd Year, A.o.S.[/float][/color][/size][/googlefont]
[googlefont=Gotu][style2=marigin:30px auto 20px auto; padding:30px 0px; border-top:1px solid #605543; border-bottom:1px solid #605543;"][float=right][img]https://legendofransera.com/app.php/gallery/image/2543/medium[/img][/float][googlefont=Dancing Script][color=#FFFFAC][size=150]T[/size][/color][/googlefont]hese are similar templates to the one prior, however, can utilize smaller image designs and even emblems/crests that you may want to incorporate for the character. It utilizes the same functionality as the float text code, so you can customize the layout to your own liking!

[color=#FFFFAC]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/color] 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][googlefont=Dancing Script][size=165][color=#FFFFAC][align=center]"Quote"[/align][/color][/size][/googlefont][/style]

Code: Select all

[style=max-width: 700px; border: 1px solid #1B1600; margin: auto; padding-top: 8px; padding-bottom: 8px; background-color: #000000; box-shadow: 1px 10px 10px #000000;][googlefont=Dancing Script][size=165][color=#FFFFAC][indent]Thread Title[/indent] [float=right]Time Stamp, 123rd Year, A.o.S.[/float][/color][/size][/googlefont]
[center][img]https://legendofransera.com/app.php/gallery/image/2546/medium[/img][/center]
[googlefont=Gotu][style2=margin-top: 8px; padding: 0px 30px 25px 30px; color: #FFFFFF;][googlefont=Dancing Script][color=#FFFFAC][size=150]H[/size][/color][/googlefont]ere 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.

[color=#FFFFAC]"Nullam semper iaculis dolor elementum finibus."[/color] 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][googlefont=Dancing Script][size=165][color=#FFFFAC][align=center]"Quote"[/align][/color][/size][/googlefont][/style]

Code: Select all

[style=max-width: 700px; border: 2px solid #C1D2EF; background-color: #000000; color: #FFFFFF; padding-bottom: 10px; margin: auto; box-shadow: 1px 10px 10px #000000;][center][img]https://legendofransera.com/app.php/gallery/image/2547/medium[/img][/center][googlefont=Gotu][style2=margin-top: -4px; padding: 0px 30px 25px 30px;][size=150]Thread Title[/size]
TimeStamp, 123rd Year, A.o.S.

These are the more traditional style boxcode layouts for me, their design consists of an 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. 

[color=#FFFFAC]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/color] 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. 
 
[/style2][/googlefont][/style]

Code: Select all

[style=margin:5px auto; max-width: 950px; height: 740px; background-image: url(https://legendofransera.com/app.php/gallery/image/2545/source); background-repeat: no-repeat; background-position: left; padding-top:39px][style2=margin-left:5px; margin-right:5px; max-width: 950px; height:700px; background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,1)); color: #FFFFFF; position: right;][googlefont=Gotu][style3=overflow: auto; max-width: 400px; height:615px; float: right; padding-top: 20px; padding-left: 15px; padding-right: 15px; padding-bottom: 50px;][size=150]TimeStamp, 123rd Year, A.o.S.[/size]

Here we have another variation of the side image, except it's more larger, as this design [i][u]normally[/u][/i] 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. Because of the scrollbar that pops up from an overflow of text, you'll wanna keep your images situated on the left side rather than the right.

*Note: If using the site gallery we have to host your images, make sure when you embed them within your code, edit the last bit of information from "/medium" to "/source" to fully utilize the image's dimensions.

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.

[color=#FFFFAC]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/color] 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.


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

Code: Select all

[center][img]https://legendofransera.com/app.php/gallery/image/3011/medium[/img][/center]
[style=max-width: 700px; border: 2px solid #C1D2EF; border-radius: 25px; background-color: #000000; color: #FFFFFF; padding-bottom: 10px; margin: auto; margin-top: -75px; box-shadow: 1px 10px 10px #000000;][googlefont=Gotu][style2=margin-top: 60px; padding: 0px 30px 25px 30px;][size=150]Thread Title[/size]
TimeStamp, 123rd Year, A.o.S.

These templates follow the standard Header designs but with only a little bit of tweaking within the code, allowing you to place a customized header on top of your box code design. Depending on the height size of your image you may have to add or reduce the Margin codes a little, but you can come up with some sick designs that make these templates look sleek and interesting.

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.

[color=#FFFFAC]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/color] 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. 
 
[/style2][/googlefont][/style]