Comic page formatting confusion

[MagooChris]

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

you should be able to right click within the webpage and get a "View Source" option that allows you to see the code of someones page. But keep in mind that this is also the generated full page, not the templates used to create them, and you also can't see the external css easily...

[Dr Neo Lao]

The site you ended up using is also the one that the first tutorial MagooChris linked you to ( http://cgwiki.comicgenesis.com/index.ph ... by_Blogger ).

To see the code of a site, all you do is (depending on the browser) click "Edit" in your menu bar and then "View Source" "Page Source" or "View Code". These (you'll only see one) will launch a new page showing the html that is used on that page. As MagooChris said, this will show you the html code, note the template. You'll need to work out which tags end up as which code (which isn't that hard).

To view CSS sheets, all you do is look at the code, find the link (usually near the top and looks like link="css" src="/style.css" or something like that. In this example, you would put the link to the css sheet on the end of the url (so it would look like domain.com/style.css).

Hotlinkfiles refuses to send me an account confirmation email.

Sounds to me like you might have a blocker of some type on your computer. Is it your computer or a family computer? Are you the "computer person" in the ouse or is someone else controlling the computer?

[InvaderScurk]

Let's see, is this the blog on this site?

Code: Select all

<iframe id="newsbox" src="http://guide.comicgenesis.com/newshack.php?out=ictoanftc" width="150" height="300" scrolling="no" allowtransparency="true" frameborder="0" marginwidth="0" marginheight="0"><a href="http://guide.keenspace.com/newshack.php">Newsbox</a></iframe>

And on this site the news update is this?

Code: Select all

<table><tr><td colspan=4>
<p>In case you can't read it, the missle says "Con Amor".</p>
<p>For obvious reasons, no poll this week. Check forum for more details.<br>Thanks for reading! Leo.</p><br />

</td></tr><tr>
<td align=center> <a href="http://twaip.comicgenesis.com/d/20060918.html"><img border="0" name="first_day" alt="The first comic" src="http://twaip.comicgenesis.com/images/first_day.gif" width="90" height="25" /></a> </td><td align=center> <a href="http://twaip.comicgenesis.com/d/20061221.html"><img border="0" name="previous_day" alt="Previous comic" src="http://twaip.comicgenesis.com/images/previous_day.gif" width="90" height="25" /></a> </td><td align=center> <a href="http://twaip.comicgenesis.com/archive.html"><img src="http://twaip.comicgenesis.com/images/archive.gif" alt="Archive"></a> </td><td align=center> <a href="http://z10.invisionfree.com/twaip/index.php?"><img src="http://twaip.comicgenesis.com/images/forum.gif" alt="Forum"</a> </td>
</tr></table>
<br /><br />

I'm just testing my programmer's eye.

As for the blog, I am the master of the computer I am trying to get the blog on. So what can I do to let that confirmation email by?
Also, how can I change the text on my site to something more interesting?

[MagooChris]

(guessing - I'll be interested to know myself if I got these right Dr Neo Lao )
Code 1 is correct
Code 2 is correct but you took too much of the code:

Code: Select all

<tr><td colspan=4>
<p>In case you can't read it, the missle says "Con Amor".</p>
<p>For obvious reasons, no poll this week. Check forum for more details.<br>Thanks for reading! Leo.</p><br />

</td></tr>

I would almost guess that the 2nd one of these is actually a seperate file that is being dragged in by the auto update feature. This is entirely possible and will always be attached alongside that comic... (if you would like to know more about what I say, ask and I will try and explain better)

How do you want to change the text? do you want to change the font, colour, size, what it says?

I think what Dr Neo Lao is trying to point out by the "Blocker" he mentioned is that something on your computer appears to be stopping you from accessing certain pages or peices of code that it deems unworthy... this can be either 1 of 3 things in my experience... it could be simply that whatever browser you are using is blocking code types (but I doubt it in the case of this). the second could be that you have some program installed by you that is blocking pages or codes that it deems as hazards and doesn't want you looking at... or third it maybe that you have an unwanted program hiding away in your computer deliberately making your life hell by redirecting you from pages you want to see and stuff like that... I would probably wait for Dr Neo Lao to come back to hear what he has to say on it...

However the email could be something different from this entirely... your email client (gmail, hotmail) might be blocking the email to come down, either via a spam filter or a "don't receive if not on my friends" kind of filter...
so many different factors to consider...

[InvaderScurk]

I'd like to change my title text to something like this:

And I'd like to change the rest of the text to another font, make it colored purple, centered, and bigger.

[MagooChris]

your title text can be replaced with an image if you would like it to be, you will need to change the templates and upload the image (I will let Dr Neo Lao explain as I still haven't gotten into the comic and so am not familer with the structer of it all - besides what I've read on these forums and the wiki)

changing font colour is a matter of changing it in the CSS file. for example change:

Code: Select all

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

to

Code: Select all

body
{
margin: 0;
padding: 0;
text-align: center;
font-family: "Kristen ITC", fantasy, Arial, serif;
background: #000000;
color: #8A3C82;
font-size:12px;
}

this changes the font colour to a purple (use a picture editing program to find the hex colour to mach exactly what you want) and changes the font to be "Kristen ITC" but if that font cannot be found on the clients PC then the browser will pick a suitable font from the other three names. As well as changing the font size to 12 pixels (from memory there is a better away to change the font size but I'm in a hurry and that will do for now). You can look for CSS tutorials to find out more about these tages.

[Dr Neo Lao]

(I'll be answering questions in order that they appear above, starting from the post after my last one.)

The bit of code that say "<iframe id="newsbox" src..." is for the CG Ad which shows other comics. On ictoanftc, it is the 150x300px image beneath "feel free to pop into the forum and let me know". This bit of code is generated by the ***newsbox*** KeenTag (all current KeenTags and there use are listed on this page.

(If you have not already seen them, the Tutorials page in the CGWiki is an excellent resource)

The next bit of code you showed ("In case you can't read it...") is done as part of the ***todays_comics*** KeenTag. How this is done is the todays comic keentag will show any comics for that day. If you want to show three comics, they would be named YYYYMMDDa.jpg, YYYYMMDDb.jpg and YYYYMMDDc.jpg (where Y is year, M is month and D is day). The images would be shown in order of the last letter (a then b then c).

If I want to add text (which I did) then in the same folder as I upload the comic images I add a text file with the same name except the last letter. So if I wanted some text to show up after the third page, it would have the name YYYYMMDDd.txt and it will be added to the bottom.

The second half of that block of code (starting with "<td align=center> <a href=...") is the navigation buttons at the bottom of the white box under the comic.

On that site, the "news" isn't very obvious. Looking at the site, the "news" bit starts from where it says "Welcome to TwaiP!" in big letters. In the code, it starts from where the code says "<h2>Welcome to TwaiP!</h2>". The text under that was written into the indextemplate.html file directly rather than having the template summon a separate page with the news on it.

Incidentally, the <h2> bit means "Heading, size 2". Other sizes are possible from 1 (biggest) to about 6 (looks like normal text).

MagooChris unfortunately was wrong in both cases. The code for the news on ictoanftc is hidden near the bottom, below the big block of text. It looks like this:

Code: Select all

<iFrame width=600 height=350 src="http://ictoanftc.comicgenesis.com/news.html"></iframe>

If you put that url directly into your browser, you'll be able to see the news.html file directly (it should display the same as in the comic, just full page). The reason that I used news.html instead of news.txt is so that I could do some text formatting. This works and you may want to do it.

...is actually a seperate file that is being dragged in...

Yup. Only it's not part of the CG code, it's standard html via the iFrame tag. Note that the iFrame is unpopular and ought not be used in "proper" html code, but it is easy to use, widely supported and the proper way (with includes and css) is harder to use when starting out.

And yes, something on your computer might be giving you grief. Programs like Norton, NetNanny, some more aggressive firewalls and other "parental supervision" programs might be re-directing you. A link is a link so if I give you a link going to Site A and you click it and go to Site B then something is going wrong.

Changing colour and size is easy, but changing the font is hard.

You have two options: if you want to go for a custom, something a bit more Irken then you will probably need to make the entire paragraph an image rather than text. This will make your comic look "cool" but will not be readable by search engines or some browsers.

The other option is to define a font in your code. This is usually a bad idea because in order to work, the reader has to have that font installed on their computer first. Your code might say "Use Irken Font" but if that font isn't installed on the users computer, it'll simply ignore it and display the default code (usually times new roman).

The image is simply uploaded to your comic account (via FTP) to the images folder. From there, you would use something like:

Code: Select all

<img src="/images/banner.jpg">

to show the image.

MaggooChris is right about the way to change the colour, but did not specify how to use the CSS properly. Just run a search for "css basics" or "css tutorials" to get some fundamentals on how to put that to use.

Font sizes are best specified as an em rather than px size. Your normal text would be defined as font=1em; which basically means "show at default size. More information available on this page.

[InvaderScurk]

Okay, so just to keep everything together, here 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>

I think I'm just barely grasping most of this HTML stuff. Let me take a shot. I've read the tutorials you've linked but after awhile I just got more confused. So I'm just going to take a chance then have you correct me if I'm wrong.

If I want to make the title (Invader scurk) an image, and the text underneath it centered and purple... I would make my index template look like this?
(Assuming I've uploaded an image to my workspace/images folder that is named title.png)

Code: Select all

<div class="header">
	<h1 class="title"><img src="/images/title.png"></h1>
	<h2 class="subtitle":center:purple>Height discrimination is still discrimination</h2>
	<h3 class="author":center:purple>Written, drawn, and colored by Gabe Altomare</h3>

Or, would I have my index template look like this:

Code: Select all

<div class="header">
	<h1 class="title">***title***</h1>
	<h2 class="subtitle":center:purple>Height discrimination is still discrimination</h2>
	<h3 class="author":center:purple>Written, drawn, and colored by Gabe Altomare</h3>

And have the screen.css look like this:

Code: Select all

    body
    {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
    background: #000000;
    color: #8A3C82;
    font-size:2em;
    }

My goal is having my title, subtitle, and author underneath the comic gen ad, and centered. The title would be an image, and all the text on my site is purple, and one size bigger than it is.

I've uploaded a text file to my FTP client named "20090209b.txt". Since I've been having blog troubles, my goal for the news (until I get a blog site working), is to have that block of text centered (I'm pretty sure it is), and inside a frame that is as wide as my comic is. I'd also like it to be underneath the navigation buttons, underneath that "news" header. To do all that, do I edit the text file or the index template?

After I've taken care of my title and the news feed, I'd like to add ***calendar*** somewhere, but I don't know where in the code. I'd want the calendar to be underneath the navigation buttons but above the "news" header.

[Dr Neo Lao]

The <h1> will only work for text. You only need <img src="/images/title.png"> to get the image to show up.

For the news, you appear to be using the ***todays_notes*** tag. Read this To learn more about how it is used. Basically, you need to create a few folders and put your text file in there.

You've gone and made things both harder and easier by using c.w.'s code generator. On the plus side, you have a working site. On the downside, you are going to have a lot of trouble changing things and learning html. Ideally, you'd make the site from scratch, but for now, I think you ought to aim for "getting it working", build up a buffer and then build the next version of the code off-line (so your comic isn't interrupted) which will help you learn html.

To make the font purple, find this section in screen.css

Code: Select all

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

And where it says "color: #FFFFFF;" change the FFFFFF to the colour code for purple. You can see a list of all colours here.

[MagooChris]

aww dang I was wrong... but to my defence, I was running late for something and didn't go look at the pages just what was posted... that first one looks like the same iframe stuff that the blog/news pannel could be in... and the second, I wasn't wrong in what I was thinking... to me, that's as usefull as a blog... using a file that links text to that comic strip allows for comments that can always be linked to that picture... (I've already got ideas for using this kind of thing to have a title for the comic)

I've a question for you InvaderScurk, what web browser are you using for looking at and testing your comics? also what editing tool are you using to look at the code? (I know of some tools that might help in your learning and self teaching that might be useful to you)

[InvaderScurk]

I've a question for you InvaderScurk, what web browser are you using for looking at and testing your comics? also what editing tool are you using to look at the code? (I know of some tools that might help in your learning and self teaching that might be useful to you)

I use Fire Fox, and I use Notepad and Wordpad to edit my code. I couldn't find notepad at first, so I used wordpad and just tagged the .html extension onto the end when I saved my files, which saved it in the right format. I try and use notepad now.

And to Dr Neo, if I want the image to be a link to the current page like the text title was, does that mean the code is:

Code: Select all

    <div class="header">
       <img src="/images/title.png"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a>
       <h2 class="subtitle">Height discrimination is still discrimination</h2>
       <h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>

[MagooChris]

hehe, I'll answer your code question first. if you would like to put a link on a picture you do it the other way, so that the <a></a> tags surround the image, otherwise it's image then text with link... you can also use an alt="texthere" to show up texthere if the person cannot see the image (but the only way I see that being useful is for blind people that have the web reading tools, but they aren't likely to get much out of the comics anyway)

so infact the image and link would be:

Code: Select all

    <div class="header">
       <a href="http://invaderscurk.comicgenesis.com"><img src="/images/title.png" alt="Invader Scurk"></a>

now, this is only if you want to:
http://notepad-plus.sourceforge.net is a notepad type program that can do syntax highlighting... this is useful to see tags and I find it just easier to read then the single colour of notpad

http://chrispederick.com/work/web-developer/ this is an add-on to firefox that I find helps alot when working with webpages (there is a similar one on IE7 for others interested). what I find especially good with this is the ability to fiddle with the CSS of a page without actually changing the page for others, that way you can play with colours and the like and when you find something that works, you can copy the code out and replace it in the css file.

[InvaderScurk]

now, this is only if you want to:
http://notepad-plus.sourceforge.net is a notepad type program that can do syntax highlighting... this is useful to see tags and I find it just easier to read then the single colour of notpad

http://chrispederick.com/work/web-developer/ this is an add-on to firefox that I find helps alot when working with webpages (there is a similar one on IE7 for others interested). what I find especially good with this is the ability to fiddle with the CSS of a page without actually changing the page for others, that way you can play with colours and the like and when you find something that works, you can copy the code out and replace it in the css file.

WoW! These programs make a huge difference! I see lots of features, but the immediate benefits of color coded code are wonderful. Looking at my page now, if I wanted to add a calendar (centered under the navigation buttons), would I do this?

Code: Select all

	<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>
	***calendar***
</div>

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

Hmmm, upon examination, I have a question. My custom title graphic only displays on the most current page. Why is that? I edited my index template to put it there...

[MagooChris]

the index template changes only the most recent page you will need to change the daily template as well (and I maybe wrong on this part) trigger a complete update... I say I may be wrong as I still haven't gotten my hands dirty with this yet and am only going by memory of the tutorials...

I can't comment on the calendar tho

[InvaderScurk]

the index template changes only the most recent page you will need to change the daily template as well (and I maybe wrong on this part) trigger a complete update... I say I may be wrong as I still haven't gotten my hands dirty with this yet and am only going by memory of the tutorials...

I can't comment on the calendar tho

Don't sell yourself short! Both you and Dr. Neo have been invaluable to me. I'd still be clueless as to HTML code if not for you. At least now, without any formal training, I have a faint inkling of what I'm doing

[Dr Neo Lao]

We all start somewhere.

So long as you are constantly picking up little bits here and there then you build up your knowledge.

MagooChris is right about the index/daily template differences.

The code you showed for the calendar should work. The ***calendar*** KeenTag will put it there, but I'm not 100% sure if it'll be centred or not. In this case, best thing to do would be to just drop it in there and see how it goes.

As for triggering updates, selecting "index update" will update just the most recent page, selecting "regular update" is like a normal update in which the server will update your index and the other pages up to 90 days prior and a "full update" will update your entire comic - every strip since the start, all the extra pages and your archive (and is generally not recommended unless something major changes).

[InvaderScurk]

You were right on both counts. The calendar works, but is not centered.


Something else I was wondering.
I used this code to make the title a linked picture

Code: Select all

<a href="http://invaderscurk.comicgenesis.com"><img src="/images/title.png" alt="Invader Scurk"></a>

And this is an example of one of my secondary links

Code: Select all

<li id="mcontact"><a href="mailto:gabechat@charter.net">Contact</a></li>

Could I use the same principle to make my secondary links spiffy pictures?

Code: Select all

<li id="mcontact"><a href="mailto:gabechat@charter.net"><img src="/images/title.png" alt="Invader Scurk">

[/color]

[Dr Neo Lao]

How the "mailto" function works is that if the reader clicks it, it launches their default email program and enters the email you specified into their "To" field (you can also specify subject and message which is handy for some things, less handy for others).

In this case, the third code you posted would "work" but not in the way that you anticipate. Unless of course the image that you use is a graphic which somehow depicts an email being sent to you from the reader. Then the reader would see the "email me" image and know that if they clicked on that, it would launch their email so they could send you a message. On the other hand, if you just used the title image then it would confuse people.

The first part <li id="mcontact"> means "list item" (hence the li) and the id means "use the bit from the css were it says "mcontact". Presumably, the mcontact bit simply has information on how to display the line item rather than actual functionality.

[InvaderScurk]

Well, if I were to replace my secondary links with images, I could make an image for each link. Each link image would be a button with the word (contact, wiki, gallery...) and a little graphic, like an envelope for the mail, and the Deviant Art mascot for the Gallery button. I just used the <img src="/images/title.png" alt="Invader Scurk"> as a place holder.

The actual code then (If I understand what you said about the 'li' and the 'id') for the email contact would be:

Code: Select all

<a href="mailto:gabechat@charter.net"><img src="/images/email.png" alt="Contact">

And I would add the corresponding links and images for the other buttons (gallery, wiki, and Forum)[/color]

[Dr Neo Lao]

Correct.

Personally, I prefer text links over images (especially since the images will be showing something written anyway) but that's just my personal preference. Images will give your comic a more distinctive look.