Kyle Jackson

Customizing your CheckOutMyInk.com Profile: Changing Backgrounds

Posted by KMFNJ | Filed under Tutorials

Disclaimer: I don't run CheckOutMyInk.com and these methods of customization are NOT guaranteed to work, especially as the site grows - the owners may decide to disable this functionality at any time, so USE AT YOUR OWN RISK! I assume no responsibility for any consequences of using these methods to alter your profile, and by using these methods, you agree not to hold me responsible. So anyway... Have fun!

CheckOutMyInk.com is an up-and-coming tattoo social networking website where members can upload pictures of their tattoos and artists can get recognition for the awesome work they do. You can check out my profile if you're interested.

I wasn't satisfied with the profile section, so I started messing with the CSS to reformat the layout of the page. A few other people have asked me how I did it, so that is what this post is all about: to help you customize your profile. This may or may not turn into a "series" of tutorials, depending on the response.

Changing Your Background

First thing you need to do is choose a background image. This can be anything, and I mean anything you wanna use as your background. You can use Google Image Search or your favorite Photo website to find something you like, or you can even create something yourself. Be careful about using copyrighted material - its not nice to steal.
Once you've picked out your background, you either need to:
- locate the picture's URL (which can often be found in the address bar of your browser)
- upload your picture to a free image host such as imageshack.us
In either case, we need the picture's URL. So, copy the URL and, proceed to step 3.
Paste the URL into this form field and push "generate". It will spit out some code that you'll need for the next step.

Background Code Generator

Paste your URL in the field above and press "Generate Code" button.
Copy the generated code and edit your CheckOutMyInk profile page. You need to paste the code in one of the fields (I prefer to use the "tags" field at the very bottom)
Save your profile and view it to see if you applied your background correctly.

Aug 6, 2007 UPDATE

For any of you who customized your background before 8/6/07, I have added this code to make the background color of each section white, so you can read the text:
li, #centerdiv { background-color:white; }
If your profile's comments and text are hard to read after you apply the background, just copy/paste the above code in between the same tags you used to customize your background.