Div Templates

new

Annasiel Administrator Resident Fey Finally Free Posts: 863	Div Templates Feb 1, 2021 8:31:14 GMT Select Post Deselect Post Link to Post Back to Top Post by Annasiel on Feb 1, 2021 8:31:14 GMT Stealable div templates! If you post your template here, you're automatically giving permission for it to be copied/edited by other members. One template per post, please!
	Yesterday, upon the stair, I met a man who wasn't there! He wasn't there again today, Oh how I wish he'd go away!

Annasiel
Administrator

Resident Fey

Finally Free

Posts: 863

Div Templates Feb 1, 2021 8:32:04 GMT

Post by Annasiel on Feb 1, 2021 8:32:04 GMT

Title

Content goes here

Dynamically resizable iPod clone template - you need to use a few linebreaks before typing anything after, since it uses negative margins. Dunno if there's a way around that?

The code:

[div align="center"][img src="https://i.imgur.com/6ZtIBIx.png" style="width:20em;" alt=" "]
[div style="margin-top:-31.8em;background-color:white;border:2px solid black;width:16em;height:12.1em;font-family:chicago;white-space:nowrap;"][div style="border:2px solid black;padding:.2em;text-align:center;"][b]Title[/b][span style="float:right;"][img src="https://images.vexels.com/media/users/3/129344/isolated/preview/e9cb06820df7f2ecf6a35375fe213839-battery-icon-by-vexels.png" alt=" " style="width:1em;"][/span][/div][div style="border:2px solid black;overflow-y:scroll;overflow-x:hidden;height:10em;"]Content goes here[/div][/div][/div]

Yesterday, upon the stair,
I met a man who wasn't there!
He wasn't there again today,
Oh how I wish he'd go away!

Splendor
New Member

Posts: 46

Div Templates Feb 1, 2021 8:34:58 GMT

Post by Splendor on Feb 1, 2021 8:34:58 GMT

[googlefont="Quicksand:600;"]

[attr="style","background:radial-gradient(circle, rgba(238,138,181,1) 0%, rgba(238,138,181,1) 80%, rgba(238,138,181,.2) 100%);border-radius:15em/2em;border:3px solid rgba(238,138,181,.5);color:#603c75;padding:5px 0px;font-family:quicksand;font-size:11pt;text-align:left;"]

[attr="style","margin:5px;display:grid;grid-template-columns:48% 4% 48%;grid-template-rows:100%;grid-template-areas:'A1 A2 A3';"]

[attr="style","border-top:2px solid #9b76b0;border-radius:30em 15em;grid-area:A1;"]

[attr="style","grid-area:A2;"]★

[attr="style","border-top:2px solid #9b76b0;border-radius:15em 30em;grid-area:A3;"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin tortor tortor, eu volutpat urna blandit at. Aenean interdum eros et ante pulvinar ullamcorper. Vivamus interdum efficitur pretium. Vestibulum ultrices ligula eget sem aliquam vulputate. Ut malesuada sapien at dui vehicula, nec facilisis mi tincidunt. Integer enim lorem, ullamcorper tempus tempus eget, tempus nec purus. Praesent neque turpis, dignissim ut ullamcorper sit amet, sodales sed augue. Duis vitae sem vel neque mollis sagittis id eget ligula. Donec bibendum quam sed dolor luctus, vel condimentum magna ornare. Sed tristique facilisis ultrices. Nam vel molestie dui.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras quis risus dapibus, iaculis turpis quis, congue libero. Integer pretium magna non nisl tincidunt, in sollicitudin augue viverra. Maecenas dignissim facilisis accumsan. Nulla et dolor at nunc condimentum tempor. Proin ultrices mattis lectus eget blandit. Curabitur sed nibh non arcu fringilla suscipit. Proin lacus felis, molestie sed sem dictum, interdum faucibus quam. Vestibulum feugiat justo non felis imperdiet volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum suscipit nisi in rutrum.

Quisque bibendum vitae orci sit amet lobortis. Phasellus eleifend sodales lectus, eget ultrices tellus eleifend at. Sed efficitur neque id mi convallis, eget suscipit ligula rutrum. Cras tincidunt sit amet enim non luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed leo massa, accumsan nec eros non, ultrices vestibulum ipsum. Nulla libero lectus, molestie ac dictum nec, ullamcorper id massa. Nullam et ipsum et urna scelerisque volutpat. Etiam cursus malesuada purus, ut iaculis justo posuere quis. Pellentesque quam mi, elementum at dignissim at, dapibus sed tellus. Aenean eget laoreet eros. Curabitur at arcu lorem. Aenean libero nibh, dignissim vel nibh id, vestibulum fringilla nulla. Quisque vulputate urna ante, in porta risus vehicula sit amet. Curabitur fermentum scelerisque ante ut congue.

[attr="style","margin:5px;display:grid;grid-template-columns:48% 4% 48%;grid-template-rows:100%;grid-template-areas:'A1 A2 A3';"]

[attr="style","border-bottom:2px solid #9b76b0;border-radius:15em 30em;grid-area:A1;"]

[attr="style","grid-area:A2;"]★

[attr="style","border-bottom:2px solid #9b76b0;border-radius:30em 15em;grid-area:A3;"]

A fairly simple "pretty" div. This one uses googlefont and the [attr] tag, so it won't parse in the preview window or on the mobile view site!

The code:

[googlefont="Quicksand:600;"][div][attr="style","background:radial-gradient(circle, rgba(238,138,181,1) 0%, rgba(238,138,181,1) 80%, rgba(238,138,181,.2) 100%);border-radius:15em/2em;border:3px solid rgba(238,138,181,.5);color:#603c75;padding:5px 0px;font-family:quicksand;font-size:11pt;text-align:left;"][div style="border-top:3px solid rgba(238,138,181,.5);border-bottom:3px solid rgba(238,138,181,.5);border-radius:15em/2em;padding:5px 0px;"][div style="background:rgba(255,255,255,.4);border-radius:15em;border:3px solid rgba(238,138,181,.7);padding:20px;"][div style="background:rgba(255,255,255,.8);border-radius:5%;"][div][attr="style","margin:5px;display:grid;grid-template-columns:48% 4% 48%;grid-template-rows:100%;grid-template-areas:'A1 A2 A3';"][div][attr="style","border-top:2px solid #9b76b0;border-radius:30em 15em;grid-area:A1;"][/div][div align="center"][attr="style","grid-area:A2;"]★[/div][div][attr="style","border-top:2px solid #9b76b0;border-radius:15em 30em;grid-area:A3;"][/div][/div][div style="padding:0px 10px;"]Text Goes Here
[/div][div][attr="style","margin:5px;display:grid;grid-template-columns:48% 4% 48%;grid-template-rows:100%;grid-template-areas:'A1 A2 A3';"][div][attr="style","border-bottom:2px solid #9b76b0;border-radius:15em 30em;grid-area:A1;"][/div][div align="center"][attr="style","grid-area:A2;"]★[/div][div][attr="style","border-bottom:2px solid #9b76b0;border-radius:30em 15em;grid-area:A3;"][/div][/div][/div][/div][/div][/div]

Last Edit: Feb 1, 2021 8:36:04 GMT by Splendor

Reyn
Moderator

Sleepyhead

Beatmania IIDX 16: Empress is the 16th game in the Beatmania IIDX series of music video games. It wa

Posts: 612

Div Templates Feb 1, 2021 12:30:36 GMT

Post by Reyn on Feb 1, 2021 12:30:36 GMT

[attr="style","display:grid;grid-template-columns:12px auto 12px;grid-template-rows:12px auto 12px;grid-template-areas:'TL TC TR' 'CL CC CR' 'BL BC BR';"]

[attr="style","grid-area:TL;border-right:2px solid red;border-bottom:2px solid red;"]

[attr="style","grid-area:TC;border-top:2px solid red;"]

[attr="style","grid-area:TR;border-left:2px solid red;border-bottom:2px solid red;"]

[attr="style","grid-area:CL;border-left:2px solid red;"]

[attr="style","grid-area:CC;outline:1px solid red;outline-offset:6px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis dui sit amet erat commodo, at maximus elit pellentesque. Sed sed posuere odio. Curabitur placerat a risus sed feugiat. Aliquam erat volutpat. Mauris vitae justo tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse pulvinar maximus nulla, ac fringilla sem posuere eget. Aenean iaculis tincidunt lorem, quis porttitor dui iaculis eu. Donec viverra sed nulla ultrices pulvinar.

Fusce vehicula bibendum ex, vitae sollicitudin metus pellentesque in. Donec id nisl et nisi mattis suscipit. Ut eget ipsum ut nunc pretium gravida. Nulla dictum lacinia orci ac mollis. Nulla interdum laoreet iaculis. Nam vitae tempus velit. Aliquam nec diam vel metus congue molestie. Aliquam luctus pellentesque neque, vitae varius nulla. Maecenas congue lorem nec lectus malesuada, eu fringilla arcu mollis. Integer justo mauris, tempor sit amet tortor quis, molestie feugiat mauris. Donec sed condimentum orci. Fusce eu faucibus urna. Vestibulum pellentesque, diam luctus tincidunt tempor, ipsum neque faucibus tellus, at imperdiet est risus eu magna. Proin rutrum sapien eros, a consequat lacus efficitur vitae. Vestibulum nec nulla velit.

Proin at justo aliquet, sagittis orci ut, luctus diam. Vivamus vel nisi sapien. Nunc interdum fermentum nunc a auctor. Proin eu finibus orci. Phasellus venenatis ornare lectus nec fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris id tellus vel purus mollis luctus in sed velit. Pellentesque ultricies sit amet augue eu hendrerit. In sollicitudin accumsan felis, eu accumsan est pretium vitae. Quisque sit amet aliquam est. Aliquam blandit rutrum risus, non mollis libero porttitor vitae. Quisque ac sapien pharetra, consectetur sapien et, rutrum lorem. Aenean eu neque porttitor mauris pellentesque tincidunt.

Donec dapibus, dolor in aliquam feugiat, massa dolor finibus dolor, eget porttitor felis purus non mi. Sed et vehicula purus. Ut pellentesque nibh sed lobortis fermentum. Nunc tincidunt pulvinar ultrices. Curabitur consectetur arcu eu massa aliquam egestas. Duis tincidunt, lectus id fringilla sollicitudin, sem ipsum efficitur purus, non efficitur velit nisl in erat. Suspendisse a nunc purus. Proin non volutpat leo, vel iaculis sapien.

[attr="style","grid-area:CR;border-right:2px solid red;"]

[attr="style","grid-area:BL;border-right:2px solid red;border-top:2px solid red;"]

[attr="style","grid-area:BC;border-bottom:2px solid red;"]

[attr="style","grid-area:BR;border-left:2px solid red;border-top:2px solid red;"]

Everyone's (my) favourite Fun Border! Sorry the code's so long for what it is, you know how it is with grids.

[div][attr="style","display:grid;grid-template-columns:12px auto 12px;grid-template-rows:12px auto 12px;grid-template-areas:'TL TC TR' 'CL CC CR' 'BL BC BR';"][div][attr="style","grid-area:TL;border-right:2px solid red;border-bottom:2px solid red;"][/div][div][attr="style","grid-area:TC;border-top:2px solid red;"][/div][div][attr="style","grid-area:TR;border-left:2px solid red;border-bottom:2px solid red;"][/div][div][attr="style","grid-area:CL;border-left:2px solid red;"][/div][div][attr="style","grid-area:CC;outline:1px solid red;outline-offset:6px;"]CONTENT HERE[/div][div][attr="style","grid-area:CR;border-right:2px solid red;"][/div][div][attr="style","grid-area:BL;border-right:2px solid red;border-top:2px solid red;"][/div][div][attr="style","grid-area:BC;border-bottom:2px solid red;"][/div][div][attr="style","grid-area:BR;border-left:2px solid red;border-top:2px solid red;"][/div][/div]

Last Edit: Mar 8, 2021 11:27:49 GMT by Reyn

Div Guide | Grid/Table Guide | Code Help | Div Templates | Code Resources

illirica
Moderator

Posts: 1,388

Div Templates Feb 7, 2021 23:13:58 GMT

Post by illirica on Feb 7, 2021 23:13:58 GMT

I recreated the Revolt Code from the previous forum, since a lot of people really liked that. Enjoy!

[attr="style","display:grid;grid-template-columns:16px auto 16px;grid-template-rows:16px auto 16px;grid-template-areas:'CornerTL Top CornerTR' 'Left Main Right' 'CornerBL Bottom CornerBR';background-color:#000000;padding:6px;border:1px #55FF55 solid;"]

[attr="style","grid-area:CornerTL;padding:4px;"]

[attr="style","grid-area:Top;padding:4px;"]

[attr="style","grid-area:CornerTR;padding:4px;"]

[attr="style","grid-area:Left;padding:4px;"]

[attr="style","grid-area:Right;padding:4px;"]

[attr="style","grid-area:CornerBL;padding:4px;"]

[attr="style","grid-area:Bottom;padding:4px;"]

[attr="style","grid-area:CornerBR;padding:4px;"]

[attr="style","grid-area:Main;color:#55FF55;padding:9px;"]This template is free to use for anyone.

All the actual words that go in the actual post go right here in this spot.

[div][attr="style","display:grid;grid-template-columns:16px auto 16px;grid-template-rows:16px auto 16px;grid-template-areas:'CornerTL Top CornerTR' 'Left Main Right' 'CornerBL Bottom CornerBR';background-color:#000000;padding:6px;border:1px #55FF55 solid;"]
[div][attr="style","grid-area:CornerTL;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:Top;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:CornerTR;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:Left;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:Right;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:CornerBL;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:Bottom;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:CornerBR;padding:4px;"][div style="width:100%;height:100%;border:1px #55FF55 solid;"][/div][/div]
[div][attr="style","grid-area:Main;color:#55FF55;padding:9px;"]This template is free to use for anyone.  

All the actual words that go in the actual post go right here in this spot.[/div][/div]

Last Edit: Apr 22, 2023 1:59:32 GMT by illirica

Welcome to RPF!
RPF Discord

illirica
Moderator

Posts: 1,388

Div Templates Feb 10, 2021 15:27:35 GMT

Post by illirica on Feb 10, 2021 15:27:35 GMT

[attr="style","display:grid;grid-template-columns:10% auto;grid-column-gap:10px;grid-template-areas:'Side Main';"]

[attr="style","grid-area:Side;margin-bottom:4px;"]

[attr="style","height:100%;border:2px #6066FF solid;background-image:url(https://images.all-free-download.com/images/graphicthumb/vector_winter_snowflakes_background_538428.jpg);background-repeat:repeat-y;background-size:250%;"]

[attr="style","grid-area:Main;"]

[attr="style","border: 2px #6066FF solid;padding:8px;color:#BBCCFF;"]This div style is available for people to work with - however, I designed the specifics with a certain character in mind, so I'd ask that people use different images and colors if they want to use the style.

The idea behind this one is to try to invoke that same flavor that a background image does, but without the background image getting in the way of the text.

Instead of a background image on the actual posting part, I designed a sidebar that holds the background image. The image is set to tile in the current code, but you could change that if you wanted. Change the background-size percentage to adjust the zoom-in on your image.

Now I'm just babbling to take up vertical space so the code displays properly.

Here's some more text.


[div style="border:2px #6066FF solid;background-color:#000044;padding:10px;"][div][attr="style","display:grid;grid-template-columns:10% auto;grid-column-gap:10px;grid-template-areas:'Side Main';"][div][attr="style","grid-area:Side;margin-bottom:4px;"][div][attr="style","height:100%;border:2px #6066FF solid;background-image:url(https://images.all-free-download.com/images/graphicthumb/vector_winter_snowflakes_background_538428.jpg);background-repeat:repeat-y;background-size:250%;"][/div][/div][div][attr="style","grid-area:Main;"][div][attr="style","border: 2px #6066FF solid;padding:8px;color:#BBCCFF;"]INSERT POST CONTENT HERE[/div][/div][/div][/div]

If you decide to change up the border on the sidebar, the “margin-bottom” value should be equal to the value of the border on top plus the border on bottom - so for this one we have a 2px border all the way around, 2+2=4, which is why there’s that margin-bottom:4px just hanging out there. It has to do with the way the code deals with that height:100% value, which is necessary otherwise the sidebar doesn’t go all the way down.

Last Edit: Feb 10, 2021 19:56:55 GMT by illirica

Welcome to RPF!
RPF Discord

Reyn
Moderator

Sleepyhead

Beatmania IIDX 16: Empress is the 16th game in the Beatmania IIDX series of music video games. It wa

Posts: 612

Div Templates Feb 10, 2021 16:16:38 GMT

Post by Reyn on Feb 10, 2021 16:16:38 GMT

[attr="style","max-width:900px;border:2px #AAAAAA outset"]

[attr="style","color:white;background: linear-gradient(90deg, rgba(0,3,123,1) 0%, rgba(8,126,203,1) 100%);padding:3px;font-size:120%;text-align:right;"]

[attr="style","float:left"]Epic Gamer Window

[attr="style,"border:2px #AAAAAA outset;display:inline;background-color:#bdbdbd;color:black;font-family:monospace;padding-left:4px;padding-right:4px;cursor:not-allowed;"]?

[attr="style,"border:2px #AAAAAA outset;display:inline;background-color:#bdbdbd;color:black;font-family:monospace;padding-left:4px;padding-right:4px;cursor:not-allowed;"]X

[attr="style","max-height:500px;overflow:auto;background-color:white;"]

[attr="style","color:black;padding:2%;"]Hi Hello this is the Windows 98 window code! This is taken from the windows 98 desktop code, which can can be found here and is available to be edited, but you need to keep the credit line in. The code is very long and complicated so I didn't want to put it here, but this code can get you the window effect without having to bother with all that tab nonsense. To start editing this one, I recommend only changing the div immediately before this paragraph (the one that has color:black and padding:2%), as that will only change the style of the window's content instead of changing how it functions (scroll, width, etc.).

The top text is kinda buried under all this unbroken code so just ctlr+f "Epic Gamer Window" if you're lost trying to find what to remove and edit for that.

As usual, this code will work with any other bbcode you want to put into it. Grids, float, whatever. I think tabs will work as well, if you're into that. I only made it plain black and white for the demo because I'm lazy. It also includes an overflow:auto and a max height of 500px, meaning that it will scale to the height of whatever's inside it until it reaches 500px, then it will add a scrollbox to contain the content. Y'know, for that ~authentic desktop experience~. You can change or remove these if you're feeling spicy and can find what values to change.

Good luck and let me know if it breaks for you <3

[div][attr="style","max-width:900px;border:2px #AAAAAA outset"][div][attr="style","color:white;background: linear-gradient(90deg, rgba(0,3,123,1) 0%, rgba(8,126,203,1) 100%);padding:3px;font-size:120%;text-align:right;"][div][attr="style","float:left"]Epic Gamer Window[/div][div][attr="style,"border:2px #AAAAAA outset;display:inline;background-color:#bdbdbd;color:black;font-family:monospace;padding-left:4px;padding-right:4px;cursor:not-allowed;"]?[/div][div][attr="style,"border:2px #AAAAAA outset;display:inline;background-color:#bdbdbd;color:black;font-family:monospace;padding-left:4px;padding-right:4px;cursor:not-allowed;"]X[/div][/div][div][attr="style","max-height:500px;overflow:auto;background-color:white;"][div][attr="style","color:black;padding:2%;"]Hi Hello this is the Windows 98 window code!  This is taken from the windows 98 desktop code, which can can be found [url=https://rp-forum.net/post/30/thread]here[/url] and [i]is[/i] available to be edited, but you need to keep the credit line in.  The code is very long and complicated so I didn't want to put it here, but this code can get you the window effect without having to bother with all that tab nonsense. [b]To [i]start[/i] editing this one, I recommend only changing the div immediately before this paragraph[/b] (the one that has color:black and padding:2%), as that will only change the style of the window's content instead of changing how it functions (scroll, width, etc.).

The top text is kinda buried under all this unbroken code so just ctlr+f "Epic Gamer Window" if you're lost trying to find what to remove and edit for that.

As usual, this code will work with any other bbcode you want to put into it.  Grids, float, whatever.  I [i]think[/i] tabs will work as well, if you're into that.  I only made it plain black and white for the demo because I'm lazy.  It also includes an overflow:auto and a max height of 500px, meaning that it will scale to the height of whatever's inside it until it reaches 500px, then it will add a scrollbox to contain the content.  Y'know, for that ~authentic desktop experience~.  You can change or remove these if you're feeling spicy and can find what values to change.

Good luck and let me know if it breaks for you <3[/div][/div]

Last Edit: Mar 13, 2021 20:50:00 GMT by Reyn

Div Guide | Grid/Table Guide | Code Help | Div Templates | Code Resources

illirica
Moderator

Posts: 1,388

Div Templates Feb 17, 2021 3:21:44 GMT

Post by illirica on Feb 17, 2021 3:21:44 GMT

[attr="style","position:absolute;"]

[attr="style","position:relative;left:-180px;top:250px;width:165px;text-align:center;border:1px blue solid;"]LOOK HERE

THIS IS CODED IN!

Edit: The current setup doesn't work well with the new avatar sizes - you can edit it yourself to make it pretty if you like, or I'll come up with a v2.0 when I have time. Thanks!

Profile Code is back!!!

[div][attr="style","position:absolute;"]
[div][attr="style","position:relative;left:-180px;top:240px;width:165px;text-align:center;"]Insert your other code or div here![/div][/div]

Yes, you can stack them, grid them, do whatever with them! Don't mess with the "left:-180px" or the "width:165px" values for more than a couple pixels to reflect your div borders, otherwise this can get messy in a hurry. The "top:250px" moves it up or down, if you really want to cover your avatar, this is what you'd adjust to do that.

Also, just as a general warning, be careful with this one. This is one of the ones that can break the forum if it goes wrong. Ask for help if you need it.

Last Edit: May 26, 2021 17:50:33 GMT by illirica

Welcome to RPF!
RPF Discord

Sans the Medic
New Member

Posts: 26

Div Templates Feb 27, 2021 17:37:43 GMT

Post by Sans the Medic on Feb 27, 2021 17:37:43 GMT

[attr="style","color:#00df00; background-color:black; border:green 2px solid"]

[attr="style","background-color: #00aF00; margin:auto; width:45%; text-align: center;"]USER ACCESS: 111111
LOCATION CODE: Location
OS Code: Sans' "not as cool as Reyn's OS" OS

[attr="style","padding-left:10px;"]

>: What is this?

This is a test to create something looking like a CMD computer thing; created by Sans_The_Medic

>: what do all the '>:'s and stuff mean?

Words with >: at the start are inputs
// starts a comment or something
Words without a special start thing are code returned by the system

// oh how cool

vj4934bnv3iouvnbqi4ufq93q48fq934ufnq/ /983iq9438gqhp4938hgqbv43bq97bvq\ \943gw958y2q97gh9wqvn
uhw94v9w45ng94rhgufj09r1j084hrf9rvn/ /i4gihg84rbv9uwtn08nbv9tnlzA9gEbYXI\ \A4aTKllBE2grkufWBP
M0d5YpdEo8HScAjmHkb7FHbF5Wzxs1Z/ /oFf8YETSUCuiDEuQqpYHDrhdqPVYLcaiGT\ \0fzaliaN75MyNg11R1jt8
// Corrupted code, with a slash though it?

Figured I'd give this out seeing as Reyn's OS apparently isn't working on this site yet. It's still not as good, heh

[div][attr="style","color:#00df00; background-color:black; border:green 2px solid"][font size="4" face="trebuchet ms"][div][attr="style","background-color: #00aF00; margin:auto; width:45%; text-align: center;"][font color="#4f4f4f"]USER ACCESS: 111111[/font]
[font color="4f4f4f"]LOCATION CODE: Location[/font] 
[font color="4f4f4f"]OS Code: Sans' "not as cool as Reyn's OS" OS[/font][/div][/font]
[div][attr="style","padding-left:10px;"]

>: What is this?

This is a test to create something looking like a CMD computer thing; created by Sans_The_Medic

>: what do all the '>:'s and stuff mean?

Words with >: at the start are inputs
// starts a comment or something
Words without a special start thing are code returned by the system


// oh how cool


[font color="#800000"]
vj4934bnv3iouvnbqi4ufq93q48fq934ufnq/  /983iq9438gqhp4938hgqbv43bq97bvq\  \943gw958y2q97gh9wqvn
uhw94v9w45ng94rhgufj09r1j084hrf9rvn/  /i4gihg84rbv9uwtn08nbv9tnlzA9gEbYXI\ \A4aTKllBE2grkufWBP
M0d5YpdEo8HScAjmHkb7FHbF5Wzxs1Z/  /oFf8YETSUCuiDEuQqpYHDrhdqPVYLcaiGT\ \0fzaliaN75MyNg11R1jt8[/font]
// Corrupted code, with a slash though it?
[/div]
[/div]

Last Edit: Feb 27, 2021 17:38:46 GMT by Sans the Medic

Reyn
Moderator

Sleepyhead

Beatmania IIDX 16: Empress is the 16th game in the Beatmania IIDX series of music video games. It wa

Posts: 612

Div Templates Mar 11, 2021 15:09:35 GMT

Post by Reyn on Mar 11, 2021 15:09:35 GMT

[attr="style","background-color:#253352;color:white;margin:auto;font-family:'Titillium Web';padding-top:2%;padding-bottom:2%"]

[attr="style","position:relative;"]

[attr="style","background-image:url(https://i.imgur.com/QOsigIU.png);background-size:auto 70%;background-repeat:horizontal;color:transparent;font-family:'orbitron';font-size:250%;"]e

[attr="style","position:absolute;top:-5px;right:15%;"]

[attr="style","font-family:'orbitron';font-size:300%;background-color:#253352;"]

[attr="style","color:transparent;display:inline;"].

MAIN TITLE

[attr="style","color:transparent;display:inline;"].

[attr="style","float:right;border-left:1px solid white;"]

[attr="style","color:transparent;display:inline;"].

[attr="style","float:right;font-size:35%;padding-right:15px;font-family:'Jura';padding-top:5px;"]

[attr="style","display:inline;font-size:110%;font-weight:700;-webkit-text-stroke: 0.7px white;"]SUBTITLE:

"Description?"

[attr="style","background-color:black;color:white;margin:auto;font-family:'Titillium Web';padding-top:2%;padding-bottom:2%"]

[attr="style","position:relative;"]

[attr="style","background-image:url(https://i.imgur.com/V9eoJKw.png);background-size:auto 70%;background-repeat:horizontal;color:transparent;font-family:'orbitron';font-size:250%;"]e

[attr="style","position:absolute;top:-5px;right:15%;"]

[attr="style","font-family:'orbitron';font-size:300%;background-color:black;"]

[attr="style","color:transparent;display:inline;"].

MAIN TITLE

[attr="style","color:transparent;display:inline;"].

[attr="style","float:right;border-left:1px solid white;"]

[attr="style","color:transparent;display:inline;"].

[attr="style","float:right;font-size:35%;padding-right:15px;font-family:'Jura';padding-top:5px;"]

[attr="style","display:inline;font-size:110%;font-weight:700;-webkit-text-stroke: 0.7px white;"]SUBTITLE:

"Description?"

STAGER title code for the stager title: original and monochrome flavours

things to note:
1) you can change the background and text colour of course, but make sure BOTH instances of background-color are changed
2) the best way to change the colour of the diagonal lines is downloading the image and changing it yourself.
3) the second best way is to stick a filter in the div with the background image (if you're copying from the FIRST example). see div guide for what filters to use.
4) i used a max-width in the original stager code, but i deleted it for this example. it should work on most devices, but if it doesn't, put a max-width in there.
5) KEEP THE DESCRIPTION/SUBTITLE SHORT OR IT MIGHT FALL APART

--ORIGINAL--
[div][attr="style","background-color:#253352;color:white;margin:auto;font-family:'Titillium Web';padding-top:2%;padding-bottom:2%"][div][attr="style","position:relative;"][div][attr="style","background-image:url(https://i.imgur.com/QOsigIU.png);background-size:auto 70%;background-repeat:horizontal;color:transparent;font-family:'orbitron';font-size:250%;"]e[/div][div][attr="style","position:absolute;top:-5px;right:15%;"][div][attr="style","font-family:'orbitron';font-size:300%;background-color:#253352;"][div][attr="style","color:transparent;display:inline;"].[/div][b] MAIN TITLE[/b][div][attr="style","color:transparent;display:inline;"].[/div][div][attr="style","float:right;border-left:1px solid white;"][div][attr="style","color:transparent;display:inline;"].[/div][div][attr="style","float:right;font-size:35%;padding-right:15px;font-family:'Jura';padding-top:5px;"][div][attr="style","display:inline;font-size:110%;font-weight:700;-webkit-text-stroke: 0.7px white;"]SUBTITLE:[/div]
"Description?"[/div][/div][/div][/div][/div][/div]

-MONO--
[div][attr="style","background-color:black;color:white;margin:auto;font-family:'Titillium Web';padding-top:2%;padding-bottom:2%"][div][attr="style","position:relative;"][div][attr="style","background-image:url(https://i.imgur.com/V9eoJKw.png);background-size:auto 70%;background-repeat:horizontal;color:transparent;font-family:'orbitron';font-size:250%;"]e[/div][div][attr="style","position:absolute;top:-5px;right:15%;"][div][attr="style","font-family:'orbitron';font-size:300%;background-color:black;"][div][attr="style","color:transparent;display:inline;"].[/div][b] MAIN TITLE[/b][div][attr="style","color:transparent;display:inline;"].[/div][div][attr="style","float:right;border-left:1px solid white;"][div][attr="style","color:transparent;display:inline;"].[/div][div][attr="style","float:right;font-size:35%;padding-right:15px;font-family:'Jura';padding-top:5px;"][div][attr="style","display:inline;font-size:110%;font-weight:700;-webkit-text-stroke: 0.7px white;"]SUBTITLE:[/div]
"Description?"[/div][/div][/div][/div][/div][/div]

Last Edit: Mar 11, 2021 15:12:31 GMT by Reyn

Div Guide | Grid/Table Guide | Code Help | Div Templates | Code Resources

Reyn
Moderator

Sleepyhead

Beatmania IIDX 16: Empress is the 16th game in the Beatmania IIDX series of music video games. It wa

Posts: 612

Div Templates Apr 20, 2021 9:23:16 GMT

Post by Reyn on Apr 20, 2021 9:23:16 GMT

[nospaces]

[newclass=.CreditLine]font-size:75%;text-align:center[/newclass]

[newclass=.NewsMain]max-width:1080px;max-height:720px;margin:auto;background-color:white;color:black;overflow:auto;font-size:13px;font-family: Open Sans, sans serif[/newclass]
[newclass=.NewsHeader]height:100px;background-color:#C50021;color:white;font-family: Aleo, serif;font-weight:bold;display:grid;place-items:center;position:relative;[/newclass]
[newclass=.NewsHeaderTitle]font-size:400%;display:inline;position:absolute;left:25px[/newclass]
[newclass=.NewsNavBar]height:40px;background-color:#dddddd;position:sticky;top:0px;z-index:69;[/newclass]

[newclass=.NavGrid]display:grid;grid-template-columns:auto auto auto auto auto auto;grid-template-areas:'ONE TWO THREE FOUR FIVE SIX';place-items:center;[/newclass]
[newclass=.NavOne]grid-area:ONE;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavOne:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavTwo]grid-area:TWO;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavTwo:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavThree]grid-area:THREE;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavThree:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavFour]grid-area:FOUR;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavFour:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavFive]grid-area:FIVE;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavFive:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavSix]grid-area:SIX;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavSix:hover]background-color:#C50021;color:white;[/newclass]

[newclass=.ContentGrid]display:grid;grid-template-columns:grid-template-areas:auto 350px;grid-template-areas: 'ARTICLE SIDE'[/newclass]
[newclass=.ContentArticle]grid-area:ARTICLE;text-align:justify;padding:25px;[/newclass]
[newclass=.ContentArticle a]font-family:inherit;color:#C50021;[/newclass]
[newclass=.ContentSide]grid-area:SIDE;padding:25px;[/newclass]

[newclass=.ArticleTitle]font-size:250%;text-align:left;[/newclass]
[newclass=.ArticleSubtitle]font-size:125%;color:#48101E;text-align:left;[/newclass]
[newclass=.ArticleLineBreak]border:1px solid #666666[/newclass]
[newclass=.ArticleFooterTitle]font-size:200%;color:#C50021[/newclass]
[newclass=.ArticleFooter]font-size:110%;color:#48101E[/newclass]

[newclass=.SideTitle]font-size:200%;[/newclass]
[newclass=.SideFooter]font-size:150%;text-align:right;[/newclass]
[newclass=.SideFooter a]color:#C50021;font-family:inherit;[/newclass]

[newclass=.PreviewBackground]background:linear-gradient(to bottom,transparent 0%,transparent 50%,rgba(197,0,33,0.7) 0%,rgba(197,0,33,0.7) 50%);width:300px;height:400px;transition:.3s ease-out[/newclass]
[newclass=.PreviewBackground:hover]transform:translateY(-200px)[/newclass]
[newclass=.PreviewBackground:hover .PreviewHeadline]color:white;position:absolute;top:2%;left:2%;transform:translateY(200px);transition:0s;background-color:transparent;padding:0%;text-align:left;[/newclass]
[newclass=.PreviewBackground:hover .PreviewBody]color:white;transition:0.8s[/newclass]
[newclass=.PreviewHeadline]color:black;font-size:150%;position:absolute;right:0px;bottom:0px;transition:.4s;background-color:rgba(255,255,255,0.5);padding:1%;width:100%;text-align:right;[/newclass]
[newclass=.PreviewHeadline:hover]color:white;position:absolute;top:2%;left:2%;transform:translateY(200px);transition:0s;background-color:transparent;padding:0%;text-align:left;[/newclass]
[newclass=.PreviewBody]padding:2%;color:transparent;position:absolute;bottom:2%;[/newclass]
[newclass=.PreviewReadmore]right:2%;bottom:2%;font-size:110%;text-align:right;padding:2%[/newclass]
[newclass=.PreviewReadmore a]color:inherit;font-family:inherit[/newclass]

[newclass=.PreviewOneMain]background-image:url(https://i.imgur.com/TxcORME.jpg);background-size:cover;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]
[newclass=.PreviewTwoMain]background-image:url(https://i.imgur.com/5CmUdSX.jpg);background-size:cover;background-position:center;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]
[newclass=.PreviewThreeMain]background-image:url(https://i.imgur.com/eamR7eW.jpg);background-size:cover;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]
[newclass=.PreviewFourMain]background-image:url(https://i.imgur.com/UxoKdP0.png);background-size:cover;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]

[attr="class",NewsMain]

[attr="class",NewsHeader]

[attr="class",NewsHeaderTitle]Website Title

[attr="class",NewsNavBar]

[attr="class",NavGrid]

[attr="class",NavOne]News

[attr="class",NavTwo]Categories

[attr="class",NavThree]Go

[attr="class",NavFour]Here

[attr="class",NavFive]I

[attr="class",NavSix]Guess

[attr="class",ContentGrid]

[attr="class",ContentArticle]

[attr="class",ArticleTitle]Very Cool News Code

[attr="class",ArticleSubtitle]Ima Reporter - Something Here - Date Here

[break]
LINK THE first couple of words to a relevant thread if you want, or just don't bother. Anyway, this is the News Code, AKA Reyn's first real attempt at understanding newclass. The good news is that it's pretty easy to edit and add your own content- anything that has plain text (like this, the titles, and the things on the sidebars) can hopefully be edited without searching through a big pile of code. This does have a nospaces in, so every time you want a line break, youll have to put in a (break) with square brackets instead of round brackets.
[break][break]
To edit the sidebar images, scroll up a bit to the last section of newclasses before the big space (the ones that say .PreviewOneMain etc) and replace the imgur links with links to your own images. You can also definitely replace the image at the top of this section above the title which is in (img) tags like images normally are.
[break][break]
The colour palette for this post is currently #C50021 for the header background and accent titles, #48101E for accent text, rgba(197,0,33,0.7) for the transparent red of the sidebar hovers, #dddddd for the navbar background, #666666 for the line break after the article, black for the text, and white for the main background. Ctrl+f to edit those colours if you want to change the colour scheme yourself- I think there's a way for me to set colours as variables to make it easier for people to edit, but I haven't figured that out yet.
[break][break]
"I usually style quotations in this with italics.", Reyn said, "Also please do not remove the credit line at the bottom, this took me a very long time to make."
[break][break]
Anyway that's about it. Check the sidebars for little tips on how to edit them. If this breaks for you, please DM me on RPF or on Discord and I can try and help. ALSO IMPORTANT THING: don't put two of these on the same page of a thread, or your images will not work. Trust me. TRUST ME.
[break][break]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan est at eros auctor pellentesque. Cras vestibulum lorem non molestie iaculis. Donec pharetra metus dui, vel egestas libero suscipit et. Fusce finibus ante vitae metus pellentesque, sed ultricies libero ultrices. Duis facilisis commodo risus, at viverra odio tincidunt in. Etiam egestas ornare orci in faucibus. Sed massa metus, viverra quis massa sit amet, iaculis iaculis neque. Integer sapien ante, sodales ut aliquam nec, dapibus vel ipsum. Maecenas euismod bibendum arcu, ac tincidunt eros fermentum sit amet. Nullam hendrerit, massa eu consequat convallis, erat ex viverra nisl, suscipit condimentum lectus mi ac erat. Sed porta ligula vehicula, tempor neque malesuada, eleifend libero. Donec id nisi nulla.
[break][break][break]

[attr="class",ArticleLineBreak]

[break][break]

[attr="class",ArticleFooterTitle]Subscribe Today!

[break]

[attr="class",ArticleFooter]This is the part where your newspaper company that you made up for this post starts shilling their hideously expensive subscription plan and everyone has to read it. $15 a month! $20 a week! $50 an article!

[break][break]

[attr="class",ContentSide]

[attr="class",SideTitle]Top Stories:

[break][break]

[attr="class",PreviewOneMain]

[attr="class",PreviewBackground]

[attr="class",PreviewHeadline]Sidebar Headline One

[attr="class",PreviewBody]
Please keep these summaries brief or it might break the formatting. The longer the title, the shorter the summary has to be in order to fit. This is janky as hell and I'm very sorry but that's the price of cool.
[break][break]

[attr="class",PreviewReadmore]Read More >

[break][break]

[attr="class",PreviewTwoMain]

[attr="class",PreviewBackground]

[attr="class",PreviewHeadline]Sidebar Headline Two is a Little Bit Longer

[attr="class",PreviewBody]
You can only really get, like, maybe two sentences out of these boxes to be totally safe- or five lines when displayed on the finished thing. Sorry for all you long sentence fans, but these are meant to be summaries.

[attr="class",PreviewReadmore]Read More >

[break][break]

[attr="class",PreviewThreeMain]

[attr="class",PreviewBackground]

[attr="class",PreviewHeadline]Sidebar Headline Three

[attr="class",PreviewBody]
Also the read more is a link. If you're writing about events that happened in an RP, it's pretty fun to make the read mores link to the post or thread in which the events happened. I think it's funny.
[break][break]

[attr="class",PreviewReadmore]Read More >

[break][break]

[attr="class",PreviewFourMain]

[attr="class",PreviewBackground]

[attr="class",PreviewHeadline]Sidebar Headline Four is Also Quite Long

[attr="class",PreviewBody]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan est at eros auctor pellentesque. Cras vestibulum lorem non molestie iaculis. Donec pharetra metus dui, vel egestas libero suscipit et.
[break][break]

[attr="class",PreviewReadmore]Read More >

[break][break]

[attr="class",SideFooter]Read More >

[attr="class",CreditLine]Code by Reyn

[break][break]

News Code! You can use this for whatever nefarious purposes you can think of but I'm going to be weird and ask that you please keep the little credit in because this took me a long time blah blah NEWCLASS IS VERY NICE

[break][break]

Sorry in advance for how dense the classes are.

[break][break]

SPOILER: Click to show

{Code (VERY LONG) CLICK THIS TEXT TO SEE}

[nospaces]

[newclass=.CreditLine]font-size:75%;text-align:center[/newclass]

[newclass=.NewsMain]max-width:1080px;max-height:720px;margin:auto;background-color:white;color:black;overflow:auto;font-size:13px;font-family: Open Sans, sans serif[/newclass]
[newclass=.NewsHeader]height:100px;background-color:#C50021;color:white;font-family: Aleo, serif;font-weight:bold;display:grid;place-items:center;position:relative;[/newclass]
[newclass=.NewsHeaderTitle]font-size:400%;display:inline;position:absolute;left:25px[/newclass]
[newclass=.NewsNavBar]height:40px;background-color:#dddddd;position:sticky;top:0px;z-index:69;[/newclass]

[newclass=.NavGrid]display:grid;grid-template-columns:auto auto auto auto auto auto;grid-template-areas:'ONE TWO THREE FOUR FIVE SIX';place-items:center;[/newclass]
[newclass=.NavOne]grid-area:ONE;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavOne:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavTwo]grid-area:TWO;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavTwo:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavThree]grid-area:THREE;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavThree:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavFour]grid-area:FOUR;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavFour:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavFive]grid-area:FIVE;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavFive:hover]background-color:#C50021;color:white;[/newclass]
[newclass=.NavSix]grid-area:SIX;font-size:120%;text-align:center;height:30px;width:100%;padding-top:10px;[/newclass]
[newclass=.NavSix:hover]background-color:#C50021;color:white;[/newclass]

[newclass=.ContentGrid]display:grid;grid-template-columns:grid-template-areas:auto 350px;grid-template-areas: 'ARTICLE SIDE'[/newclass]
[newclass=.ContentArticle]grid-area:ARTICLE;text-align:justify;padding:25px;[/newclass]
[newclass=.ContentArticle a]font-family:inherit;color:#C50021;[/newclass]
[newclass=.ContentSide]grid-area:SIDE;padding:25px;[/newclass]

[newclass=.ArticleTitle]font-size:250%;text-align:left;[/newclass]
[newclass=.ArticleSubtitle]font-size:125%;color:#48101E;text-align:left;[/newclass]
[newclass=.ArticleLineBreak]border:1px solid #666666[/newclass]
[newclass=.ArticleFooterTitle]font-size:200%;color:#C50021[/newclass]
[newclass=.ArticleFooter]font-size:110%;color:#48101E[/newclass]

[newclass=.SideTitle]font-size:200%;[/newclass]
[newclass=.SideFooter]font-size:150%;text-align:right;[/newclass]
[newclass=.SideFooter a]color:#C50021;font-family:inherit;[/newclass]

[newclass=.PreviewBackground]background:linear-gradient(to bottom,transparent 0%,transparent 50%,rgba(197,0,33,0.7) 0%,rgba(197,0,33,0.7) 50%);width:300px;height:400px;transition:.3s ease-out[/newclass]
[newclass=.PreviewBackground:hover]transform:translateY(-200px)[/newclass]
[newclass=.PreviewBackground:hover .PreviewHeadline]color:white;position:absolute;top:2%;left:2%;transform:translateY(200px);transition:0s;background-color:transparent;padding:0%;text-align:left;[/newclass]
[newclass=.PreviewBackground:hover .PreviewBody]color:white;transition:0.8s[/newclass]
[newclass=.PreviewHeadline]color:black;font-size:150%;position:absolute;right:0px;bottom:0px;transition:.4s;background-color:rgba(255,255,255,0.5);padding:1%;width:100%;text-align:right;[/newclass]
[newclass=.PreviewHeadline:hover]color:white;position:absolute;top:2%;left:2%;transform:translateY(200px);transition:0s;background-color:transparent;padding:0%;text-align:left;[/newclass]
[newclass=.PreviewBody]padding:2%;color:transparent;position:absolute;bottom:2%;[/newclass]
[newclass=.PreviewReadmore]right:2%;bottom:2%;font-size:110%;text-align:right;padding:2%[/newclass]
[newclass=.PreviewReadmore a]color:inherit;font-family:inherit[/newclass]

[newclass=.PreviewOneMain]background-image:url(https://i.imgur.com/TxcORME.jpg);background-size:cover;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]
[newclass=.PreviewTwoMain]background-image:url(https://i.imgur.com/5CmUdSX.jpg);background-size:cover;background-position:center;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]
[newclass=.PreviewThreeMain]background-image:url(https://i.imgur.com/eamR7eW.jpg);background-size:cover;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]
[newclass=.PreviewFourMain]background-image:url(https://i.imgur.com/UxoKdP0.png);background-size:cover;width:300px;height:200px;overflow:hidden;width:300px;height:200px;position:relative;[/newclass]



[div][attr="class",NewsMain][div][attr="class",NewsHeader][div][attr="class",NewsHeaderTitle]Website Title[/div][/div]
[div][attr="class",NewsNavBar]
[div][attr="class",NavGrid]
[div][attr="class",NavOne]News[/div]
[div][attr="class",NavTwo]Categories[/div]
[div][attr="class",NavThree]Go[/div]
[div][attr="class",NavFour]Here[/div]
[div][attr="class",NavFive]I[/div]
[div][attr="class",NavSix]Guess[/div][/div][/div]

[div][attr="class",ContentGrid]
[div][attr="class",ContentArticle]
[img]https://i.imgur.com/eBnS6GS.jpg[/img]

[div][attr="class",ArticleTitle]Very Cool News Code[/div]
[div][attr="class",ArticleSubtitle]Ima Reporter - Something Here - Date Here[/div]
[break]
[url=https://rp-forum.net/post/3866/thread]LINK THE[/url] first couple of words to a relevant thread if you want, or just don't bother.  Anyway, this is the News Code, AKA Reyn's first real attempt at understanding newclass.  The good news is that it's pretty easy to edit and add your own content- anything that has plain text (like this, the titles, and the things on the sidebars) can hopefully be edited without searching through a big pile of code.  This does have a nospaces in, so every time you want a line break, youll have to put in a (break) with square brackets instead of round brackets.
[break][break]
To edit the sidebar images, scroll up a bit to the last section of newclasses before the big space (the ones that say .PreviewOneMain etc) and replace the imgur links with links to your own images.  You can also definitely replace the image at the top of this section above the title which is in (img) tags like images normally are.
[break][break]
The colour palette for this post is currently #C50021 for the header background and accent titles, #48101E for accent text, rgba(197,0,33,0.7) for the transparent red of the sidebar hovers, #dddddd for the navbar background, #666666 for the line break after the article, black for the text, and white for the main background.  Ctrl+f to edit those colours if you want to change the colour scheme yourself- I think there's a way for me to set colours as variables to make it easier for people to edit, but I haven't figured that out yet.
[break][break]
[i]"I usually style quotations in this with italics."[/i], Reyn said, [i]"Also please do not remove the credit line at the bottom, this took me a very long time to make."[/i]
[break][break]
Anyway that's about it.  Check the sidebars for little tips on how to edit them.  If this breaks for you, please DM me on RPF or on Discord and I can try and help.  ALSO IMPORTANT THING: don't put two of these on the same page of a thread, or your images will not work.  Trust me.  TRUST ME.
[break][break]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan est at eros auctor pellentesque. Cras vestibulum lorem non molestie iaculis. Donec pharetra metus dui, vel egestas libero suscipit et. Fusce finibus ante vitae metus pellentesque, sed ultricies libero ultrices. Duis facilisis commodo risus, at viverra odio tincidunt in. Etiam egestas ornare orci in faucibus. Sed massa metus, viverra quis massa sit amet, iaculis iaculis neque. Integer sapien ante, sodales ut aliquam nec, dapibus vel ipsum. Maecenas euismod bibendum arcu, ac tincidunt eros fermentum sit amet. Nullam hendrerit, massa eu consequat convallis, erat ex viverra nisl, suscipit condimentum lectus mi ac erat. Sed porta ligula vehicula, tempor neque malesuada, eleifend libero. Donec id nisi nulla.
[break][break][break]
[div][attr="class",ArticleLineBreak][/div]
[break][break]
[div][attr="class",ArticleFooterTitle]Subscribe Today![/div]
[break]
[div][attr="class",ArticleFooter]This is the part where your newspaper company that you made up for this post starts shilling their hideously expensive subscription plan and everyone has to read it.  $15 a month!  $20 a week! $50 an article![/div][/div]

[break][break]

[div][attr="class",ContentSide]

[div][attr="class",SideTitle]Top Stories:[/div]

[break][break]

[div][attr="class",PreviewOneMain][div][attr="class",PreviewBackground][div][attr="class",PreviewHeadline]Sidebar Headline One[/div][div][attr="class",PreviewBody]
Please keep these summaries brief or it might break the formatting.  The longer the title, the shorter the summary has to be in order to fit.  This is janky as hell and I'm very sorry but that's the price of cool.
[break][break]
[div][attr="class",PreviewReadmore][url=https://www.youtube.com/watch?v=00eNNTdd3c8]Read More >[/url][/div][/div][/div][/div]

[break][break]

[div][attr="class",PreviewTwoMain][div][attr="class",PreviewBackground][div][attr="class",PreviewHeadline]Sidebar Headline Two is a Little Bit Longer[/div][div][attr="class",PreviewBody]
You can only really get, like, maybe two sentences out of these boxes to be totally safe- or five lines when displayed on the finished thing.  Sorry for all you long sentence fans, but these are meant to be summaries.
[div][attr="class",PreviewReadmore][url=https://www.youtube.com/watch?v=X0DbbZiVMYo]Read More >[/url][/div][/div][/div][/div]

[break][break]

[div][attr="class",PreviewThreeMain][div][attr="class",PreviewBackground][div][attr="class",PreviewHeadline]Sidebar Headline Three[/div][div][attr="class",PreviewBody]
Also the read more is a link.  If you're writing about events that happened in an RP, it's pretty fun to make the read mores link to the post or thread in which the events happened.  I think it's funny. 
[break][break]
[div][attr="class",PreviewReadmore][url=https://www.youtube.com/watch?v=BI-aDjb2sAA]Read More >[/url][/div][/div][/div][/div]

[break][break]

[div][attr="class",PreviewFourMain][div][attr="class",PreviewBackground][div][attr="class",PreviewHeadline]Sidebar Headline Four is Also Quite Long[/div][div][attr="class",PreviewBody]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan est at eros auctor pellentesque. Cras vestibulum lorem non molestie iaculis. Donec pharetra metus dui, vel egestas libero suscipit et. 
[break][break]
[div][attr="class",PreviewReadmore][url=https://www.youtube.com/watch?v=2lTAVDA0QXc]Read More >[/url][/div][/div][/div][/div]

[break][break]

[div][attr="class",SideFooter][url=https://rp-forum.net/thread/6/reyns-big-test-house-fun]Read More >[/div]

[/div][/div][/div]

[div][attr="class",CreditLine]Code by [url=https://rp-forum.net/thread/6/reyns-big-test-house-fun]Reyn[/url][/div]

Last Edit: Apr 20, 2021 9:29:59 GMT by Reyn

Div Guide | Grid/Table Guide | Code Help | Div Templates | Code Resources

Goodnight
New Member

Infiltrating OBSKURA.

Posts: 14

Div Templates Apr 21, 2021 16:51:26 GMT

Post by Goodnight on Apr 21, 2021 16:51:26 GMT

[attr="style","display:grid;grid-template-columns: 8% 87%;grid-template-areas:'Left Right';grid-gap:3%;max-width:100%"]

[attr="style","grid-area:Left;"]

[attr="style","grid-area:Right;font-family:Quantico;"]

F.B.I. DOSSIER

SUBJECT: "name"

1. GENERAL PROFILE

[attr="style","display:grid;grid-template-columns: 1fr 1fr 1.2fr;grid-template-areas:'Left Middle Right';grid-gap:1vw;"]

[attr="style","grid-area:Left;padding:0.2vw;line-height:1vw;"]NAME
CRYPTONYM(s)

GENDER
DATE OF BIRTH / AGE
HEIGHT / WEIGHT
ETHNICITY
DISTINGUISHING FEATURES

EDUCATION
SPECIALTY

ALLEGIANCE
SERVICE / BRANCH
YEARS OF SERVICE
RANK
UNIT
BASE OF OPERATIONS

STATUS
CLEARANCE

[attr="style","grid-area:Middle;padding:0.2vw;line-height:1vw;"]DATA HERE

[attr="style","grid-area:Right;padding:0.2vw;"]

[attr="style","margin-top:-3%;;"]

2. OVERVIEW

Text Corpus. Lorem impsum you know the dealum.

3. ADDENDUM

[div align="center"][div style="max-width:60%;background:white;color:black;font-family:VT323;font-size:0.8vw;padding:1vw;text-align:justify;"][div][attr="style","display:grid;grid-template-columns: 8% 87%;grid-template-areas:'Left Right';grid-gap:3%;max-width:100%"][div][attr="style","grid-area:Left;"][img style="margin:auto;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Seal_of_the_Federal_Bureau_of_Investigation.svg/300px-Seal_of_the_Federal_Bureau_of_Investigation.svg.png"][/div][div][attr="style","grid-area:Right;font-family:Quantico;"][div style="font-size:1.8vw;"][b]F.B.I. DOSSIER[/b][/div][div style="margin-left:0.15vw;"][b]SUBJECT: "name"[/b][/div][/div][/div][hr][div style="background:grey;color:white;text-align:center;font-size:1vw;padding:0.3vw;"][b]1. GENERAL PROFILE[/b][/div]
[div][attr="style","display:grid;grid-template-columns: 1fr 1fr 1.2fr;grid-template-areas:'Left Middle Right';grid-gap:1vw;"]
[div][attr="style","grid-area:Left;padding:0.2vw;line-height:1vw;"][b]NAME
CRYPTONYM(s)	

GENDER	
DATE OF BIRTH / AGE	
HEIGHT / WEIGHT	
ETHNICITY	
DISTINGUISHING FEATURES	

EDUCATION	
SPECIALTY

ALLEGIANCE
SERVICE / BRANCH
YEARS OF SERVICE
RANK
UNIT
BASE OF OPERATIONS

STATUS
CLEARANCE[/b][/div]
[div][attr="style","grid-area:Middle;padding:0.2vw;line-height:1vw;"]DATA HERE
[/div][div][attr="style","grid-area:Right;padding:0.2vw;"][img src="https://www.afghanistanmarkets.com/wp-content/uploads/2019/02/blank-profile-picture.jpg" style="margin:auto;float:right;"][/div][/div][div][attr="style","margin-top:-3%;;"][hr][div style="background:grey;color:white;text-align:center;font-size:1vw;padding:0.3vw;"][b]2. OVERVIEW[/b][/div][div style="color:black;line-height:1vw;"]Text Corpus. Lorem impsum you know the dealum.
[/i][/div][/div]
[hr][div style="background:grey;color:white;text-align:center;font-size:1vw;padding:0.3vw;"][b]3. ADDENDUM[/b][/div][ul type="square"]
[li][/li]
[li][/li]
[li][/li]
[li][/li][/ul]
[hr][/div][/div]

18-04-2022 UPDATE: Don't alter the format of this dossier. IF you want to use this code and alter the written contents then go ahead, but please don't gut the code for parts. The code was made specifically to fit an aesthetic format.

Last Edit: Apr 18, 2022 15:39:42 GMT by Goodnight

Reyn
Moderator

Sleepyhead

Beatmania IIDX 16: Empress is the 16th game in the Beatmania IIDX series of music video games. It wa

Posts: 612

Div Templates Apr 26, 2021 6:59:04 GMT

Post by Reyn on Apr 26, 2021 6:59:04 GMT

[nospaces]
[break][break]

- ACTIVE CHARACTERS -

[break][break]

[newclass=.CompendiumContainerTwo]margin:auto;max-width:1000px;height:350px;font-size:13px;position:relative;[/newclass]
[newclass=.CompendiumContainerGridTwo]display:grid;height:100%;grid-template-columns:1fr 1fr 1fr;grid-template-areas: 'ONE TWO THREE';[/newclass]

[newclass=.CompendiumImageOne]grid-area:ONE;height:350px;background-image:url(https://i.imgur.com/jaJzM44.png);background-size:cover;background-position:center;border-radius:20px 0px 0px 20px;transition:0.4s ease-out;position:relative;overflow:hidden;[/newclass]
[newclass=.CompendiumImageOneFilter]height:100%;background-color:transparent;transition:0.4s ease-out;overflow-y:auto;[/newclass]
[newclass=.CompendiumImageOne:hover .CompendiumImageOneFilter]height:100%;background-color:rgba(145,85,169, 0.7);overflow-y:auto;[/newclass]
[newclass=.CompendiumImageOne:hover]height:100%;background-image:url(https://i.imgur.com/jaJzM44.png);background-size:cover;background-position:center;border-radius:20px 0px 0px 20px;overflow-x:hidden;[/newclass]
[newclass=.CompendiumImageOneFilter::-webkit-scrollbar]background-color:transparent;transition:0.6s ease-out;[/newclass]
[newclass=.CompendiumImageOneFilter::-webkit-scrollbar-thumb]background-color:transparent;border-radius:10px;[/newclass]
[newclass=.CompendiumImageOneFilter:hover::-webkit-scrollbar]background-color:transparent;[/newclass]
[newclass=.CompendiumImageOneFilter:hover::-webkit-scrollbar-thumb]background-color:#EDC7FF;border-radius:10px[/newclass]

[newclass=.CompendiumImageOneTitle]position:absolute;left:20px;bottom:20px;text-align:left;width:100%;color:white;transition:0.4s ease-out;font-size:250%;font-family:'Megrim', sans-serif;[/newclass]
[newclass=.CompendiumImageOne:hover .CompendiumImageOneTitle]color:transparent;pointer-events:none;[/newclass]
[newclass=.CompendiumImageOneText]color:transparent;padding:20px;transition:0.6s ease-out;font-size:105%;font-family:'Quicksand', sans-serif;position:relative;[/newclass]
[newclass=.CompendiumImageOneText a]color:transparent;padding:20px;transition:0.6s ease-out;font-size:115%;font-family:'Quicksand', sans-serif;position:absolute;bottom:-10px;right:10px;[/newclass]
[newclass=.CompendiumImageOne:hover .CompendiumImageOneText]color:white;[/newclass]
[newclass=.CompendiumImageOne:hover .CompendiumImageOneText a]color:white;font-family:'Quicksand', sans-serif;font-size:115%;transition:0.3s ease-out;position:absolute;bottom:-10px;right:10px;[/newclass]
[newclass=.CompendiumImageOne:hover .CompendiumImageOneText a:hover]color:#EDC7FF;font-family:'Quicksand', sans-serif;font-size:115%;position:absolute;bottom:-10px;right:10px;[/newclass]

[newclass=.CompendiumImageTwo]grid-area:TWO;height:350px;background-image:url(https://i.imgur.com/MWRnKuo.png);background-size:cover;background-position:center;transition:0.4s ease-out;position:relative;overflow:hidden;[/newclass]
[newclass=.CompendiumImageTwoFilter]background-color:transparent;height:100%;transition:0.4s ease-out;overflow-y:auto;[/newclass]
[newclass=.CompendiumImageTwo:hover .CompendiumImageTwoFilter]background-color:rgba(150,26,57, 0.7);overflow-y:auto;[/newclass]
[newclass=.CompendiumImageTwo:hover]background-image:url(https://i.imgur.com/MWRnKuo.png);background-size:cover;background-position:center;overflow-x:hidden;[/newclass]
[newclass=.CompendiumImageTwoFilter::-webkit-scrollbar]background-color:transparent;[/newclass]
[newclass=.CompendiumImageTwoFilter::-webkit-scrollbar-thumb]background-color:transparent;border-radius:10px;[/newclass]
[newclass=.CompendiumImageTwoFilter:hover::-webkit-scrollbar]background-color:transparent;[/newclass]
[newclass=.CompendiumImageTwoFilter:hover::-webkit-scrollbar-thumb]background-color:#FF9DB6;border-radius:10px[/newclass]

[newclass=.CompendiumImageTwoTitle]position:absolute;bottom:20px;text-align:center;width:100%;color:white;transition:0.4s ease-out;font-size:250%;font-family:'Megrim', sans-serif;[/newclass]
[newclass=.CompendiumImageTwo:hover .CompendiumImageTwoTitle]color:transparent;pointer-events:none;[/newclass]
[newclass=.CompendiumImageTwoText]color:transparent;padding:20px;transition:0.6s ease-out;font-size:105%;font-family:'Quicksand', sans-serif;position:relative;[/newclass]
[newclass=.CompendiumImageTwoText a]color:transparent;padding:20px;transition:0.6s ease-out;font-size:115%;font-family:'Quicksand', sans-serif;position:absolute;bottom:-10px;right:10px;[/newclass]
[newclass=.CompendiumImageTwo:hover .CompendiumImageTwoText]color:white;[/newclass]
[newclass=.CompendiumImageTwo:hover .CompendiumImageTwoText a]color:white;font-family:'Quicksand', sans-serif;font-size:115%;transition:0.3s ease-out;position:absolute;bottom:-10px;right:10px;[/newclass]
[newclass=.CompendiumImageTwo:hover .CompendiumImageTwoText a:hover]color:#FF9DB6;font-family:'Quicksand', sans-serif;font-size:115%;position:absolute;bottom:-10px;right:10px;[/newclass]

[newclass=.CompendiumImageThree]grid-area:THREE;height:350px;background-image:url(https://i.imgur.com/ZAdhGAr.jpg);background-size:cover;background-position:center;border-radius:0px 20px 20px 0px;transition:0.4s ease-out;position:relative;overflow:hidden;[/newclass]
[newclass=.CompendiumImageThreeFilter]background-color:transparent;height:100%;transition:0.4s ease-out;overflow-y:auto;[/newclass]
[newclass=.CompendiumImageThree:hover .CompendiumImageThreeFilter]background-color:rgba(166,56,144, 0.7);overflow-y:auto;[/newclass]
[newclass=.CompendiumImageThree:hover]background-image:url(https://i.imgur.com/ZAdhGAr.jpg);background-size:cover;background-position:center;border-radius:0px 20px 20px 00px;overflow-x:hidden;[/newclass]
[newclass=.CompendiumImageThreeFilter::-webkit-scrollbar]background-color:transparent;[/newclass]
[newclass=.CompendiumImageThreeFilter::-webkit-scrollbar-thumb]background-color:transparent;border-radius:10px;[/newclass]
[newclass=.CompendiumImageThreeFilter:hover::-webkit-scrollbar]background-color:transparent;[/newclass]
[newclass=.CompendiumImageThreeFilter:hover::-webkit-scrollbar-thumb]background-color:#FFA6ED;border-radius:10px;[/newclass]

[newclass=.CompendiumImageThreeTitle]position:absolute;right:20px;bottom:20px;text-align:right;width:100%;color:white;transition:0.4s ease-out;font-size:250%;font-family:'Megrim', sans-serif;[/newclass]
[newclass=.CompendiumImageThree:hover .CompendiumImageThreeTitle]color:transparent;pointer-events:none;[/newclass]
[newclass=.CompendiumImageThreeText]color:transparent;padding:20px;transition:0.6s ease-out;font-size:105%;font-family:'Quicksand', sans-serif;position:relative;[/newclass]
[newclass=.CompendiumImageThreeText a]color:transparent;padding:20px;transition:0.6s ease-out;font-size:115%;font-family:'Quicksand', sans-serif;position:absolute;bottom:-10px;right:10px;[/newclass]
[newclass=.CompendiumImageThree:hover .CompendiumImageThreeText]color:white;[/newclass]
[newclass=.CompendiumImageThree:hover .CompendiumImageThreeText a]color:white;font-family:'Quicksand', sans-serif;font-size:115%;transition:0.3s ease-out;position:absolute;bottom:-10px;right:10px;[/newclass]
[newclass=.CompendiumImageThree:hover .CompendiumImageThreeText a:hover]color:#FFA6ED;font-family:'Quicksand', sans-serif;font-size:115%;position:absolute;bottom:-10px;right:10px;[/newclass]

[attr="class",CompendiumContainerTwo]

[attr="class",CompendiumContainerGridTwo]

[attr="class",CompendiumImageOne]

[attr="class",CompendiumImageOneFilter]

[attr="class",CompendiumImageOneTitle]Character One

[attr="class",CompendiumImageOneText]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue tortor, placerat vel gravida sed, accumsan a enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer a vulputate nibh, sed pretium ex. Sed pharetra libero id lacus ultricies, sit amet volutpat dolor sagittis. In hac habitasse platea dictumst. Phasellus vel massa quis nibh lobortis volutpat ac non ante. Sed sem ex, suscipit vehicula iaculis viverra, accumsan vel risus. Nam luctus rutrum dictum.
[break][break]

Post by illirica on May 26, 2021 18:24:48 GMT

I keep meaning to put this here - very basic character sheet template:

[attr="style","display:grid;grid-column-gap:10px;grid-template-areas:'Left Right';place-items:center;margin-bottom:10px;padding:10px;"]

[attr="style","grid-area:Left;"]

CHARACTER NAME
Alias 1, Alias 2, Alias 3

Date of Birth: Tuesday

Height: no

Weight: yes

Mantra:

Special:

Likes:

Dislikes: hey this is some filler text to see what happens if we stretch out the width here, that's all it is, don't worry about it, no big deal.

You can add more stuff to this section or take some out, do whatever you need to.

[attr="style","grid-area:Right;width:400px;"]

Biography

Biographical Information goes here
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Other Information

Other Information goes here
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

"Some sort of catchphrase or something?"

[div][attr="style","display:grid;grid-column-gap:10px;grid-template-areas:'Left Right';place-items:center;margin-bottom:10px;padding:10px;"]
[div][attr="style","grid-area:Left;"][div align="Center"][font size="4"]TITLE[/font]
[i]SUBTITLE[/i][/div]

[div align="Left"]BASIC INFO GOES HERE - THE STUFF TO THE SIDE OF THE IMAGE[/div][/div]
[div][attr="style","grid-area:Right;width:400px;"][img src="YOUR IMAGE URL GOES HERE, LEAVE THE QUOTES IN" style="border:1px black solid;"][/div][/div]
SUBSECTION 1 TITLE
[div style="margin-left:10px;"]SUBSECTION 1 INFO GOES HERE  [/div]

SUBSECTION 2 TITLE
[div style="margin-left:10px;"]SUBSECTION 2 INFO GOES HERE [/div]

[div align="Center"]WHATEVER YOU WANT AT THE BOTTOM GOES HERE - YOU CAN THROW IN ANOTHER IMAGE IF YOU WANT, OR A PHRASE, OR DELETE THIS ENTIRELY[/div]

Last Edit: May 26, 2021 18:33:11 GMT by illirica

Welcome to RPF!
RPF Discord

Div Templates

Post by Annasiel on Feb 1, 2021 8:31:14 GMT

Post by Annasiel on Feb 1, 2021 8:32:04 GMT

Post by Splendor on Feb 1, 2021 8:34:58 GMT

Post by Reyn on Feb 1, 2021 12:30:36 GMT

Post by illirica on Feb 7, 2021 23:13:58 GMT

Post by illirica on Feb 10, 2021 15:27:35 GMT

Post by Reyn on Feb 10, 2021 16:16:38 GMT

Post by illirica on Feb 17, 2021 3:21:44 GMT

Post by Sans the Medic on Feb 27, 2021 17:37:43 GMT

Post by Reyn on Mar 11, 2021 15:09:35 GMT

Post by Reyn on Apr 20, 2021 9:23:16 GMT

Post by Goodnight on Apr 21, 2021 16:51:26 GMT

Post by Reyn on Apr 26, 2021 6:59:04 GMT

Post by Goodnight on Apr 26, 2021 11:40:59 GMT

Post by illirica on May 26, 2021 18:24:48 GMT