Jump to content
Csl

Free HTML Templates

Recommended Posts

A thread for all sorts of HTML templates that can be copied and used by anyone. This includes lore templates, post templates, character sheet templates, and more.

Feel free to post templates you've created and instruction for use, preferably with the below format:

  • Template demo (how it looks like when posted)
  • Template Code
  • Instructions / terms of use / about the template

Use this coding tutorial for instructions on how to input HTML/inline CSS into the Valucre text editor.

Have fun!

Edited by Csl

Share this post


Link to post
Share on other sites

Demo:

photo-1502919280275-1bed9aca68ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80

| Lux Anima |

Congue nam ullamcorper ultricies ullamcorper natoque a per per magnis odio faucibus dis lacinia mus inceptos ullamcorper vestibulum in nec ut in consectetur egestas adipiscing. Faucibus eros proin dui a ad lobortis nam tempus natoque in venenatis velit a quis a mi adipiscing a elementum phasellus conubia congue in a viverra condimentum quisque. Vitae parturient suspendisse eros varius natoque pharetra interdum a posuere est porttitor suspendisse urna orci et a a feugiat ad. Adipiscing adipiscing interdum ligula suspendisse hendrerit ultricies enim a non parturient duis ultrices quis parturient condimentum a per fames ridiculus eu cum a adipiscing sociis at pharetra netus a.

Posuere adipiscing a orci a himenaeos commodo facilisis leo cum lacinia egestas eu dui ultrices a posuere eros hendrerit in aptent tristique nulla tellus parturient. Parturient dignissim nostra ligula mi fames bibendum suspendisse torquent sociosqu ullamcorper ac sagittis posuere id ligula at class proin in a platea a lacus convallis at risus. Class mi integer posuere lobortis commodo sit parturient nam fusce magnis consequat lorem adipiscing a elit vestibulum mi aliquet.

Vestibulum est a suscipit suspendisse a condimentum integer nam euismod dolor parturient dui netus a parturient id suspendisse sem dolor dui torquent parturient placerat a primis posuere cubilia. Praesent netus consequat a enim consectetur ipsum eros senectus suspendisse lobortis quis ac aptent parturient parturient elementum ac blandit curabitur facilisis vitae himenaeos a ad sed arcu. Euismod elit suspendisse vestibulum suspendisse aptent nam condimentum torquent consectetur natoque id aliquet a vestibulum massa ligula at natoque leo phasellus sed. Aliquet integer per luctus id vestibulum est cursus nibh blandit adipiscing a a id cursus vestibulum et molestie interdum scelerisque. Pretium conubia ad suspendisse a at curabitur a praesent dis ad suspendisse neque euismod hendrerit mattis dolor nam a donec condimentum condimentum massa nec.

Code:

<div style="width:85%; margin:auto; border-top: 5px solid; border-bottom: 5px solid; padding: 2%; letter-spacing:1px; font-family: Palatino Linotype; text-align:justify;">

	<p><img src="IMAGE URL" style="width:100%;"></p>
	<div style="font-size:20px;text-align:center;font-variant:small-caps;">| Name/Quote |</div>
	<div style="width:80%;margin:auto; padding: 1% 0">
		<p>Paragraph text here</p>
	</div>
</div>

 

 

Instructions/Terms of use:

This is template with aesthetic letter-spacing, justified text, and a border for the top and bottom of the template. Useful for posts, character sheets, whatever catches your fancy. There's also a Quote/Name header that has small-caps text.

Edit instructions

  • Replace "IMAGE URL" with the url for the image you want to put in the header of your post
  • Replace "Palatino Linotype" with whatever font you want to have

No need to credit me!

Share this post


Link to post
Share on other sites

Character Card Example:

Spoiler

Jane Doe

A Character

Female-Headshot-Black-and-White.jpg
Birth Year 18,598 WT (age 0)
Species Human
Ethnicity Silhouette
Gender Female
Height 5' 2"
Weight 100 lbs
Hair Color Black
Eye Color Black
Skin Color Black
Voice Mute

"Whoa, I have a character profile!"

―A Character

Biography

Backstory information about the character goes here. Use the page break tags in this code to break

The second paragraph of backstory for this blank character.

Personality

Information about your character's personality.

Skills

  • Generic — Has base abilities across the board
  • Plain — Is so boring, nobody knows they are actually a character and not just an NPC, excellent for blending into a crowd

Powers & Enhancements

  • Muggle — Has no magical abilities
  • Normal — Has no bodily enhancements

Code:

Spoiler

<!DOCTYPE html>
<html>

<div id="container" style="width:100%;background-image:url(https://s3.envato.com/files/236662912/Walkway%20Mobile%20Ed.01/T_Walkway_08_BC.jpg);padding:10% 0% 10% 0%; margin:0 auto;float:left;"> <!-- make sure this is a square, seamless texture -->


<div id="centerer" style="margin:0 auto;width:850px;background-color:tan;">
<div id="border" style="margin:0 auto;width:850px;float:left;padding:25px 0 25px 0;    background:rgba(0,0,0,0.80);;border:4px outset #00FFFF;"> <!-- replace all instances of 00FFFF with a hex color of choice -->


<div id="body" style="width:800px;padding:0;margin:auto;background-color:transparent;">
    
  
  
<!-- ///// IMAGE ///// -->

    	<div id="name" style="text-align:center;width:400px;margin:0 auto;height: 50px;font-family:century gothic, sans-serif;float:left;">
       		<div id="sliderleft" style="text-align: center;padding:5px 0% 5px 0%;border:2px outset #00FFFF;border-collapse:collapse;width:50%;float:right;">
    	<h1 style="margin:0 auto;padding:0;font-size:18pt;font-weight:bold;color:white;line-height:100%;">Jane Doe</h1>
        	</div>
		</div>
        
		<div id="alias" style="text-align:center;width:400px;margin:0 auto;height: 50px;font-family:century gothic, sans-serif;float:left;">
        	<div id="sliderright" style="text-align: center;padding:5px 0% 5px 0%;border:2px outset #00FFFF;border-collapse:collapse;width:50%;background-color:#00FFFF;"> <!-- there are two instances here -->
    	<h1 style="margin:0 auto;padding:0;font-size:18pt;font-weight:normal;color:black;line-height:100%;">A Character</h1>
        	</div>
		</div>
        
	<div id="image" style="width:396px;padding:0;margin:0;border-collapse:collapse;float:left;border:2px outset #00FFFF;background-color:#001603;"> <!-- background color is what background appears behind a transparent png image-->
			<img src="https://www.ciobacademy.org/wp-content/uploads/2017/07/Female-Headshot-Black-and-White.jpg" width="100%" style="display:block;">
	</div> <!--profile-->

<!-- ///// INFOBOX ///// -->

	<div id="medic">
    	<table style="width:400px;height:400px;padding:0;margin:0;border-collapse:collapse;font-family:arial,sans-serif;font-weight:normal;font-size:13pt;text-align:left;color:white;float:left; line-height: 0;">
   		 <!--Birth-->
   		 	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;text-align:left;padding: 5px 0 5px 15%;width:50%;">Birth Year</td>
   			 <td style="font-size:1em;text-align:left;padding: 5px 0 5px 5%;width:50%;">18,598 WT
           		 <span style="font-size:.7em;">(age 0)</span></td>
			</tr>
        <!--Race-->
   		 	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;padding:5px 0 5px 15%;width:50%;">Species</td>
   			 <td style="font-size:1em;padding:5px 0 5px 5%;width:50%;">Human</td>
			</tr>
		<!--Ethnicity-->
    	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;padding: 5px 0 5px 15%;width:50%;">Ethnicity</td>
   			 <td style="font-size:1em;padding: 5px 0 5px 5%;width:50%;">Silhouette</td>
    	</tr>
   		 <!--Gender-->
    	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;text-align:left;padding: 5px 0 5px 15%;width:35%;">Gender</td>
   			 <td style="font-size:1em;text-align:left;padding: 5px 0 5px 5%;width:65%;">Female</td>
    	</tr>
        <!--Height-->
   		 	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;padding:5px 0 5px 15%;width:50%;">Height</td>
   			 <td style="font-size:1em;padding:5px 0 5px 5%;width:50%;">5' 2"</td>
			</tr>
   		 <!--Weight-->
    	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;text-align:left;padding: 5px 0 5px 15%;width:50%;">Weight</td>
   			 <td style="font-size:1em;text-align:left;padding: 5px 0 5px 5%;width:50%;">100 lbs</td>
    	</tr>
        <!--Hair-->
    	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;padding:5px 0 5px 15%;width:50%;">Hair Color</td>
   			 <td style="font-size:1em;padding:5px 0 5px 5%;width:50%;">Black</td>
    	</tr>
   		 <!--Eye-->
    	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;text-align:left;padding: 5px 0 5px 15%;width:50%;">Eye Color</td>
   			 <td style="font-size:1em;text-align:left;padding: 5px 0 5px 5%;width:50%;">Black</td>
    	</tr>
        <!--Skin-->
    	<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;padding:5px 0 5px 15%;width:50%;">Skin Color</td>
   			 <td style="font-size:1em;padding:5px 0 5px 5%;width:50%;">Black</td>
    	</tr>
		<!--Voice-->
		<tr style="background-color:transparent;">
   			 <td style="font-weight:bold;padding:5px 0 5px 15%;width:50%;">Voice</td>
   			 <td style="font-size:1em;padding:5px 0 5px 5%;width:50%;">Mute</td>
		</tr>
    	</table>
	</div> <!-- medic -->
    
    
<!-- ///// DETAIL WORK ///// -->
    
	<div id="quote" style="text-align:center;width:800px;height:65px;margin:0 auto;padding: 0;padding-top:25px;font-family:century gothic, sans-serif;float:left;color:#00FFFF;">
        <p style="font-size:12pt;margin:0;padding:0;">"Whoa, I have a character profile!"</p>
		<p style="font-size:9pt;font-style:italic;margin:0;padding:0">―A Character</p>
	</div>
    
    
<!-- ///// DETAIL WORK ///// -->
    
    <div id="soul" style="text-align:center;width:800px;padding:10px 0 0px 0;margin:0 auto;font-family:century gothic, sans-serif;float:left;color:#eee;">
    	<h1 style="font-size:15pt;font-weight:bold;color:white;">Biography</h1>
        <p style="font-size:10pt;">
	Backstory information about the character goes here. Use the page break tags in this code to break
<br><br>
	The second paragraph of backstory for this blank character.</p>
	</div>
    
    <div id="heart" style="text-align:center;width:800px;padding:10px 0 0 0;margin:0 auto;font-family:century gothic, sans-serif;float:left;color:#eee;">
    	<h1 style="font-size:15pt;font-weight:bold;color:white;">Personality</h1>
        <p style="font-size:10pt;">Information about your character's personality.</p>
	</div>
    
	<div id="heart" style="text-align:center;width:800px;padding:10px 0 0 0;margin:0 auto;font-family:century gothic, sans-serif;float:left;color:#eee;">
    
    	<div id="skills" style="width:50%;float:left;padding:0 5%;">
           	<h2 style="font-size:15pt;color:white;">Skills</h1>
        	<ul style="text-align:left;font-size:10pt;padding:0 0 0 20px;">
            	<li><b>Generic</b> — Has base abilities across the board</li>
                <li><b>Plain</b> — Is so boring, nobody knows they are actually a character and not just an NPC, excellent for blending into a crowd</li> 
            </ul>
        </div>
        
    	<div id="powers" style="width:50%;float:left;padding:0 5%;">
           	<h2 style="font-size:15pt;color:white;">Powers & Enhancements</h2> <!-- one or the other of these can be removed -->
        	<ul style="text-align:left;font-size:10pt;padding:0 0 0 20px;">
            	<li><b>Muggle</b> — Has no magical abilities</li>
				<li><b>Normal</b> — Has no bodily enhancements</li>
            </ul>
        </div>
        
	</div>

</div> <!-- End Upper Stratum-->

</div> <!--Border overflow: auto;-->
</div> <!--Centerer-->
</div> <!--Container-->

</html>

 

 

Share this post


Link to post
Share on other sites

Location Article Example:

Spoiler
p07wb9xk.jpg
A Location
Dimensions
Length 142.3 mi
Area 1100.09 mi²
Elevation 3,325 ft
Geography
Climate
  • Temperate
  • Alpine
Mean Summer Temperature 67°F
Mean Winter Temperature 32°F
Political
Nations
  • King's Kingdom
  • Emperor's Empire (before 1100 AD)
(Ask Me Anything)
"You see this? This is a quote."
―your humble narrator

This is an example of a Wikipedia-style lore article, though this one is specifically based on the style of the Star Wars-entric wiki, Wookieepedia. The first section here is meant as a general introduction and summary of your subject, however; if you lack enough content for a more detailed article, you can just summarize everything here and skip adding additional sections below.

I am filling the example content with information to help you with coding. I highly suggest using this wonderful tool in order to test and see you code quickly as you adjust it. You can also do this in a browser editor (Firefox has the only editor that is any good imo though). If you just can't figure things out, I might be willing to build a lore article for you in exchange for compensation. But I don't have the time to hold personal tutoring classes on HTML coding, so please don't come asking me for help with every problem you run into when using this. Now, let's move on.

First thing to be aware of is that if you copy and paste the code from this template multiple times, it may screw up the formatting a little, and you may have to adjust it. The indents you see in the code are a coder's way of trying to organize the various sections of content. These sometimes get screwed up in translation, which can result in weird spaces or unwanted indents in your article. If this is the case, backspace any gaps or indents and make them again, using only enter or tab. Do not use the spacebar.

Geography


Peaks

"P" sections, like this, are where you put the bulk of your text. I use them in a few other spots in other code, but generally speaking their are your main body containers. Make sure when you make a new "P" container, that it has a /p at the other end of it, and that you copy my style="font-family:arial,san-serif; text-align:justify;" section. That is what formats the text to look and act a certain way.

Image

An image aligned to the left

Use the br br tags in order to make a break between text. Because spaces made by hitting enter will not count as spaces in the finished product (if you are doing it right), the br tags are what you use instead. A single br tag will move the subject after it one space down. In order to get a gap in the text like you see in the finished code, you will need two of them.

Now, another thing to note is that if you copy a section in the code (for example, you want to make a new p section), when you go to copy and paste, it may increase the indention here in the code. That is no big deal, it won't break anything. But for the sake of keeping this formatted neatly so you can find your way around, I'd suggest backspacing the excess indents.

Valleys

Looking up at the infobox, there are a few things to be aware of here as well. One is that you can add many more options to an infobox, or remove them. For example, you could omit the "Geography" and "Political" subheads and just replace "Dimensions" with "General Information" or something similar. Standard Wikipedia articles are formatted more like that, whereas Wookieepedia that I based this template on uses the subheads. Also, not that if you decide to change or add new info sections, you will need to make sure they alternate between white and grey. This is determined by the background color "ffffff" = white and "eeeeee" = grey. These are hex colors.

History


"Look, another example quote!"
―your humble narrator
Image

An image aligned to the right

I want to stress that the code is not infallable, and you may have to make fixes and adjustments both to things that you break, and to things that I did not forsee when I built it. I have set it up to be as responsive as I can make it, but there will be moments where things might not align right because there is too much or too little of something. Try to adjust word counts or image sizes if you encounter problems like that.

I don't think there is much more else to note. If you are interested in having me set up the code for lore or character articles for you, please check out my design thread here.

Related Topics


 

Code:

Spoiler

<!DOCTYPE html>
<html>
<div id="infobox" style="width: 300px;float:right;margin-left:15px;"> <!-- The id="" section is just for your own reference in keeping track of what div you are working with -->

    
    <table style="width:100%;padding: 0;margin: 0;border-collapse: collapse;font-family:arial,sans-serif;font-weight:normal;font-size: 10pt;">
            <tr>
                <img src="https://ichef.bbci.co.uk/wwfeatures/live/976_549/images/live/p0/7w/b9/p07wb9xk.jpg" width="100%" style=display:block;></tr><!-- Here is where you place your image link -->
            <tr style="background-color:#3e4223; color:white; text-align: center;"><!-- the 1st color you will need to change, this one is different the the subsequent ones -->
                <th style="padding:5px 0px;"><b>A Location</b></th>
            </tr>
            <tr style="background-color:#b5b78f; font-weight: normal; text-align: center;color:black;"><!-- the 2nd color -->
                <th style="padding:5px 0px;">Dimensions</th>
            </tr>
    </table>
    
    <table style="width:100%;padding:0;margin:0;border-collapse:collapse;font-family:arial, sans-serif;font-weight:normal;font-size:10pt;text-align:left;color:black;">
            <!--Length at longest point-->
            <tr style="background-color:#eeeeee;">
                <td style="font-size:.9em;padding:5px 0 5px 5%;width:45%;">Length</td>
                <td style="font-size:.9em;padding:5px 0 5px 5%;width:45%;">142.3 mi</td>
            </tr>
            <!--Surface area-->
            <tr style="background-color:#ffffff;">
                <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">Area</td>
                <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">1100.09 mi²</td>
            </tr>
            <!--elevation-->
        	<tr style="background-color:#eeeeee;">
            	<td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">Elevation</td>
            	<td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">3,325 ft</td>
       		</tr>
    </table>
    
    <table style="width:100%;padding: 0;margin: 0;border-collapse: collapse;font-family:arial,sans-serif;font-weight:normal;font-size: 10pt;color:black;">
            <tr style="background-color:#b5b78f; font-weight: normal; text-align: center;"><!-- the 3rd color -->
                <th style="padding:5px 0px;">Geography</th>
            </tr>
    </table>
    
    <table style="width:100%;padding:0;margin:0;border-collapse:collapse;font-family:arial, sans-serif;font-weight:normal;font-size:10pt;text-align:left;color:black;">
        <!--Biomes?-->
        <tr style="background-color:#eeeeee;">
            <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">Climate</td>
            <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">
            	<ul style="list-style-type:square;padding:0;margin:0;">
					<li>Temperate</li>
                    <li>Alpine</li>
               	</ul>
            </td>
        </tr>
        <!--Mean Temperatures-->
        <tr style="background-color:#ffffff;">
            <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">Mean Summer Temperature</td>
            <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">67°F</td>
        </tr>
        <!--Winter temp-->
        <tr style="background-color:#eeeeee;">
            <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">Mean Winter Temperature</td>
            <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">32°F</td>
        </tr>
    </table>
    
    <table style="width:100%;padding: 0;margin: 0;border-collapse: collapse;font-family:arial,sans-serif;font-weight:normal;font-size: 10pt;color:black;">
        <tr style="background-color:#b5b78f; font-weight: normal; text-align: center;"><!-- the 4th color -->
            <th style="padding:5px 0px;">Political</th>
        </tr>
    </table>
    
    <table style="width:100%;padding:0;margin:0;border-collapse:collapse;font-family:arial, sans-serif;font-weight:normal;font-size:10pt;text-align:left;color:black;">
        <!--Established-->
        <tr style="background-color:#eeeeee;">
            <td style="font-size: .9em;padding: 5px 0 5px 5%;width: 45%;">Nations</td>
            <td style="font-size: .9em;padding: 5px 0 5px 5%;width: 45%;">
				<ul style="list-style-type:square;padding:0;margin:0;">
					<li>King's Kingdom</li>
					<li>Emperor's Empire <span style="font-size:.8em;">(before 1100 AD)</span></li>
               	</ul>
            </td>
        </tr>
    </table>
    
    
       <table style="width:100%;padding: 0;margin: 0;border-collapse: collapse;font-family:arial,sans-serif;font-weight:normal;font-size: 10pt;color:black;">
        <tr style="background-color:#b5b78f; font-weight: normal; text-align: center;"><!-- the 5th color -->
            <th style="padding:5px 0px; border-radius: 0px 0px 10px 10px;">
            	<a style="color:#000;font-size:10px;font-weight:normal;font-family:arial, sans-serif;text-decoration:none;" href="your link here">(Ask Me Anything)</a>
            </th>
        </tr>
    </table>
    
</div> <!-- end of the infobox section -->



<center style="font-family:arial; font-size:.9em;"><i>"You see this? This is a quote."</i><br>―your humble narrator</center>
        
	<p id="intro" style="font-family:arial,san-serif; text-align:justify;">
This is an example of a <b>Wikipedia-style lore article</b>, though this one is specifically based on the style of the Star Wars-entric wiki, <a href="https://starwars.fandom.com/wiki/Main_Page">Wookieepedia</a>. The first section here is meant as a general introduction and summary of your subject, however; if you lack enough content for a more detailed article, you can just summarize everything here and skip adding additional sections below.
	<br><br>
    I am filling the example content with information to help you with coding. I highly suggest using this wonderful tool in order to test and see you code quickly as you adjust it. You can also do this in a browser editor (Firefox has the only editor that is any good imo though). If you just can't figure things out, I might be willing to build a lore article for you in exchange for compensation. But I don't have the time to hold personal tutoring classes on HTML coding, so please don't come asking me for help with every problem you run into when using this. Now, let's move on.
    <br><br>
    First thing to be aware of is that if you copy and paste the code from this template multiple times, it may screw up the formatting a little, and you may have to adjust it. The indents you see in the code are a coder's way of trying to organize the various sections of content. These sometimes get screwed up in translation, which can result in weird spaces or unwanted indents in your article. If this is the case, backspace any gaps or indents and make them again, using only <i>enter</i> or <i>tab</i>. Do not use the spacebar.
    </p>
	
    <h1 id="Geography" style="font-family:arial,san-serif;padding:0;margin:0;">Geography<hr style="padding:0;margin:0 0 10px 0;"></h1> <!-- This section can be renamed "biography" for a character, or the "history" section would be moved up here for an organization -->
    
    <h2 id="mountains" style="font-family:arial,san-serif;padding:0;margin:10px 0 0px 0;">Peaks</h2>
    <!-- gaps between sections like this are no big deal if you are only using enter and tab -->
    <p style="font-family:arial,san-serif; text-align:justify;">
    "P" sections, like this, are where you put the bulk of your text. I use them in a few other spots in other code, but generally speaking their are your main body containers. Make sure when you make a new "P" container, that it has a /p at the other end of it, and that you copy my <i>style="font-family:arial,san-serif; text-align:justify;"</i> section. That is what formats the text to look and act a certain way.
    </p>
    
    <div class="imagediv_left" style="float:left;"><img src="https://storage.needpix.com/rsynced_images/landscape-2457010_1280.jpg" height="auto" width="200" alt="Image" style="float: left; margin: 0px 10px 0px 0px;">
        <p style="font-size:0.8em; font-family:arial; color: #666666 !important; display:block !important; width: 200px;">
        An image aligned to the left
        </p>
    </div> 
    
    <!-- The above is an image div, it has been built to put an image aligned to the left side, though this is susceptable to problems. I would actually recommend not using it unless you are sure you have a nice big body of regular text around it. The reason being is that it will interfer with the headers (Geography, History, Biography, and/or other such titles with the underline beneath them). -->
    
    <!-- Another note is that you must close a P section before you can place an image. You CANNOT put an image div inside a P section. -->
    
	<p style="font-family:arial,san-serif; text-align:justify;">
    Use the br br tags in order to make a break between text. Because spaces made by hitting enter will not count as spaces in the finished product (if you are doing it right), the br tags are what you use instead. A single br tag will move the subject after it one space down. In order to get a gap in the text like you see in the finished code, you will need two of them.
	<br><br>
    Now, another thing to note is that if you copy a section in the code (for example, you want to make a new p section), when you go to copy and paste, it may increase the indention here in the code. That is no big deal, it won't break anything. But for the sake of keeping this formatted neatly so you can find your way around, I'd suggest backspacing the excess indents.
	</p>
    
    <h2 id="valleys" style="font-family:arial,san-serif;padding:0;margin:0px 0 5px 0;">Valleys</h2>
	<p style="font-family:arial,san-serif; text-align:justify;">
    Looking up at the infobox, there are a few things to be aware of here as well. One is that you can add many more options to an infobox, or remove them. For example, you could omit the "Geography" and "Political" subheads and just replace "Dimensions" with "General Information" or something similar. Standard Wikipedia articles are formatted more like that, whereas Wookieepedia that I based this template on uses the subheads. Also, not that if you decide to change or add new info sections, you will need to make sure they alternate between white and grey. This is determined by the background color "ffffff" = white and "eeeeee" = grey. These are hex colors.
    </p>

<!-- A decent idea is to use blocked out sections like this as spacers. Adding the brackets make it so that everything inside this section do not show up in the active code. Great for making notes! -->
    
<h1 id="history" style="font-family:arial,san-serif;padding:0;margin:0;">History<hr style="padding:0;margin:0 0 10px 0;"></h1>
	
    <center style="font-family:arial; font-size:.9em;"><i>"Look, another example quote!"</i><br>―your humble narrator
	</center>
    
    <div style="float:right; margin: 20px 0px 0px 10px; width:150px;"><img src="https://images.pexels.com/photos/936238/pexels-photo-936238.jpeg?cs=srgb&dl=landscape-photography-of-mountain-and-body-of-water-936238.jpg&fm=jpg" height="auto" width="150" alt="Image" style="float: right;">
       <p style="font-size:0.8em; font-family:arial; color: #666666 !important; display:block !important;">
       An image aligned to the right
       </p>
    </div>
    
    <p style="font-family:arial,san-serif; text-align:justify;">
    I want to stress that the code is not infallable, and you may have to make fixes and adjustments both to things that you break, and to things that I did not forsee when I built it. I have set it up to be as responsive as I can make it, but there will be moments where things might not align right because there is too much or too little of something. Try to adjust word counts or image sizes if you encounter problems like that. 
	<br><br>
    I don't think there is much more else to note. If you are interested in having me set up the code for lore or character articles for you, please check out my design thread <a href="https://www.valucre.com/topic/41154-tylers-design-display-now-with-commissions/">here</a>.  
	</p>       
	
    
    <h1 id="links" style="font-family:arial,san-serif;padding:0;margin:0;">Related Topics<hr style="padding:0;margin:0 0 10px 0;"></h1>
    <div style="font-family:arial,san-serif; text-align:justify;">
        <ul style="list-style-type:square;padding:15px 0px 0 25px;margin:0;font-family: arial;">
			<li><a href="https://www.valucre.com/topic/42748-the-c-in-csl-stands-for-coding-tutorial/">The C in Csl stands for Coding</a></li>
			<li><a href="https://www.valucre.com/topic/41154-tylers-design-display-now-with-commissions/">Tyler's Design Display</a></li>
        </ul>



        <br>
    </div>
    
    
    
        <br>
    </div>
 

</html>

 

 

Share this post


Link to post
Share on other sites

Organization Code Example:

Spoiler
logo?v=4
Valucrean Insurance Company
Organizational Information
Type Private Corporation
Industry Insurance
Headquarters Ignatz, Terrenus
Subsidiaries
  • VIC Auto
  • VIC Home
  • VIC Life
Area(s) Served
  • Rosinder (formerly)
  • Terrenus
  • Genesaris
  • Renovatio
CEO John "Buck" Doe
Notable Members
  • Bill Billiams (formerly)
  • John "Buck" Doe
Historical Information
Founded
  • 18,570 WT (as Gaian Mutual Insurance Co.)
Reorganized 18,596 WT (as Valucrean Insurance Company)
(Ask Me Anything)
"Switching could save 15% or more on magic insurance!"
―VIC advertising slogan

This is an example of a Wikipedia-style lore article, though this one is specifically based on the style of the Star Wars-entric wiki, Wookieepedia. The first section here is meant as a general introduction and summary of your subject, however; if you lack enough content for a more detailed article, you can just summarize everything here and skip adding additional sections below.

I am filling the example content with information to help you with coding. I highly suggest using this wonderful tool in order to test and see you code quickly as you adjust it. You can also do this in a browser editor (Firefox has the only editor that is any good imo though). If you just can't figure things out, I might be willing to build a lore article for you in exchange for compensation. But I don't have the time to hold personal tutoring classes on HTML coding, so please don't come asking me for help with every problem you run into when using this. Now, let's move on.

First thing to be aware of is that if you copy and paste the code from this template multiple times, it may screw up the formatting a little, and you may have to adjust it. The indents you see in the code are a coder's way of trying to organize the various sections of content. These sometimes get screwed up in translation, which can result in weird spaces or unwanted indents in your article. If this is the case, backspace any gaps or indents and make them again, using only enter or tab. Do not use the spacebar.

History


Founding

"P" sections, like this, are where you put the bulk of your text. I use them in a few other spots in other code, but generally speaking their are your main body containers. Make sure when you make a new "P" container, that it has a /p at the other end of it, and that you copy my style="font-family:arial,san-serif; text-align:justify;" section. That is what formats the text to look and act a certain way.

Image

An image aligned to the left

Use the br br tags in order to make a break between text. Because spaces made by hitting enter will not count as spaces in the finished product (if you are doing it right), the br tags are what you use instead. A single br tag will move the subject after it one space down. In order to get a gap in the text like you see in the finished code, you will need two of them.

Now, another thing to note is that if you copy a section in the code (for example, you want to make a new p section), when you go to copy and paste, it may increase the indention here in the code. That is no big deal, it won't break anything. But for the sake of keeping this formatted neatly so you can find your way around, I'd suggest backspacing the excess indents.

Reorganization

Looking up at the infobox, there are a few things to be aware of here as well. One is that you can add many more options to an infobox, or remove them. For example, you could omit the "Geography" and "Political" subheads and just replace "Dimensions" with "General Information" or something similar. Standard Wikipedia articles are formatted more like that, whereas Wookieepedia that I based this template on uses the subheads. Also, not that if you decide to change or add new info sections, you will need to make sure they alternate between white and grey. This is determined by the background color "ffffff" = white and "eeeeee" = grey. These are hex colors.

Ideals & identity


"Valucrean Insurance can't protect you from becoming a bad PC, but it can protect your home and auto!"
―VIC advertising slogan
Image

An image aligned to the right

I want to stress that the code is not infallable, and you may have to make fixes and adjustments both to things that you break, and to things that I did not forsee when I built it. I have set it up to be as responsive as I can make it, but there will be moments where things might not align right because there is too much or too little of something. Try to adjust word counts or image sizes if you encounter problems like that.

I don't think there is much more else to note. If you are interested in having me set up the code for lore or character articles for you, please check out my design thread here.

Related Topics


Code:

Spoiler

<!DOCTYPE html>
<html>
<div id="soul" style="width: 300px;float:right;margin-left:15px;">
    
    <table style="width:100%;padding: 0;margin: 0;border-collapse: collapse;font-family:arial,sans-serif;font-weight:normal;font-size: 10pt;">
            <tr>
                <img src="https://dynamic.brandcrowd.com/asset/logo/95245926-5689-481e-bf28-c42a48171669/logo?v=4" width="100%" style=display:block;></tr>
            <tr style="background-color:#ee2357; color:white; text-align: center;">
                <th style="padding:5px 0px;"><b>Valucrean Insurance Company</b></th>
            </tr>
            <tr style="background-color:#ddbbbb; font-weight: normal; text-align: center;color:black;">
                <th style="padding:5px 0px;">Organizational Information</th>
            </tr>
    </table>
    
    <table style="width:100%;padding:0;margin:0;border-collapse:collapse;font-family:arial, sans-serif;font-weight:normal;font-size:10pt;text-align:left;color:black;">
            <!--Organization-->
            <tr style="background-color:#eeeeee;">
                <td style="font-size:.9em;padding:5px 0 5px 5%;width:45%;">Type</td>
                <td style="font-size:.9em;padding:5px 0 5px 5%;width:45%;">Private Corporation</td>
            </tr>
            <!--Industries-->
            <tr style="background-color:#ffffff;">
                <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">Industry</td>
                <td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">Insurance</td>
            </tr>
            <!--HQ-->
			<tr style="background-color:#eeeeee;">
                <td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">Headquarters</td>
                <td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">Ignatz, Terrenus</td>
            </tr>
            <!--Subsidiaries-->
            <tr style="background-color:#ffffff;">
                <td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">Subsidiaries</td>
				<td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">
					<ul style="list-style-type:square;padding:0;margin:0;">
						<li>VIC Auto</li>
                        <li>VIC Home</li>
                        <li>VIC Life</li>
                       <!--<li>VIC Magic <span style="font-size:.8em;">(since 30 AU)</span></li>--> 
                       <!-- the above is an example of a commented out item. You can remove the brackets around it to make it active again -->
                	</ul>
                </td>
            </tr>
            <!--Area-->
                <tr style="background-color:#eeeeee;">
                <td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">Area(s) Served</td>
                <td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">
                	<ul style="list-style-type:square;padding:0;margin:0;">
 						<li>Rosinder <span style="font-size:.8em;">(formerly)</span></li>
						<li>Terrenus</li>
                        <li>Genesaris</li>
                        <li>Renovatio</li>
					</ul>
                </td>
            </tr>
            <!--Leader-->
                <tr style="background-color:#fff;">
                <td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">CEO</td>
                <td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">John "Buck" Doe</td>
            </tr>
            <!--Members-->
			<tr style="background-color:#eee;">
			<td style="font-size: .9em;text-align: left;padding: 5px 0 5px 5%;width: 45%;">Notable Members</td>
			<td style="font-size:.9em;text-align:left;padding: 5px 0 5px 5%;width:45%;">
				<ul style="list-style-type:square;padding:0;margin:0;">
 					<li>Bill Billiams <span style="font-size:.8em;">(formerly)</span></li>
					<li>John "Buck" Doe</li>
				</ul>
			</td>
		</tr>
            
    </table>
    
    <table style="width:100%;padding: 0;margin: 0;border-collapse: collapse;font-family:arial,sans-serif;font-weight:normal;font-size: 10pt;color:black;">
        <tr style="background-color:#ddbbbb; font-weight: normal; text-align: center;">
            <th style="padding:5px 0px;">Historical Information</th>
        </tr>
    </table>
    
    <table style="width:100%;padding:0;margin:0;border-collapse:collapse;font-family:arial, sans-serif;font-weight:normal;font-size:10pt;text-align:left;color:black;">
        <!--Founded-->
        <tr style="background-color:#eeeeee;">
            <td style="font-size: .9em;padding: 5px 0 5px 5%;width: 45%;">Founded</td>
            <td style="font-size: .9em;padding: 5px 0 5px 5%;width: 45%;">
                <ul style="list-style-type:square;padding:0;margin:0;">18,570 WT <span style="font-size:.8em;">(as Gaian Mutual Insurance Co.)</span></td>
        </tr>
        
        <!--Date Reorganized-->
        <tr style="background-color:#ffffff;">
            <td style="font-size: .9em;padding: 5px 0 5px 5%;width: 45%;">Reorganized</td>
            <td style="font-size: .9em;padding: 5px 0 5px 5%;width: 45%;">18,596 WT <span style="font-size:.8em;">(as Valucrean Insurance Company)</span></td>
        </tr>
        
    </table>
    
       <table style="width:100%;padding: 0;margin: 0;border-collapse: collapse;font-family:arial,sans-serif;font-weight:normal;font-size: 10pt;color:black;">
        <tr style="background-color:#ddbbbb; font-weight: normal; text-align: center;">
            <th style="padding:5px 0px; border-radius: 0px 0px 10px 10px;">
            	<a style="color:#000;font-size:10px;font-weight:normal;font-family:arial, sans-serif;text-decoration:none;" href="">(Ask Me Anything)</a>
            </th>
        </tr>
    </table>
    
</div>

	<center style="font-family:arial; font-size:.9em;"><i>"Switching could save 15% or more on magic insurance!"</i><br>―VIC advertising slogan</center>

	<p id="intro" style="font-family:arial,san-serif; text-align:justify;">
This is an example of a <b>Wikipedia-style lore article</b>, though this one is specifically based on the style of the Star Wars-entric wiki, <a href="https://starwars.fandom.com/wiki/Main_Page">Wookieepedia</a>. The first section here is meant as a general introduction and summary of your subject, however; if you lack enough content for a more detailed article, you can just summarize everything here and skip adding additional sections below.
	<br><br>
    I am filling the example content with information to help you with coding. I highly suggest using this wonderful tool in order to test and see you code quickly as you adjust it. You can also do this in a browser editor (Firefox has the only editor that is any good imo though). If you just can't figure things out, I might be willing to build a lore article for you in exchange for compensation. But I don't have the time to hold personal tutoring classes on HTML coding, so please don't come asking me for help with every problem you run into when using this. Now, let's move on.
    <br><br>
    First thing to be aware of is that if you copy and paste the code from this template multiple times, it may screw up the formatting a little, and you may have to adjust it. The indents you see in the code are a coder's way of trying to organize the various sections of content. These sometimes get screwed up in translation, which can result in weird spaces or unwanted indents in your article. If this is the case, backspace any gaps or indents and make them again, using only <i>enter</i> or <i>tab</i>. Do not use the spacebar.
    </p>
	
    <h1 id="History" style="font-family:arial,san-serif;padding:0;margin:0;">History<hr style="padding:0;margin:0 0 10px 0;"></h1> <!-- This section can be renamed "biography" for a character, or the "geography" section would be moved up here for a location -->
    
    <h2 id="founding" style="font-family:arial,san-serif;padding:0;margin:10px 0 0px 0;">Founding</h2>
    <!-- gaps between sections like this are no big deal if you are only using enter and tab -->
    <p style="font-family:arial,san-serif; text-align:justify;">
    "P" sections, like this, are where you put the bulk of your text. I use them in a few other spots in other code, but generally speaking their are your main body containers. Make sure when you make a new "P" container, that it has a /p at the other end of it, and that you copy my <i>style="font-family:arial,san-serif; text-align:justify;"</i> section. That is what formats the text to look and act a certain way.
    </p>
    
    <div class="imagediv_left" style="float:left;"><img src="https://live.staticflickr.com/7685/17121703798_c3be57bae8_b.jpg" height="auto" width="200" alt="Image" style="float: left; margin: 0px 10px 0px 0px;">
        <p style="font-size:0.8em; font-family:arial; color: #666666 !important; display:block !important; width: 200px;">
        An image aligned to the left
        </p>
    </div> 
    
    <!-- The above is an image div, it has been built to put an image aligned to the left side, though this is susceptable to problems. I would actually recommend not using it unless you are sure you have a nice big body of regular text around it. The reason being is that it will interfer with the headers (Geography, History, Biography, and/or other such titles with the underline beneath them). -->
    
    <!-- Another note is that you must close a P section before you can place an image. You CANNOT put an image div inside a P section. -->
    
	<p style="font-family:arial,san-serif; text-align:justify;">
    Use the br br tags in order to make a break between text. Because spaces made by hitting enter will not count as spaces in the finished product (if you are doing it right), the br tags are what you use instead. A single br tag will move the subject after it one space down. In order to get a gap in the text like you see in the finished code, you will need two of them.
	<br><br>
    Now, another thing to note is that if you copy a section in the code (for example, you want to make a new p section), when you go to copy and paste, it may increase the indention here in the code. That is no big deal, it won't break anything. But for the sake of keeping this formatted neatly so you can find your way around, I'd suggest backspacing the excess indents.
	</p>
    
    <h2 id="reorganization" style="font-family:arial,san-serif;padding:0;margin:0px 0 5px 0;">Reorganization</h2>
	<p style="font-family:arial,san-serif; text-align:justify;">
    Looking up at the infobox, there are a few things to be aware of here as well. One is that you can add many more options to an infobox, or remove them. For example, you could omit the "Geography" and "Political" subheads and just replace "Dimensions" with "General Information" or something similar. Standard Wikipedia articles are formatted more like that, whereas Wookieepedia that I based this template on uses the subheads. Also, not that if you decide to change or add new info sections, you will need to make sure they alternate between white and grey. This is determined by the background color "ffffff" = white and "eeeeee" = grey. These are hex colors.
    </p>

<!-- A decent idea is to use blocked out sections like this as spacers. Adding the brackets make it so that everything inside this section do not show up in the active code. Great for making notes! -->
    
<h1 id="ideals" style="font-family:arial,san-serif;padding:0;margin:0;">Ideals & identity<hr style="padding:0;margin:0 0 10px 0;"></h1>
	
    <center style="font-family:arial; font-size:.9em;"><i>"Valucrean Insurance can't protect you from becoming a bad PC, but it can protect your home and auto!"</i><br>―VIC advertising slogan
	</center>
    
    <div style="float:right; margin: 20px 0px 0px 10px; width:150px;"><img src="https://live.staticflickr.com/2915/32943668613_ceafdd97c8_b.jpg" height="auto" width="150" alt="Image" style="float: right;">
       <p style="font-size:0.8em; font-family:arial; color: #666666 !important; display:block !important;">
       An image aligned to the right
       </p>
    </div>
    
    <p style="font-family:arial,san-serif; text-align:justify;">
    I want to stress that the code is not infallable, and you may have to make fixes and adjustments both to things that you break, and to things that I did not forsee when I built it. I have set it up to be as responsive as I can make it, but there will be moments where things might not align right because there is too much or too little of something. Try to adjust word counts or image sizes if you encounter problems like that. 
	<br><br>
    I don't think there is much more else to note. If you are interested in having me set up the code for lore or character articles for you, please check out my design thread <a href="https://www.valucre.com/topic/41154-tylers-design-display-now-with-commissions/">here</a>.  
	</p>       
	
    

    <h1 id="links" style="font-family:arial,san-serif;padding:0;margin:0;">Related Topics<hr style="padding:0;margin:0 0 10px 0;"></h1>
    <div style="font-family:arial,san-serif; text-align:justify;">
        <ul style="list-style-type:square;padding:15px 0px 0 25px;margin:0;font-family: arial;">
			<li><a href="https://www.valucre.com/topic/42748-the-c-in-csl-stands-for-coding-tutorial/">The C in Csl stands for Coding</a></li>
			<li><a href="https://www.valucre.com/topic/41154-tylers-design-display-now-with-commissions/">Tyler's Design Display</a></li>
        </ul>
        
        
        <br><br>
    </div>

</html>

 

 

Share this post


Link to post
Share on other sites

you should see me in a crown [character sheet/info/etc]

Demo:

 

48.jpg

 

SEE ME IN A CROWN.

Image result for line"

COUNT MY CARDS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
WATCH THEM FALL
✦ Blood on a marble wall: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
✦ Tell me which one is worse: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
✦ Living or dying first: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

I DON'T DREAM

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Image result for line"
 
I'm gonna run this nothing town—
 

Code:

Spoiler

<div style="width:100%;"><div style="background:#ddd;min-height:500px;max-width:600px;min-width:300px;margin:0 auto;text-align:left;font-family:Lucida Sans Unicode">
  
    <div style="margin:5%;">
        
        <p><br></p>
        <p><img src="https://www.dahliart.jp/image/note/48.jpg" width="100%"></p>
        
        <p style="color:rgb(68,68,68);text-align:center;">
            <span style="color:#2c3e50;font-weight:bold;font-style:oblique;font-size:36px;">SEE ME IN A CROWN.</span>    
            <img src="https://i.ya-webdesign.com/images/line-design-png-5.png" width="100%;">
        </p>

        <span style="font-size:22px;font-weight:bold;color:#2c3e50;"><p>COUNT MY CARDS</p></span>
        
        
        <div style="color:rgb(68,68,68);font-size:16px;letter-spacing:1px;padding:0px 10px;line-height:28px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        
        <span style="font-size:22px;font-weight:bold;color:#2c3e50;"><p>WATCH THEM FALL</p></span>
        
        <div style="color:rgb(68,68,68);font-size:16px;letter-spacing:1px;padding:0px 10px;line-height:28px;">
            <b>✦ Blood on a marble wall:</b>
            <span style="font-size:11px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
            
            <br><b>✦ Tell me which one is worse:</b>
            <span style="font-size:11px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
            
            <br><b>✦ Living or dying first:</b>
            <span style="font-size:11px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        
        </div>
        
        <p><br></p>
        <div style="color:rgb(68,68,68);padding:0px 2px 30px 8px;border-top:1px solid rgb(187,187,187);background-color:rgb(0,0,0);color:#ffffff;">
            <div style="font-size:16px;letter-spacing:1px;padding:0px 10px 0px;line-height:28px;"><br></div><div style="font-size:16px;letter-spacing:1px;padding:0px 10px 0px;line-height:28px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div></div>
        
        <span style="font-size:22px;font-weight:bold;color:#2c3e50;"><p>I DON'T DREAM</p></span>
        
        <span style="color:#2c3e50;">✦</span><i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i>
        
        <p><br></p>
        
        <img src="https://i.ya-webdesign.com/images/line-design-png-5.png" width="100%;">
        
        <div style="color:rgb(68,68,68);font-size:14px;letter-spacing:1px;text-align:right;">
            <span style="font-size:18px;font-style:oblique;">
                I'm gonna run this nothing town—
            </span>
            <span style="font-size:9px;color:#2980b9;"><br>&lt; by fairandbright+vielle &gt;</span>
            <p><br></p>
        </div>

Instructions:

N/A (Thanks @Csl for helping me simplify the code!)

Edited by vielle

Share this post


Link to post
Share on other sites

here, our creations [overall character tracker]

Demo:


91e.gif

MISTORYHNE
STATUS: Active
[ profile here ]

 

original.gif

ARIEL OF IGNATZ
Status: Inactive
[ profile here ]

 

Image result for tumblr art circle"

LUNA LOVEFELL 
Status: Deceased
[ profile here ]

 
 

Code:

Spoiler

<div style="font-family:Lucida Sans Unicode;">
  
<table align="center" style="font-family: 'Helvetica'; font-size: 0.95em; letter-spacing: 1pt;">
    <tbody>
        <tr>
            <td style="border: 1px solid #cfcece; width: 200px; height: 200px; text-align: center;line-height:1.5; padding: 3%">
                <img src="https://i.kym-cdn.com/photos/images/newsfeed/001/131/879/91e.gif" style="width: 100px; height: auto;">
                <br><br>
                <b>MISTORYHNE</b><br>Status: Active<br>[ <a href="http://URL">profile here</a> ]
            </td>
            
            <td style="border: 1px solid #cfcece; width: 200px; height: 200px; text-align: center;line-height:1.5; padding: 3%">
                    <img src="https://data.whicdn.com/images/298586495/original.gif" style="width: 100px; height: auto;">

                    <p>
                        <b>ARIEL OF IGNATZ</b>
                        <br>Status: Inactive
                        <br>[<a href="http://URL">profile here</a> ]    
                    </p>
            </td>
            
            <td style="border: 1px solid #cfcece; width: 200px; height: 200px; text-align: center;line-height:1.5; padding: 3%">
                <img src="https://66.media.tumblr.com/c3d64125c7d41480a0c5eaea8733eb03/tumblr_ow1spw2LxM1u7zo67o1_400.gifv" style="width: 100px; height: auto;">
                <p>
                    <b>LUNA LOVEFELL</b>
                    <br>Status: Deceased
                    <br>[<a href="http://URL">profile here</a> ]
                </p>
                
            </td>
        </tr>
    </tbody>
    </table>

</div>

Instructions:

Suggested size for pictures are 100x100px or smaller. Just copy paste the code again and again as needed for more three-boxed rows.

Edited by vielle

Share this post


Link to post
Share on other sites

 

 






copycat.
 
 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio. Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh.
 
sorry, i'm sorry, sorry. . . s i k e!
 
 
BY MESSALA + VIELLE        
 

 

Edited by vielle

Share this post


Link to post
Share on other sites

copycat [ post template ]

Made by Messala. Adapted for Val-friendly use.

 

Demo:

[ see above post ]

Code:

Spoiler

<div style="width:75%;max-width:500px; margin:auto;background:#1F1F1F;">
  
    <div style="width:100%;max-width:500px;height:200px;background:#0d0c0c url(https://www.dahliart.jp/image/note/s.jpg);border-top: 20px solid #0d0c0c; border-bottom: 20px solid #0d0c0c;">
        <div style="margin: 25% 5% 0 0; font-family:georgia;font-size:2.8em;letter-spacing:-.5px;color:#2F42C5;font-weight:bold;font-style:italic;line-height:1;text-align:right;">
            copycat.
        </div>
    </div>

        <div style="border-left:1px solid #E2DDC8; width:75%; max-width:300px; padding-left:5%;text-align:justify; font-family:'trebuchet ms';font-size:.833em;letter-spacing:1px;color:#E2DDC8;line-height:1.5; margin: 5% auto;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio. Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh.</p>
        </div>
    
    <div style="width:90%;padding:2%;margin:auto; text-align:center; background:#2F42C5;font-family:'trebuchet ms';text-transform:uppercase;font-size:1.25em;color:#0d0c0c;margin-bottom: 5%">
        sorry, i'm sorry, sorry. . . s i k e!
    </div>
    
    <div style="width:100%;height:50px; padding: 20px 6px 0 0; background:#0d0c0c;text-align:right;font-size:9px;color:#555;">
        BY <a data-cke-saved-href="https://messala.dreamwidth.org/" href="https://messala.dreamwidth.org/" style="color:inherit;">MESSALA </a>+ <a data-href="https://www.valucre.com/profile/13350-vielle/" style="color:inherit;">VIELLE</a>
        </div>
        
</div>

Instructions:

This code encompasses the whole editable area of the Val post box. Just inspect element the whole editable area (the area where you normally type in words when you make a new post) and replace the code by copy pasting this code above exactly as it is. Edit as is with the use of the Val editor.

Edited by vielle

Share this post


Link to post
Share on other sites

it's a boxed up life for us (character sheet)

Made by Transilience. Adapted for Val-friendly use.

DEMO:

 
stats
Name Character Name
Gender Yes
Age π
Canon Series
PB Icon Person
permissions
Backtagging Y/N/?
Threadjacking Y/N/?
Fourthwalling Y/N/?
Mind-reading Y/N/?
Injury Y/N/?
Death Y/N/?
preferences
TEXT TEXT TEXT TEXT TEXT TEXT
about
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
personality
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
history
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio. Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh.
 

CODE:

Spoiler

<div style="width:700px;margin:auto;font-family:Consolas, monospace, serif;font-size:12pt;">

<!---IMAGE -->
  <div style="float:left;text-align:left;width:250px;">
        <div style="background-image:url(&quot;https://i.pinimg.com/474x/a1/05/15/a10515069f8c7f034e064c03203018dd.jpg&quot;);height:250px;max-height:250px;margin:.5em;">
        </div>
        
    <div style="background-color:#cde4f7;color:#333;font-family:Consolas, monospace;font-weight:bold;letter-spacing:.25em;padding:.5em 1em;margin:.5em;">
        <span style="font-size:110%;">stats</span>
    </div>
    
        <div style="background-color:#eee;text-align:justify;font-family:Consolas, monospace;padding:1em;margin:.5em;">
            <table style="width:100%;font-size:90%;">
                <tbody>
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Name</span>
                        </td>
                
                        <td align="right">
                            <span style="color:#2c3e50;">Character Name</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Gender</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Yes</span>
                        </td>
                    </tr>
                    
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Age</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">π</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Canon</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Series</span>
                        </td>
                    </tr>
                    
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">PB</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Icon Person</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div style="background-color:#cde4f7;color:#333;font-family:Consolas, monospace;font-weight:bold;letter-spacing:.25em;padding:.5em 1em;margin:.5em;">
            <span style="font-size:110%;">permissions</span>
        </div>
        
        <div style="background-color:#eee;text-align:justify;font-family:Consolas, monospace;padding:1em;margin:.5em;">
            <table style="width:100%;font-size:90%;">
                <tbody>
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Backtagging</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Y/N/?</span>
                        </td>
                    </tr>
                    
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Threadjacking</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Y/N/?</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Fourthwalling</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Y/N/?</span>
                        </td>
                    </tr>
                    
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Mind-reading</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Y/N/?</span>
                        </td>
                    </tr>
                    
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Injury</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Y/N/?</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-transform:uppercase;">
                            <span style="color:#2c3e50;">Death</span>
                        </td>
                        <td align="right">
                            <span style="color:#2c3e50;">Y/N/?</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div style="background-color:#cde4f7;color:#333;font-family:Consolas, monospace;font-weight:bold;letter-spacing:.25em;padding:.5em 1em;margin:.5em;">
            <span style="font-size:110%;">preferences</span>
        </div>
        
        <div style="background-color:#eee;text-align:justify;font-family:Consolas, monospace;padding:1em;margin:.5em;font-size:90%;">
            <span style="color:#2c3e50;">TEXT TEXT TEXT TEXT TEXT TEXT</span>
        </div>
    </div>
    
    <div style="float:right;text-align:right;width:450px;">
        <div style="background-color:#cde4f7;color:#333;font-family:Consolas, monospace;font-weight:bold;letter-spacing:.25em;padding:.5em 1em;margin:.5em;">
            <span style="font-size:110%;">about</span>
        </div>
        
        <div style="background-color:#eee;text-align:justify;font-family:Consolas, monospace;padding:1em;margin:.5em;font-size:90%;">
            <span style="color:#2c3e50;">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
        </div>
        
        <div style="background-color:#cde4f7;color:#333;font-family:Consolas, monospace;font-weight:bold;letter-spacing:.25em;padding:.5em 1em;margin:.5em;">
            <span style="font-size:110%;">personality</span>
        </div>
        
        <div style="background-color:#eee;text-align:justify;font-family:Consolas, monospace;padding:1em;margin:.5em;font-size:90%;">
            <span style="color:#2c3e50;">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
        </div>
        
        <div style="background-color:#cde4f7;color:#333;font-family:Consolas, monospace;font-weight:bold;letter-spacing:.25em;padding:.5em 1em;margin:.5em;">
            <span style="font-size:110%;">history</span>
        </div>
        
        <div style="background-color:#eee;text-align:justify;font-family:Consolas, monospace;padding:1em;margin:.5em;font-size:90%;">
            <span style="color:#2c3e50;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio. Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh.
            </span>
        </div>
    </div>

INSTRUCTIONS:

Suggested size for pictures are 250x250px.

Edited by vielle

Share this post


Link to post
Share on other sites

ultralife (post template)

Made by Prospitian. Adapted for Val-friendly use.

DEMO:

734622ec9fa892a478cba86457731e55.pngSELENNE YVAINA  ever since you came, i'm living ultralife Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio. Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh. art credit code credit

 

 

CODE:

Spoiler

<table style="margin:auto;">
  <tbody>
        <tr>
            <td>
                <div style="max-width: 600px; width:100%;">
                    <img src="https://i.pinimg.com/originals/73/46/22/734622ec9fa892a478cba86457731e55.png" style="margin:0; width:50%; max-width:250px;" align="left">

                    <div style="display:block; float:right; width:60%; max-width:340px; padding:1% 5px; background-color:#DE507A; color:BANNER TEXT; text-align:right; font:26px 'Cambria';">SELENNE YVAINA</div>
                
                    <div style="display:block; float:right; width: 55%;max-width:340px; padding:5px; text-align:left; font:14px Consolas; color:#DE507A;">ever since you came, i'm living ultralife</div>
                    
                    <div style="display:block; float:right; width: 55%;max-width:340px; display:block; margin-top:2%; font:italic 16px Arial; text-align:left; color:BLURB COLOR">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio.</p>
                        <p>Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh.</div>
<span style="display:block; float:right; width:340px; text-align:right; margin-top:15px; font:10px Consolas;"><a href="ART CREDIT URL" style="text-decoration:none; color:#DE507A; display:inline-block; margin-right:20px;">art credit</a> <a href="http://photosynthesis.dreamwidth.org/" style="text-decoration:none; color:#DE507A;">code credit</a></span>
</div></td></tr></tbody></table></center>

INSTRUCTIONS:

Suggested size for pictures is 250px wide.

Edited by vielle

Share this post


Link to post
Share on other sites

brighter than sunshine (post template)

Made by Messala. Adapted for Val-friendly use.

DEMO:

pZuFR1Rr_400x400.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio. Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh.

CHARACTER: Mother Magpie of Taen ✦ credit

CODE:

Spoiler

<!--------------------
EDITABLE ELEMENTS

image frame - change "#edb930" after "border: 15px groove" to your color of choice
font color - change "#2c3e50" in the third div
font - change "verdana" in the first div
background - change "#f2eada" in [background: #f2eada] in the first div
footer background - change "background:#EDB930"to your color of choice

--------------------->

<div style="text-align:justify;width:100%;max-width:310px;padding: 5% 8%;background:#f2eada;font-family:verdana;font-size:11px;margin:auto;">


    <div style="width:100px;height:100px;border:15px groove #edb930;text-align:center;margin:auto;">
        <img width="100%" src="CHARACTER IMAGE">
    </div>


    <div style="color:#2c3e50; width: 75%; margin:auto;padding-top:5%">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem. Euismod elementum nisi quis eleifend quam. Ut pharetra sit amet aliquam. Elementum integer enim neque volutpat ac tincidunt. Posuere ac ut consequat semper viverra nam. Vel pretium lectus quam id leo in vitae turpis. Auctor augue mauris augue neque gravida in fermentum. Ut tellus elementum sagittis vitae et. Lectus sit amet est placerat in egestas erat imperdiet. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Ornare quam viverra orci sagittis eu volutpat odio. Commodo elit at imperdiet dui accumsan. Vitae turpis massa sed elementum tempus. Lorem ipsum dolor sit amet. Eros donec ac odio tempor orci dapibus ultrices. Fringilla ut morbi tincidunt augue interdum velit. Orci dapibus ultrices in iaculis nunc sed. Dictum fusce ut placerat orci nulla. Elit duis tristique sollicitudin nibh.
                </p>
    </div>

</div>

<div style="max-width:310px; width:100%; padding: 1% 8%;margin:auto;background:#EDB930;font-family:verdana;font-size:11px;text-align:center;color:#2c3e50;">
            CHARACTER: Mother Magpie of Taen ✦ <a href="https://messala.dreamwidth.org/" rel="external nofollow noopener" style="color:#2b2926;" target="_blank">credit</a>
    </div>

INSTRUCTIONS:

Suggested size for pictures is 100x100px.

Edited by vielle

Share this post


Link to post
Share on other sites

Mi et a parturient ullamcorper felis fames a a malesuada turpis dignissim fusce vestibulum vestibulum et proin vestibulum et mauris. Parturient id facilisi purus vitae per ac leo adipiscing scelerisque feugiat nam magna nunc eu inceptos a purus a a scelerisque at in tempus hendrerit neque ut. Hac ligula elementum conubia lobortis at fringilla ullamcorper suscipit placerat congue varius erat a accumsan a a. Pharetra fames nostra sociis parturient condimentum volutpat tempus montes ac a aliquam himenaeos gravida euismod tempus sodales erat. Elementum phasellus malesuada eros duis egestas condimentum phasellus dictumst integer fringilla placerat ad auctor praesent accumsan habitant suspendisse suscipit ullamcorper massa adipiscing nec ridiculus at quisque vestibulum. 

Phasellus consectetur sem tristique parturient litora elit mi sed montes lobortis accumsan euismod nunc sed elit bibendum dui natoque in leo leo bibendum torquent diam vestibulum ante donec curabitur. Odio et suspendisse viverra suspendisse praesent ipsum id suspendisse a parturient urna purus vivamus ullamcorper facilisis ullamcorper id varius. A fringilla inceptos parturient torquent mi nam ac a pulvinar torquent ad lorem non malesuada a nullam enim suspendisse pharetra. At etiam natoque vestibulum rutrum hendrerit in cum a suscipit per parturient eu suscipit a dis cursus pulvinar ipsum id id adipiscing odio malesuada pharetra. In dis arcu gravida orci vivamus at auctor blandit a varius sagittis scelerisque hac consectetur adipiscing lacinia turpis tempor adipiscing. 

Vestibulum nam mollis lectus at fusce augue in semper ac at id dignissim per orci senectus vivamus accumsan dapibus ac condimentum sociis conubia sit consectetur ridiculus. Posuere luctus facilisi eu etiam per eget quis at ullamcorper consectetur rutrum a phasellus suspendisse cubilia a. Suspendisse senectus molestie volutpat a consectetur parturient aenean turpis tortor id mi adipiscing fusce elit a cum ultricies curae parturient nisi. Ultrices orci erat leo aliquet suspendisse sed pretium urna sem ad ac condimentum lectus quisque adipiscing a suspendisse pulvinar commodo a. Habitant pharetra quam suspendisse elementum inceptos conubia sit curae montes at neque adipiscing nullam mi vel est dignissim adipiscing quam consectetur id consectetur taciti volutpat lobortis elit ornare quam. Ullamcorper nam faucibus ullamcorper sodales torquent id vestibulum tincidunt ad ad ante ad velit hendrerit vehicula leo amet metus mattis ac vivamus feugiat sem himenaeos sed adipiscing. 

Arcu suspendisse suscipit morbi vestibulum vestibulum quisque adipiscing parturient a semper facilisi facilisi scelerisque aptent auctor ullamcorper lobortis neque et justo ac sapien adipiscing arcu duis eget a. Vestibulum dis velit leo suspendisse ullamcorper vehicula vestibulum malesuada ac nulla taciti eu leo est. Leo taciti mattis leo lectus arcu dictumst mi nullam parturient ad amet phasellus quam tincidunt est ullamcorper suspendisse et gravida nec parturient ut bibendum ad placerat. A cursus convallis vehicula parturient maecenas scelerisque ac nostra auctor laoreet donec suspendisse senectus nunc est molestie mus venenatis condimentum ridiculus placerat eu proin hac.

 

<div style="width:100%;background-image:url(IMAGE URL HERE);margin:auto;background-attachment:fixed;">
		<div style="width:75%;max-width:800px;margin:auto;background:#FFFFFF;padding:5% 10%;font-family:'Palatino Linotype';">
          <p>TEXT HERE</p>
  </div>
	</div>

 

Share this post


Link to post
Share on other sites

WONDERLAND (post template)

requested by vielle

SAMPLE:

 
photo-1564351943047-fde6de8a15d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=822&q=80

Flashing lights and we, took a wrong turn and we
Fell down the rabbit hole
You held on tight to me
'Cause nothing's as it seems
Spinning out of control
Didn't they tell us don't rush into things
Didn't you flash your green eyes at me
Haven't you heard what becomes of curious minds
Ooh didn't it all seem new and exciting
I felt your arms twisting around me
I should've slept with one eye opened at night

Didn't they tell us don't rush into things
Didn't you flash your green eyes at me
Didn't you call my fears with the treacherous cat's smile
Ooh didn't it all seem new and exciting
I felt your arms twisting around me
It's all fun and games, still somebody loses their mind

CODE:

<div style="width:90%;margin:auto;">

<!---- HEADER IMAGE ---->
	
	<div style="width: 100%; height: 300px; background:url(IMAGE URL); background-size: 300%; background-attachment:fixed;margin: 3% auto 3% auto;">
	</div>

	<table style="width:100%;">
		<tr>
			
<!---- CHARACTER PICTURE ---->
			
			<td style="width:25%; padding: 0 2% 2% 0; vertical-align:top;">	
		<img src="IMAGE URL;" style="width:100%;">
			</td>
			
<!---- POST ---->
			<td style="vertical-align:top;">
				<div style="width:100%; margin:auto; padding: 4%; border:1px dotted;">
					<p>post text here</p>
				</div>
			</td>
		
		</tr>
	</table>
	
	
</div>

 

Share this post


Link to post
Share on other sites

devil; angel

Made by Yanyan. Adapted for Val-friendly use.

DEMO:

DEVIL BOY
IT'S THE WAY THINGS WORK.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.
 
 
ANGEL DARLING
DO YOU SEE THE STARS WHERE YOU ARE?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.
 

CODE:

Spoiler

<center><table style="min-height:500px;max-width:600px;min-width:300px;"><tbody><tr><td style="background:url(&quot;IMAGE LINK HERE&quot;) no-repeat;height:280px;"><div style="background:#343434;width:30%;height:26px;font:.75em tahoma, sans-serif;color:#FD43B9;text-align:center;text-transform:uppercase;border-left:6px solid #8699E7;padding:2px;"><span style="color:#f1c40f;"><span style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;"><span style="font-size:1.25em;"><b>DEVIL BOY</b></span></span></span></div></td></tr><tr><td style="background:rgb(52,52,52);padding:20px;"><center><div style="font-style:normal;font-variant:normal;font-weight:bold;font-size:1.1em;line-height:normal;width:88%;text-transform:uppercase;text-align:left;padding-bottom:5px;"><font color="#f1c40f" face="Lucida Sans Unicode, Lucida Grande, sans-serif">IT'S THE WAY THINGS WORK.</font></div><div style="font-family:tahoma, sans-serif;width:85%;border-left:6px solid rgb(134,153,231);padding-left:10px;color:rgb(204,204,204);text-align:justify;"><span style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.</span></div></center></td></tr></tbody></table></center>

Spoiler

<center><table style="max-width:600px;min-width:300px;"><tbody><tr><td style="background:url(&quot;IMAGE LINK HERE&quot;) no-repeat;height:280px;"><div style="background:#FFFFFF;width:30%;height:26px;font-style:normal;font-variant:normal;line-height:normal;font-family:tahoma, sans-serif;color:rgb(0,205,205);text-align:center;text-transform:uppercase;border-left:6px solid rgb(255,172,117);padding:2px;"><span style="color:#3498db;"><span style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:13.125px;"><b>ANGEL DARLING</b></span></span></div></td></tr><tr><td style="background:rgb(255,255,255);padding:20px;"><center><div style="font-style:normal;font-variant:normal;font-weight:bold;font-size:1.1em;line-height:normal;width:88%;text-transform:uppercase;text-align:left;padding-bottom:5px;"><font color="#3498db" face="Lucida Sans Unicode, Lucida Grande, sans-serif">DO YOU SEE THE STARS WHERE YOU ARE?</font></div><div style="font-family:tahoma, sans-serif;width:85%;border-left:6px solid rgb(255,172,117);padding-left:10px;text-align:justify;"><span style="color:#2c3e50;"><span style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.</span></span></div></center></td></tr></tbody></table></center>

INSTRUCTIONS:

Suggested size for pictures is at least 500px wide.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...