Mishi's Custom Image Layout V2
This is my revised layout for people who want to make their own graphics, but don't know code. Hopefully this version is easier to work with than before. It is also neutral colored. For this template I would recommend that you DISABLE the homepage.

To view a live preview, click here!



THE CODE



So now you have my layout. Now what do you do with it?

ADDING THE CODE
Click on My Controls/My Account
Scroll down to the Comics You Own: section; click Edit
Click 3.Homepage. Turn the Homepage OFF and UPDATE HOMEPAGE
Now go to 4.Layout



You should see a screen similar to this, Click on RAW HTML
Copy the above code and paste it in this section.
From here you can edit the text, all the things in blue or add your own links.
When you're finished click ACCEPT DESIGN.
Make sure you check your comic's webpage to see the code in action.
If you don't like what you've done...try again.


IMAGES
Use an image program like Photoshop to create images for your comic.
Here are the different images/sizes you will need.

BACKGROUND I suggest something simple. Could be anything, really.
By default, the code will repeat the image over and over to fill the background.

COMIC BANNER


BUTTONS 150px X 50px
(You will need to make 4 of them) FIRST, BACK, NEXT, AND NEW.


AUTHOR COMMENT IMAGE


COMIC COMMENTS IMAGE





UPLOADING IMAGES
Now you will need to put all the images you have made onto the internet.
You can use any image host, but this is how you do it on Drunk Duck.
Click on My Controls/My Account
Scroll down to the Comics You Own: section; click Edit
Click on Files
You should see a screen similar to this. Click + ADD FILES



On the files screen the highlighted text is an example of an image URL
*Upload all your images.




ADDING IMAGES
Now that you have your images uploaded and the code intact
*Go back to number 4.Layout and into RAW HTML screen.
*REPLACE all areas in the code that are in bold text with each image's URL.(copy and paste 'em in)

ADD EXTRA IMAGES - Add any extra images with the following code.
<img src="http://www.drunkduck.com/YOURCOMICNAME/gfx/FILENAME.jpg">

LINK IMAGES - Link images by putting<a href="http://www.website.com"> in front of the image code and then closing it with </a>

EXAMPLE: <a href="http://www.website.com"><img src="http://drunkduck.com/yourcomic/yourimagename.jpg"></a>




ADDING COLOR
If you don't like all the grey, no problem. Every time you see something in layout thats purple it's a color that you probably want to change. At this point you're probably thinking, "Since when has color been random numbers and letters?" :0 Well it's called HEX Codes, and they may look confusing but aren't.CLICK HERE This is a color chart that shows you the color and the corresponding number. Take a good look at your images and compare them to the color chart. What looks best? Try replacing some of the color codes with some of your own. You may not know where the color code effects, but don't be afraid to start experimenting. *Have fun! :D It will probably take you several tries to get exactly what you want. If you are having a lot of trouble, check out the resources.

TEXT COLOR
Find this line.Change the #000000 to the color of your choosing.
td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;


THE COMMENT BOX COLOR
Find this line. Change the color in purple to the color of your choosing.
<table width="620" align="center" cellpadding="8" cellspacing="0" bgcolor="#FFFFFF">


LINK COLOR
Find the Link, Visited, Active and Hover. Change the purple to the color of your choosing.
a:link {
color: #666666;
text-decoration: underline;
}

Link = Regular Text Link
Visited = Link that has already been clicked
Active = Link you click on
Hover = When your cursor is over it


EXTRAS
Now after having some images picked out and colors chosen. You're probably wondering what to do with the blue section.
Everything in blue is optional content. I have posted a few sections for you to add links, banners, Buttons, AD's, or other content. You can erase anything that's in blue that you don't want. Make it your own, it's your choice!

________________________________________________________________________

HTML HELP
*Lissa explains (Basic HTML)
*Enkida's Tutorial pt. I comicpage (advanced html)
*Enkida's Tutorial pt. II homepage (advanced html)
*How to Change Your Template (FAQ)
*DD Tags (FAQ)


EXAMPLES
Use these as an inspiration...
*Project Gideon
*TopTastic(NSFW)
*Lack of Ethics
*One Country At a Time
*The Uncanny Uper Dave
* Vampy Fetal
*Pagan Zoetrope
*Animania
*Italian Godfather
*Flat Line
*Darkside
*Demented
*Splash!
*No reason
*STICKFODDER
*Pokemon Yellow Comics
*The Suburban Vampire

Any questions? Comments? Post 'em here! Or you can send me PQ ~And i'd love to see your results :3

Okay People!

I just totally went through this code today! Please try it out sometime! If you wanna see examples Just check out my comics, it's what you can achieve when you work with a basic template like this. hanks very much for all who have tried the old version and the new version of this layout.

<3

I am going to try it out, yay! I am such a basic coder for having a graphic arts backgournd it is sad, so thank you this is awesome!

Your welcome.
I'm a graphic designer too. They usually fail to mention as much web design in school as i think we should know. Hopefully, you can manage with this template. if anythings' confusing let me know so i can do some revisions.

This was extremely helpful. Thanks, mishi!

=D This looks wonderful! It's simple enough that even I can use it, and I do like the organization! Thank you so much for uploading this template file. I really needed this. <3

Yay. :3 :3 :3 :3 :3 I'm glad people are having an easier time using this version of my template! *is ecstatic*

So awesome-I cannot thank you enough-i was totally lost when i first came here and saw the base html and the complex tutorials from it, but you simplified it so perfectly!

I <3 you Mishi~
Thanks again--

Hello!

Thanks for posting that code! It helped alot!


Though, when it says "Image URL", I used photobucket.com for it. You know, I put my images into PB and posted their Direct Link into where it says to do so in the code you made.

And, the background. What could I do to change it?




Thanks alot though, it's a very simple and easy code!



~Jarrod

Okay, so I just did a major update to this little guide
I added more on uploading images and color since I didn't explain them enough.
The only layout to the actual code is that the background image is added through CSS and not HTML. Also the copyright symbol doesnt show right for some reason so I removed it.

* If you have used my layout please post you links here and so I can add you to the examples list :D

Youre welcome. Yesh photobucket should work as long as you use the direct link code .The only reason I would recommend drunkduck for images because they have less requirements than photobucket. And you have more space I think.

About the background...

<style type="text/css">
<!--
body {
background-color:#888888;
background-image: url(YOUR BACKGROUND IMAGE URL);
background-repeat: repeat;

I added this part (near the top) before It had a background code as well but I took it out for this one since it repeats. If you just want a soild background color fill out the background-color:#888888; Replace the #888888 with another color code.

If you want like an actual image just place the url in the background-image: url(YOUR BACKGROUND IMAGE URL); same as you did with the images.

http://www.drunkduck.com/Lack_of_Ethics/

yatta.

That looks beautiful SC, couldn't have done it any better myself! :3
_______________

UPDATE!

Added a RESOURCES section and a few extra examples.
Also I changed this line, most people just put their comic urls. please replace it with this line...

<link rel="stylesheet" type="text/css" href="http://www.drunkduck.com/gfx/template_gfx_new/global.css">

Just a comment... in Firefox, the comic page doesn't stay centered. I found the only way to fix it is to remove the divs in this section (bold). (Also, I think the parts I italicized are really unnecessary. You should probably get rid of them)




Also, some recommendations :3...

if you add the cellpadding, spacing, etc info to the nav class, you won't have to repeat it every time you make a new table with that class.

.nav {
background-color:#DDDDDD;
border-width: 0px;
border-spacing: 0px;
padding-right: 0px;
padding-left: 0px;
border-collapse: collapse; }

good ideas pastel.

with the last post edit i made should have corrected the centering issue.
A few things have been removed/modified thanks to your suggestion.

n_n

Ah! The code looks better than ever before! I think I'll give it a second go!

I noticed you still left the div tags in your code. Removing them will STILL keep the pages centered in IE, and more importantly, it'll fix the off-centerness in firefox.

ahhhhhhhh alright >_< when i test it looks centered, but i guess thats just because i keep my pages small (for web they should be....amirite?) I'm an idiot :/

Thanks a lot for this, I have NO understanding of even basic HTML, and managed to make a decent layout for my comic: http://www.drunkduck.com/The_Uncanny_Uper_Dave/

Ya know, I think I just might be a total idiot... I've followed these directions as best as I can understand them but I just can't get it to work, All I really want is to figure out haw to add things like a personal back ground and link banners, especially that little button for TopWebComics, I'm really frustrated that I can't get the hang of this, I even visited that lissaexplains.com, sight and I just can't grasp it.

In that case, ask around. Get a friend to do it for you
Tell them exactly what you want, give them the images etc. Maybe suggest that you need help in your author notes and ask people to offer it? ^_^

Don't be silly, you're not an idiot. It always takes a little time to learn something new. But once you figure things out it will be easy as pie. :3 It sounds like you are after something a little bit simpler Hmmmmm...... Hopefully I can answer some of your questions a bit better



If you have an image you want to use, upload it to eiether drunkduck or photobucket and then paste it's url in this code

<body background="PasteImageURLhere">



TopWebComics should give you a code. All you would do is copy it and paste it in the code. It's not a big deal where you put it, but it should be somewhere at the bottom. In this template, i included a space where you can post things like banners. (Basically, all the blue content can be replaced with your own stuff.)


If you wanted to manually make banners that link to something this is how you would do it. There can't be any spaces in the URLs. Don't forget to put the right extension at the end of the image (.jpg, .gif,.png etc.)

<a href="WebsiteYouWantYourBannerToGoTo.com">
<img src="PasteYourBannerImageURLHere"></a>

Does this help?

You're welcome.<3
Wow, you really made the template your own. Excellent Work! :D

I don't think it's working.I in put in the codes for the banner and the background,but they still won't show.

Never mind,I found out what went wrong.XD

XD

Thank you very very much! I really appreciate you taking that little extra try to help me. You are very nice and I thank you very much!

Your welcome

I DID IT! I actually made it work!
Sorry for constantly changing this reply but this'll be the last time, hopefully XD!
It looks great! At least I hope it does! http://www.drunkduck.com/VampyrFetal/index.php?p=363444

Thank you for posting this, it was a wonderful springboard for me to get mine going.