What's great about this is you can click on the background color and see how different font colors would look like on them. In other words, you can test which color fits with what background..

PS. Please let me know if a link of similar nature has been posted here. Thanks!

This site are great if you dont want to fuss or figure out the color of the picture or design your using for your site.

This is just a trick I use to make changing my theme a snap.  I keep certain things ALL the same color.  With using a dark and white background for instance (my previous one), I made sure that all fonts etc (anything requiring a color code) be WHITE (#FFFFFF).  All one color!

Then, when I changed backgrounds, all I had to do was find another color to compliment my new background, paste the CSS code in notepad, and go to Edit/Replace.  Put in your OLD color code in the top box, your new one in the bottom box, and hit "replace all".  Bingo!  All done!

So staying with one color code instead of having DOZENS of different ones, makes changing themes a breeze!   If you look at my site now, all the things that used to be colored white are now a pale yellow and I did it all in one swoop.  This included the frames for my picture albums, all fonts, etc.  You don't need tons of different colors to make an impact!

Another color tool site.

Some really pretty themes in here, with colors you can just eat. :)

Want to know what color is that hex code? Online Converter for CSS Colors. Hexadecimal 6 digits and 3 digits, RGB decimal, or percentage values.

Thanks to argonath

In this series I will try to explain the CSS basics. It's hard to discuss all the properties and options in just one tutorial, so I will add more posts eventually. Make sure you also check out CSS Logics and Multiply Design 101 in the group for additional info.

Let's start with the box model. CSS uses a very simple box model when you can control the dimensions, padding, border and margin. From the W3.org website:

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

content edge or inner edge

The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.

padding edge

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

border edge

The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.

margin edge or outer edge

The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.

Each edge may be broken down into a top, right, bottom, and left edge.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

So basically each selector used in the CSS code refers to a box on your page. Boxes can be put one over the another, moved and so on. Besides it's dimensions, you can also change its position, either relative to other boxes or make it absolute so you can position it using X (horizontal) and Y (vertical) coordinates like the ones you use in a Mathematics graph.

Below are the most common %elements used in boxes and possibles values (you can search on the internet for more info using something like 'css background' etc):


dimensions
To configure a box size, you can use numerical values (100px, 480px, etc), auto or percentage values with:
- height: Sets the height
- line-height: Sets the distance between lines
- max-height: Sets the maximum height
- max-width: Sets the maximum width
- min-height: Sets the minimum height
- min-width: Sets the minimum width
- width: Sets the width of an element
Example (sets the height of the box that contains the Page Title and nav menu)
div.owner_nav {
height: 199px;
background: none;
}

display
The values of this property have the following meanings:
- block: This value causes an element to generate a block box.
- inline: This value causes an element to generate one or more inline boxes.
- none: This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout and it's not displayed at all).
Example (hides the icons in the top nav bar/header):
li.gnopt a img, li.gnoptsel a img { display: none; }


visibility
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings:
- visible: The generated box is visible.
- hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendents of the element will be visible if they have 'visibility: visible'.


overflow
Controls how the content that does not fit the box dimensions will be handled. You can use:
- visible: Default. The content is not clipped. It renders outside the element
- hidden: The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
- scroll: The content is clipped, but the browser displays a scroll-bar to see the rest of the content
- auto: If the content is clipped, the browser should display a scroll-bar to see the rest of the content
Example (add scrollboxes to replies when they contain long text lines or images):
.reply {
overflow: auto;
}


position
- static: Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations);
- relative: An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position;
- absolute: An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties;
- fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling.

Example (position the Page Title):
h1#page_owner_title {
position:absolute;
left:100px;
top:150px;
}


color
The foreground color, mostly for text. You can use a value like #FFF or #C0C0C0 or a name like red or transparent. Example (color for the main text on your page):
body {
color: black;
}


background
The background color and/or image. Example (general page background):
body {
background: white url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
}

You can set the image and color separately, like this (in this case the order does not matter):
body {
background-image: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background-color: white;
}

Remember that if you use the same statement only the last one will be used, so this will make your background be only blue (no image):
body {
background: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background: darkblue;
}

For the background image, you can also use some other properties:
- background-attachment
values: fixed or scroll
- background-position
values: top, bottom, right, left, center or value
- background-repeat
values: no-repeat, repeat, repeat-x, repeat-y

You can also combine them in just one line, like this:
background: darkblue url(Image_URL) fixed no-repeat center;


border
Sets the color, type and thickness of the border (click here for a tutorial in the group).
Example (sets the rail border):
.rail {
border: 2px solid black;
}


margin and padding
The margin and the padding values can be set in just one line in the order "top right bottom left", one value for all the dimensions or separated in different lines. For example:

padding: 10px 5pix 12px 0px;

is the same as:

padding-top: 10px;
padding-right: 5px;
margin-bottom: 12px;
margin-left: 0px;

As you may already know, you can also do the same to change the border for just one part of the box (put a border bellow the titles on your main page):
.itemboxsub {
border-bottom: 2px dotted #fff;
}


If you want to suppress an %element, you can use:
- transparent for the color. Example (content boxes on the main page with no background):
.itembox {
background: transparent;
}

- none when you may have multiple parameters, like 'background-image' or 'border'. Example (no border and no background image in the rail):
.rail {
background: none;
border: none;
}

- 0 when you have values, like 'padding' and 'margin'. Example (no margin for the itemboxes):
.itembox {
margin: 0;
}


To remove the background completely (make it totally transparent), you can use:
background-color: transparent;
background-image: none;

or:
background: transparent none;


For a quick reference about the most used commands, see this page at w3schools.com.

OK, now you already know a bit of CSS and want to create your own theme... So what are the basic steps? Actually you do not create anything from zero (OK, you are really good you can do it), but you modify one of the base themes. It's much easier and that's how all the theme designers start. These are the basic steps:

1. Select a base theme: click on Customize My Site at your main page and then on Choose a Theme in the yellow banner that should be visible at the top of the page. Look for one with the basic layout and/or colors you want in your custom theme, you can see the basic differences looking at the thumbnails;
2. Go to this excellent post by psychotic2 and find the theme you just picked, select all the CSS code and copy it to your Custom CSS page;
3. Then you can start changing it: alter the colors, borders, backgrounds, etc.

- What to change?

If you've selected the Custom Colors base theme, you don't need to copy the CSS since all the code with the changes you did to the colors will be already in your Custom CSS page with a bonus: most of the sections have comments about what they are, you just need to tweak it more to get what you need.
If you have no idea about the sections and selected another theme, you can look at the help at the Custom CSS page or look at this post for a basic guide. There are also some tutorials in the groups already about some changes that people usually request, they are also a good source of knowledge about the CSS section names (selectors), they use the general format:
selector {
%elements
}


- How to change?

To change a color, simply replace the code or name of the color you want to use. HTML color tables can be found here or here. You can use just a color name like black or red, or use a RGB color code starting with '#', for example: #000 or #00000 is the same as black. For no color at all (full transparency) use transparent, like this:
.itembox {
background-color: transparent;
}

You can change the color of borders, its thickness, type or simply remove them using:
boder:none like this:
.subnav {
border: none;
}

You can also change the backgrounds or images changing the URL of the image with the one you want to use. Remember that you must host the image on the Internet first, so images on your computer can't be used. You can host them right here on Multiply, see this tutorial. If you want to remove a background, you can use none, like this:
.railstart {
background: none;
}

The most common modifiers for the background when images are used are (look here for a full explanation):
body {
background-image: url(IMAGE_URL);
background-repeat: no-repeat/repeat/repeat-x/repeat-y;
background-attachment: fixed/scroll;
background-position: top/left/bottom/right/center;
}


If you cannot find the selector you want to change in the base theme CSS, try ones of these (there are the 'generic' CSS's that are loaded before the theme CSS):

http://multiply.com/style/site/
http://multiply.com/style/local/

That's the basic instructions. As soon as you get used to the basic functions and the names of the sections in the CSS you can try something more complicated. And the group is open to any questions about it. Enjoy!

BEST FREE STANDALONE COLOR PROGRAM!!!  FOR WINDOWS USERS.   No install necessary!  No need to go to a webpage for your colors!

Color Cop is a multi-purpose color picker for web designers and programmers. It features an eyedropper, magnifier, variable magnification levels, 3 by 3 and 5 by 5 average sampling, snap to websafe, color history, and a 42 color complementary palette. Color Cop will convert RGB decimal values to Hexadecimal color codes. It has color code support for HTML Hex, Delphi Hex, PowerBuilder, Visual Basic Hex, and Visual C++ Hex. Color Cop is a multi-purpose color picker for windows.

DOWNLOAD HERE



ALSO ATTACHED.   (Spyware and Virus free) Just right click, save as to your computer.  No install necessary.  Just click and use.