wimsey's blog: "Informational"

Creating a Skin Note: Photobucket is doing something weird that causes backgrounds uploaded there recently to not work in a new skin (existing skins seem to work just fine). Try using ImageShack or another host instead. These are instructions for creating a CherryTap skin. These aren’t for an advanced user (they probably don’t need ‘em :), but I’d advise that you be reasonably computer-knowledgeable before trying to use them. These instructions assume you know how to do things like pick colors on a chart, copy and paste, etc., can follow basic computer documentation, and aren’t intimidated by monkeying with code. Keep in mind that skins, as well as music videos, music, graphics, etc. WILL SLOW DOWN YOUR PAGE. So, you may want to pick and choose what you want to clutter your page with. Personally, I have a skin, and music that’s there but is not automatically played upon page load. I avoid lots of graphics because I generally find them annoying clutter on other people’s pages.

1. Pick out a background. You can search on "flower backgrounds" or whatever on Google. A good place to start is About.com's Backgrounds. Look for a tile image, not a single image or a border. CherryTap pages work best with a tiled image. Normally a site will show you an example of what it looks like tiled, but if not, you can test it out on your background. Ask me if you don’t know how. If you do want to use a single image, resize it to be about 870 x 648 and note that in a typical screen resolution, the image won't go all the way to the right and the top and bottom will be cut off.
2. Right-click on the background tile you want and choose Properties. (Or, better yet, right-click and Save As the image, then upload it to a site like ImageShack. Avoid Photobucket for the time being.)
3. Copy everything in the Address/URL field.
4. Go to the CherryTap Tools website.
5. Paste the Address/URL into the Background Image URL field. Be sure to clear the field first.
6. Above that, for the Background Color field, click on the color wheel to choose a compatible color from the color chart in case your background doesn’t load. You may have to scroll over to see the entire color chart.
7. Under All Boxes, click the color wheel to choose a Background Color for all of the text boxes on your CherryTap page. (This color will be the background color for everything from the About Me/Video Games/Movies/Music boxes to your Friends list box.) This will not affect your Alerts box, shout box, Cherry blasts, or stash.
8. Click the color wheel for the Border Color to choose a color for the border around your boxes.
9. Under All Links, click the color wheel for the Font Color to choose a color for the text of all links.
   On CherryTap, these will be your user control links (add as friend, etc), blog post names, etc. (all of the left side, basically) AS WELL AS linked text in your alert box. So you MUST choose a color that will show up against both your box color AND against the default black that you get for your alerts box. Usually something on the light to medium side of the spectrum works best. So keep this in mind when choosing your box colors.
10. Under All Box Text, click the color wheel for the Font Color to choose a color for all the text in your About Me, Movies, Music, etc. boxes.
    Keep in mind, this color has to show up well against your box color. So if your box color is dark, go light with the font color. If your box color is light, go with a darker font.
11. Leave all other settings at default, to start with. You can monkey with these if you feel the need. I never do.
12. Click Generate.
    The site generates a bunch of code in a box.
13. Copy the generated code. DO NOT LISTEN TO THEM AND PASTE IT INTO “ABOUT ME.” That doesn’t work.

Meanwhile, over on CherryTap:

1. On the left side of your home page, click my skins.
   CherryTap displays a listing of all of your skins.
2. On the Skins page, click create skin. CherryTap displays a skin creation page.
3. Enter a name for the skin in the Name field.
4. Select all text in the large box and delete it (DON’T CUT, just delete… you want the stuff you have copied to stay on your clipboard).
5. Click on the box and paste the generated code from CherryTap Tools.
6. Scroll back up to the top of the generated code. You will see a section that looks like this:

body { background-color: #1E66B4; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; background-image:url("http://i74.photobucket.com/albums/i250/wimsey70/flower_11.gif"); }

If your background is a tile, remove the line that says "background-repeat: no-repeat;" Be careful not to remove anything else.
This line was created automatically by the layout generator, but we don’t want it; we want our background to tile (repeat). If you are using a single image for your background, skip this step. If your background isn't a tile, you may want to change "center top" to read "center left." Click save skin. In the Skins listing, click preview skin for the skin you just created. You’ll get a new window (or tab) with your home page displaying the new skin. Enable the skin by choosing YES from the pulldown menu under active. Voila! You’re done. Please don’t hesitate to ask me if you have any questions. I don’t have a lot of time for hand-holding, but I can help if you can’t figure out what I’m talking about. Debugging Problems If your background doesn’t load, but your color scheme seems correct, CherryTap may have stupidly put in some slashes around your background image name when your skin saved. I don’t know why it does it, but it means that then the link is wrong. If this happens (and it doesn’t, always), you must click edit skin and repeat steps 4-9 (2nd half) until your background actually loads. Also, if you are using Photobucket, try another site (like Imageshack). There seems to be something weird going on with CherryTap accessing background images on Photobucket. If your skin doesn't seem correct at all (incorrect color scheme), go back in and check. Sometimes CherryTap overwrites your skin code with something that looks like the following:

address { } applet { } area { } a { text-decoration: underline; color: #faccce;

If that's the case, select all text in the box, delete it, then re-paste the skin code and save again. It usually works the second time.