Comic page formatting confusion

InvaderScurk · Post by **InvaderScurk** » Mon Feb 02, 2009 6:50 pm

I recently started using my FTp to upload comics to my webpage. It is done, and I am happy.

However, my webpage, is basically a blank page with my name and the comic. I've been searching for around a half hour for a tutorial (for dummies) on how to make it look more like this (as an example), with backgrounds, buttons, and a navigation bar. But I think I've gotten lost in a jumble of pages that aren't related to what I need.

I'm not asking someone to retype all the instructions I need to pretty up my webpage (unless you want to), but could someone provide some useful link(s) that will help me do so?

Thank you so much. I am new to webcomicing, and don't have much experience in these matters, so bear with me

Wendybird · Post by **Wendybird** » Mon Feb 02, 2009 7:48 pm

You can log into FTP, which is good. That's the first step. Next you'll want to get ahold of your basic indextemplate.html and dailytemplate.html and copy them to your computer. More information on that in this useful article:

http://cgwiki.comicgenesis.com/index.ph ... u_screw_up...

One option is to replace those files with the templates seen here:

http://cgwiki.comicgenesis.com/index.ph ... te_library

Remember to keep the names indextemplate.html and dailytemplate.html

Here is a tutorial for replacing your nav buttons with pictures:

http://cgwiki.comicgenesis.com/index.ph ... on_Buttons

If you want to do anything more complicated than that, you should start learning HTML. My favorite site is http://www.w3schools.com/html/default.asp

Or you could ask someone here to help you make a site. I've been known to create some simple website designs for free.

InvaderScurk · Post by **InvaderScurk** » Wed Feb 04, 2009 5:31 pm

That was all exceedingly helpful! Thank you! My one concern is, I tried to download a theme off the wiki, but the zip links are not working. Can you link the charcoal theme here?

Also, where do I PUT the theme? The dailytemplate and index template go in the workspace folder, but where do the theme files go?

InvaderScurk · Post by **InvaderScurk** » Wed Feb 04, 2009 6:09 pm

HRM. Now my page looks quite strange. Do I NEED theme files to make it look nice? Or what? I'm thoroughly confused now. My website is a page full of visible code now!

MagooChris · Post by **MagooChris** » Wed Feb 04, 2009 8:13 pm

I would hazard a guess and say that the themes will be one of or a combination of the index/daily templates and a CSS file (CSS is Cascading Style Sheet - allows you to change the look of multiple pages without changing the pages themselves)

from the code being displayed on your page, I would say that the indextemplate that you are using doesn't have clean HTML code in it... I'm not sure what the \tab and \par actually are but it looks like some coding to put in a tab and new line that has not quite worked out well...

what editing tool did you use to manipulate the template?

InvaderScurk · Post by **InvaderScurk** » Thu Feb 05, 2009 5:30 am

I used a HTML generator hosted by Comic Genesis. It consisted of a series of pages asking me what I wanted with my site. I bubbled in my answered, threw in a few links, and the generator wrote the HTML code for the daily template and the index template. I copied that text into the notepad on my computer.

The only deviation I took from the directions on that Generator is that it told me to save my new daily and index templates with an extension of .html and set the SAVE AS TYPE as All Files. "All files" wasn't an option in the save menu, so I saved them as rich text documents. However, I saved them to my desktop and their icons were still those of html pages, so I don't know if that affected anything.

That's it. Apart from the fact that I have no CCS in my site right now (on account of the broken zip download links).

Wendybird · Post by **Wendybird** » Thu Feb 05, 2009 12:07 pm

Saving as "rich text" will destroy your code. If "all files" is not an option you can use regular text, or .txt. As long as the name has .html on the end, it will still save as HTML.

Metruis · Post by **Metruis** » Thu Feb 05, 2009 2:30 pm

InvaderScurk wrote:I used a HTML generator hosted by Comic Genesis. It consisted of a series of pages asking me what I wanted with my site. I bubbled in my answered, threw in a few links, and the generator wrote the HTML code for the daily template and the index template. I copied that text into the notepad on my computer.

The only deviation I took from the directions on that Generator is that it told me to save my new daily and index templates with an extension of .html and set the SAVE AS TYPE as All Files. "All files" wasn't an option in the save menu, so I saved them as rich text documents. However, I saved them to my desktop and their icons were still those of html pages, so I don't know if that affected anything.

That's it. Apart from the fact that I have no CCS in my site right now (on account of the broken zip download links).

Righto. Firstly, open up NOTEPAD, not WORDPAD or WORD. Notepad is a plain text editor. Simply save your file as whatever.html and it will save as an html.

And I think the css file I'd saved for my first template was Charoal. I'm not sure, it's been a while, but here anyway.

Code: Select all

/*
	CSS by c.w.
	http://cwcomics.comicgenesis.com
	c.w.comics@gmail.com
*/

body
{
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
background: #000000;
color: #FFFFFF;
}

#ad
{
margin: 15px;
float: right;
}

.header
{
margin: 15px;
text-align: left;
margin-left: 1em;
}

h1
{
margin: 0;
font-weight: normal;
}

h2
{
margin: 0;
color: #CCCCCC;
font-weight: normal;
}

h3
{
margin: 0;
color: #CCCCCC;
font-weight: normal;
}

a
{
color: #FFFFFF;
text-decoration: none;
font-style: italic;
}

a:hover
{
text-decoration: underline;
}

ul
{
margin: .5em;
padding: 0;
}

li
{
display: inline;
margin-right: 2em;
}

.main
{
margin: 0;
padding: 10px;
margin-top: 1em;
background: #000000;
}

.main ul
{
margin: 0;
}

.main li
{
margin-right: 1em;
}

.main img
{
margin: .5em;
}

.news, .list, .rant, .gal
{
text-align: left;
margin: .5em 20% .5em 20%;
}

.news iframe
{
width: 100%;
height: 350px;
border: 0;
}

.list, .rant, .gal
{
background: #000000;
padding: 15px;
overflow: auto;
}

.gal img
{
float: left;
margin: 0 25px 25px 0;
}

.list li
{
display: block;
margin-bottom: .25em;
}

#footer
{
font-size: 70%;
}

I used a varient of the ComicGenesis template ones for about my first month, and then made my own, so... yeah... I'm pretty sure it was Charcoal I was using, so save that as .css and give it a shot.

InvaderScurk · Post by **InvaderScurk** » Thu Feb 05, 2009 8:18 pm

Metruis wrote: Righto. Firstly, open up NOTEPAD, not WORDPAD or WORD. Notepad is a plain text editor. Simply save your file as whatever.html and it will save as an html.

And I think the css file I'd saved for my first template was Charcoal. I'm not sure, it's been a while, but here anyway.

I used a varient of the ComicGenesis template ones for about my first month, and then made my own, so... yeah... I'm pretty sure it was Charcoal I was using, so save that as .css and give it a shot.

Thank you. I couldn't find notepad on my computer O_o but I managed to save the templates as .txt files anyways. But I still don't know WHERE to put the charcoal file; somewhere in the workspace folder, I suppose. Does it go in the webpages folder? That's my best guess.

UPDATE: My site now looks A BIT better, with working links, but I guess it needs the theme to tie it all together. All the "buttons" are still on lies above and below my comic. But it is updating correctly (new page)! Hoorah!

Still need to know what folder the theme (charcoal) goes in though, and where I put my blog posts if I don't have my own blog.

MagooChris · Post by **MagooChris** » Thu Feb 05, 2009 8:43 pm

ok, if try and read your template files you will find this written in there:

Code: Select all

<link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >

what you want to do is create this screen.css file.

so start out by coping the code that Metruis supplied for you and naming it "screen.css" (save as text again) and put this file in the webpages folder. then perform an update.

(I'm only going by what I have read on the wiki tutorials as I cannot log into the webcomic to update ours).

as for a blog, do you currently have your own or looking for one? there is a tutorial here about adding on: http://cgwiki.comicgenesis.com/index.ph ... by_Blogger

InvaderScurk · Post by **InvaderScurk** » Fri Feb 06, 2009 5:13 am

Okay, thank you! I'll do that as soon as I can access my home computer. Will adding the charcoal theme (named screen.css) to my webpages folder "polish" the site? In other words, will the links be in boxes and not just as a list on the margin. Will the comic navgiation links be above and below the comic, centered, instead of on the margin? Will the theme do these things or do I need to upload another bit of code to do that?

InvaderScurk · Post by **InvaderScurk** » Fri Feb 06, 2009 5:46 pm

MagooChris wrote:
as for a blog, do you currently have your own or looking for one? there is a tutorial here about adding on: http://cgwiki.comicgenesis.com/index.ph ... by_Blogger

I found the tutorial confusing and unhelpful. It lost me at about here:

On to the stuff that you actually need my help for. Your ftp server is "YOURDOMAIN.comicgenesis.com", sans quotes (this assumes you don't have a domain - if you do, you get the great joy of figuring out what to do on your own). It will not be "ftp://YOURDOMAIN.comicgenesis.com" or any variant. It will be "YOURDOMAIN.comicgenesis.com", or it will not work.

Set the protocol to FTP, because I know that works and I'm not sure if SFTP will. Set the FTP path to "/public_html/SOMETHING/", where SOMETHING is whatever you want (in my case, it's "news") and the rest is exactly the same (yes, even that ending slash). We're putting this in public_html and not workspace for a good reason: we don't want to have to run AutoKeen every time we update the newspage.

What? Is there another tutorial you can link, or possibly an explanation you could type yourself?

I want to thank everyone again for helping me. I don't mean to sound ungrateful at any point during this long process.

MagooChris · Post by **MagooChris** » Sat Feb 07, 2009 3:05 am

Hey, your site looks good by the way

as for the blog tutorial, I hadn't actually read it when I told you about it, I just saw that it was there while I was looking at other things...

from reading it, I beleive that those things that it talks about is on the blog creation page at their site, but I haven't done it myself so I don't exactly know... hopefully someone else can help you out there, it seems a common enough thing on the comics.

InvaderScurk · Post by **InvaderScurk** » Sat Feb 07, 2009 8:39 am

MagooChris wrote:Hey, your site looks good by the way

as for the blog tutorial, I hadn't actually read it when I told you about it, I just saw that it was there while I was looking at other things...

from reading it, I beleive that those things that it talks about is on the blog creation page at their site, but I haven't done it myself so I don't exactly know... hopefully someone else can help you out there, it seems a common enough thing on the comics.

Thank you very much. I'm glad my site looks rather good -I've put enough effort into it

As for the blog, I might as well put my request out in this very thread. Can anyone knowledgeable in blogs help me out?

EDIT: Also, I downloaded the charcoal theme and I have my templates, but is there a way to change to text of the site? My title, slogan, and author text look very uninteresting. Could I somehow change the text or substitute images?

Dr Neo Lao · Post by **Dr Neo Lao** » Sat Feb 07, 2009 1:34 pm

Define "blog".

With CG, there are three ways of doing it. The first is to use it on the site itself. This is simply adding some text to your indextemplate.html file and changing it every so often. This is the easiest way, but is not recommended for a couple of reasons:

It means you have to manually trigger an update if you want to change something outside your normal update schedule.
it is difficult to hand-code updates every time and easy to make mistakes (which you won't see until you run an update, and then you'll need to run another update to fix the mistake).
it will be impossible to let people know that there is a problem if the CG server stalls and you can't update your comic (which does happen from time to time).

The second way is with an off-site host. The recommended easy way is to sign up somewhere that allows file hosting as well as hotlinking (I use and recommend ripway.com - it is super easy, reliable and free). Once you have your account, create a text file (for example, blog.txt) and upload it to your second site. On your indextemplate.html file, add a code like this:

Code: Select all

<iframe src=URL_HERE width=SIZE height=SIZE>Your browser does not support iFrames'</iframe>

Replace URL_HERE with the address of the text file, something like http://ripway.com/username/files/blog.txt and SIZE with whatever width and height you want to use for the iFrame so it displays properly in your comic.

Note that the text in the middle ("Your browser...") is what will display if the person reading your comic can't see iFrame's. This text can be anything you want, but an error message is recommended. There are also other options available for iFrames, run a search for "iFrame tutorial" or "iFrame basics" to find a bunch of help and how to use them.

The third option is the one described in the tutorial you were linked to. It works and it's fine, but it might be a bit advanced for you at this stage if this is your first experience with html. Best bet is to get something basic up and running and work on making it pretty later.

InvaderScurk · Post by **InvaderScurk** » Sat Feb 07, 2009 5:32 pm

Thank you for the blog advice. Two things:
A) I can't seem to find ripway.com... If I google it and click on the first link, it loads this page...
B) Where in my index template do I add that code? This is my index template:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Generator" content="ComicGenesis HTML Generator BETA-4.1">
<title>Invader Scurk - ***todays_date***</title>
<link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >
<link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" >
<link rel="stylesheet" type="text/css" media="print" href="/print.css" >
</head>

<body>

<div id="ad">
***advertisement***
</div>

<div class="container" id="index">

<div class="header">
	<h1 class="title"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a></h1>
	<h2 class="subtitle">Height discrimination is still discrimination</h2>
	<h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
	<ul>
	<li id="mcontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
	<li id="mforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
	<li id="mwiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
	<li id="mgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
	</ul>
</div>

<div class="main">
	<div id="abovenav" class="nav">
	<ul>
	<li class="first">***first_day***</li>
	<li class="previous">***previous_day***</li>
	<li class="next">***next_day***</li>
	<li class="last">***last_day***</li>
	</ul>
	</div>

		<div class="comic">
		***todays_comics***
		</div>

	<div id="belownav" class="nav">
	<ul>
	<li class="first">***first_day***</li>
	<li class="previous">***previous_day***</li>
	<li class="next">***next_day***</li>
	<li class="last">***last_day***</li>
	</ul>
	</div>
</div>

<div class="news">
<h1>News</h1>
***todays_notes***
</div>

<div class="secondarylinks">
	<ul>
	<li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
	<li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
	<li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
	<li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
	</ul>
</div>

</div>
<div id="footer">
<p>Invader Scurk is hosted on <a href="http://www.comicgenesis.com/">Comic Genesis</a>, a free webhosting and site automation service for webcomics.<br><a href="http://cwcomics.comicgenesis.com/generator">Html assistance</a> by <a href="http://cwcomics.comicgenesis.com">c.w.</a><span class="csscredit"> - see css file for css author.</span></p>
</div>
</body>
</html>

As for size and height, I don't really know what would be appropriate. Could you glance at my site and give me an idea as to what they should be?

Dr Neo Lao · Post by **Dr Neo Lao** » Sat Feb 07, 2009 7:37 pm

Odd... when I follow the Google result you posted, the first link is the proper one and it comes up. Here is the direct link. If there is something blocking you (or redirecting you) then it might pay to have a quick hunt around for a host you can use. There are a bunch of them floating around, you just need one that will let you host text files and let you link them from another site (ie: CG).

As for the code, where you currently have the "News" bit, that would be the logical spot. Replace the contents of that div with the iFrame code above and set the width to 770px (a tad smaller than your comic) so that it flows.

InvaderScurk · Post by **InvaderScurk** » Sun Feb 08, 2009 8:31 am

So I would turn:

Code: Select all

<div class="news">
<h1>News</h1>
***todays_notes***
</div>

into:

Code: Select all

<div class="news">
<h1>News</h1>
<iframe src=URL_HERE width=770 height=SIZE>Your browser does not support iFrames'</iframe>
</div>

As for finding a site, with every post I make, I am painfully aware of how little knowledge I have in this field. I've never kept a blog before, and don't even know how to find one, when what I want is to host and link .txt files. So could you perhaps suggest a site other than ripway (as I suspect my browser is for some reason redirecting me), that has what I need? Thank you for your patience.

Dr Neo Lao · Post by **Dr Neo Lao** » Sun Feb 08, 2009 2:03 pm

I haven't used them myself, but I've heard good things about HotLinkFiles. Sign up with them and give it a go, let us know how it turns out.

Basically, your text file will simply be a hand-written list of stuff you want to talk about. For example:

Jan 30: New comic up! w00t!
Jan 17: Bad news everyone, my house burned down! My insurance company immediately gave me the cash to buy a new one and set me up in a hotel in the meantime.
Jan 01: Happy New Year everyone!
Dec 25: So depressed. So very depressed. Maybe I'll just burn the house down or something...
Dec 10: Yay! Fifteen days till Christmas! This new LSD the hobo down the street is awesome! Lego tastes great!

Obviously, the newest one would go at the top (so people don't have to scroll all the way down for the new stuff) and you would remove older stuff from the bottom after a while so that the list isn't too long. You can also do other formatting to it in order to make it look better.

For comparison, this was my first comic, and used the "write stuff on the index" method of news sharing. Sorta worked. On the other hand, my second comic (incomplete, abandoned) uses the method we are talking about here. Feel free to look at the code to see how it works. In this case, the news.txt file was kept on the same site which works - it just means that you can't update it if the sever locks up.

InvaderScurk · Post by **InvaderScurk** » Sun Feb 08, 2009 3:08 pm

Hm, I am having some bad luck with blogs. Hotlinkfiles refuses to send me an account confirmation email.

But let's just say I've found a blog site that works. When I upload the .txt file, can I edit it on the blog site? And that will precipitate changes of the News on my comic site? Or do I have to make changes to the .txt file and reupload it every time there's an update?

Also, how am I supposed to see the code of your sites? Is there a link I can click somewhere that displays the code?

my blog?
(http://invaderscurk.blogspot.com/)

Comic Genesis Forums

Comic page formatting confusion

Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion

Re: Comic page formatting confusion