Quick Tips for little site tweaks

Post by **STrRedWolf** » Wed Jan 16, 2008 6:01 am

Okay, I'm probably going to be pushing things too far here, and the CGWiki may be better off, but if you have those little tips, post 'em here.

Post by **STrRedWolf** » Wed Jan 16, 2008 6:03 am

Create a 57x57 PNG.
Name it "apple-touch-icon.png"
Throw it in /workspace/webpages

On the next update, it'll move in the right place and folks reading your comic from an iPod Touch or iPhone with the latest firmware (1.1.3) will be able to clip it and have your icon show on their device's home page.

Dr Neo Lao · Post by **Dr Neo Lao** » Wed Apr 16, 2008 6:14 pm

What is a favicon? On this site, it's that little black image next to the url. It dosen't really do anything (some functionality depending on your browser) but it does give your comic a slightly more independent look. The CG favicon is displayed by default, but you can have your own if you prefer.

Step 1: Get the image.

This used to be a bit harder, but is now quite easy. Get / Make the image you want to use. Simple is best - remember, it'll be shrunk down to 16x16 pixels, so have as few colours as possible and no fine detail. A logo or basic symbol will work best. And this is important - make sure it's square! Best if it's divisible by 16, but not essential (if you don't know what that means, just make sure that your image is the same height and width).

Step 2: Convert to Favicon.

This can be done with plug-ins for various image editing programs (such as Photoshop). If you want to do it this way, just search for "making a favicon".

If you prefer to do it the easy way, go to a service that is very cryptically called Favicon from pics which will ... uh ... make a favicon from a pic. Just upload, press "Generate Favicon" and it'll do the rest. It'll give you a zip file with instructions - very easy to follow.

Step 3: Upload your favicon.

Once you have it on your computer, upload the favicon to your CG account. Best place is probably the images folder in order to make things easy.

Step 4: Update your template(s) and other pages.

On each page that you want the favicon to appear on, you need to add a bit of code. You should put it on your indextemplate, dailytemplate and any files that you have in the workspace/webpages folder. Simply add something like:

Code: Select all

<link REL="SHORTCUT ICON" HREF="/images/favicon.ico">

In the Head section of your code. Note that the file should be called favicon.ico in order to work. I'm not sure if you can change the name or not, feel free to experiment.

GoodOlDannyboy · Post by **GoodOlDannyboy** » Fri May 30, 2008 7:37 pm

To preload and swap images, you will need the following code in the HEAD section of your HTML page:

Code: Select all

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Note: The function MM_preloadImages() is only necessary to preload images, so if you only want to preload or swap, you can decide which parts to remove.

To Preload:

Preload images in the BODY tag. It should look something like:

Code: Select all

<body onload="MM_preloadImages('myImage.gif','anotherImage.gif')">

To Swap Images:

Swap images with the following code in the A and IMG tag. It should look something like:

Code: Select all

<a href="/page.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('myImage_ID','','myNewImage.gif',1)"><img src="myImage.gif" name="myImage_Name" border="0" id="myImage_ID" /></a>

The image name and ID usually are the same.

FourTael · Post by **FourTael** » Fri Dec 18, 2009 4:08 pm

This is something I learned in my Intro to Software Development class that I thought I'd share.

OK, so you have a site and you want to have a way for your readers to e-mail you, right? OH NOES, TEH SPAMBOTS!, right?

Well, as my ISD instructor informed me, spam bots search out the source for @'s and .'s and try to match them to an e-mail address. So how do you get around that? Why, by replacing the @'s and .'s in your html with these: @ and .. What are they?

Well, HTML allows you to put in special characters. The & signals that the character code is beginning and the ; signals its end. There are codes for a number of special characters, some use numbers while others can be represented by letters or words <, for example, creates this: <

So what's the use of this? Well, spam bots generally cannot see OMGWTFBBQ@mailstuff.net as an e-mail address. You can even include these in mailto: tags and when the link is clicked, the @'s and .'s will show up as @'s and .'s.

Comic Genesis Forums

Quick Tips for little site tweaks

Quick Tips for little site tweaks

Home Icons for iPhone/iPod Touch 1.1.3 webclips

Adding a custom Favicon to your comic

Preload and Swap Images

Spam Bots Hate Me