Jump to content
Tyler

Tyler's Design Display (Now with Commissions!)

Recommended Posts

19 hours ago, Tyler said:

@Malintzin Were you still interested in a logo?

Yessir. Still doing some recovery. Tonight I'm working on posts I owe but I will flesh out my ideas and share 'em this weekend.

I'll be in and out for the next few weeks for therapy but I'll maintain contact!

Share this post


Link to post
Share on other sites
10 minutes ago, Malintzin said:

Yessir. Still doing some recovery. Tonight I'm working on posts I owe but I will flesh out my ideas and share 'em this weekend.

I'll be in and out for the next few weeks for therapy but I'll maintain contact!

Alrighty! I will be busy all day tomorrow, but I'll read whatever you message whenever I get a chance to come back online.

Share this post


Link to post
Share on other sites

Another depiction of the antics in Chasing Legends (or rather, the sequel):

Chasing-Legends-Too.png

Primary credit goes to @zackrobbman who did the heavy lifting in drawing the original image. I just traced it and gave it color.

Spoiler

Also tagging other Chasing Legends writers: @jaistlyn, @Laughingmad, @Michael Bloodfang, @Zashiii

 

Share this post


Link to post
Share on other sites
On 12/26/2019 at 4:48 PM, Tyler said:

Another depiction of the antics in Chasing Legends (or rather, the sequel):

Chasing-Legends-Too.png

Primary credit goes to @zackrobbman who did the heavy lifting in drawing the original image. I just traced it and gave it color.

  Hide contents

Also tagging other Chasing Legends writers: @jaistlyn, @Laughingmad, @Michael Bloodfang, @Zashiii

 

Man that looks awesome! Thanks pal! ? 

Share this post


Link to post
Share on other sites

The following is a character profile card I recently constructed for my characters:

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

 

 

For those interested in using it ( @Ataraxy ), here is the code:

<!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>

 

Note, you will need use @Csl's HTML coding tutorial to get this profile card to show up on Val.

Also note, this is NOT MOBILE RESPONSIVE, meaning it won't show up on cell phones or small screens very well.

Edited by Tyler

Share this post


Link to post
Share on other sites

Examples of Wiki-style lore articles for locations and organizations.

Location 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>

 

 


 

Organization 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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...