Background Codes
(click on photos for larger view)

Default Catster Profile page

Here's a screenshot of the regular profile page:

This is with absolutely no codes at all. The bio field(s) are not being used.

Profile with background color

See the Notes section at the bottom of this page for some tips on how to find color codes.

 

Side menu color

Code to color side menu only:

 

Background color and side menu color


This is great for those of us who prefer a simple layout, but would like a change from the green once in awhile.

You can have both the menu and the background the same color or you can play around and make the menu another color. Also check out the fonts page if you would like to change the text colors.

Here's what your bio field would look like. If it's only code and you don't have any pictures or text to display, the a height of 1 pixel will be fine. If you don't put in a value for the height, then it will be set to 300 pixels by default & there will be empty space on your profile page. It doesn't matter whether or not you use a field name, but you probably want to call it something like 'background' so you can easily know what's in your bio field.

 

Background image


  • Feel free to use your own background image. Or you can use the code as it is, Neferkitty made this background especially for Catster.
  • See the links section of this site for some links to sites with backgrounds you can use.
  • If you have your own background image hosted somewhere that you'd like to use, just substitue the part of the code between http:// and .gif with your background, i.e. http://www.yourserver.com/yourbackground.gif

* Both .gif and .jpg file formats work.

 

Here's an example having both a background image and a menu color:

 

Make the beige section transparent

Many thanks to Lucy for this code. This would be perfect if you would like to allow more of your background to show through.

Stationary backgound code

All of the codes featured here let your background scroll with the rest of the photos & text of your page. If you would rather have a stationary background image then add:

background-attachment: fixed;

For example:

<style>body {background-image: url(http://www.twilightmoon.net/cc/bg/paw.gif); background-attachment: fixed;}</style>

 

Notes

 

  • You don't have to be a plus member to add a background. You do get one bio field with a free account and you could use it to fancy up your page.
  • If you need help with getting the code onto your page, see the how to add code to catster section of this site.
  • Each code can be put in any bio field, you can seperate them & add them on to another bio field that has room or keep them together. You can mix and match the codes too. There are so very many combinations, play around and have fun making your page unique.
  • Space doesn't matter. For instance, <style> is the same as < s t y l e >

 

****Colors****

Feel free to use your own colors. The main colors have color codes, but the names of the colors also work. For example, I used 'ffffff' in the examples, but I could have simply written 'white'

How to pick colors:

http://www.immigration-usa.com/html_colors.html - This is a very nice chart of colors with their codes. Thanks for the link Samoa!

http://www.anryhome.com/software/colorpicker/ - A great little free program that allows you to pick a color out of a webpage (any color on your screen actually). It downloads in no time & doesn't even require installation, I hightly recommend it. Thanks for the link Meekah!

All of these codes are actually internal cascading style sheets (CSS). There are many tutorials on CSS throughout the Internet if you're a curious kitty.