Quick Tips for little site tweaks

For requests for help from CG administrators, Wranglers, and experienced CG members. Please read the FAQ before posting. Also look at CG Wiki for tutorials and how-tos written by other CG webtoonists.

Quick Tips for little site tweaks

Postby STrRedWolf on 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.
Kelly "STrRedWolf" Price
Admin, Comic Genesis
Artist/Writer, Stalag '99 (WolfSkunks and Drygers, oh my!)
I NEED MORE TIME, CAPTIN!
User avatar
STrRedWolf
Confuzzled CG Admin
Confuzzled CG Admin
 
Posts: 2571
Joined: Fri Jan 01, 1999 4:00 pm
Location: undef;

Home Icons for iPhone/iPod Touch 1.1.3 webclips

Postby STrRedWolf on 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.
Kelly "STrRedWolf" Price
Admin, Comic Genesis
Artist/Writer, Stalag '99 (WolfSkunks and Drygers, oh my!)
I NEED MORE TIME, CAPTIN!
User avatar
STrRedWolf
Confuzzled CG Admin
Confuzzled CG Admin
 
Posts: 2571
Joined: Fri Jan 01, 1999 4:00 pm
Location: undef;

Adding a custom Favicon to your comic

Postby Dr Neo Lao on 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.
User avatar
Dr Neo Lao
Cartoon Hero
 
Posts: 2384
Joined: Wed Oct 18, 2006 5:21 am
Location: Back in Perth

Preload and Swap Images

Postby GoodOlDannyboy on 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.
User avatar
GoodOlDannyboy
Regular Poster
 
Posts: 58
Joined: Thu May 01, 2008 10:28 am
Location: Canada

Spam Bots Hate Me

Postby FourTael on 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: &#64; and &#46;. 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 &lt;, for example, creates this: <

So what's the use of this? Well, spam bots generally cannot see OMGWTFBBQ&#64;mailstuff&#46;net as an e-mail address. You can even include these in mailto: tags and when the link is clicked, the &#64;'s and &#46;'s will show up as @'s and .'s.
FourTael
Newbie
 
Posts: 6
Joined: Mon Dec 14, 2009 1:47 pm


 

Return to Help Center



Who is online

Users browsing this forum: No registered users and 2 guests