Return to FAQ
 

How can I change what the index page of my comic account looks like?
 
There is an easy way and a harder way to change the way your comic page looks.

The easy way, once you've logged into your My Controls, is to click on the link for Edit Design Template.

 

Choose one of the pre-made templates from the dropdown box on that page, and click Send. Note the None/Default/Own option - if you choose that, you can go the harder route and, using HTML and some DD-specific codes, design your own look and feel.

If you want to do that, the first step is to use your preferred HTML editor to create your index page.

Design your look and feel however you want. For the purposes of this FAQ entry, I'll be using the default template that is available through your My Controls.

There are plenty of good websites around that will tell you how to write basic HTML. However, in order for your page to work on Drunk Duck, you need to add some special codes. (These codes will also only work on the index page for your comic, not on any additional HTML pages you may make.) These codes are essentially placeholders for specific items on your index page. For instance, rather than typing the title of your comic in your HTML code, add the DD code for Comic Name - that way Drunk Duck will automatically insert the comic's title from its database in that spot.

Guide to Drunk Duck Codes
<!--[COMIC_NAME]--> This would be the title of your comic.
<!--[PAGE_TITLE]--> This is the title of whatever page is currently showing.
<!--[DD_FAV]--> This adds the link for others to click on, which adds your comic to their favorites list.
<!--[PAGE]--> The actual comic image will go in this spot.
<!--[AUTHORS_NOTES]-->

OR

<!--[AUTHORS_NOTES=HEIGHT,WIDTH]-->		 The area where your author's notes (which you entered when you uploaded the page) will appear.

Defaults to 400 WIDTH, 200 HEIGHT
OR
Where height/width are either numbers or percentages
<!--[PAGE_DROPDOWN]--> This is the dropdown list which lists all the old comic pages (your archive).
<!--[RSS]--> Creates a link for an RSS feed for your comic. This is some kind of crazy magic I don't understand, so I can't help you here, but I think if you put the link in it all happens automagically.
<!--[NAV_FIRST]-->
<!--[NAV_PREVIOUS]-->
<!--[NAV_NEXT]-->
<!--[NAV_LAST]-->		 Creates the navigation arrows for your comic page. Alternatively, you can use your own images with the codes below:
<!--[NAV_FIRST=gfx/first.gif]-->
<!--[NAV_PREVIOUS=gfx/prev.gif]-->
<!--[NAV_NEXT=gfx/next.gif]-->
<!--[NAV_LAST=gfx/last.gif]-->		 Allows you to make your own image for the navigation arrows. They don't actually need to be named first.gif, etc. However, you do need to add those image files to your gfx folder- see faq entry How do I add extra files to my comic account?
<!--[COMMENT_FORM]-->

OR

<!--[COMMENT_FORM=400,200]-->		 This is the box where visitors can enter their comments and/or vote. You can customize the size of this box.

Defaults to 400 WIDTH, 200 HEIGHT
OR
Where height/width are either numbers or percentages
<!--[COMMENTS]-->

OR

<!--[COMMENTS=400,200]-->		 This tag sets the location and size of your visitors' comments, once they have made any.

Where height/width are either numbers or percentages - If the second argument is INCLUDED (in this case the 200), it will create a scrollbar to view the message, enforcing a size limitation on the height of the comment. If you don't want that, omit the 200.

An illustrated example:

 

So, for example, rather than the usual HTML code to include a URL that is also an image to reach the first page of your comic, you would put this in the code in its place:

<TD WIDTH='25%' HEIGHT='50' ALIGN='CENTER'><!--[NAV_FIRST]--></TD>

Once you have your page written in HTML, you need to upload it. To do so, log into your My Controls!

 

Once there, click on the title of your comic.

 

Now you want to edit the template, so click on Edit Design Template.

 

Now you will want to choose None/Default/Own from the dropdown list, and click Send! It will load an editable textbox where you may copy/paste your own HTML code, to replace the default template. Make sure to click the Send! button at the bottom of the page (not at the top!) in order to save your changes.

 

At present, you cannot edit the other pre-made templates in this way. However, if you are familiar enough with HTML and the DD codes, you can use the source code to edit a different template.

If you receive errors while saving, or if your template didn't "take," you need to double-check your code. Make sure you have properly opened and closed all tags, and included all the required DD tags (all of them except DD_FAV and RSS, and whichever set of navigation arrows and comments/authors notes you aren't using).

You can also write your own CSS file (if you know anything about cascading stylesheets) to accompany your HTML pages. However, Drunk Duck does not yet have CSS tags for the objects it generates itself, such as the comments area. Those still use the basic HTML table tags, so design your CSS with that in mind. For a very simple tutorial on adding CSS to your comic page (if you only want to change the colors), see the FAQ entry How can I change my page's colors using CSS?
 

This entry contributed by Spang!, Hawk, and skoolmunkee

Return to FAQ