Div Template Thread

Stitches

Stitches

Resident Witch
Staff member
This is the div template thread. Divs posted here are free use. These range from basic post divs to character sheet divs. Please be respectful- if a div isn't posted here, ask the creator before you take it and modify it.
 

Standardized ACF Code. Available for any ACF people who need it. Copy code below! Credit to Illirica for making it work again.



Code: 
[div style="border-top: 4px #CCCCCC solid; border-bottom: 4px #cccccc solid; border-left: 4px #000000 solid; border-right: 4px #000000 solid;"][div style="border-right: 4px #cccccc solid; border-left: 4px #cccccc solid; border-bottom: 4px #000000 solid; border-top: 4px #000000 solid;padding:8px; background-color:white;color:black;font-family:'courier new';"]

content here

[/div][/div]
 

A dyslexia-friendly div, with white text on a grey background. Copy the code below. Credit to Illirica for originally creating it.
Code: 
[div="padding:10px;font-size:14px;line-height:25px;letter-spacing:3px;background-color:#444444;color:white;font-family:'Open Sans';"]
Text here
[/div]
 
-Reverse-
SUBTITLE


FIELD 1:
Text
FIELD 2:
Text
FIELD 3:
Text
FIELD 4:
Text
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Proin elit turpis, bibendum ut nibh eu, ullamcorper tincidunt mi. Pellentesque porttitor magna tincidunt dapibus porttitor. Quisque maximus vehicula vehicula. Morbi ultrices arcu sit amet quam fermentum pharetra. Aenean eu eros condimentum, commodo turpis vitae, dignissim magna. Ut interdum lacinia augue. Phasellus eget euismod mi. Donec faucibus vitae leo at imperdiet. Nulla velit tellus, lobortis nec fringilla pulvinar, semper nec justo. Duis ultricies cursus nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ornare, neque quis pulvinar congue, turpis risus cursus tortor, sed luctus orci purus sed nulla. Donec aliquet viverra magna, sed molestie sem ornare id.

Etiam vulputate id massa sit amet cursus. Phasellus vestibulum nibh augue, vitae tempus massa ultrices non. Nulla tempor finibus urna, quis lacinia quam blandit vel. Suspendisse vel accumsan velit, vel venenatis justo. Donec sodales semper turpis non tincidunt. Pellentesque porta eleifend sem fermentum ultricies. In sed arcu ipsum. Phasellus fermentum laoreet sapien, laoreet auctor turpis dapibus eget. Duis vitae justo risus.

Nam cursus leo lobortis, finibus leo at, egestas quam. Curabitur mattis bibendum egestas. Ut sed mauris lectus. Donec quam ex, sollicitudin a faucibus eu, auctor vel dui. Sed blandit erat et nibh condimentum eleifend. Nam gravida ex ut odio mattis semper. Suspendisse eros tellus, maximus sed nisi a, mollis aliquet purus. Maecenas mollis, ante ut dignissim gravida, mauris tortor aliquet nisi, sed egestas quam risus at diam. Nulla eget venenatis magna, eget venenatis velit. Mauris condimentum placerat sem id dictum. Integer purus mauris, sagittis a leo vel, pulvinar dapibus mi. Vivamus sagittis ex nec purus tempus, vel ultricies mauris congue. Cras mollis justo in elit congue porta a quis velit. Phasellus risus libero, accumsan in venenatis ac, blandit id ligula. Etiam neque mi, iaculis nec varius sit amet, varius sit amet ipsum. Morbi iaculis fermentum ultrices.

Aenean lacinia, arcu eu dictum molestie, nibh urna molestie nulla, non bibendum tortor elit efficitur lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut aliquam orci ac neque ultricies, eget laoreet enim lacinia. Quisque non sodales ligula. Proin mattis tincidunt iaculis. Ut porttitor sem vel augue euismod aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum scelerisque dignissim sem, in imperdiet augue tincidunt eget. Sed commodo nulla tempor sapien ornare rutrum maximus sed nisi. Mauris eu lacus eget mi molestie finibus. Curabitur augue diam, consequat vitae fringilla quis, accumsan vel odio. Cras gravida augue at suscipit tristique.

Aenean ultrices ligula neque, mattis pellentesque nisi sollicitudin sit amet. Duis vehicula eros sed bibendum placerat. Etiam eget augue iaculis, pellentesque nisi in, maximus nisi. Curabitur maximus lorem vel nisl gravida porttitor. Fusce nec pellentesque augue, in pretium ligula. Etiam ac tellus lectus. Donec facilisis tincidunt posuere. Phasellus ornare dolor eget ipsum dapibus, at faucibus tortor convallis. Integer id tellus et tortor blandit tristique vitae non nunc. Vivamus lobortis velit mauris, ut laoreet ipsum blandit vel. Aenean mattis ex pretium lorem hendrerit, eu pharetra est tempus. Mauris ipsum diam, auctor at enim quis, suscipit hendrerit dolor.
Code by Reyn
Art source: WACCA Reverse

Code: 
[comment]


【STYLE】


[/comment]
[style]
@import url('https://fonts.googleapis.com/css2?family=Megrim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');

.REVERSEVar{/*

BEFORE YOU POST: Please replace "REVERSE" in the class names with something else- I recommend using the name of your character.  Multiple posts on the same page with the same class names WILL cause things to stop working, even if it worked the first time you posted it.

Change fonts and colours in the section below.  If you're using googlefonts and want to change the fonts, then you'll need to change the font names in the @import section above as well.  Please don't remove the "code by" thing <3

*/--fonttitle: Megrim, sans-serif;
--fontmain: Dosis, sans-serif;
--backgroundcolor: #040209;
--imagemain: url(https://i.imgur.com/QWB5lfD.jpg);
--text: #D9D1DD;
--accent: #43A2FE;
--padding:20px;/*

You don't have to worry about changing anything after this point if you want to retain the original design. Display code is under "DISPLAY"- change the text fields between the [class] tags to say whatever you want. Let me know if you need help with anything- I'm most active on the Discord, but you can shoot me a PM here as well!*/}

.REVERSEWrap{
font-family:var(--fontmain);
color:var(--text);
font-size:14px;
}

.REVERSEWidth{
max-width:800px;
background-color:var(--backgroundcolor);
background-size:50%;
height:500px;
margin:auto;}

@media screen and (max-width: 800px){
.REVERSEWidth{
max-width:500px;
background-color:var(--backgroundcolor);
background-size:50%;
height:auto;
margin:auto;}
}

.REVERSEGrid{
display:grid;
grid-template-columns:40% 60%;
grid-template-rows:100%;
grid-template-areas:'LIST PROSE';
}

@media screen and (max-width: 800px){
.REVERSEGrid{
display:grid;
grid-template-columns:100%;
grid-template-rows:500px auto;
grid-template-areas:'LIST' 'PROSE';
}
}

.REVERSEList{
grid-area: LIST;
padding-left:40px;
padding-top:20px;
padding-bottom:20px;
height:100%;
width:100%;
}

@media screen and (max-width: 800px){
.REVERSEList{
grid-area: LIST;
padding:20px;
height:100%;
width:100%;
}
}

.REVERSEProse{
grid-area: PROSE;
height:500px;
width:100%;
overflow:auto;
scrollbar-color: var(--accent) transparent;
scrollbar-width: thin;
}

.REVERSEProse::-webkit-scrollbar {
width: 1px;
}

.REVERSEProse::-webkit-scrollbar-track {
background-color:transparent;
}

.REVERSEProse::-webkit-scrollbar-thumb {
background-color:var(--accent);
width:4px;
border-right:3px solid rgba(0, 0, 0, 0);
}

@media screen and (max-width: 800px){
.REVERSEProse{
grid-area: PROSE;
height:100%;
width:100%;
}
}

.REVERSEBody{
padding-top:20px;
padding-bottom:20px;
padding-left:40px;
padding-right:40px;
text-align:justify;
}

@media screen and (max-width: 800px){
.REVERSEBody{
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
padding-top:0px;
text-align:justify;
}
}

.REVERSEImage{
height:250px;
width:200px;
background-image:var(--imagemain);
background-size:cover;
background-position:center center;
margin:auto;
}

.REVERSETitle{
font-family:var(--fonttitle);
font-size:30px;
text-align:center;
margin:auto;
color:var(--accent);
}

.REVERSESubtitle{
font-size:12px;
margin:auto;
text-align:center;
}

.REVERSEAccentText{
color:var(--accent);
font-size:17px;
display:inline;
}
[/style]
[comment]


【DISPLAY】


[/comment]
[class="REVERSEVar"][class="REVERSEWrap"][class="REVERSEWidth"][class="REVERSEGrid"][class="REVERSEList"][class="REVERSETitle"]-Reverse-[/class]
[class="REVERSESubtitle"]SUBTITLE[/class]

[class="REVERSEImage"][/class]

[class="REVERSEAccentText"]FIELD 1:[/class] Text
[class="REVERSEAccentText"]FIELD 2:[/class] Text
[class="REVERSEAccentText"]FIELD 3:[/class] Text
[class="REVERSEAccentText"]FIELD 4:[/class] Text[/class][class="REVERSEProse"][class="REVERSEBody"][class="REVERSEAccentText"]Lorem[/class] ipsum dolor sit amet, consectetur adipiscing elit. Proin elit turpis, bibendum ut nibh eu, ullamcorper tincidunt mi. Pellentesque porttitor magna tincidunt dapibus porttitor. Quisque maximus vehicula vehicula. Morbi ultrices arcu sit amet quam fermentum pharetra. Aenean eu eros condimentum, commodo turpis vitae, dignissim magna. Ut interdum lacinia augue. Phasellus eget euismod mi. Donec faucibus vitae leo at imperdiet. Nulla velit tellus, lobortis nec fringilla pulvinar, semper nec justo. Duis ultricies cursus nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ornare, neque quis pulvinar congue, turpis risus cursus tortor, sed luctus orci purus sed nulla. Donec aliquet viverra magna, sed molestie sem ornare id.

Etiam vulputate id massa sit amet cursus. Phasellus vestibulum nibh augue, vitae tempus massa ultrices non. Nulla tempor finibus urna, quis lacinia quam blandit vel. Suspendisse vel accumsan velit, vel venenatis justo. Donec sodales semper turpis non tincidunt. Pellentesque porta eleifend sem fermentum ultricies. In sed arcu ipsum. Phasellus fermentum laoreet sapien, laoreet auctor turpis dapibus eget. Duis vitae justo risus.

Nam cursus leo lobortis, finibus leo at, egestas quam. Curabitur mattis bibendum egestas. Ut sed mauris lectus. Donec quam ex, sollicitudin a faucibus eu, auctor vel dui. Sed blandit erat et nibh condimentum eleifend. Nam gravida ex ut odio mattis semper. Suspendisse eros tellus, maximus sed nisi a, mollis aliquet purus. Maecenas mollis, ante ut dignissim gravida, mauris tortor aliquet nisi, sed egestas quam risus at diam. Nulla eget venenatis magna, eget venenatis velit. Mauris condimentum placerat sem id dictum. Integer purus mauris, sagittis a leo vel, pulvinar dapibus mi. Vivamus sagittis ex nec purus tempus, vel ultricies mauris congue. Cras mollis justo in elit congue porta a quis velit. Phasellus risus libero, accumsan in venenatis ac, blandit id ligula. Etiam neque mi, iaculis nec varius sit amet, varius sit amet ipsum. Morbi iaculis fermentum ultrices.

Aenean lacinia, arcu eu dictum molestie, nibh urna molestie nulla, non bibendum tortor elit efficitur lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut aliquam orci ac neque ultricies, eget laoreet enim lacinia. Quisque non sodales ligula. Proin mattis tincidunt iaculis. Ut porttitor sem vel augue euismod aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum scelerisque dignissim sem, in imperdiet augue tincidunt eget. Sed commodo nulla tempor sapien ornare rutrum maximus sed nisi. Mauris eu lacus eget mi molestie finibus. Curabitur augue diam, consequat vitae fringilla quis, accumsan vel odio. Cras gravida augue at suscipit tristique.

Aenean ultrices ligula neque, mattis pellentesque nisi sollicitudin sit amet. Duis vehicula eros sed bibendum placerat. Etiam eget augue iaculis, pellentesque nisi in, maximus nisi. Curabitur maximus lorem vel nisl gravida porttitor. Fusce nec pellentesque augue, in pretium ligula. Etiam ac tellus lectus. Donec facilisis tincidunt posuere. Phasellus ornare dolor eget ipsum dapibus, at faucibus tortor convallis. Integer id tellus et tortor blandit tristique vitae non nunc. Vivamus lobortis velit mauris, ut laoreet ipsum blandit vel. Aenean mattis ex pretium lorem hendrerit, eu pharetra est tempus. Mauris ipsum diam, auctor at enim quis, suscipit hendrerit dolor.
[/class][/class][/class][/class][/class][/class]
[div="text-align:center;font-size:75%;"]Code by [url=https://rp-forum.net/members/reyn.6/]Reyn[/url][/div]
[div="text-align:center;font-size:75%;"]Art source: WACCA Reverse[/div]
 
Last edited:
You must log in or register to reply here.
Back
Top