The first thing one have to do in order to customize the navigation menu and/or Page Title is to understand its structure:

It's really simple. Just add the style attribute to your HTML tags.

For example:
<span style=""></span>
<a style=""></a>
<img style=""></img>

Etc.. You can do that to all HTML tags (correct me if I'm wrong).

Now, defining the style is almost like doing CSS (without the selectors and the curly brackets ' { and } ').

For example this code (I'm gonna use the <a> tag)
<a style="border: 5px outset #000; margin: 2px; padding: 2px; overflow: auto; display: block; position: relative; color: #000; background: transparent URL('http://images.multiply.com/multiply/sos/bg.png') repeat center center scroll; font-family: tahoma; font-weight: bold; font-size: 40px; text-align: center; text-transform: uppercase; width: 550px; height: 50px; text-decoration:none;" href="http://multiplydesign.multiply.com">Multiply Design</a>

will render this:
Multiply Design

The disadvantage of inline styles is it's inability to apply pseudo-elements (eg, hover, etc).

There you go. Enjoy styling!

As requested by a few people I have put together a tutorial on how to create "Flyout" or "Drop Down" menus. This is when you hover your mouse over a button and the contents appear either below or to the side of the button. If your not sure what I mean by this please go to my multiply site here >>> http://g00gs.multiply.com

The detail is quite involved and in explaining how to do this, so I have included quite a few screen shots to clearly explain how its done.

Because of this the file has been placed on a Free website, unfortunately there are pop ups when the visitor arrives at the page. Please just click them off at the X and they will turn off.

NOTE: When you go there, hover your mouse over the thumbnails to view full size pictures

Tutorial located here>>>> http://g00gs.0catch.com/tut.htm

Once you have made up one button copy the code, paste it then change the "#mainbox" number

I hope you all can work it out, I am happy to answer any question within this post, however as its bed time replies will be in about 12 hours from posting.

good luck,

g00gs.

Create dropdown menu thru CSS-HTML combo. Now, this one's actually a bit complicated. There are still a lot of ways to do dropdowns (cssplay has incredible ones). I just wanna share what I have up and how I did it. The original codes were provided by thecakeisalie..

 This would be great for those who are fond of using tags. That means, I can create submenus that will link to the blogs that have the same tag (eg, shoutouts). It's gonna seem like you have more pages than you actually do.

The CSS (paste them in your custom CSS)

.dd1 {
font-family: tahoma;
width:105px;
height:100px;
position:absolute;
left: 10%;
font-size:11px;
z-index:100;
}
.dd1 ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:104px;
height:20px;
text-align:center;
color:#fff;
background: transparent URL(image.url) scroll center center no-repeat;
line-height: 20px;
font-size:11px;
overflow:hidden;
}
.dd1 ul {
padding:0;
margin:0;
list-style-type: none;
}
.dd1 ul li {
float:left;
position:relative;
}
.dd1 ul li ul {
display: none;
}
.dd1 ul li:hover a {
color:#000;
background: transparent URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul {
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
}
.dd1 ul li:hover ul li ul {
display: none;
}
.dd1 ul li:hover ul li a {
display:block;
color: #fff;
background: URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul li a:hover {
background: URL(image.URL) transparent scroll no-repeat center center;
color:#000;
}
.dd1 ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.dd1 ul li:hover ul li:hover ul.left {
left:-105px;
}


The HTML (paste them in your site title)

<div class="dd1"><ul>
<li><a href="/menu link">MENU TITLE</a><ul>

<li><a href="/submenu link 1/">submenu link 1 title</a></li>
<li><a href="/submenu link 2/">submenu link 2 title</a></li>
<li><a href="/submenu link 3/">submenu link 3 title</a></li>
<li><a href="/submenu link 4/">submenu link 4 title</a></li>

</ul></li>
</ul></div>


CSS notes:
1. Now if you think that was already exhaustively long, well, that would only create ONE menu. You'll have to repeat the whole process changing .dd1 to .dd2, .dd3, and so forth for more menus..

2. Of course you'll have to change the left position value (highlighted) for the for the next menus, otherwise they'll assume the same position making the other menus not visible.

HTML notes:
1. Change the class (eg, dd1) to dd2, dd3 and so forth for subsequent menus.

2. You can add more submenu items by repeating the whole highlighted portion below each other.

3. Before pasting the codes to your site title, make sure there are no line breaks. That's because the site title has no room for them. (I had put line breaks on this tutorial for better viewing purposes.)


More notes:
1. You're gonna have to hide the default nav bar. Do that by adding the following string to your custom CSS.
div#subnav {display: none;}

2. Some vales you can customize include background color, image; font color, size, family, weight, etc; width and height of each menu and submenu.



Examples:
1. Using one menu. (The actual codes I posted here)

2. More than one menu. (Using the actual codes in my page).


Now, it may seem like a lot of work, but remember, patience is a virtue. lol

Just a quick note to let you know that IF you purchase the Premium Service and you have already or are considering using CSS to hide your online status on your homepage, the Premium Service Designation will not show under your headshot.  Remove that portion of the code and you can then verify and see it there.  (You will also see it in Settings/My Account).

I haven't had a chance yet to see if "online status" is discernible from your account designation as yet, but a quick look showed me it isn't at this time.  I'll look harder at it later.

ALSO, some CSS that you are using to hide other links in your rail MAY hide the new Media Locker there that is for ALL users.  If you do not see the Media Locker Link under your headshot, you will need to find the portion of code that is hiding it.

If you have edited and saved your Custom CSS while the Multiply CSS parser was broken (or ever make a mistake and save the wrong code), then probably your code is missing height and width tags. It seems that the CSS parser is fixed now, but it won't bring back the tags to your code, so you have to fix it yourself.

Just like opacity isn't a standard command yet in CSS, rounded borders in corners of boxes aren't also. Probably you already know that you can do it for Gecko-based browsers (Firefox, Netscape, Camino, etc), using commands like:

It was asked some time ago and I could not find the answer then. Now, looking for info about how to use a cool SSB (Single Site Browser) for Mac called Fluid I found the info. And it's quite simple after all...

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

It has been suggested at MUDS but as yet, we don't have the option to disallow html in comment boxes other than Guestbooks.  I have also requested the option to disable public replies while still being able to post to 'everyone'. Hopefully these features will be considered in the future.  In the meantime however, YOU can choose what is allowed on your SITE and in your Groups comment (reply) sections.   This is especially important if you have either your Guestbook OR any posts open to 'everyone' with replies enabled.

Fine tune what you would like to allow or disallow in comments on your personal Sites & Groups.  Avoid comment issues by choosing exactly what you will and will not allow.  Take control of comment content and what others might do to affect your site with third party or rogue codes. You control what code will be allowed and if you are willing to allow code that could contain hidden elements.

FOLLOWING AFFECTS ALL COMMENTS ONLY TO INCLUDE GUESTBOOK COMMENTS.

/*EMBEDDED OBJECTS ONLY WILL NOT SHOW IN ANY COMMENT BOX TO INCLUDE GUESTBOOK*/

.replybox object, .replybox embed {
display: none !important;
}

/*PARSED "HOT" LINKS ONLY WILL NOT SHOW IN ANY COMMENT BOX TO INCLUDE GUESTBOOK*/
div.replybodytext a {
display:none !important;
}

/*IMAGES ONLY WILL NOT SHOW IN ANY COMMENT BOX TO INCLUDE GUESTBOOK*/
div.replybodytext img {
display:none !important;
}

The following RE-ENABLES A/V Replies that this code disables.  Thanks to Bobby (spunj) for this additional code!

.replybox object#multiply_multv_object, .replybox embed#multiply_multv {
display: block !important;
}

Remember that if you do decide to allow images or images only you can use this next code to size and control the impact that images have in your comment sections.  (Adjust the sizes to suit you but this one generally works fine for most).  This will prevent oversized images from distorting a thread and hiding your delete link in the comment, that prevents you from removing an oversized image.

/*RESIZE COMMENT IMAGES*/
.replybody img {
max-height:300px;
max-width:300px;
}

Using the above codes mean that you do not need to use the corresponding Guestbook codes below. 



---------------------------------------------------------------------------------


FOLLOWING AFFECTS ONLY COMMENTS IN GUESTBOOK:

/*EMBEDDED OBJECTS ONLY WILL NOT SHOW IN GUESTBOOK COMMENTS ONLY*/
#home_guestbook .replybox
object, #home_guestbook .replybox
embed {
display: none !important;
}

/*PARSED "HOT" LINKS ONLY WILL NOT SHOW IN GUESTBOOK COMMENTS ONLY*/
#home_guestbook .replybodytext a  {
display:none !important;
}

EDIT: Because this removes link names in Guestbooks' quoted text, you MUST add this also for the link names to show:  (Thanks to Marvie for catching this!)

#home_guestbook .quotea a, div .quotea a {
display:inline ! important;
}

/*IMAGES ONLY WILL NOT SHOW IN GUESTBOOK COMMENTS ONLY*/
#home_guestbook .replybox
img {
display:none !important;
}


You can use any combination of codes above to control the content you allow in comments on your site and group. After all, it is YOUR SITE AND GROUP.  Why let others decide what will be put there?


NOTES:

Disallowing HTML in Guestbooks does not stop parsed "HOT" links.  The code designated for Links Only does.  For links to show, they will have to be coded and not "HOT".

Upside to this is that no site can track "LINK BACKS" to you.
You and your visitors can still post links by coding them similar to this:

H**p://multiplydesign.multiply.com and that will show in your comments. (User can substitue the asterisks for "tt")

THIS DOES DISABLE USING ID:// LINKS IN COMMENTS.


The embed block code will block slideshows, using the album share link here from Multiply (In comments only) but if you don't disallow images, those will share fine.  (Who puts slideshows in comments??) 


REMEMBER:  THIS IS FOR COMMENTS (REPLIES) ONLY.  IT DOES NOT PREVENT YOU, THE SITE OWNER OR ADMIN TO USE CODE, LINKS OR IMAGES IN THE WELCOME AREA, BLOGS, OR ANY OTHER POSTS. Only where comments can be posted by contacts, members or the public. 

ADDITONAL NOTE:  If you have disallowed any of the above by using the codes, and someone attempts to post this type of code in your comments, you will see that the user posted but the content of the reply box will be blank. You can easily delete these if your visitor doesn't.  You can also use Firebug or another tool if you REALLY want to know what they put there, even though it can't be seen.


I personally have chosen to allow images in comments but not my GB.  I've allowed HOT parsed links in ALL comments, but disallow object and embed codes in ALL comments.  (Safest thing to do)  I am also resizing images since I'm allowing those.  (I may disallow "HOT" parsed links if I feel it's necessary.)

This also has the added benefit of preventing SPAM in groups if this spam is being put in replies (where spammers have to post to bypass the "first post" moderation)

Brought to you and tested by Linda, Missy & Demit.  Credit also to Luiz and Bobby for their input in notes regarding this topic.


PLEASE FEEL FREE TO LINK TO THIS POST BY CLICKING ON THE SHARE LINK.

HTML  NESTING

TIP: Always nest your HTML elements properly! 

Very simply, his means you should close things in the reverse order you opened them.This means that the tag opened most recently is always the next tag to close. 

Enlarge image for example and clarification.

CSS Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.

For example, if you have something like:

h2 {
	color: red;
}

.thisOtherClass {
	color: red;
}

.yetAnotherClass {
	color: red;
}

You could make it:

h2, .thisOtherClass, .yetAnotherClass {
	color: red;
}

CSS Nesting

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:


#top {
background-color: #ccc;
padding: 1em
}

#top h1 {
color: #ff0;
}

#top p {
color: red;
font-weight: bold;

}


From demitmp at usersupport - I believe it is an HTML problem. Based on my own experience, if you put the tags in wrongly order, FF will give strange result. My suggestion is re-check your code, especially tags order, as they must nested properly (not crossed).

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.

I haven't had a chance yet to use this, but it looks good. Give it a try (I will be)

With my wanting to open up the space between my page title and the navigation bar, I was running into problems...Then along came Dantcer with a similar situation ("Nav Bar Issue with IE").  Tho her resolve was different than my objective, the process she ended up using satisfied me, giving me the illusion I wanted.  Hadn't really thought about it much except that many questions regarding "How to make a banner?" have been asked recently...soooo, here goes.

Please take into consideration that this theme is Skyline, and it is the only theme I've worked with.  I can only give you legitimate findings in this realm, but it may give you an idea of what you may be able to do with other themes.  This all came about as the result of many "trials & errors"...I shouldn't be the only one...lol  

This is the base CSS pertaining to the positioning of the "owner navigation bar" of the Skyline theme:  

div.owner_nav {   
border: none;   
margin: 0;   
height: 163px;
}
div#subnavc {   
width: auto;
}
div#subnav {   
padding: 1px;   
padding-left: 5px;   
background: none;   
background-color: #000;   
border: none;   
border-top: 1px solid #99f;   
border-bottom: 1px solid #99f;   
height: auto;
}  

To give you an idea of the dimensional difference, this is the top portion of the Skyline theme with that CSS...


UPDATE: As of the "upgrade", mid June 2008, you MUST remove all /* notes */ within the brackets, ie { } , so the height and width don't get "stripped" from the Custom CSS!

Apart from other strange things today (don't ask it was weird) I've been doing this
Its a CSS code that will work on 13 base themes possibly more I didn't try all of them
Did try it out on Dance With Me - Sandskrit - Japanese Minimalist - Skyline - Black Lilly - Outburst- Avlack - Retro - Melon -Myknos - Newspaper - Blue Slate - Classic
Same code different base its basically a base default CSS code no padding, no margins, the code looks strange but it does work at least I hope so anyway
I know you will tell me if it doesn't
Tell me what you think about it and I don't mean the color either I mean the coding

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

Just as the title says. Very in - depth but easy to understand tutorial about "float".

The main page is kind of "huh". But click on the css and the html tutorial links, as they are outstanding. Click on any subject once there.

http://www.hscripts.com/tutorials/css/

http://www.hscripts.com/tutorials/html/

The TINY artwork collection and backgrounds are great. Click on any of it and you will find each of them in any color and can even test what it will look like first.

http://www.hscripts.com/freeimages/icons/index.php

Check out everything else there while you're at it.