Click on image to enlarge and read instructions.

ADDITIONAL NOTE:  TRY DRAGGING AN IMAGE INTO A REPLY BOX.  IT DRAGS THE IMAGE PROPERTY URL THERE AND ALL YOU HAVE TO DO IS ENCASE IT WITH THE HTML !  NO NEED TO RIGHT CLICK, PROPERTIES, COPY & PASTE TO GET THE IMAGE PROPERTY URL!  DRAG IT OVER INSTEAD.  :)

SEE THIS LINK FOR EASY SIDE BY SIDE WINDOWS !

SIDE BY SIDE Windows !  All Browsers (Easy Trick)

Again, left links will give you codes and tutorials, so just scroll down !

Left links show html codes for just about everything you don't know (Or can't remember at the moment)

Just scroll down and take your pick.

                                                                                       

MULTIPLY DESIGN SUPPORTS THESE MULTIPLY HELP GROUPS Always Post In Notes At The Correct Group  Use The Search Features  Provided Always TITLE Your Post With The Subject Of Your Question Click  Groups Listed Below Join To View All Content And To Post Your Questions
Multiply Design  CSS  & HTML Support	Multiply User Support Feature  Support	MULTIPLY USERS & DEVELOPERS SUGGESTIONS & FEEDBACK  ONLY	New to Multiply Multiply Basics & How To's
Multiply Staff Blog Stay Up To Date With Multiply Staff	Yahoo! 360 Refugees Y360 Members And Refugees	Customized Themes PreMade Customized Themes	Computer Help Desk Computer Related Information & Issues
USEFUL LINKS
GETTING STARTED   Customizing Your First Theme	POST A NOTE Customization Questions	THEME GROUPS    Pre-Made Themes	TUTORIALS Comprehensive List  Tutorials And Codes CSS & HTML
Search Multiply Design WEB MULTIPLY DESIGN FEEL FREE TO LINK

Themes are being created from base theme codes by putting a base theme's css code in it's ENTIRETY in a text editor and then just making the wanted changes in the entire code.  (Which might just be one small change).  Then the ENTIRE theme's code (altered and unaltered sections) is being pasted in the CSS EDITOR. This is the incorrect way to use this feature.

You don't need to install the base theme code into the CSS Editor box because it's already installed.  You just don't see the code in your CSS Editor box.  It's installed behind the scenes for you already.  That's why you already have a theme showing which is the base theme you chose.

The CSS Editor Feature here was added for users to put SECTIONS OF EDITED code to override sections of base theme css code (for those sections allowed) to give a site a different look or feel.  It was not designed to paste in code that a base theme ALREADY has installed when you initially choose the base theme that your customized theme will be designed from.  This is why you MUST first choose your base theme.  To install a certain amount of criteria and instructions automatically to display this base theme before/if you make any further alterations or customizations.

Now that theme designing has become so prevalent, both for the user and to share with others in theme groups, it has been discovered that themes are being designed by posting both EDITED and UNEDITED (ALREADY INSTALLED WHEN YOU CHOSE YOUR BASE THEME) code to be pasted into the CSS EDITOR (Giving the appearance of the entire code for a theme)  

This is incorrect, and is not only the wrong way to do it but can cause code not to pass validation or theme/site/feature issues that can't be resolved until code passes validation or completely removed.

Even worse - people are altering others' theme codes, which can be wrong or have errors and then sharing and using a theme full of errors.

The CORRECT  way to use the CSS EDITOR feature is to put in only the EDITED code (code that is altered from the base theme code).  A theme with few changes will be a short theme code.  Maybe only a few lines long.  A more complicated theme with many changes will be lengthy.  Do not include the unedited code.  It's already installed when you chose your base theme.

You will notice that when you install a customized theme, you are required to choose a designated base theme that code is edited specifically for THAT base theme.  This installs the default code for that base theme automatically. 

Please remember when posting and using a theme, that you ONLY need the EDITED portion of CSS (altered from what the base theme has already installed) pasted in the CSS EDITOR.



Now that Multiply has installed a code validator (see the checkbox under your CSS EDITOR), paste in only your EDITED code, and validate it first.  You can bypass the validation but  AT YOUR OWN RISK.  You will notice that the validator will tell you if you have errors and what those errors are.

If you still need assistance in correcting a code error, you may post in notes at multiplydesign .  These groups, muds, usersupport, and customizedthemes are not CSS and Customization support groups. 

You can paste the snippet of code that will not validate and we will assist you at multiplydesign.  (Please do not post your entire css there since we can see your css by going to your site)  You can post a snippet of code that won't validate though.

I hope that this information will clear up what appears to be a misunderstanding of how to make, use and share a theme.

IF YOU USE UNVALIDATED CODE and you have any feature issues, USER SUPPORT will not be able to assist with your feature issues unless your css code validates or you remove your css before you ask your question there.

If a customized theme from a theme group does not validate, you will need to use another theme and contact the theme author to correct and validate their  theme before sharing.

REMEMBER:  THE CSS EDITOR FEATURE HERE IS AN EDITOR AND NOT DESIGNED FOR THE ENTIRE BASE CODE THEME.  ONLY THE EDITED PORTIONS FOR A THEME.

When you make a theme to share, you only need to post this edited portion up as the theme's code.  When you state the base theme to install from, the user has then already installed the base code.  It is recommended of course that you test and validate any theme designs you are sharing or using.

What is validation?  It is a tool that checks your code for errors that could disable features on your site.  In some more serious cases, Customer Service has had to correct or remove code because the errors in CSS prevented access to the CSS section to remove the code along with disabling other features. 

So you can see where this tool will become invaluable to each user.  However, the CSS Validator is the only change there. 

The CSS Editing Feature was always there for edits only .  This is only to clear up the misconceptions that have been realized about this feature for theme designers and users who make their own themes.  Because base themes are updated by Multiply on a regular basis as necessary, using unedited portions (the entire base theme) has never been recommended for this reason.

However, if you wish to view the current base themes at any time, for the purpose of learning the portions of css code that are already installed when you choose a theme,  CLICK HERE.  Then, click on the image of each theme and the link is there to the base theme codes that Multiply maintains.

Once again - this is not a change.  This has always been the purpose of the CSS Editor Feature.

This post will be bumped to the top of the blog section for a while by changing the date as needed.  This will result in replies appearing to be before the actual post.  Please ignore this discrepency.  Original post date is May 23rd.

This is a very simple short starter CSS code, this code will change your
 main background, site title (your name),main boxes on page, links, reply boxes, headshot backgrounds and quoted replies.
It will not change your entire page as its not a full base code but most of it will change using this code only
I've made this up as a starter pack for those of you learning CSS
for those who don't know the colors...  #fff is white #000 is black all you need to do is change colors and put in your own image links

This is a generic code once images are placed in it will work for most base themes,some elements will show but this is a starter ...its basically what I started with and yes this is all there was
Just follow the /*notations*/ they show which "bit" does what

/*Starter CSS for Multiply*/
/*change transparent to a color value for color*/

/*Entire Page Background, font style and text*/
body{
background: #fff;/*page background color at start load*/
background: url(place image link here);/*image link can be placed here*/
background-attachment: fixed;/*background stays when page moves*/
color: #fff;/*main text color over entire page*/
font-weight:bold;/*style of text over entire page*/
font-family: verdana, ariel,times;/*font over entire page*/
font-size:14px;/*size of text over entire page*/
}
/*All links on page*/
a, a:visited, a:link { color: #F9CE0D; } /*main link color*/
a, a:link, a:visited, a:active { color: #5E5D5B; } /*visited link color*/
a:hover { color: #ea6618; /*hover or mouseover link color*/
}

/*page title == YOUR name*/
h1#page_owner_title {
font-size: 35px;/*Xtra lge text*/
background-color: transparent;/*no color*/
background-image:none;/*no image*/
color: #000; /*black color*/
font-weight: bold;
font-family: verdana, ariel,times;/*font*/
text-align: left ;/*can be right,left or center*/
border: 0px solid #fff;/*no border-- change number to show border*/
}

/*ALL boxes on page*/
.itembox {
border: 0px solid #fff;/*no border-- change number to show border*/
overflow: visible;
background-image: none;
background-color: transparent;/*no color*/
color: #C19953;
background: url(place image link here);/*image link can be placed here*/
}

/*The REply BoX*/
.replybox {
color: #fff;/*white text color*/
background-image:none;/*no background image*/
background-color:#000; /*black background color*/
border:0px solid #000;/*no border-- change number to show border*/
background: url(place image link here);/*image link can be placed here*/
}
.replybodytext {
color: #fff;/*white text color*/
font-size:13px;/*font size is medium*/
}
/*quoted replies*/
.quotet {
color: #000;/*black text color*/
background-image:none;/*no background image*/
background-color:#fff; /*white background color*/
border: 0px solid #fff;/*no border-- change number to show border*/
background: url(place image link here);/*image link can be placed here*/
}

/* Background for Contacts and groups logos+ headshots*/
.contactbox {
color: #fff;/*white text color*/
background-image:none; /*no background image*/
background-color: transparent;/*transparent background*/
border:0px solid #000;/*no border-- change number to show border*/
background: url(place image link here);/*image link can be placed here*/
}

Of course if you need or want more everything you need is here on the main page of this group, don't ask us to make your CSS code up for you or make you a theme because well I've just given you a start on making it yourself.
Want a longer CSS code to work from go grab a base code from here

We see requests not only at this group, but all of the other help groups to "PLEASE help me make a theme".  Fact is, no one can do that from scratch, step by step by never ending step.  That's because it's a learning process from the very basics to the more advanced.  Everyone is continuously learning here, and as they learn they can then teach!

So this is what you should do first here at this group. 

1.  Set your email alerts for this group HERE so that your email doesn't get flooded from this group's postings and replies.

2.  Start with the Custom Base Theme (SEE THIS TUTORIAL) where you can easily install a background, set your colors, and transparent anything you wish without knowing any CSS. 

3.  Look at all of the other base themes and THEIR CSS sections HERE for future consideration.

4.  Click on the "Getting Started" Tags in the tagged content box and read those tutorials.

5.  Click on the Blog Section HERE for Tutorials.  Click on the Photo Section HERE for even more tutorials.  Click on the Links Section HERE for great free customizing tools!

6.  Don't just read posts here.  Read all of the replies!  There's much more information in the replies!

7.  If you get stuck and have a question about one of the tutorials or you have a specific question, use the Search feature that is at the top of every page.  If you still can't find what you are looking for,  post your question in NOTES HERE as a new question.  We will then either give you the link to what you are looking for or work with you in your thread to help you.

8.  Please title your question with the subject and not "Help", and post new questions in notes.  Please don't hijack a thread by asking an unrelated question in someone else's thread.)

9.  If you would like an already made CUSTOM THEME, there are many Customized Theme groups listing in our links section.  You can start with a theme from one of those, and customize that!

(Click HERE if you haven't posted your FIRST question here yet!).

PLEASE SEE THIS LINK FOR A LIST OF PRE-MADE THEME GROUPS! 

PLEASE REVIEW THIS LINK BEFORE POSTING IN ANY HELP GROUP!

Thanks for joining the group and we look forward to seeing your SITE!

This post is an accumulation of information.  Take what you want from this for your own html needs.

Anatomy of a Web Page

A Web page consists of an HTML file, plus any image (picture) files used on the page. The HTML file (a normal text file) contains all the text to display, and also acts as the "glue" to hold the text and images together in the right places, and display them in the right style.

Writing an HTML file means composing the text you want to display, then inserting any tags you want in the right places. Tags begin with a < character and end with a > character, and tell a browser to do something special, like show text in italic or bold, or in a larger font, or to show an image, or to make a link to another Web page. Although HTML has many tags you can use, you don't need to know them all to use HTML-- you can get by with just a handful.

Anatomy of an HTML Tag

Tags have a simple structure. They begin with a < character, and end with a > character. Between the <> characters are the tag name, and maybe some attributes, depending on the tag. Most attributes take a value too. Some attributes are required, and some are optional. The general form of a tag is

<tagname attribute1="value1" attribute2="value2" ... >

Tag names and attribute names are not case-sensitive, but some attribute values are. The tag name must come first, but the order of the attributes doesn't matter. So you could also write

this tag as:

<TAGNAME ATTRIBUTE2="value2" ATTRIBUTE1="value1" ... >

Different people write them different ways; do whatever you're most comfortable with.

There are many different tags to do many different things. For example, use the <img> tag to show an image on your Web page:

<img src="blueribbon.gif">

is rendered as

This means "show the picture blueribbon.gif at this place on the page." Note that the src attribute gives the URL of the image file, either a relative or absolute URL.

Container Tags

Some tags, like <img>, stand by themselves; they don't really affect things around them. Other tags have a starting tag and a ending tag, and affect everything in between them (even other tags). These are called container tags, because they contain stuff between the start and end tags. For example, to make text bold, you need to mark where the bold text starts, and where it returns to normal. Do this with <b> and </b>, like:

This is normal text.  <b>This is bold text.</b>  Normal again.

This is rendered as:

This is normal text. This is bold text. Normal again.

Every container tag ends with </tagname>, whatever that tag name is. In the example here, the <b> (bold) tag ends with </b>. End tags have no attributes, unlike start tags.

Here's the cool part:

The tag that makes the Web what it is, a whole bunch of interlinked pages, is the <a> tag. The <a> tag is a container tag that defines a link to another page, and it's easy to use. By way of example, here's how you make a link to EFF's Blue Ribbon page:

Read about <a href="http://www.eff.org/blueribbon.html">issues that affect you</a>.

This is rendered as:

Read about issues that affect you.

Note that there's a start tag (<a href="http://www.eff.org/blueribbon.html">) and an end tag (</a>), and that everything in between ("issues that affect you") is rendered as the link the user can click on-- typically blue and underlined, in Netscape.

Note that the attribute href has the value "http://www.eff.org/blueribbon.html", which is the URL (Web page address) to go to when the user clicks on this link. 

That's how to use the <a> tag to put links in your Web page. Simple, eh?

More About Links

Picture links

You can put an <img> between <a> and </a>, so the user can click on the picture to follow the link. For an example, see the blue ribbon at the top of this page-- it's a link to another page (one that everyone should visit at least once).

Email links

For an email link, set href to "mailto:email-address". For example,

Tell <a href="mailto:president@whitehouse.gov">the President</a> what you think.

is rendered as

Tell the President what you think.

(The U.S. President, that is.)

Linking to the middle of a page

To link to another part of the same page, or to the middle of another page, first create a named anchor at the point you want to link to. Do this with the <a> tag and the name attribute, like

<a name="anchorname"></a>

Note the different use of the <a> tag; in fact, <a> was originally short for "anchor". Since the anchor just marks a point on the page, you don't need to put anything between <a> and </a>.

Once the anchor exists at the target location, link to it with the <a href> tag, appending "#anchorname" (the URL fragment) to the target URL.

Line Breaks and White Space

You can add as many spaces or blank lines (collectively called "whitespace") as you want to make your HTML file easier to read. The browser will display all consecutive whitespace as a single space, no matter how much of it there is. This tutorial uses one indentation style for examples, but use whatever style works for you and is easy to read.

To start a new paragraph, use the <p> tag-- you'll use this a lot. The browser will word-wrap all text correctly, based on the width of the viewer's window (which you, the HTML author, can't predict). If you really want to force a new line, like in a street address, use the <br> tag to insert a line break.

Try these out:

<i> </i>	Make the text italic.
<tt> </tt>	Make the text teletype (fixed width).
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>	Show different styles of "header" text, in descending order of importance (size).
<hr>	Put a "horizontal rule" (line) in the page.
<center> </center>	Centers text and images between the left and right margins.
<blockquote> </blockquote>	Indent the enclosed text from both margins.
<pre> </pre>	Denotes "preformatted" text in source code: display as fixed-width font, and preserve spaces and line breaks (much like a typewriter). Quick way to make margins and tab stops. Convenient to quote a section of source code.

Comments

You can put comments in your HTML file that won't display on the Web page. This lets you explain why your HTML code is a certain way, to anyone viewing your HTML source code. This may be someone else, or (more likely) it may be you at some point in the future.

Start a comment with "<!--" and end it with "-->", like

<!-- This is a comment, and won't display to the user -->
<!-- comment examples inserted by JSM on 9-23-96, for clarity -->

Don't put private information in comments, as anyone viewing the source code can still see them. Also, don't put HTML tags inside your comments, since most browsers will think the comment ends with the first ">" character.

The <textarea> Tag

Use the <textarea> container tag to create multi-line, scrollable, text entry boxes. Whatever's between the <textarea> and </textarea> tags will be the initial contents of the entry box, so put them right next to each other if you don't want initial contents.

The <textarea> tag has a name attribute, like every input field. Use the rows and cols attributes to set the displayed height and width of the text area. Note that the text area scrolls as much as needed, so you're only setting the display size, not the data size.

An example of a <textarea> entry field is:

<textarea name="stuff" rows=10 cols=60>Enter stuff here</textarea>

Color

You can set the color of several things in HTML, by setting color attributes in certain tags:

• In the <body> tag, the bgcolor, text, link, vlink, and alink attributes define the colors for the page background, text, unvisited links, visited links, and active links (i.e. the moment the link is being clicked on).
• To change text color for part of a page, use the <font> container tag with a color attribute.
• For tables, some browsers support the bgcolor (background color) attribute in the <table>, <tr>, <th>, and <td> tags.

Color attribute values take one of the following forms:

• "#RRGGBB", where RR, GG, and BB are the red, green, and blue components of the color, in hex, ranging from 00 to FF. Confused? Then stick with the next method:
• One of sixteen "widely understood color names": aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)

Special Characters Like "<" and ">"

How do you display the "<" and ">" characters? If you just type them in your HTML file, the browser will think you're starting or ending a tag. You've got to escape the characters, as it's called, by typing special sequences of characters in their place. When displaying your page, the browser translates the sequences back into the characters you need.

All special character sequences start with "&" (ampersand) and end with ";" (semicolon), and in between is the name of the special character. For example, "&gt;" means the greater-than symbol, "&lt;" means the less-than symbol, "&quot;" means double-quotes, and "&amp;" means the amperand itself. For example, the line

To display the < character, use the sequence <.

will be rendered as

To display the < character, use the sequence &lt;.

Use this method to put non-typable characters in your pages; for example, "&copy;" shows the copyright symbol ©. Here's a list of special characters, called character entity references. (Unfortunately, this doesn't display the characters like the old reference at Sandia did.)

Unlike tag names, character entity references are case-sensitive, so "&GT;" does not display the greater-than symbol.

You need to escape every "<" or ">", but not every ampersand, etc. These codes are just there when you need them, i.e. when your page doesn't display right without them (and you should be visually checking every page you make).

An Important Note about HTML

A Web page may be displayed on a wide variety of devices-- graphical browsers, text-only browsers, text-to-speech or braille devices, or other devices no one's invented yet. Even graphical browsers vary a lot, since the user can resize the window at will, or set their own colors or fonts. Accordingly, HTML gives great leeway to the browser to decide how to display a page, and surprisingly little control to the HTML author.

Technically, HTML is a way of describing what kind of data you're displaying, not explicitly how it should be displayed. For example, the <h1> tag says "This is a primary section header"; it doesn't really say "Show this in a big font, and bold, and centered". The browser decides how to display it. In fact, the browser makes the final decision how to display everything; all HTML tags are only suggestions.

This lack of control takes some getting used to, but it's the nature of the Web. Remember, there's no way to know the size and capabilities of the browsers that will display your page. Just try to write HTML so your pages don't rely on a particular layout (which will certainly vary from user to user). Otherwise, tables and layouts that look great on your screen may look terrible on someone else's (always worth checking anyway). If possible, don't rely on the browser showing images-- use the alt attribute of the <img> tag to define alternate text to show, for browsers that can't show the image. If you write flexible HTML, any good browser will display your page acceptably.

These days, HTML does have tags that say explicitly how to display something, rather than just describe what kind of data it is. Examples are the commonly used <b> and <i> tags. These are actually a slight deviation from the original aim of HTML, because of their explicitness. Purists sometimes use the <strong> and <em> tags, for strong and emphasized text, rather than <b> and <i>. You can use whatever you want.

This is GREAT for an "at a glance" how to!

For sure it's the most asked question, besides transparency (well, at least before Custom Color and Whiteout appear), so it's a quick answer:

A supersimple primer for newbies: 'This is a down and dirty, only the facts ma'am, very quick tutorial. Please understand that this is just the barest of surface scratching, but I am hoping it will kick start you to the concept. Once you have that, all the other info on the Web makes sense.'

How to get a theme up

Part 2 (Intermediate)

Simple theme not enough for you ?
Want more I see.. Ok well first you have to find a theme you like
This may be the most difficult part there are so many available so many ..so many its a little confusing

Once you get over the choice its gets easier
I'll use one of mine as an example from Customized Themes
 
Read the instructions carefully as they will or should show you how to install the code
It will say which base theme you need and I'm getting to that
First  copy the code that is in the little box or if its not in the box from where it says *--start code--*
to where to says *--end code--* copy it onto a Notepad (the one on your computer, not pen and paper that would be a bit silly)
Then when you have copied the code click on Customize My Site, the link under your headshot
and choose the correct base theme (step 1)



I'll be using Sandskrit here as that is what the Pirates theme goes on
Then click Customize site again but this time click Custom CSS (step 2)

You will have a blank box if you've never done this before


Paste the code in and Preview ( just to make sure it works)
Then save if you like it

You will then end up with something like this   or bunnies or puppies or kittens or fish or footballs which ever theme you choose

There are so many themes available and theme groups with so many authors making themes there is even a Request Themes group where you can ask for a theme too be made or if there is one available but always search first I just typed in the search here "Teddy bear theme" and got 1,190 different items. So before you go asking go LOOK first
 

Next theme tutorial  for advanced users who want to make their own theme
How to get a theme up- Part 1(beginners)
How to get a theme up - Part 3(advanced)

 

How to get a theme up

Part 1 (Beginners)

We will start with the simplest way and that's Custom Colors
No CSS involved all you need is an image for your background
You start off on Multiply with the Clean theme 
 
which is fairly boring its all white and grey, you want something a bit more colorful than that so the easiest way is to go to the Choose a theme pageand choose Custom Colors its the third one across
 
you will end up on this page the Choose Colors page.
 
Its easy, this is all you do upload an image from your computer by using "browse" and then preview it , looks ok does it? No?
Ok well try changing the colors around a little or going transparent as I've done here

until you end up with something like this

what does that look like actually on the page ?
It looks like this  don't like it this way ?
Try the other option Andros which looks like this

This is the simplest way to get a background up on your page
A seamless tile like I've used as an example works best this is the one I used and yes it really is that size, the rest of the images here are thumbnails that image is FULL SIZED
Here is a bit of a plug for a group Easy Themes all that group has is tiles and images for use on themes no codes just images

So now you know how to do a simple theme ...you want more don't you never satisfied ..ok ok Part 2  will be installing a customised CSS theme
 

How to get a theme up - part 2(Intermediate)
How to get a theme up - Part 3(Advanced)

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.

Please be sure, after joining this group that you go first to your email alerts and choose the settings you want for this group!  We don't want anyone getting alerts in their email that they don't want. 

Be sure and check all of your alerts while you are there! 

http://multiply.com/setup/alerts







This is not the same as getting the alerts on your inbox or message summary.  If you choose not to get the email alerts you will still get inbox notifications.  Thanks!

POST Moderation In Groups - What Is It And WHY?

You go to POST in this group, (any group) and you suddenly notice a little note near the submit button that says something like "This post will be subject to Moderation, etc).  You may NOT notice it. 


But then you hit submit and suddenly you see that your post is only a DRAFT.  And you will see another more obvious note that your post is held for moderation, etc. 

NEW GROUPS (This one is not) and/or NEW MEMBERS of any group are initially subject to this new SPAM safeguard.   They will see this sometimes with their first post to a new group or group they have just joined.  It's called MODERATION even though the post has the Draft Designation. 

Multiply installed this spam filter and only Multiply has access to it.  NO admin has access to your post or the controls of this filter.  It must clear through Multiply.  So please don't think that any admin of any group is holding your post!  They aren't!  The filter is working great!  Multiply just wants to review your first group post to ensure you aren't one of those spammers.  The Moderation message states that it can take up to 24 hours.  Usually it clears very quickly though.  So please be patient and don't DELETE this post!  It's the one that gets you past the spam filter and you should not see it again.  Deleting the post means you have to be screened again.

Again, NO admin in any group is moderating or holding your post so they cannot release it.

As new members to this group, everyone will probably be subjected to this slight annoyance.  But please let it clear so you won't see it again!  If you have any problem with a post clearing within that time frame, please notify CS.  Admins can't see your moderated post to report it.

TIP:  WHEN YOU JOIN A GROUP, ESTABLISH YOURSELF AS A MEMBER BY CREATING YOUR FIRST POST!  :)  Because no matter how long you are a member, it's the first post that makes you subject to moderation.  So go ahead....  Get it over with.  lol 

All group admins are welcome to link to this post.

It's simple HTML:

<a href="your_url">Your Text</a>

Example:

Dantcer's Home Page


To open the link in a new window/page (use it with caution as some people hate it): 

  <a href="your_url" target="_blank">Your Text</a>


Dantcer's Homepage will open in a new window or tab

You can do it easily while creating/editing a blog entry by highlighting the text OR image that will be the link, clicking on the chain icon in the toolbar and pasting the URL in the window that will appear (it must start with http://...).

And even more: you can do it with images also and make them clickable: 

<a href="your_url"><img src="image_url"></a>




Use this anywhere you use html on your site!

Thanks to Luiz for this easy to understand Tutorial!

It seems that there is a lot of misunderstanding about how CSS works, so I will try to clarify some points.

All CSS code is like this:
selector {
%elements
}

selector is the name of the class or id used in your page, for instance itembox is name of the content boxes on your main page, etc.

The %elements are the prop