Username: Password:   Forgot your password?
 
Forums
» View Categories » Coding Help & Templates » Character Page Template
Previous 30
Page of 1 Next 30

Member:5,087
Posts:1,813
Joined:7-17-2006
Seen:11-26-2009
May 8,`09 9:18am | Quote | ↓
This template is designed for making character pages. Add a picture and a profile for each of your characters. Follow the basic instructions and if you don't know how to do one of the steps, check the rest of the guide for a more help. If you still need help, post your questions in this thread.


LIVE PREVIEW


THE CODE
QUOTE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><!--[COMIC_NAME]--> - Characters</title><!--The Perfect Fluid Width Template provided by CSS-Tricks. Design modified by mishi_hime.-->
<meta name="robots" content="All,INDEX,FOLLOW" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://www.drunkduck.com/gfx/template_gfx_new/global.css" />
<style type="text/css">
<!--
body,td,th {
background-color: #CCCCCC;
background-image: url(http://www.drunkduck.com/YOUR_BACKGROUND_IMAGE_URL.jpg);
background-repeat: repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
}

a:link {
color: #666666; text-decoration: underline;
}

a:visited {
color: #000000; text-decoration: underline;
}

a:hover {
color: #FFFFFF;text-decoration: underline;background-color: #222222;
}

h1 {
font: 4.0em;
height: 0px;
}

h2 {
font: 3 em;
margin-bottom: 10px;
font-weight: 500;
}

#page-wrap {
min-width: 780px;
max-width: 1260px;
width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto";
margin: 10px auto;
background-color: #FFFFFF;
}

#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}

#main-content {
padding-left: 230px;
padding-top: 20px;
}

#header {
text-align: center;
background-color: #D8;
}

#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}

#footer {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: #CCCCCC;
}

.style1 {
font-size: small
}

-->
</style>
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header"> <img src="images/banner.gif" alt="Characters" /> </div>
<div class="style4" id="left-sidebar">
<p><img src="CHARACTER1IMAGEURL" width="150" height="150" alt="character1" /></p>
<p><img src="CHARACTER2IMAGEURL" width="150" height="150" alt="character2" /></p>
<p><img src="CHARACTER3IMAGEURL" width="150" height="150" alt="character3" /></p>
<p><img src="CHARACTER4IMAGEURL" width="150" height="150" alt="character4" /></p>
<p><img src="CHARACTER5IMAGEURL" width="150" height="150" alt="character5" /></p>
</div>
<div id="main-content">
<h2>Character #1</h2>
<p><strong>Role</strong>: Hero <br />
<strong>Appearance</strong>: Blonde hair, and blue eyes. Medium build, Athletic. <br />
<strong>Likes</strong>: Battle, cute women, food. <br />
<strong>Dislikes</strong>: Thieves, injustice, school.</p>
<p><strong>Background</strong>: Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit.</p>
<hr />
<h2>Character #2</h2>
<p><strong>Role</strong>: Princess <br />
<strong>Appearance</strong>: Auburn Hair and green eyes.

Graceful and Charming. <br />
<strong>Likes</strong>: Animals, flowers, nature, people. <br />
<strong>Dislikes</strong>: Conflict, hard work, rude behavior</p>
<p><strong>Background</strong>: Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse.</p>
<hr />
<h2>Character #3</h2>
<p><strong>Role</strong>: Sidekick <br />
<strong>Appearance</strong>: Short, somewhat clumsy, red Hair, blue eyes. <br />
<strong>Likes</strong>: Books, cooking, exploring <br />
<strong>Dislikes</strong>: Games, loud noises, fancy things</p>
<p><strong>Background</strong>: In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim.</p>
<hr />
<h2>Character #4</h2>
<p><strong>Role</strong>: Teacher <br />
<strong>Appearance</strong>: Long white hair, jade colored robes, very calm and composed. <br />
<strong>Likes</strong>: Beauty, horses, looking after others <br />
<strong>Dislikes</strong>: Foreigners, man made objects, war</p>
<p><strong>Background</strong>: Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing.</p>
<hr />
<h2>Character #5</h2>
<p><strong>Role</strong>: Villian <br />
<strong>Appearance</strong>: Tall, blue hair, crimson eyes, Tattooed <br />
<strong>Likes</strong>: Power, cats, jewelry, training <br />
<strong>Dislikes</strong>: Failure, weakness, crowded rooms </p>
<p><strong>Background</strong>: Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.</p>
<hr align="center" />
<span class="style1"><a href="http://drunkduck.com/YOURCOMIC">< Back to the Comic </a></span> </div>
<div style="clear: both;"></div>
<div id="footer">
<p class="style4">The Perfect Fluid Width Template provided by CSS-Tricks. Design modified by mishi_hime.</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>



BASIC INSTRUCTIONS
1. Download the file characters_template.html
2. Open the file in notepad or another word processing program.
3. Now edit the .html file by replacing the default text with your own characters' info.
4. Create your images.
5. Upload your images.
6. Open the html file again and add the image urls.
7. Add your comic's url to the " Back to the comic" link.
8. Optional* Add color and other html tags.
9. Upload the finished .html file.
(Then, test the new page to see if it looks right)
10. Add a link on your comic to the newly created characters page.

TEXT (Step 3)
Everything highlighted in blue is the character text area. There are 5 example profiles. Just type in your own characters information. You can also add other information, like age, weight, race etc. Add whatever information you feel your readers need to know. Try to keep the same amount of text as I have listed. Because this layout is fluid, the text will change according to browser size. If you have too little or too much text, your profiles may not align well with the pictures.

IMAGES (Step 4)
Use your favorite image program to create an image for each character. (The default template has room for 5 pictures, but you can add as many images as you want.) Each image on the left is 150x150px. I recommend you use that size. You can also replace the banner that reads "Character" It is 760 x 97px

UPLOAD FILES (Steps 5 & 9)
Click on My Controls or My Account
Scroll down to the Comics You Own: section; click Edit
Click on Files. Click + ADD FILES

ADD YOUR IMAGES TO THE HTML FILE (Step 6)

The image above shows the Files screen. Highlighted is an example of an URL.
Add your image urls to the green highlighted code where it says CHARACTER1IMAGEURL.

Example: <p><img name="character1" src="http://www.drunkduck.com/Ryu_hime/gfx/character1.jpg" width="150" height="150" alt="character1" /></p>

LINK YOUR COMIC TO YOUR CHARACTER PAGE (Step 7)
Near the end of the template code you will see a line that looks like
<span class="style1"><a href="http://drunkduck.com/YOURCOMIC">< Back to the Comic </a></span> </div>
Just fill in your comic's name where it says YOURCOMIC and you're good to go.

LINK YOUR CHARACTER PAGE TO YOUR COMIC (Step 10)
After you are finished with the character page, you will need to make a link to it from your comic's main page.

This is how you create a character page link.
<a href="http://www.drunkduck.com/YOURCOMIC/html/YOURFILENAME.html
">Characters Page</a>

Now let's add the link to our main layout. (Step 10)
Go to My Controls or My Account
Scroll down to the Comics You Own: section; click Edit
Click 4.Layout
Click on the RAW HTML Button

Paste the link code (with your url information) anywhere inside the <body> tag.

COLOR (Step 8)
This template is a neutral grey color, feel free to change colors to match your comic's theme. Items listed in purple are things you'll want to change.
Here is a color chart that lists all the codes. Simply paste the color code you like into the template.

Background image Code/b]
body,td,th {
background-color: #CCCCCC;
background-image: url([b]http://www.drunkduck.com/YOUR_BACKGROUND_IMAGE_URL.jpg);

Background Color Code
body,td,th {
background-color: #CCCCCC;

Text Color Code
body,td,th {
background-color: #CCCCCC;
background-image: url(http://www.drunkduck.com/YOUR_BACKGROUND_IMAGE_URL.jpg);
background-repeat: repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
color: #000000;

MORE CHARACTERS
By default, the template has room for 5 characters, but you can list as many characters as you want. Just copy and paste the following code after the last <hr> tag in the blue highlighted area.

<h2>Character </h2>
<p><strong>Role</strong>: Text <br />
<strong>Appearance</strong>: Text<br />
<strong>Likes</strong>: Text<br />
<strong>Dislikes</strong>: Text</p>
<p><strong>Background</strong>: Text</p>
<hr />

This post was last edited on Sep 9,`09 11:18pm
 
Member:69,455
Posts:3
Joined:2-9-2009
Seen:11-26-2009
May 9,`09 12:59pm | Quote | ↓
I try to save as an HTML file but when I try to add the file it says is an htm file, how to I change that?
 
skoolmunkee
Admin
Send a private quack!
Member:56
Posts:5,887
Joined:1-2-2006
Seen:11-27-2009
May 9,`09 3:01pm | Quote | ↓
html and htm are the same thing. If you are really concerned about it, you can just tack an l onto the end and no harm done. :]
 
Member:5,087
Posts:1,813
Joined:7-17-2006
Seen:11-26-2009
Aug 12,`09 12:37pm | Quote | ↓
I made a mistake with my template. If anyone has trouble linking external pages its because the url html files are given
Example: http://www.drunkduck.com/Project_Gideon/html/characters.html I forgot to mention the /html/ before. Sorry if it has been confusing.
 
Member:20,640
Posts:50
Joined:4-9-2007
Seen:11-27-2009
Aug 15,`09 6:37pm | Quote | ↓
my notepad shows unicode and ANSI but no HTML wtf?
Omelets make me gassy.... if you know what I mean! OK I don't know either...
 
ozoneocean
Admin
Send a private quack!
Member:53
Posts:19,773
Joined:1-2-2006
Seen:11-27-2009
Aug 16,`09 1:18am | Quote | ↓
"Tanman2" Said:

my notepad shows unicode and ANSI but no HTML wtf?
HTML is just the file type.

You save it AS a .HTML file instead of a .txt
 
Member:79,615
Posts:7
Joined:8-2-2009
Seen:11-26-2009
Sep 5,`09 4:47pm | Quote | ↓
I can't get this to work. My page only displays the HTML; it doesn't turn the HTML into a web page.

Here's my comic: http://www.drunkduck.com/The_Water_Phoenix_King/

And here's what happens when you scroll to the bottom and click on the characters page: http://www.drunkduck.com/The_Water_Phoenix_King/html/Characters.html

I saved Character.html as an HTML file (obviously) but DrunkDuck seems to think it's a text document. How do I fix that?

---
Kyle Marquis
 
ozoneocean
Admin
Send a private quack!
Member:53
Posts:19,773
Joined:1-2-2006
Seen:11-27-2009
Sep 6,`09 3:15am | Quote | ↓
"Moochava" Said:

I can't get this to work. My page only displays the HTML; it doesn't turn the HTML into a web page.

Here's my comic: http://www.drunkduck.com/The_Water_Phoenix_King/

And here's what happens when you scroll to the bottom and click on the characters page: http://www.drunkduck.com/The_Water_Phoenix_King/html/Characters.html

I saved Character.html as an HTML file (obviously) but DrunkDuck seems to think it's a text document. How do I fix that?

---
Kyle Marquis
Did you edit it in Microsoft wordpad or MS Word? That's what it looks like to me. Right click and then click "view Source" on the web page there in your browser. You'll see all sorts of extra code that makes sure your page LOOKS as if it's just showing up as a web page and not being rendered properly. MS Word and Wordpad are not very well made programs unfortunately.

Notepad is the program you really need to work with on a Windows machine. If you're using a mac I'm not sure. BBedit was the Mac program I used to use for coding and it's excellent but these days they might have something better, I don't know.

Anyway, copy and paste what shows up on that web page into a notepad file and then save that as "Characters.html" and it should work correctly. ^__^
 
Member:79,615
Posts:7
Joined:8-2-2009
Seen:11-26-2009
Sep 6,`09 10:05am | Quote | ↓
Ah, that did it. Now it's showing up as a web page. Thank you!

For my next (stupid) trick, I have somehow failed to get the two columns to act like columns. Instead the pictures simply come before the text, as you can see: http://www.drunkduck.com/The_Water_Phoenix_King/html/Characters.html

(I'm sorry; I can't get this to be a hyperlink. Every time I press "Link," this gets posted.)

I even included a temporary banner to make sure I had anything, though I left the background picture blank since I don't need one. Is that part of the problem? I tried doing a line-by-line comparison between my code and the sample, but I can't see what I missed/left out/accidentally deleted. Any ideas?

---
Kyle Marquis

This post was last edited on Sep 6,`09 10:11am
 
skoolmunkee
Admin
Send a private quack!
Member:56
Posts:5,887
Joined:1-2-2006
Seen:11-27-2009
Sep 6,`09 2:17pm | Quote | ↓
It's because of those smiley faces in the code. Because the "code" blocks don't work like they're supposed to. It ought to be in the instructions somewhere to hit 'quote' and copy the code from that box, rather than highlight and copy off the forum thread as displayed.

Should be easy to fix though. Find the spot in your code where the is, then replace it with the character ) ... it should read "auto" ) ; (without the extra spaces)

Then the faces should be inside a string that goes D 8 D 8 D 8 (without the spaces)

This post was last edited on Sep 6,`09 2:18pm
 
Member:79,615
Posts:7
Joined:8-2-2009
Seen:11-26-2009
Sep 6,`09 3:03pm | Quote | ↓
Okay, I cleaned up the errant smiley-faces; I copied and pasted the code directly from the source for the sample page. Thanks for spotting that.

Now...well, the page displays fine in Chrome, or at least well enough that improvements are only cosmetic. (I suppose there's no auto-adjuster that starts each new descriptive entry next to its appropriate picture? If not, I'll just throw <br>'s everywhere until things are lined up.)

But in Firefox, the page is a mess that doesn't form two columns and that spits out this--

1262? "1260px" : "auto"; margin: 10px auto; background-color: #FFFFFF; } #page-wrap #inside { margin: 10px 10px 0px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { padding-left: 230px; padding-top: 20px; } #header { text-align: center; background-color: #D8; } #left-sidebar { width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #footer { text-align: center; padding-top: 20px; padding-bottom: 20px; color: #CCCCCC; } .style1 { font-size: small } -->

--

at the top of the screen.

And in IE, nothing loads at all.

Sorry for my numerous problems here, but browser compatibility is definitely beyond my meager, meager abilities with HTML.

---
Kyle Marquis
 
skoolmunkee
Admin
Send a private quack!
Member:56
Posts:5,887
Joined:1-2-2006
Seen:11-27-2009
Sep 6,`09 6:26pm | Quote | ↓
OK, I poked around for a minute. It looks like the HTML code is confused because a tag wasn't ended properly, so it jumped on the next-closes 'free' > to try and end the open tag. That's why you're getting that batch of code at the top. Some browsers are better than others at figuring out where end tags are missing.

Look at the top of your HTML page code, when you put in your comic's title you accidentally deleted a bit of the code. where it says:

<title><!--WPK Characters</title>

It should read
<title><!--WPK Characters--></title>

And actually, putting WPK Characters inside that !-- code will hide it (DD's tags use those, which is why the original [comic name] was inside brackets, DD will auto-insert it) sooooooo if you want the browser bar to actually display WPK Characters, that line needs to read:

<title>WPK Characters</title>

Sorry if there is more to fix, it's getting late here and I don't have time to check all of it. If you change that and it still doesn't work, then you need to carefully compare your code with the original and make sure you're not missing any other bits. If you do 'check page source' on your page and on misi-hime's example page, there might be color coding to help you find where things are different. :]
 
Member:79,615
Posts:7
Joined:8-2-2009
Seen:11-26-2009
Sep 7,`09 8:38am | Quote | ↓
Ah, there we go. I think I have it! Looks like it's just clean-up from here on out. Thanks for your help, everyone.

---
Kyle Marquis
 
Member:5,087
Posts:1,813
Joined:7-17-2006
Seen:11-26-2009
Sep 9,`09 11:12pm | Quote | ↓
I think a lot of peoples problems will be solved by just downloading the file, rather than making it so... i edited the instructions a bit.
if anyone finds any issues let me know.

Previous 30
Page of 1 Next 30

Reply
 

Not Registered?
Signup for a FREE Account!


Registered users can:
Comment on comics!
Create their own comics!
Vote in polls and contests!
Use the forums!
   Latest News
   DD Cam (Now Featuring: DDBook)